LOGIN SYSTÈME + VOTE SYSTÉME ب LARAVEL & VUE JS الجزء الرابع

imadbelasri Vuejs
VS

فهاد الجزء الرابع من LOGIN SYSTÈME + VOTE SYSTÉME ب LARAVEL & VUE JS غادي نعرضوا les posts ديالنا فالصفحة الرئيسية من بعد م غادي نزيدوا ل component Posts لي غادي يمكنا من عرضهم بالإضافة لإمكانية التصويت على كل post.


نظرة سريعة بالفيديو


1- إضافة ل controller PostsController

غادي تزيد controller جديد بل commande من بعد ما تزيدوا غادي نزيدوا فيه les fonctions لي غادي يمكنوا من إضافة تصويت أو حذفه.

فعندي جوج ديال les fonctions كاين addVote لي كتاخد ل id ديال ل post وكت incrémenter الحقل votes بواحد و removeVote لي كتدير العكس.

الكود ديال الملف PostsController.php هو : 

                                                    
                                                        //
<?php

namespace App\Http\Controllers;
use App\Post;
use Illuminate\Http\Request;

class PostsController extends Controller
{
    //
    public function addVote($id){
        $post = Post::find($id);
        $post->increment('votes');
        return response()->json(['status'=>'ok'],200);
    }
    public function removeVote($id){
        $post = Post::find($id);
        $post->decrement('votes');
        return response()->json(['status'=>'ok'],200);
    }
}
                                                    
                                                

2- إضافة les routes ديالنا

غادي نمشي ل web.php غادي نزيد les routes ديالي فعندي :

- / لي هو الصفحة الرئيسية فدرت عليه تعديل ولي فيه كنسترجع les posts لي عندي وكنرسلهم لل view index.

- id}/addVote}/ لي  كياخد ل id ديال ل post وكيزيد ليه صوت.

- id}/removeVote}/ لي  كياخد ل id ديال ل post وكيحيد ليه صوت.

الكود لي زدنا ف web.php هو :

                                                        
                                                            //
<?php
use App\Post;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    $posts = Post::all();
    return view('index',compact('posts'));
});

Route::post('/login','UsersController@auth');

Route::post('/register','UsersController@store');

Route::get('/logout','UsersController@logout');

Route::post('/{id}/addVote','PostsController@addVote');

Route::post('/{id}/removeVote','PostsController@removeVote');
                                                        
                                                    

3- استرجاع المعلومات فالصفحة الرئيسية

فالصفحة الرئيسية ديالنا لي هي index كنزيد ل component vue-posts لي غادي نزيدوه من بعد وكنعطيه les posts لي جاوني من route.

الكود لي زدت فالصفحة الرئيسية هو :

                                                        
                                                            //
@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-6 mx-auto mt-5">
            <vue-posts posts="{{$posts}}"></vue-posts>
        </div>
    </div>
</div>
@endsection
                                                        
                                                    

4- component Posts.vue

منبعد غادي نمشي ل resources/assets/js/components تما غادي تزيد ملف جديد سميه Posts.vue لي فيه كنستقبل ل posts لي جاوني من index منبعد كنحولهم ل javascript object وف template كنخدم ب v-for باش كنعرضهم.

ف methods كنزيد les fonctions لي غادي يزيدو وينقصو صوت ولي كياخدو ل id ديال ل post وكيرسلوه ل les fonctions لي زدنا فل controller PostsController.

وهاد les fonctions كيتنفذوا فاش كنضغط على les icônes ديال ل up و down.

الكود ديال Posts.vue هو :

                                                        
                                                            //
<template>
    <div>
        <div class="row">
            <div class="col-md-12 posts"   
                    v-for="article in sortedData"
                    :key="article.id">
                <div class="media mb-1 p-3">                              
                    <img class="mr-3"  width="60" height="60">
                    <div class="media-body">
                        <h5 class="mt-0">{{article.title}} #{{article.id}}</h5>
                        {{article.body}}
                    </div>
                    <span class="float-right" @click="addVote(article.id)">
                        <i class="fa fa-chevron-up"></i>
                    </span > 
                    <strong class="text-info mx-1">{{article.votes}}</strong>
                    <span class="float-right" @click="deleteVote(article.id)">
                        <i class="fa fa-chevron-down"></i>
                    </span > 
                </div>
                <hr>
            </div>
        </div>
    </div>
</template>


<script>
    import axios from 'axios';
    export default{
        name : 'Posts',
        props : ['posts'],
        data(){
            return {
                articles : JSON.parse(this.posts)
            }
        },
        methods: {
            addVote(id){
                axios.post(`http://localhost/lara-vue-login/public/${id}/addVote`)
                .then(response => {
                    location.reload();
                }).catch(err => {
                    console.log(err);
                });
            },
            deleteVote(id){
                axios.post(`http://localhost/lara-vue-login/public/${id}/removeVote`)
                .then(response => {
                    location.reload();
                }).catch(err => {
                    console.log(err);
                });
            }
        },
        computed: {
            sortedData(){
                return this.articles.sort((a,b) => {
                    return b.votes - a.votes;
                });
            }
        }
    }
</script>


<style>
    span:hover{
        cursor: pointer;
    }
</style>
                                                        
                                                    

5- استرجاع ل component Posts.vue ف app.js

ف app.js كنسترجع ل component Posts.vue  وكنعطيه لإسم vue-posts ولي هو لي زدنا ف index.

فمتنساش تنفذ les commandes :

- npm run dev 

- npm run watch

باش ل component لي زدنا تعرف عليه ل application ديالنا.

الكود لي زدنا ف app.js هو :

                                                        
                                                            //

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('login', require('./components/Login.vue'));
Vue.component('register', require('./components/Register.vue'));
Vue.component('vue-posts', require('./components/Posts.vue'));

const app = new Vue({
    el: '#app'
});