Đăng ký Đăng nhập sử dụng laravel + vuejs (Part 1)

Giới thiệu

Xin chào mọi người hôm nay lại có hứng thứ muốn làm 1 blog đơn về vuejs , Mình sẽ làm 1 seri gôm đăng kí đăng nhập và một số chức năng quản lý đơn giản . Trong thời gian vài tháng dùng vuejs thì muốn lưu trữ + chia sẻ lại kiến thức cơ bản cho những bạn đang tìm hiểu về Vue nhé . Let Go !!!!


1 Setup Project

1.1 Install laravel

Trước hết ta cần install laravel về đã nhé :

composer create-project --prefer-dist laravel/laravel blog

Sau đó truy cập vào thư mục chạy : composer install php artisan key:generate php artisan serve

Một trang blog thì ta cần có bảng Post để lưu bài viết và Category để quản lý danh mục bài viết :

Ở đây mình tạo ra 3 bảng là : User + Post + Category

php artisan make:migraiton create_post_table

    Schema::create('posts', function (Blueprint $table) {
        $table->increments('id');
        $table->string('title');
        $table->string('tag');
        $table->string('content');
        $table->integer('user_id');
        $table->integer('category_id');
        $table->timestamps();
    });

php artisan make:migration create_users_table

    Schema::create('users', function (Blueprint $table) {
        $table->increments('id');
        $table->string('email')->unique();
        $table->string('password');
        $table->rememberToken();
        $table->timestamps();
    });

php artisan make:migration create_category_table

    Schema::create('categories', function (Blueprint $table) {
        $table->increments('id');
        $table->string('name');
        $table->timestamps();
    });

Từ bản laravel 6.x trở đi thì vue được tách ra 1 package riêng biệt để sử dụng bạn cần phải tải gói này về nhé :

composer require laravel/ui

Sau khi tải về thì chạy tiếp :

php artisan ui bootstrap

php artisan ui vue

Chúng ta sẽ điều hướng cho laravel mặc định vào 1 file view duy nhất trong web.php như sau:

    Route::view('/{any}', 'home')
        ->where('any', '.*');

và bạn mở resource/js đã có 1 folder tên là components . đơn giản phải k nhỉ ? 😄

1.2 Install Vue

npm install vue-router vue-axios --save

Vậy là đã cài xong bộ định tuyển router và axios giờ thì bạn truy cập vào resources>views và tạo home.blade.php như sau :

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Demo SPA Vuejs</title>
        <link rel="stylesheet" href="/css/style.css">
    </head>
    <body>
        <div id="app"></div>
        <script src="/js/app.js"></script>
    </body>
    </html>

Sau đó thì chúng ta chạy lệnh :

npm run dev hoặc npm run watch

Tiếp theo ta sẽ tạo 3 component trong components:

App.vue ( component chinh)

Post.vue (component trang post)

User.vue (component trang user)

nội dung App :

    <template>
        <div class="container">
            <div class="header">
                <ul class="nav justify-content-center">
                    <li class="nav-item">
                        <router-link
                            class="nav-link"
                            :class="[{active: $route.name === 'index'}]"
                            :to="{name: 'index'}"
                        >
                            Posts
                        </router-link>
                    </li>
                    <li class="nav-item">
                        <router-link
                            class="nav-link"
                            :class="[{active: $route.name === 'user'}]"
                            :to="{name: 'user'}"
                        >
                            User
                        </router-link>
                    </li>
                </ul>
            </div>

            <div class="main mt-4">
                <div class="row">
                    <div class="col-md-8 offset-2 text-center">
                        <router-view></router-view>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <script>
        export default {
            name: 'App',
        }
    </script>

nội dung trang user :

<template>
    <div>
        <h4>Hello, This is user page</h4>
    </div>
</template>

<script>
    export default {
        name: 'User'
    }
</script>

Tiếp theo ta tạo 1 file routes trong resources/js

import Home from './components/Post'
import User from './components/User'

const routes = [
    {
        path: '/',
        component: Post,
        name: 'index',
    },
    {
        path: '/users',
        component: User,
        name: 'user',
    }
];

export default routes;

path: là đường dẫn hiển thị trên thanh địa chỉ,

component: là component sẽ được render vào layout

name: dùng để sử dụng để định danh route, giúp cho chúng ta có thể sử dụng một cách thuận tiện hơn.

Tiếp theo tại file js/app.js sẽ chỉnh sửa lại như sau để import vue-router và khai báo sử dụng:

require('./bootstrap');

window.Vue = require('vue');

Vue.component('home', require('./components/Post'));
Vue.component('user', require('./components/User'));
Vue.component('app', require('./components/App'));

// import vue router, component và routes
import App from './components/App';
import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';

// use router
Vue.use(VueRouter);

// khai báo dùng router này
//history' có tác dụng khi ko có đoạn mode này mặc định khi vào 
// các đường dẫn sẽ chúng ta sẽ có thêm dấu # trên trình duyệt
const router = new VueRouter({
    routes,
    mode: 'history'
});

// và cuối cùng là tạo 1 instance Vue và render tại phần tử có id là app,
// render tại component App và dùng router đã khai báo ở trên
const app = new Vue({
    el: '#app',
    render: h => h(App),
    router
});

kết quả cuối cùng :

3. Kết thúc

Hi vọng bài seri này sẽ đem lại cho bạn nhiều điều mới .. hãy like và subscribe để mình có động lực viết bài nhé , có gì thắc mắc mn hay comment ở dưới nha . Cảm ơn mọi người .


All Rights Reserved