URL Shortener ب Laravel 9 Darija & Vuejs 3 Darija الجزء الثاني

imadbelasri Laravel
LA

فهاد الجزء الثاني من URL Shortener ب Laravel 9 Darija & Vuejs 3 Darija غادي نزيدوا Vuejs 3 ل projet ديالنا ومن بعد غادي نزيدوا les components ديالنا.


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


1- إضافة Vuejs 3 ل Laravel 9

باش نزيدو Vuejs 3 ل Laravel 9 و les packages لي غادي نحتاجوا غادي ت exécuter هاد les commandes :

                                                    
                                                        //
                                                
npm install vue@next vue-loader@next

npm i @vitejs/plugin-vue

npm install pinia

npm install sweetalert2
                                                    
                                                

2- تعديل الملف vite.config.js

منبعد غادي نديرو تعديل على الملف vite.config.js الكود بعد التعديل هو :

                                                        
                                                            //
                                                        
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';


export default defineConfig({
    plugins: [
        vue(),
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});
                                                        
                                                    

3- تعديل الملف app.js

منبعد غادي نديرو تعديل على الملف app.js الكود بعد التعديل هو :

                                                        
                                                            //
import './bootstrap';

import { createApp } from 'vue/dist/vue.esm-bundler.js';
import { createPinia } from 'pinia';

import Home from '@/components/Home.vue';

const app = createApp({});
const pinia = createPinia();

app.component('home-component', Home);

app.use(pinia);

app.mount('#app');
                                                        
                                                    

4- إضافة ل UserController

قبل ما نزيدو ل components ديالنا نزيدو ل UserController لي غادي يكونوا فيه les fonctions ديال register, login & logout.

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

                                                        
                                                            //
<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;

class UserController extends Controller
{
    //
    public function registerForm(){
        if(auth()->check()){
            return redirect('/');
        }
        return view('auth.register');
    }

    public function store(Request $request){
        $this->validate($request,[
            'name' => 'required|max:100',
            'email' => 'required',
            'password' => 'required|min:6'
        ]);
        $user = User::create([
            'name' => $request->name,
            'email' => $request->email,
            'password' => Hash::make($request->password),
        ]);
        auth()->login($user);
        return redirect('/');
    }

    public function loginForm(){
        if(auth()->check()){
            return redirect('/');
        }
        return view('auth.login');
    }

    public function auth(Request $request){
        $this->validate($request,[
            'email' => 'required',
            'password' => 'required|min:6'
        ]);
        if(auth()->attempt([
            'email' => $request->email,
            'password' => $request->password,
        ])){
            return redirect('/');
        }else{
            return redirect()->route('login')->with([
                'error' => 'These credentials do not match any of our records!'
            ]);
        }
    }

    public function logout(){
        auth()->logout();
        return redirect()->route('login');
    }
}