Câu hỏi Hiểu các cuộc gọi REST của Backbone.js


Tôi đang cố gắng hiểu phương thức đồng bộ Backbone.js và đã trải qua tài liệu về http://backbonejs.org/#Sync

Nó nói rằng

The default sync handler maps CRUD to REST like so:

create → POST   /collection
read → GET   /collection[/id]
update → PUT   /collection/id
delete → DELETE   /collection/id

Bây giờ kể từ khi tôi đã luôn luôn được phát triển front-end và mới để Backbone, tôi tìm thấy ở trên khó hiểu ... Tôi chưa bao giờ được sử dụng REST hoặc bất kỳ giao thức phía máy chủ khác ...

Bạn có thể giải thích tương tự trong các thuật ngữ đơn giản (giống như cách REST ánh xạ khi chúng ta sử dụng Backbone.sync) Bất kỳ ví dụ rất đơn giản nào cũng sẽ rất hữu ích ...


75
2017-08-29 07:00


gốc


Backbone là một khung công tác được thiết kế khủng khiếp. Có, cho phép tạo một thuật ngữ độc quyền có một ánh xạ 1-1 đến một động từ HTTP có ý nghĩa. Điều đó sẽ cải thiện trải nghiệm của nhà phát triển! Ngoài ra, làm cho động từ sử dụng hoàn toàn không linh hoạt vì rõ ràng, mọi dịch vụ RESTful từng tạo ra đã sử dụng các phương pháp hay nhất về động từ HTTP và CRUD đối tượng. - evanmcdonnal


Các câu trả lời:


Nếu bạn không phiền, tôi sẽ bắt đầu với việc xóa một số từ ngữ. REST không phải là một giao thức trong chính nó, nó chỉ đơn giản là một cách để sử dụng giao thức HTTP. Kiểu REST đặc biệt hữu ích cho các API, như tôi hy vọng bạn sẽ thấy. Khi một API phù hợp với phong cách đó, nó được gọi là "RESTful". Nếu API bạn đang làm việc không phải là RESTful, bạn sẽ phải thực hiện rất nhiều thay đổi đối với Backbone.sync để làm cho nó hoạt động. Vì vậy, hy vọng nó là! :)

Giao thức HTTP

Tôi thích các ví dụ, vì vậy đây là một yêu cầu HTTP để lấy HTML cho trang này:

GET /questions/18504235/understand-backbone-js-rest-calls HTTP/1.1
Host: stackoverflow.com

[Tùy chọn] Nếu bạn đã từng chơi với dòng lệnh hoặc thiết bị đầu cuối, hãy thử chạy lệnh telnet stackoverflow.com 80 và dán ở trên, sau đó nhấn enter một vài lần. Thì đấy! HTML trong tất cả vinh quang của nó.

Trong ví dụ này ...

  • GET là phương pháp.
  • /questions/18504235/understand-backbone-js-rest-calls là con đường.
  • HTTP/1.1 là giao thức.
  • Host: stackoverflow.com là một ví dụ về tiêu đề.

Trình duyệt của bạn hoạt động tương tự, chỉ với nhiều tiêu đề hơn, để lấy HTML cho trang này. Cool, huh?

Vì bạn làm việc trong giao diện người dùng, bạn có thể đã nhìn thấy thẻ biểu mẫu nhiều lần. Dưới đây là ví dụ về một:

<form action="/login" method="post">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <input type="submit" name="submit" value="Log In" />
</form>

Khi bạn gửi biểu mẫu này cùng với dữ liệu thích hợp, trình duyệt của bạn sẽ gửi một yêu cầu trông giống như sau:

POST /login HTTP/1.1
Host: stackoverflow.com

username=testndtv&password=zachrabbitisawesome123&submit=Log%20In

Có ba sự khác biệt giữa ví dụ trước và ví dụ này.

  1. Các phương pháp Hiện tại là POST.
  2. Các con đường Hiện tại là /login.
  3. Có một dòng phụ, được gọi là thân hình.

Trong khi có một loạt các phương thức khác, các phương thức được sử dụng trong các ứng dụng RESTful là POST, GET, PUTDELETE. Điều này cho máy chủ biết loại hành động nào cần thực hiện với dữ liệu, mà không cần phải có các đường dẫn khác nhau cho mọi thứ.

Quay lại xương sống

Vì vậy, hy vọng bây giờ bạn hiểu thêm một chút về cách thức hoạt động của HTTP. Nhưng làm thế nào điều này liên quan đến Backbone? Hãy cùng tìm hiểu!

Đây là một đoạn mã nhỏ bạn có thể tìm thấy trong ứng dụng Backbone.

var BookModel = Backbone.Model.extend({
    urlRoot: '/books'
});
var BookCollection = Backbone.Collection.extend({
    model: BookModel
    , url: '/books'
});

Tạo (POST)

Vì chúng tôi đang sử dụng API RESTful, đó là tất cả thông tin mà Backbone cần để có thể tạo, đọc, cập nhật và xóa tất cả thông tin sách của chúng tôi! Hãy bắt đầu bằng cách tạo một cuốn sách mới. Mã sau đây là đủ:

var brandNewBook = new BookModel({ title: '1984', author: 'George Orwel' });
brandNewBook.save();

Backbone nhận ra bạn đang cố gắng tạo nên một cuốn sách mới và biết được thông tin được đưa ra để đưa ra yêu cầu sau:

POST /books HTTP/1.1
Host: example.com

{"title":"1984","author":"George Orwel"}

Đọc (GET)

Xem đó là cách dễ dàng? Nhưng chúng tôi muốn lấy lại thông tin đó vào một thời điểm nào đó. Giả sử chúng ta đã chạy new BookCollection().fetch(). Xương sống sẽ hiểu rằng bạn đang cố gắng đọc một bộ sưu tập sách và nó sẽ đưa ra yêu cầu sau:

GET /books HTTP/1.1
Host: example.com

BAM. Thật dễ dàng. Nhưng nói rằng chúng tôi chỉ muốn thông tin cho một cuốn sách. Hãy nói cuốn sách # 42. Giả sử chúng tôi chạy new BookModel({ id: 42 }).fetch(). Xương sống thấy bạn đang cố gắng đọc một Độc thân sách:

GET /books/42 HTTP/1.1
Host: example.com

Cập nhật (PUT)

Oh darn, tôi vừa nhận ra tôi đã đánh vần tên của ông Orwell. Dễ sửa!

brandNewBook.set('author', 'George Orwell');
brandNewBook.save();

Xương sống đủ thông minh để biết rằng mặc dù được gọi là brandNewBook, nó đã được lưu. Do đó, nó cập nhật quyển sách:

PUT /books/84 HTTP/1.1
Host: example.com

{"title":"1984","author":"George Orwell"}

Xóa (DELETE)

Cuối cùng, bạn nhận ra rằng chính phủ đang theo dõi mọi bước đi của bạn, và bạn cần phải chôn vùi thực tế là bạn đã đọc năm 1984. Có lẽ đã quá muộn, nhưng nó không bao giờ đau đớn để thử. Vì vậy, bạn chạy brandNewBook.destroy(), và xương sống trở nên dễ chịu và nhận ra nguy hiểm của bạn  xóa cuốn sách với yêu cầu sau:

DELETE /books/84 HTTP/1.1
Host: example.com

Và nó đã biến mất.

Các mẩu tin hữu ích khác

Trong khi chúng tôi đã nói rất nhiều về những gì chúng tôi đang gửi đến máy chủ, chúng tôi có lẽ cũng nên xem xét những gì chúng tôi đang quay trở lại. Hãy trở lại bộ sưu tập sách của chúng tôi. Nếu bạn nhớ, chúng tôi đã thực hiện GET yêu cầu /books. Về lý thuyết, chúng ta nên lấy lại một cái gì đó như thế này:

[
    {"id":42,"author":"Douglas Adams","title":"The Hitchhiker's Guide to the Galaxy"}
    , {"id":3,"author":"J. R. R. Tolkien","title":"The Lord of the Rings: The Fellowship of the Ring"}
]

Không có gì quá đáng sợ. Và thậm chí tốt hơn, Backbone biết cách xử lý việc này ra khỏi hộp. Nhưng nếu chúng ta thay đổi nó một chút thì sao? Thay vì id là trường nhận dạng, nó là bookId?

[
    {"bookId":42,"author":"Douglas Adams","title":"The Hitchhiker's Guide to the Galaxy"}
    , {"bookId":3,"author":"J. R. R. Tolkien","title":"The Lord of the Rings: The Fellowship of the Ring"}
]

Xương sống được rằng mỗi API là một chút khác nhau, và nó là okay với điều đó. Tất cả những gì bạn phải làm là cho nó biết idAttribute, như vậy:

var BookModel = Backbone.Model.extend({
    urlRoot: '/books'
    , idAttribute: 'bookId'
});

Bạn chỉ phải thêm thông tin đó vào mô hình, vì bộ sưu tập sẽ kiểm tra mô hình. Vì vậy, chỉ cần như vậy, Backbone hiểu API của bạn! Ngay cả khi tôi không ...

Nhược điểm của điều này là bạn phải nhớ sử dụng bookId trong trường hợp nhất định. Ví dụ: nơi chúng tôi đã sử dụng trước đó new BookModel({ id: 42 }).fetch() để tải dữ liệu về một cuốn sách, chúng ta sẽ phải sử dụng new BookModel({ bookId: 42 }).fetch().


Hy vọng rằng bạn đã tìm thấy thông tin phản hồi này, và không quá cồng kềnh ngu si đần độn. Tôi nhận ra rằng đối với nhiều người, giao thức HTTP và kiến ​​trúc RESTful không phải là những đối tượng phấn khởi nhất, vì vậy tôi đã cố gắng thêm gia vị cho nó một chút. Tôi có thể hối tiếc rằng khi tôi đọc lại tất cả điều này vào một thời điểm sau, nhưng đó là 2AM ở đây, vì vậy tôi sẽ tiếp tục và gửi nó đi.


303
2017-08-29 08:57



Nice đọc. Ngoài ra còn có một động từ PATCH được hỗ trợ bởi Backbone backbonejs.org/#Model-save nhưng điều đó có lẽ không hữu ích trong tổng quan REST - nikoshr
Và, theo mặc định, các phương thức POST / PUT gửi các tải trọng của chúng dưới dạng JSON, không phải là các tham số mã hóa biểu mẫu - nikoshr
Thật là một câu trả lời tuyệt vời! - James Sefton
Thật đáng kinh ngạc. Nhiều, tốt hơn nhiều so với tài liệu chính thức! - goodpixels
Tôi đã cố gắng để upvote hai lần :) - orestiss


Giả sử bạn hiểu các cuộc gọi ajax (POST, GET, v.v. tới '/ collection', v.v.).

Backbone sử dụng đồng bộ hóa để định tuyến một số phương thức Mô hình và Bộ sưu tập cho các cuộc gọi REST.

model/collection.fetch() => GET
model.save() => POST (isNew())
model.save() => PUT (!isNew())
model.destroy() => DELETE

collection.create() cuộc gọi model.save() (isNew()) => POST

Nếu bạn vượt qua url (/ bộ sưu tập) bạn muốn sử dụng cho một mô hình / bộ sưu tập, Backbone sẽ xử lý các cuộc gọi.


4
2017-08-29 08:50