Hướng Dẫn Tạo Ứng Dụng Todo List Bằng Laravel và Vue.js

Bài viết này sẽ hướng dẫn các bạn cách xây dựng một ứng dụng Todo List đơn giản bằng Laravel cho phần backend và Vue.js cho phần frontend. Bạn sẽ cần có kiến thức căn bản về Laravel, Vue.js và CSS để thực hiện.

Nội Dung Bài Viết

• Tạo API bằng Laravel để thêm, cập nhật và xóa task
• Xây dựng giao diện frontend bằng Vue.js
• Sử dụng CSS để định dạng và làm đẹp các phần tử giao diện

1. Tạo Dự Án Laravel Mới

Để bắt đầu, bạn cần cài đặt Composer, Node.js, và PHP trên máy tính của mình. Sau đó, khởi tạo một dự án Laravel mới có tên là todolist:

composer create-project laravel/laravel:^8.0 todolist

Cài Đặt Database

Trong bài này, mình sử dụng MySQL làm cơ sở dữ liệu. Bạn cần chỉnh sửa file .env như sau:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=todolist  # Tên database của bạn
DB_USERNAME=root  # Tài khoản đăng nhập database
DB_PASSWORD=  # Mật khẩu đăng nhập database

Đừng quên khởi động Apache và MySQL trên Wampserver để có thể kết nối với database.

Tạo Model

Tiếp theo, chúng ta sẽ tạo model Item và migration cho bảng items:

php artisan make:model Item -m

Sau khi tạo xong, bạn cần định nghĩa schema cho bảng trong file migration vừa tạo tại app/database/migrations/ngay-nao-do_create_items_table.php và chạy lệnh sau để thực hiện migration:

php artisan migrate

Nếu bạn gặp lỗi Syntax error or access violation: 1071 Specified key was too long; max key length is 1000 bytes, hãy làm theo hướng dẫn để khắc phục. Khi thành công, bạn sẽ thấy bảng items được tạo trong database.

Tạo Controllers

Controller sẽ quản lý các request từ client. Chúng ta sẽ tạo một ItemController để xử lý các thao tác với task:

php artisan make:controller ItemController --resource

Tiếp theo, bạn cần định nghĩa route cho controller này trong file routes/api.php nhằm phục vụ cho việc quản lý task.

Sau khi hoàn tất, bạn có thể chạy ứng dụng Laravel bằng lệnh:

php artisan serve

Truy cập vào địa chỉ http://127.0.0.1:8000/ để kiểm tra ứng dụng. Để kiểm tra tính năng API, bạn có thể sử dụng Postman như một client API. Bạn có thể thử thêm, xem, cập nhật và xóa item theo hướng dẫn trong bài viết.

2. Cài Đặt Vue.js Ở Frontend

Mở terminal tại thư mục dự án và cài đặt Vue.js:

npm install
npm install vue@^2

Tạo một thư mục mới components trong resources/js để chứa các file Vue.js. Để sử dụng icon, bạn có thể cài đặt thư viện FontAwesome:

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/vue-fontawesome@latest-2

Chỉnh Sửa welcome.blade.php

Trước khi tiếp tục với phần frontend, hãy chỉnh sửa file welcome.blade.php bằng cách xóa nội dung trong thẻ body và thêm mã code cần thiết, và cũng đừng quên thêm dòng .vue() vào file webpack.mix.js.

3. Tạo Các Component và API

Ở file resources/js/app.js, chúng ta sẽ thêm mã cho các component như app.vue, addItemForm.vue, listItem.vue, listView.vue. Sau khi hoàn tất, hãy chạy lệnh sau để biên dịch mã:

npm run hot

Giờ bạn có thể xem ứng dụng Todo List của mình tại địa chỉ http://127.0.0.1:8000/.

Kiểm Tra Code Trên GitHub

Bạn có thể kiểm tra mã nguồn của ứng dụng trên GitHub tại đây: GitHub Repository.

Cảm ơn bạn đã theo dõi bài viết! Nếu bạn thấy bài viết hữu ích và muốn tìm hiểu thêm nhiều chủ đề khác, hãy ghé thăm blog của mình tại ngocthuynotes.wordpress.com.
source: viblo