Bài 16: Sử dụng axios để gọi Laravel API trong VueJS
Chào mừng các bạn quay trở lại với series học VueJS với Laravel của mình, ở bài trước mình đã hướng dẫn các bạn cách sử dụng Scoped CSS trong VueJS, ở bài này chúng ta sẽ tìm hiểu về cách gọi API từ backend là Laravel sử dụng axios nhé. Đầu tiên chúng ta tạo một component Vue mới đặt tên là ...
Chào mừng các bạn quay trở lại với series học VueJS với Laravel của mình, ở bài trước mình đã hướng dẫn các bạn cách sử dụng Scoped CSS trong VueJS, ở bài này chúng ta sẽ tìm hiểu về cách gọi API từ backend là Laravel sử dụng axios nhé.
Đầu tiên chúng ta tạo một component Vue mới đặt tên là ApiCalling.vue với nội dung như sau:
<template> <div class="api-calling"> API CALLING </div> </template> <script> export default { } </script> <style lang="scss" scoped> </style>
Sau đó các bạn khai báo component này trong app.js như sau:
Vue.component('api-calling', require('./components/ApiCalling.vue'));
Cuối cùng là thêm nó vào file welcome.blade.php:
<body>
<div id="app">
<api-calling></api-calling>
</div>
<script src="/js/app.js"></script>
</body>
Tiếp theo chúng ta sẽ setup backend Larave nhé.
Đầu tiên các bạn tạo một database vue_laravel, sau đó chỉnh sửa thông tin db trong file .env cho chính xác nhé.
Ở bài này chúng ta sẽ dùng axios để gọi API thêm, sửa, xoá, get danh sách sản phẩm từ backend. Để làm điều đó đầu tiên ta tạo một model Product trong laravel bằng command sau:
php artisan make:model Product -m
(option -m để tạo luôn 1 migration cho model Product)
Sau đó chúng ta vào database/migrations/create_products_table.php và sửa lại hàm up() như sau:
public function up() { Schema::create('products', function (Blueprint $table) { $table->increments('id'); $table->text('name'); $table->double('price'); $table->timestamps(); }); }
Các bạn có thể thấy ta sẽ tạo ra một bảng tên là products, với các trường như mã sản phẩm (id), tên sản phẩm (name), giá (price), và biến thời gian biểu thị cho ngày tạo/chỉnh sửa sản phẩm.
Tiếp theo chúng ta vào App/Product.php và sửa lại như sau:
<?php namespace App; use IlluminateDatabaseEloquentModel; class Product extends Model { protected $fillable = [ 'name', 'price' ] }
Nhân tiện đây mình cũng muốn giải thích cho các bạn một số điều như sau:
- Mặc định trong Laravel sẽ mapping model Product với bảng products (thêm 's' ở cuối), nếu các bạn sử dụng tên bảng khác thì ta phải khai báo thêm như sau:
protected $table = '<table_name>';
- Nếu ở migration mà các bạn không có timestamps() thì bên model Product ta khai báo như sau:
public $timestamps = false;
- Với các field mà chúng ta muốn kiểm soát khi thay đổi giá trị (ví dụ như các giá trị này được post từ form html về chẳng hạn), thì ta cứ bỏ vào biến array $fillable để báo cho Laravel biết là cá field này có thể thay đổi giá trị bởi người dùng.
- Ngược lại với $fillable là biến array $guarded, biến này sẽ chứa các field mà người dùng không được phép thay đổi. Ở đây các bạn thấy giá trị của field ‘id’ sẽ tự động tăng khi insert một record mới (MySQL tự động làm việc này).
- Trong một số trường hợp, khi chúng ta lấy tất cả các field của các record, và trong đó, chúng ta không muốn hiển thị một số field nào đó, ví dụ ở đây mình muốn là không hiển thị 2 field là password và remember_token, khi đó tui sẽ đặt 2 field này vào trong biến array $hidden. Điều này có nghĩa là tui báo với Laravel rằng tui sẽ lấy hết các field trừ 2 field password và remember_token.
Ok thế là ổn rùi đó nhỉ, tiếp theo chúng ta chạy command:
php artisan migrate
Chú ý nếu ở bước này các bạn gặp lỗi error:...key too long. Thì ta mở file App/Providers/AppServiceProvider và sửa lại như sau (sau đó migrate lại là được nhé):
use IlluminateSupportFacadesSchema; // public function boot() { Schema::defaultStringLength(191); }
Ở bài này ta làm các thao tác đơn giản như thêm, sửa, xoá, get,...ta sử dụng Route::resource cho tiện nhé. Các bạn mở file routes/web.php và thêm vào như sausau:
Route::resource('products', 'ProductController');
Tiếp theo ta tạo ProductController bằng cách:
php artisan make:controller ProductController --resource
Sau đó ta mở file ProductController.php lên, ở đó ta thấy đã có sẵn một số phương thức cho việc CRUD.
Thêm mới
Bây giờ chúng ta quay trở lại component ApiCalling.vue và tạo một form tạo sản phẩm mới như sau:
<template> <div class="api-calling"> <div class="create-form"> <div class="product-name-input"> <input type="text" v-model="product.name"> </div> <div class="product-name-input"> <input type="text" v-model.number="product.price"> </div> <div class="button-create"> <button @click="createProduct">Create</button> </div> </div> </div> </template> <script> export default { data() { return { product: { name: ', price: 0 } } }, methods: { createProduct() { axios.post('/products', {name: this.product.name, price: this.product.price}) .then(response => { console.log(response.data.result) }) .catch(error => { console.log(error) }) } } } </script> <style lang="scss" scoped> </style>
Ở đây phần code HTML chắc các bạn có thể hiểu được(có gì thắc mắc comment bên dưới cho mình nhé). Mình sẽ giải thích phần code trong script. Ở đó ta có một phương thức là createProduct. Phương thức này sẽ sử dụng axios để tạo một post request đến route /products với 2 tham số là name và price. Có thể các bạn sẽ thắc mắc:
- axios??? nói mãi không chỉ cách cài đặt hay import nó, cứ thế phang vào sử dụng hay sao?
