Blog ب laravel & vue js الجزء الثالت
نظرة سريعة بالفيديو
1- إضافة ل api routes
//
<?php
use Illuminate\Http\Request;
/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/
Route::apiResource('/posts','PostController');
Route::apiResource('/categories','CategoryController');
Route::apiResource('/comments', 'CommentController');
Route::get('/posts/category/{slug}','PostController@category');
Route::post('/users/register', 'UsersController@register');
Route::post('/users/login', 'UsersController@login');
2- إضافة ل frontend routes
//
<?php
/*
|--------------------------------------------------------------------------
| 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('{any}',function(){
return view('welcome');
})->where('any','.*');
3- إضافة أول component
//
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/Home.vue';
import PostDetails from '../components/PostDetails.vue';
import PostCategory from '../components/PostCategory.vue';
import Login from '../components/Login.vue';
import Signup from '../components/Signup.vue';
import Logout from '../components/Logout.vue';
Vue.use(VueRouter)
const routes = [
{
path : '/',component : Home,name : 'home'
},
{
path : '/login',component : Login,name : 'login'
},
{
path : '/signup',component : Signup,name : 'signup'
},
{
path : '/logout',component : Logout,name : 'logout'
},
{
path: '/post/:slug',
component: PostDetails,
name: 'postDetails'
},
{
path: '/posts/category/:slug',
component: PostCategory,
name: 'postCategory'
}
];
const router = new VueRouter({
routes,
hashbang : false,
mode : 'history'
})
export default router;
4- تعديل الملف 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');
import User from './helpers/User';
window.User = User;
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.component('app-home', require('./AppHome.vue').default);
Vue.component('pagination', require('laravel-vue-pagination'));
/**
* 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.
*/
import router from './routes/routes.js';
const app = new Vue({
el: '#app',
router
});
5- إضافة ل class User
//
class User{
storeUser(user){
localStorage.setItem('user',user);
}
getUser(){
return JSON.parse(localStorage.getItem('user'));
}
isLogged(){
return this.getUser() !== null ? this.getUser() : false;
}
logout(){
localStorage.removeItem('user');
}
}
export default User = new User();