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

imadbelasri Vuejs

فهاد الدرس الجديد غادي نشوفوا كيفاش نقادو login système ب laravel & vue js فل projet بسيط غادي يكون عندنا جوج ديال الفورم وحدة خاصة بالتسجيل ووحدة خاصة بتسجيل الدخول فغادي نخدموا ب laravel و vuejs باش غادي نمكنوا المستخدم من انه يتسجل ومنبعد يسجل الدخول ديالو.

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

1- إضافة قاعدة البيانات والإتصال بها ف laravel

فغادي تزيد projet جديد ب laravel منبعد غادي تزيد قاعدة بيانات ف phpmyadmin سميها lara-vue-login فيها table users فيها الحقول name و email و password.

منبعد غادي تمشي ل env. غادي تزيد la connexion مع قاعدة البيانات.

الكود لي زدنا ف env. هو :

عرض الكود

                                                    
                                                        //.env

DB_DATABASE=lara-vue-login
DB_USERNAME=root
DB_PASSWORD=

2- إضافة ل controller UsersController

من بعد غادي تزيد controller سميه UsersController فيه عندنا ثلاثة ديال les fonctions كاين :

- store كتزيد مستخدم جديد فقاعدة البيانات وكترجع رسالة نجاح على شكل json.

- auth كتمكن المستخدم من تسجيل الدخول ديالو يلا تمت العملية بنجاح كترجع رسالة نجاح متمتش كترجع رسالة خطأ على شكل json.

- logout كتمكن المستخدم من تسجيل الخروج ديالو.

الكودديال ل controller هو :

عرض الكود

                                                        
                                                            //
<?php

namespace App\Http\Controllers;
use App\User;
use Auth;
use Illuminate\Http\Request;

class UsersController extends Controller
{
    //
    public function store(Request $request){
        User::create([
            'name' => $request->name,
            'email' => $request->email,
            'password' => bcrypt($request->password)
        ]);
        return response()->json([
            'status' => 200
        ]);
    }
    public function auth(Request $request){
        if(Auth::attempt(['email'=>$request->email,'password'=>$request->password])){
            return response()->json([
                'status' => 200
            ]);
        }else{
            return response()->json([
                'message' => 'Email ou mot de passe est incorrect'
            ],422);
        }
    }
    public function logout(){
        Auth::logout();
        return redirect('/');
    }
}

3- إضافة الملف الرئيسي

غادي نمشي ل views منبعد غادي نزيد تما dossier نسميه layouts فيه زيد fichier سميه app.blade.php هنا عندي روابط css و js وهاد الملف غادي يكون اساس الملفات لي غادي نزيدو من بعد.

وعندي ايضا جوج ديال les components vuejs لي هما login و register لي غادي نزيدوهم من بعد كنعرضهم في حالة مكان حتى مستخدم مسجل الدخول ديالو يعني مكونيكطيش.

الكود ديال app.blade.php هو :

عرض الكود

                                                        
                                                            //app.blade.php


<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
    <title>Laraval Vue Login</title>
  </head>
  <body>  
    <div id="app">
        @include('layouts.navigation')
        @yield('content')
        @if(!auth()->check())
            <login></login>
            <register></register>
        @endif
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
        <script src="{{ asset('js/app.js') }}"></script>
        @yield('scripts')
    </body>
</html>

4- إضافة قائمة التصفح

دائما ف views/layouts غادي نزيد ملف جديد غادي نسميه navigation.blade.php غادي تكون فيه قائمة التصفح لي غادي تمكن من المستخدم من تسجيل الدخول والتسجيل.

فعندي الروابط لي ملي غادي نضغط على شي رابط غادي تعرض modal لي غادي تكون فيها لفورم ديال التسجيل أو تسجيل الدخول ولي غادي نزيدهم من بعد.

الكود ديال navigation.blade.php هو :

عرض الكود

                                                        
                                                            //navigation.blade.php

<nav class="navbar shadow navbar-expand-lg navbar-dark bg-secondary">
    <a class="navbar-brand" href="#">Laravel Vuejs Login</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
            <a class="nav-link" href="{{url('/')}}">Accueil <span class="sr-only">(current)</span></a>
        </li>
        @auth
            <li class="nav-item">
                <a class="nav-link">Bonjour  {{Auth::user()->name}}</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{url('/logout')}}">Déconnexion</a>
            </li>
        @else
            <li class="nav-item">
                <a class="nav-link" style="cursor:pointer;" data-toggle="modal" data-target="#loginModal">Connexion</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" style="cursor:pointer;" data-toggle="modal" data-target="#registerModal" >Inscription</a>
            </li>
        @endif
        </ul>
    </div>
</nav>