Xây dựng blog đơn giản bằng Laravel + Vue.js (part 1)
Bài đăng này đã không được cập nhật trong 3 năm
Part 1: Install Laravel + Vuejs
Tổng quan
Laravel là một trong số các PHP Framework mã nguồn mở và miễn phí được sử dụng để xây dựng các ứng dụng web theo kiến trúc mô hình MVC (Model - View - Controller) và rất được ưu chuộng trong thời gian gần đây bởi cú pháp dễ hiểu, rõ ràng và rất nhiều tiện ích mà nó Laravel cung cấp. Không chỉ vậy, ựng dụng xây dựng với laravel còn có thể dễ dàng mở rộng và tích hợp thêm các gói thư viện khác vào. Cùng với đó là một cộng đồng support rất đông đảo mà Laravel hiện đang nắm giữ.
Về Vue.js, đây là một trong số các thư viện frontend javascript cũng đang được ưu chuộng. Nó tập trung vào lớp "View" trong mô hình MVC mà chúng ta đang sử dụng. Vue.js được đánh giá là một thư viện javascript nhỏ gọn hơn các thư viện javascript khác như Angular, Backbone hay là các thư viện javacscript khác.
Trong series này, tôi và các bạn sẽ cùng nhau từng bước tìm hiểu về Vuejs và Laravel thông qua vệc xây dựng một blog đơn giản kết hợp giữa Vue.js 2.1 và Laravel 5.4 với các chức năng có bản gồm:
- Quản lý users
- Quản lý danh mục
- Quản lý bài viết
Mục tiêu bài viết ngày hôm nay, chúng ta sẽ khởi tạo project tích hợp Laravel + Vuejs và chạy thử thành công. Đơn giản chỉ cần vậy thôi 
Cài đặt laravel
Để cài đặt Laravel, đơn giản ta thực hiện câu lệnh sau:
composer require laravel/laravel simple-blog
Đợi một lúc để composer tải laravel về, sau khi chạy xong thư mục simple-blog xuất hiện với source của laravel đã chứa ở bên trong. Các thư mục quan trọng bạn cần để ý đầu tiên gồm:
- /app: Chứa nội dung code của ứng dụng
- /config: Chứa các file cấu hình của ứng dụng
- /resources: Chứa các file css, javascript, language và các file view
- /public: Nơi chứa các file public
- /routes: Nơi chứa các file định nghĩa các điều hướng cho website.
Việc tiếp theo chúng ta cần làm là khai báo virtual host với apache để có thể chạy ứng dụng của chúng ta trên local. Trong phạm vi bài viết này, tôi xin phép mặc định là các bạn đã biết cấu hình virtual host. Sau khi thiết lập, hãy truy cập trang web của chúng ta và bạn sẽ thấy dòng chữ Laravel mà mặc định laravel đã để : D
Cài đặt Vuejs
Chúng ta thực hiện cài đặt Vuejs thông qua npm. Mở file package.json, bạn sẽ thấy các gói thư viện javascript được khai báo sử dụng, mặc định laravel 5.4 đã khai báo giúp chúng ta gói thư viện vue.js như dưới đây:
{
"devDependencies": {
"axios": "^0.15.3",
"bootstrap-sass": "^3.3.7",
"jquery": "^3.1.1",
"laravel-mix": "^0.8.1",
"lodash": "^4.17.4",
"vue": "^2.1.10"
}
}
Nó bao gồm một số package như: bootstrap, jQuery, laravel-mix và Vue.
Nào! Hãy mở lại command line và cài đặt ngay bây giờ bằng dòng lệnh sau:
npm install
Sau khi tải các gói thư viện javascript về, thư mục node_modules sẽ xuất hiện, nơi các toàn bộ các thư viện javascript mà ta nạp qua npm. Như vậy là chúng ta đã hoàn thành việc cài đặt cho project.
Nhìn qua trong /resources/assets/js, ta thấy app.js, bootstrap.js và thư mục components mà laravel đã chuẩn bị sẵn. Bootstrap.js là file mồi để khởi động ứng dụng của chúng ta, nạp một số thư viện global cần thiết. Code vuejs của chúng ta sẽ thực hiện trong thự mục js, chúng ta sẽ chia nhỏ view thành các component để quản lý và phát triển chúng dễ dàng hơn.
Mở file app.js, chúng ta thấy đoạn code quan trọng và ngắn gọn:
require('./bootstrap');
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
});
Trong đoạn code mà laravel đã khai báo sẵn giúp chúng ta. Đầu tiên, nó chạy code trong file bootstrap.js và import một component được lấy từ file Example.vue vào đồng thời gán cho nó một cái tên và ở đây mình có thể hiểu như là bí danh của nó: "example". Chương trình của ta sẽ coi các tên này như một thẻ html và ta có thể như một thẻ bình thường. Ở đây, ta sẽ có thẻ <example> và ta dùng trong view như sau:
<!doctype html>
<html lang="{{config('app.locale')}}">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{config('app.name')}}</title>
<link rel="stylesheet" href="{{mix('css/app.css')}}">
<script>
window.Laravel = {!! json_encode(['csrfToken' => csrf_token()]) !!};
</script>
</head>
<body>
<div id="app">
<!-- Sử dụng component Example.vue -->
<example></example>
</div>
<script src="{{mix('js/app.js')}}"></script>
</body>
</html>
Chúng ta sửa một chút để chạy thử để chắc chắn rằng mình đã khởi tạo project thành công bằng cách copy đoạn code html trên và thay thế vào file view: /resources/views/welcome.blade.php. Chuyển qua terminal và chạy lệnh:
npm run dev
Asset Size Chunks Chunk Names
fonts/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1 20.1 kB [emitted]
fonts/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760 109 kB [emitted]
fonts/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512 45.4 kB [emitted]
fonts/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158 23.4 kB [emitted]
fonts/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb 18 kB [emitted]
/js/app.js 1.17 MB 0 [emitted] [big] /js/app
/css/app.css 692 kB 0 [emitted] [big] /js/app
mix-manifest.json 66 bytes [emitted]
Mở trình duyệt và bạn sẽ thấy điều bất ngờ! Như vậy là chúng ta đã hoành thành xong phần cài đặt, hẹn các bạn trong phần hai của bài viết.
Source code: https://github.com/huukimit/simple-blog
Nếu bạn thấy nội dung này bổ ích, hãy mời tôi một tách cà phê nha! https://kimyvgy.webee.asia
All rights reserved
