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

منذ 4 سنوات imadbelasri Vuejs

فهاد الجزء الثاني من LOGIN SYSTÈME ب LARAVEL & VUE JS غادي نشوفوا كيفاش نزيدو les components vue js ديالنا لي غادي يمكنونا من عرض les modals لي غادي تكون فيهم سواء فورم التسجيل أو فورم تسجيل الدخول.

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

1- إضافة أول component vue js لي هو Login.vue

فقبل مانزيدو Login.vue بلا مكنتيش كتعرف vue js شوف دورة المبتدئين ف Vue js فأول حاجة غادي تفتح ل projet ديالك ف cmd غادي تنفذ هاد ل commande باش ن installer les modules لي غادي نحتاج :

npm install

منبعد غادي تدير ل commande لي غادي تمكن من بناء جميع ملفات :

npm run dev

منبعد غادي تنفذ ل commande لي غادي تمكن من تتبع اي جديد زدناه ف les components vue js :

npm run watch

من بعد غادي نمشي ل resources/asstes/js/components تما غادي نغير اسم ل component لي كاين par défaut من Example.vue ل Login.vue وداخلو كنزيد لفورم ف template وداخل ل module كنسترجع axios لي غادي يمكنا باش نرسلو ل email ول mot de passe ل url login لي غادي نزيدوه من بعد.

فعندي les méthodes لي كيمكنوا من التحقق من أن الحقول مملوءة وايضا ل méthode login لي كتمكن من تسجيل الدخول ولي كتنفذ فاش كنضغط على ل bouton connexion.

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

عرض الكود

                                                    
                                                        //Login.vue

<template>
    <div class="modal fade" tabindex="-1" role="dialog" id="loginModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Connexion</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="email">Email*</label>
                        <input type="email" name="email" v-model="email" placeholder="E-mail"  class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="email">Mot de passe*</label>
                        <input type="password" name="password" v-model="password" placeholder="Passe"  class="form-control">
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary" @click="login"  :disabled="!validEmailAndPassword">Valider</button>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                </div>
            </div>
        </div>
    </div>      
</template>

<script>
    import axios from 'axios';
    export default {
        data(){
            return {
                email : '',
                password : '',
                loading : false
            }
        },
        methods: {
            checkEmailIsValid(){
                if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(this.email))
                {
                    return true;
                }else{
                    return false;
                }
            },
            login(){
                this.loading = true;
                this.errors = [];
                axios.post('http://localhost/lara-vue-login/public/login',{
                    email : this.email,
                    password : this.password,
                }).then(response => {
                    toastr.success('Vous êtes connectés');
                    location.reload();
                }).catch(err => {
                    this.loading = false;
                    if(err.response.status == 422){
                        toastr.error("Email ou mot de passe est incorrect");
                    }else{
                        toastr.error("Une erreur est survenue veuillez réessayer");
                    }
                });
            }
        },
        computed : {
            validEmailAndPassword(){
                return this.checkEmailIsValid() && this.password && !this.loading;
            }
        }
    }
</script>

2- إضافة أول component vue js لي هو Register.vue

دائما ف resources/asstes/js/components غادي نزيد component جديد سميه Register.vue ولي فيه تقريبا نفس الكود لي زدنا ف Login.vue فقط غيرنا ل méthode من login ل register وزدنا name مع ل email ول mot de passe.

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

عرض الكود

                                                        
                                                            //Register.vue

<template>
    <div class="modal fade" tabindex="-1" role="dialog" id="registerModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Inscription</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="name">Nom & Prénom*</label>
                        <input type="text" name="name" v-model="name" placeholder="Nom & Prénom" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="email">Email*</label>
                        <input type="email" name="email" v-model="email" placeholder="E-mail"  class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="email">Mot de passe*</label>
                        <input type="password" name="password" v-model="password" placeholder="Passe"  class="form-control">
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary" @click="register" :disabled="!validEmailAndPassword">Valider</button>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                </div>
            </div>
        </div>
    </div>      
</template>

<script>
    import axios from 'axios';
    export default {
        data(){
            return {
                name : '',
                email : '',
                password : '',
                loading : false
            }
        },
        methods: {
            checkEmailIsValid(){
                if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(this.email))
                {
                    return true;
                }else{
                    return false;
                }
            },
            register(){
                this.loading = true;
                this.errors = [];
                axios.post('http://localhost/lara-vue-login/public/register',{
                    name : this.name,
                    email : this.email,
                    password : this.password,
                }).then(response => {
                    toastr.success('Compte crée');
                    location.reload();
                }).catch(err => {
                    this.loading = false;
                    toastr.error("Une erreur est survenue veuillez réessayer");
                });
            }
        },
        computed : {
            validEmailAndPassword(){
                return this.checkEmailIsValid() && this.name && this.password && !this.loading;
            }
        }
    }
</script>

3- استرجاع les components vuejs فالملف app.js

داخل resources/asstes/js عندي لملف app.js لي غادي ندير عليه تعديل غادي يمكن من إضافة les components vue js لي زدنا.

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

عرض الكود

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

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

Vue.component('login', require('./components/Login.vue'));
Vue.component('register', require('./components/Register.vue'));

const app = new Vue({
    el: '#app'
});

4- إضافة les routes ل projet ديالنا

من بعد غادي نمشي ل web.php غادي نزيد les routes ديالي فالكود لي زدنا ف web.php هو :

عرض الكود

                                                        
                                                            // web.php

<?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('/', function () {
    return view('index');
});

Route::post('/login','UsersController@auth');

Route::post('/register','UsersController@store');

Route::get('/logout','UsersController@logout');

5- إضافة الصفحة الرئيسية

ف views غادي نزيد الصفحة الرئيسية ديالي فغادي نزيد ملف جديد نسميه index.blade.php الكود لي غادي تزيد فيه هو :

عرض الكود

                                                        
                                                            //index.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-6 mx-auto mt-5">
            <div class="card mt-5 rounded shadow">
                <div class="card-body bg-secondary text-white">
                    <h1>Laravel Vuejs Login System</h1>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection