post-image

Sử dụng plugin vue-resource xử lý Web request và response

Tổng quan

Chúng ta đã được làm quen với việc xử lý các thành phần HTML trong form nhập liệu thông qua chỉ thị v-model, một câu hỏi đặt ra, sau khi dữ liệu đã được chuyển qua lại trong mô hình MVVM thì muốn lưu dữ liệu xuống database thì làm thế nào?

Mô hình MVVM trong Vue.js

Toàn bộ công đoạn trong MVVM được xử lý trong core của Vue.js, các chức năng khác không được core này xử lý, cũng chính vì vậy Vue.js giữ được sự nhẹ nhàng về dung lượng và thực thi. Việc lưu trữ dữ liệu xuống database thông qua các Web request và web response sẽ được thực hiện thông qua gói vue-resource.

Sử dụng vue-resource thao tác với web request và web response

Vue-resource được sử dụng cho Vue.js để tạo các yêu cầu web và quản lý các hồi đáp bằng sử dụng XMLHttpRequest hoặc JSON. Bạn có thể cài đặt gói này thông qua yarn hoặc npm

$ yarn add vue-resource $ npm install vue-resource

hoặc đơn giản là tích hợp các thư viện này thông qua các CDN:

<script src="https://cdn.jsdelivr.net/vue.resource/1.3.1/vue-resource.min.js"></script> Hoặc <script src="https://cdnjs.com/libraries/vue-resource"></script> Hoặc <script src="https://unpkg.com/vue-resource@1.3.1/dist/vue-resource.min.js"></script>
Code language: HTML, XML (xml)

Cấu hình vue-resource

Để sử dụng Vue-resource cần thiết lập một số các giá trị toàn cục theo cú pháp như sau:

Vue.http.options.root = '/root'; Vue.http.headers.common['Authorization'] = 'Basic YXBpOnBhc3N3b3Jk';
Code language: JavaScript (javascript)

Với các ứng dụng sử dụng framework như Laravel cần thiết lập CSRF token:

Vue.http.headers.common['X-CSRF-TOKEN'] = $("#token").attr("value");
Code language: JavaScript (javascript)

với giá trị này được thiết lập tại đầu trang trong các view:

<meta id="token" name="token" value="{{ csrf_token() }}">
Code language: HTML, XML (xml)

HTTP request/ response:

Các dịch vụ http có thể được sử dụng toàn cục thông qua Vue.http hoặc thông qua instance của Vue this.ℎ𝑡𝑡𝑝.𝑉ớ𝑖𝑖𝑛𝑠𝑡𝑎𝑛𝑐𝑒𝑡ℎ𝑖𝑠.http.Vớiinstancethis.http chúng ta có thể thực hiện gửi các yêu cầu HTTP:

{ // GET /someUrl this.$http.get('/someUrl').then(response => { // success callback }, response => { // error callback }); }
Code language: JavaScript (javascript)

This.$http cung cấp rất nhiều các phương thức:

// in a Vue instance this.$http.get('/someUrl', [options]).then(successCallback, errorCallback); this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
Code language: JavaScript (javascript)

Danh sách các phương thức khác như sau:

  • get(url, [options])
  • head(url, [options])
  • delete(url, [options])
  • jsonp(url, [options])
  • post(url, [body], [options])
  • put(url, [body], [options])
  • patch(url, [body], [options])

Với chi tiết các tùy chọn như sau:

Tham sốTypeMô tả
urlstringURL mà yêu cầu sẽ được gửi đến
bodyObjectFormDatastringRequest body: phần dữ liệu sẽ được gửi đi
headersObjectHeaders object to be sent as HTTP request headers
paramsObjectParameters object to be sent as URL parameters
methodstringPhương thức HTTP có thể là POST, GET…
responseTypestringType of the response body (e.g. text, blob, json, …)
timeoutnumberThiết lập thời gian timeout cho yêu cầu web. (0 là không có timeout)
beforefunction(request)Callback function dùng thay đổi yêu cầu trước khi gửi
progressfunction(event)Callback function to handle the ProgressEvent of uploads
credentialsbooleanIndicates whether or not cross-site Access-Control requests should be made using credentials
emulateHTTPbooleanSend PUT, PATCH and DELETE requests with a HTTP POST and set the X-HTTP-Method-Override header
emulateJSONbooleanSend request body as application/x-www-form-urlencoded content type

Ví dụ Vue-resource

Gửi đi dữ liệu form bằng FormData

{ var formData = new FormData(); // append string formData.append('foo', 'bar'); // append Blob/File object formData.append('pic', fileInput, 'mypic.jpg'); // POST /someUrl this.$http.post('/someUrl', formData).then(response => { // success callback }, response => { // error callback }); }
Code language: JavaScript (javascript)

Hủy một yêu cầu web

Hủy yêu cầu trước khi được gửi, ví dụ

{ // GET /someUrl this.$http.get('/someUrl', { // use before callback before(request) { // abort previous request, if exists if (this.previousRequest) { this.previousRequest.abort(); } // set previous request on Vue instance this.previousRequest = request; } }).then(response => { // success callback }, response => { // error callback }); }
Code language: JavaScript (javascript)

Ví dụ một ứng dụng CRUD sử dụng Vue.js với plugin vue-resource

Xem chi tiết tại đường dẫn: Xây dựng ứng dụng CRUD với Vue.js và Laravel.

Ứng dụng CRUD sử dụng Vue.js trong Laravel

Cảm ơn các bạn đã đọc.

Các bạn có thể tham khảo các bài viết hay về Laravel tại đây.


Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Nguồn tham khảo: Allaravel

Leave a Reply

Your email address will not be published. Required fields are marked *