Rate this post

Trong phần này, chúng ta sẽ tìm hiểu về các yêu cầu đăng Axios với Vue JS. Chúng tôi sẽ sử dụng Laravel để làm điều này. Trong ứng dụng của chúng tôi, chúng tôi có thể sử dụng bất kỳ phiên bản nào của Laravel, chẳng hạn như Laravel 5, 6, 7 và 8. Chúng tôi sẽ sử dụng mã thông báo CSRF để chúng tôi có thể gửi dữ liệu đầu vào của biểu mẫu bài đăng. Sử dụng phương pháp bộ điều khiển, chúng ta có thể truy cập dữ liệu đầu vào. Nếu chúng tôi đang phát triển dự án của mình bằng Angular JS hoặc Vue JS, chúng tôi phải có kiến ​​thức về gói Axios cho các yêu cầu HTTP cho PUT, POST, GET và DELETE. Để gửi một yêu cầu đăng bài, chúng tôi sẽ sử dụng một dữ liệu đầu vào trong biểu mẫu bên dưới của chúng tôi.

Các bài viết liên quan:

Phương thức bộ điều khiển Laravel sẽ lấy tất cả dữ liệu của biểu mẫu khi người dùng gửi biểu mẫu. Chúng tôi cũng sẽ sử dụng phương pháp đăng để gửi mã thông báo CRSF. Đối với điều này, phương thức bộ điều khiển sẽ được tạo và sau đó dữ liệu yêu cầu sẽ được trả về. Sau đó, chúng tôi sẽ sử dụng phía front-end để in dữ liệu. Sử dụng mặt trước, người dùng có thể dễ dàng nhìn thấy kết quả đầu ra. Sử dụng Axios và Vue JS, chúng tôi sẽ tạo một biểu mẫu và sau đó gửi biểu mẫu đó. Quy trình từng bước để thực hiện việc này được mô tả như sau:

Bước 1:

Trong bước này, chúng ta sẽ Cài đặt Ứng dụng Laravel Fresh. Lệnh sau sẽ hữu ích để tải một ứng dụng Laravel 5.6 mới. Chúng tôi sẽ sử dụng CMD hoặc terminal và sau đó chạy lệnh, được mô tả như sau:

composer create-project –prefer-dist laravel/laravel blog  

Bước 2:

Trong bước này, chúng ta sẽ Tạo Tuyến đường. Đối với điều này, một tuyến bài đăng sẽ được tạo và sau đó, tất cả dữ liệu biểu mẫu bài đăng sẽ được trả về. Chúng tôi sẽ sử dụng tệp đó và thêm một tuyến đường mới như sau:

route / web.php

Bước 3:

Trong bước này, chúng ta sẽ tạo Bộ điều khiển mới. Chúng tôi sẽ tạo một bộ điều khiển mới là PostController. Chúng tôi sẽ tạo điều này bằng phương thức formSubmit. Dữ liệu yêu cầu sẽ được trả về bằng cách sử dụng phương pháp này. Mã để tạo bộ điều khiển được mô tả như sau:

app / Http / Controllers / PostController.php

Bước 4:

Trong bước này, chúng ta sẽ thực hiện Cấu hình NPM. Đối với điều này, trước tiên chúng tôi sẽ cài đặt thiết lập Vue JS và sau đó, chúng tôi sẽ cài đặt NPM. Lệnh để cài đặt cả hai được mô tả như sau:

Cài đặt vue:

php artisan preset vue  

Cài đặt npm:

npm install 

Bước 5:

Trong bước này, chúng ta sẽ Viết trên app.js và Thành phần. Đối với điều này, trước tiên chúng tôi sẽ sử dụng app.js và viết mã vào đó. Sau đó, chúng ta sẽ tạo các thành phần của Vue JS. Sau khi tạo cả hai tệp, chúng tôi sẽ thêm mã sau vào các tệp này:

resources/assets/js/app.js

Bước 6:

Trong bước này, chúng ta sẽ cập nhật tệp tin welcome.blade.php. Tệp app.js sẽ được sử dụng trong tệp đó, được mô tả như sau:

resource / views / welcome.blade.php

Bây giờ mã ở trên của chúng tôi đã sẵn sàng để chạy. Để chạy mã trên để cập nhật tệp app.js, chúng tôi sẽ sử dụng lệnh sau:

npm run dev

Khi chúng tôi chạy lệnh này, kết quả sau sẽ được tạo:

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now