Pertanyaan Memahami panggilan Backbone.js REST


Saya mencoba memahami metode sinkronisasi Backbone.js dan sedang menjalani dokumentasi http://backbonejs.org/#Sync

Ia mengatakan

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

Sekarang karena saya selalu dalam pengembangan front-end dan baru untuk Backbone, saya merasa sulit untuk memahami ... Saya tidak pernah menggunakan REST atau protokol server-side lainnya ...

Bisakah Anda menjelaskan hal yang sama dalam istilah sederhana (seperti bagaimana peta REST ketika kita menggunakan Backbone.sync) Contoh yang sangat sederhana akan sangat berguna ...


75
2017-08-29 07:00


asal


Jawaban:


Jika Anda tidak keberatan, saya akan mulai dengan membersihkan beberapa kata. REST bukan protokol itu sendiri, itu hanya cara menggunakan protokol HTTP. Gaya REST sangat berguna untuk API, karena saya harap Anda akan melihatnya. Ketika sebuah API sesuai dengan gaya itu, dikatakan sebagai "RESTful". Jika API yang Anda kerjakan tidak RESTful, Anda harus melakukan banyak perubahan pada Backbone.sync agar bisa berfungsi. Jadi semoga itu! :)

Protokol HTTP

Saya suka contoh, jadi di sini adalah permintaan HTTP untuk mendapatkan HTML untuk halaman ini:

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

[Opsional] Jika Anda pernah bermain dengan baris perintah atau terminal, coba jalankan perintah telnet stackoverflow.com 80 dan paste di atas, diikuti dengan menekan enter beberapa kali. Voila! HTML dalam semua kemuliaan itu.

Dalam contoh ini ...

  • GET adalah metode.
  • /questions/18504235/understand-backbone-js-rest-calls adalah jalan.
  • HTTP/1.1 adalah protokol.
  • Host: stackoverflow.com adalah contoh dari tajuk.

Browser Anda kurang lebih sama, hanya dengan lebih banyak header, untuk mendapatkan HTML untuk halaman ini. Keren, ya?

Karena Anda bekerja di bagian depan, Anda mungkin sudah sering melihat tag formulir. Berikut ini contoh salah satunya:

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

Ketika Anda mengirimkan formulir ini bersama dengan data yang sesuai, browser Anda mengirimkan permintaan yang terlihat seperti ini:

POST /login HTTP/1.1
Host: stackoverflow.com

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

Ada tiga perbedaan antara contoh sebelumnya dan yang satu ini.

  1. Itu metode sekarang POST.
  2. Itu jalan sekarang /login.
  3. Ada garis tambahan, yang disebut tubuh.

Meskipun ada banyak metode lain, yang digunakan dalam aplikasi RESTful POST, GET, PUT, dan DELETE. Ini memberitahu server apa jenis tindakan yang seharusnya diambil dengan data, tanpa harus memiliki jalur yang berbeda untuk semuanya.

Kembali ke Backbone

Jadi semoga sekarang Anda memahami sedikit lebih banyak tentang cara kerja HTTP. Tapi bagaimana ini berhubungan dengan Backbone? Mari kita cari tahu!

Berikut adalah potongan kecil kode yang mungkin Anda temukan dalam aplikasi Backbone.

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

Buat (POST)

Karena kami menggunakan API RESTful, itu semua informasi Backbone harus dapat membuat, membaca, memperbarui, dan menghapus semua informasi buku kami! Mari kita mulai dengan membuat buku baru. Kode berikut seharusnya sudah cukup:

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

Backbone menyadari Anda sedang berusaha membuat buku baru, dan tahu dari informasi yang diberikan untuk membuat permintaan berikut:

POST /books HTTP/1.1
Host: example.com

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

Baca (GET)

Lihat betapa mudahnya itu? Tetapi kami ingin mendapatkan informasi itu kembali pada titik tertentu. Katakanlah kita berlari new BookCollection().fetch(). Backbone akan mengerti bahwa Anda sedang berusaha Baca baca Sebuah koleksi buku, dan itu akan membuat permintaan berikut:

GET /books HTTP/1.1
Host: example.com

BAM. Itu mudah. Tetapi mengatakan kami hanya menginginkan informasi untuk satu buku. Katakanlah buku # 42. Katakan kita lari new BookModel({ id: 42 }).fetch(). Backbone melihat Anda mencoba Baca baca Sebuah tunggal Book:

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

Perbarui (PUT)

Oh sialan, aku baru sadar aku salah mengeja nama Orwell. Mudah diperbaiki!

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

Backbone cukup pintar untuk mengetahui bahwa meskipun dipanggil brandNewBook, itu sudah disimpan. Sehingga pembaruan buku:

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

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

Hapus (HAPUS)

Akhirnya, Anda menyadari bahwa pemerintah sedang melacak setiap langkah Anda, dan Anda perlu mengubur fakta bahwa Anda telah membaca tahun 1984. Mungkin sudah terlambat, tetapi tidak ada salahnya untuk mencoba. Jadi kamu lari brandNewBook.destroy(), dan Backbone menjadi hidup dan menyadari bahaya Anda  menghapus buku dengan permintaan berikut:

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

Dan itu hilang.

Tidbits Berguna Lainnya

Meskipun kami telah berbicara banyak tentang apa yang kami kirim ke server, kami mungkin juga harus melihat apa yang kami dapatkan kembali. Mari kita kembali ke koleksi buku-buku kami. Jika Anda ingat, kami membuat GET permintaan untuk /books. Secara teori, kita harus mendapatkan kembali sesuatu seperti ini:

[
    {"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"}
]

Tidak ada yang terlalu menakutkan. Dan bahkan lebih baik lagi, Backbone tahu cara menangani hal ini di luar kotak. Tapi bagaimana kalau kita mengubahnya sedikit? Dari pada id menjadi bidang pengidentifikasi, itu 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"}
]

Backbone mengetahui bahwa setiap API sedikit berbeda, dan tidak masalah dengan itu. Yang harus Anda lakukan adalah membiarkannya tahu idAttribute, seperti:

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

Anda hanya perlu menambahkan informasi itu ke model, karena koleksi itu memeriksa modelnya. Jadi begitu saja, Backbone memahami API Anda! Bahkan jika aku tidak ...

Kelemahan dari ini adalah bahwa Anda harus ingat untuk menggunakannya bookId dalam kasus-kasus tertentu. Misalnya, di mana kami sebelumnya digunakan new BookModel({ id: 42 }).fetch() untuk memuat data tentang satu buku, kita sekarang harus menggunakannya new BookModel({ bookId: 42 }).fetch().


Semoga Anda menemukan respons ini informatif, dan tidak terlalu membosankan. Saya menyadari bahwa bagi banyak orang, protokol HTTP dan arsitektur RESTful bukanlah mata pelajaran yang paling menggembirakan, jadi saya mencoba untuk membumbuinya sedikit. Saya mungkin menyesali itu ketika saya membaca semua ini kembali di kemudian hari, tapi ini jam 2 pagi di sini, jadi saya akan terus maju dan menyerahkan ini.


303
2017-08-29 08:57



Dengan asumsi Anda memahami panggilan ajax (POST, GET, dll ke '/ koleksi', dll).

Backbone menggunakan sinkronisasi untuk mengarahkan beberapa Model dan metode Koleksi ke panggilan REST.

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

collection.create() panggilan model.save() (isNew()) => POST

Jika Anda melewatkan url (/ koleksi) yang ingin Anda gunakan untuk model / pengumpulan, Backbone akan mengurus panggilan.


4
2017-08-29 08:50