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

imadbelasri Vuejs
VS

فهاد الجزء الثالت من 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();
                                                        
                                                    

دروس ذات صلة

VS

آلة حاسبة بإ ستعمال Vuejs

فهاد الدرس الأول من سلسلة vuejs غادي نشوفو كيفاش نقادو آلة حاسبة بإستعمال vuejs فالناس لي مكتعرفش شن...


VS

كيفاش نصاوب Note App ب Vuejs

فهاد الدرس الثاني من سلسلة vuejs غادي نشوفو كيفاش نقادو Note App بإستعمال vuejs فحنا فهاد الدرس ال...


VS

Application de gestion de dépenses باستعمال Vuejs

فهاد الدرس الجديد من سلسلة vuejs غادي نشوفو كيفاش نقادو une simple application كتدير la gestion de d...


VS

Ecommerce App باستعمال Vuejs

فهاد الدرس الجديد من سلسلة vuejs غادي نشوفو كيفاش نقادو Ecommerce App المستخدم كيزيد des produits فل...


VS

login système ب laravel & vue js الجزء الأول

فهاد الدرس الجديد غادي نشوفوا كيفاش نقادو login système ب laravel & vue js فل projet بسيط غادي يكون...


VS

LOGIN SYSTÈME ب LARAVEL & VUE JS الجزء الثاني

فهاد الجزء الثاني من LOGIN SYSTÈME ب LARAVEL & VUE JS غادي نشوفوا كيفاش نزيدو les components vue js...


VS

login système + Vote systéme ب laravel & vue js الجزء الثالت

فهاد الجزء الثالت من login système + vote systéme ب laravel & vue js كيف قلنا فل ل video...


VS

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

فهاد الجزء الرابع من LOGIN SYSTÈME + VOTE SYSTÉME ب LARAVEL & VUE JS غادي نعرضوا les posts ديال...


VS

CRUD application ب php & vuejs الجزء الأول

فهاد ل projet الجديد غادي نشوفوا كيفاش نقادوا CRUD application ب php و vue js ولي سبق ودرناها...


VS

CRUD application ب php & vuejs الجزء الثاني

فهاد الجزء الثاني من CRUD application ب php و vue js غادي نكملوا ل projet ديالنا وندوزو للجزء الخاص...