Đăng ký Đăng nhập sử dụng laravel + vuejs (Part 1)
Bài đăng này đã không được cập nhật trong 4 năm
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
