LOGIN SYSTÈME + VOTE SYSTÉME ب LARAVEL & VUE JS الجزء الرابع
نظرة سريعة بالفيديو
1- إضافة ل controller PostsController
//
<?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 وكيزيد ليه صوت.
//
<?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
//
<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'
});