Blog ب laravel & vue js الجزء الثالت


فهاد الجزء الثالت من blog ب laravel & vue js غادي نزيدوا les routes ديالنا سواء الخاصين بل api أو الخاصين بل frontend منبعد غادي نزيدو vue js فل projet ديالنا.

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

1- إضافة ل api routes

غادي نمشي للملف api.php غادي نزيد les routes ديالي ولي فيهم باش كنسترجع les posts ,les catégories ,les commentaires وأيضا les posts الخاصين ب catégorie معينة ثم les routes ديال ل connexion و déconnexion.

الكود ديال الملف هو :

                                //
<?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

غادي نمشي ل web.php غادي ندير تعديل على الكود هنا كنقول ل app ديالي أن أي رابط كيف ما كان خص يديني للصفحة الرئيسية لي هي welcome ممكن تبدلها الإسم يلا بغيتي.

الكود بعد التعديل هو : 

                                //
<?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

دبا غادي نزيدو vue js ل projet ديالنا أول حاجة فتح ل projet ديالك ف cmd ودير هاد ل commande :

composer require laravel/ui --dev

من بعد غادي تدير هاد ل commande :
php artisan ui vue

من بعد غادي تدير هاد ل commande :
npm install 

من بعد غادي تدير هاد ل commande :
npm run dev


من بعد غادي تدير هاد ل commande :

npm run watch


دبا زدنا vue js ل projet ديالنا بقانا نزيدو أول component لي غادي يكون هو les routes ديالنا غادي تمشي ل resources/js تما غادي تزيد dossier سميه routes فيه زيد fichier سميه routes.js غادي يكونوا فيه les routes ديالنا وكل route عندو ل url الخاص به ول component لي غادي يدينا ليه.

بالنسبة لديك les components غادي نزيدوهم من بعد.

الكود ديال الملف هو :



                                //
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

غادي نديروا تعديلات على الملف app.js فيه غادي ندير ل import ل routes لي زدنا ونخدم بهم فل object Vue.

أيضا عندي ل User لي هي class غادي نزيدوها من بعد و laravel-vue-pagination لي هو package غادي نزيدوه من بعد باش نديروا ل pagination ب vuejs.

الكود ديال الملف بعد التعديل هو :


                                    //
/**
 * 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

دائما ف dossier js زيد dossier سميه helpers فيه زيد fichier سميه User.js.

هاد ل class غادي يكونوا فيها des fonctions لي كيمكنوا من تسجيل المعلومات الخاصة بالمستخدم ف localStorage وأيضا إسترجاعها والتحقق من أن ل user كاين ف localStorage وحذف ل user من localStorage.

الكود ديال الملف هو :


                                    //
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();
                                


إشترك في قناتنا على اليوتيوب

بحث في الموقع


إشترك للتوصل بالجديد