Ngày 7 VueJS Dùng Axios để gọi API trong Laravel và VueJS
Buổi 1: Tạo môi trường và các thứ liên quan.
Ở những ngày trước mình đạ tìm hiểu VueJS là gì, nó có gì, lúc nào thì gọi nó, thao tác giữa các component như thế nào.
Ở ngày hơm nay mình làm 1 cái khác với 6 ngày trước là sài VueJS trong Laravel, đơn giản là Laravel nó có support VueJS.
Bắt đầu với việc tạo dự án Laravel trước nha
chạy lệnh : composer create-project laravel/laravel project-name
Chi tiết tại đây nha
Chờ 1 chúc để cài xong nha, tiếp đến chúng ta cần chạy thêm 1 vài lệnh để khởi tạo phân frontend VueJS nữa nha
composer require laravel/ui --dev
php artisan ui vue
npm install
Vào phần chính hôm nay đầu tiên mình tạo 1 component Vue mới resources/js/components đặt tên là ApiCalling.vue với nội dung như sau:
Tiếp đến vào app.js khai báo component mới như sau:
Cuối cùng bỏ api-calling trong template nha template nằm ở welcome.blade.php
Tiếp đến mình cần tạo cho nó 1 database ten examplevue và khai báo trong .evn nha
Ở ngày 7 này mình dùng Axios để gọi API CRUD(Thêm, sửa, xóa, hiển thị) sản phẩm. Để làm được thì đầu tiên Laravel cần 1 Model tên Product cách làm như sau:
php artisan make:model Product -m
Note: thật ra thì không cần -m, thêm vào để nó tạo luôn cho mình 1 migrate cho model Product
Tiếp sau khi chạy thành công câu lệnh thì mình vào:
database/migrations/create_product_table.php sửa hàm up thông tin bảng product như sau:
Bảng này đơn giản thôi id hoạt dộng như mã sản phẩm, tên sản phẩm(name), giá(price) và thời gian tạo và chỉnh sửa sản phẩm.
Tiếp vào bảng model chỉnh 1 chút nó nằm ở App/Product.php
Laravel nó sẽ làm 1 chuyện là model của mình chỉ là Product.php nó sẽ tự biết thêm "s" ở cuối và mapping với bảng products trong database
Nếu muốn connect tới 1 bảng khác thì làm như sau:
protected $table = 'table-name'
Cái biến $fillable đó ý muốn nói với Laravel là chỉ có các fields này thay đổi bởi người dùng thôi.
Xong xuôi chạy lệnh php artisan migrate để nó tạo bảng.
Ah khoan trước đó nhớ vào App/Providers/AppServiceProvider sửa hàm boot() không là nhận ngay lỗi : error: ..key to long
use Illuminate/Support/Facades/Schema;
Ở đây mình làm hết CRUD luôn nên có thể sài Route::resource cái này được thêm vào ở routes/web.php
Một bước nữa là tạo Controller product để tạo ra API
Comments
Post a Comment