it-source

Backbone.js REST 콜에 대해서

criticalcode 2023. 2. 22. 22:16
반응형

Backbone.js REST 콜에 대해서

Backbone.js 동기 방식을 이해하려고 하고 있으며, http://backbonejs.org/ #Sync에 있는 문서를 검토하고 있었습니다.

라고 쓰여 있다

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

저는 항상 프런트 엔드 개발에 종사하고 있고 Backbone을 처음 접하기 때문에 위의 내용을 이해하기 어렵습니다.REST나 다른 서버측 프로토콜을 사용한 적이 없습니다.

Backbone.sync를 사용할 때 REST가 어떻게 매핑되는지 등 간단한 용어로 설명해 주시겠습니까?

괜찮으시다면, 몇 가지 단어들을 정리하는 것부터 시작할게요.REST는 그 자체가 프로토콜이 아니라 단순히 HTTP 프로토콜을 사용하는 방법입니다.REST 스타일은 API에 특히 도움이 됩니다.API가 이 스타일에 적합할 경우 "RESTFUL"이라고 합니다.작업 중인 API가 RESTful이 아닐 경우 Backbone을 많이 변경해야 합니다.sync를 실행해 주세요.그렇기를 바래! :)

HTTP 프로토콜

예를 들어 이 페이지의 HTML을 취득하기 위한 HTTP 요청을 다음에 나타냅니다.

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

[단말기를 한 적이 경우 [ ]를 실행해 telnet stackoverflow.com 80입력해 주세요.이다. voila! HTML html html html html 。

이 예에서는...

  • GET방법입니다.
  • /questions/18504235/understand-backbone-js-rest-calls경로입니다.
  • HTTP/1.1프로토콜입니다.
  • Host: stackoverflow.com는 헤더의 예입니다.

브라우저는 이 페이지의 HTML을 가져오기 위해 더 많은 헤더를 사용하는 것만으로 거의 같은 작업을 수행합니다.멋지죠?

프런트 엔드에서 일하시니까 폼태그를 많이 보셨을 거예요예를 들어 다음과 같습니다.

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

이 양식을 적절한 데이터와 함께 제출하면 브라우저는 다음과 같은 요청을 보냅니다.

POST /login HTTP/1.1
Host: stackoverflow.com

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

앞의 예와 이 예에는 세 가지 차이가 있습니다.

  1. 방법은 지금입니다.POST.
  2. 경로는 지금이다./login.
  3. 본문이라고 불리는 여분의 줄이 있다.

RESTful RESTful입니다.POST,GET,PUT , , , , 입니다.DELETE모든 것에 대해 다른 경로를 가질 필요 없이 데이터에 대해 어떤 유형의 작업을 수행해야 하는지 서버에 알립니다.

백본으로 돌아가다

이제 HTTP의 구조에 대해 좀 더 이해하셨으면 좋겠습니다.하지만 이것이 Backbone과 어떤 관계가 있을까요?알아보자!

다음은 Backbone 응용 프로그램에서 찾을 수 있는 작은 코드 청크입니다.

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

작성(POST)

RESTful API를 사용하고 있기 때문에 Backbone이 모든 책 정보를 작성, 읽기, 업데이트 및 삭제하기 위해 필요한 정보는 이것뿐입니다.새 책을 만드는 것부터 시작합시다.다음의 코드로 충분합니다.

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

Backbone은 새로운 책을 작성하려는 을 인식하고 다음 요청을 하기 위해 제공된 정보를 통해 새 책을 작성하려고 합니다.

POST /books HTTP/1.1
Host: example.com

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

읽기(GET)

마나나 쉬웠? ???하지만 우리는 언젠가 그 정보를 되찾고 싶습니다..new BookCollection().fetch()backbone은 당신이 책을 읽으려고 하는 것을 이해하고 다음과 같은 요청을 합니다.

GET /books HTTP/1.1
Host: example.com

BAM. ★★★★★★★★★★★★★★★★★★★★.하지만 책 한 권에 대한 정보만 원했다고 칩시다.42번이라고 해 칩시다new BookModel({ id: 42 }).fetch()backbone은 당신이 권의 책을 읽으려고 한다는 것을 알고 있습니다.

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

갱신(PUT)

오, 오웰씨 이름의 철자가 틀렸다는 걸 깨달았어요손쉬운 수리!

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

은 backbone이라고 있어도 합니다.brandNewBook이미 저장되었습니다.그래서 이 을 갱신합니다.

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

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

삭제(DELETE)

마침내, 당신은 정부가 당신의 일거수일투족을 추적하고 있다는 것을 깨닫고, 당신이 1984년 책을 읽었다는 사실을 덮어둘 필요가 있다.아마 너무 늦었지만 시도해보는 게 나쁠 건 없어요. '오빠'를 실행한다.brandNewBook.destroy() 및 백본 당신의 위험을 깨닫고 지각하게 된다. 는 다음 요청과 함께 책을 삭제합니다.

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

그리고 그것은 사라지고 없다.

기타 유용한 Tidbit

서버에 송신하는 내용에 대해서는, 많은 이야기를 해 왔습니다만, 반환되는 내용에 대해서도 검토하는 것이 좋을지도 모릅니다.이치노 게 있어요GET/books으로, 이론적으로, 우리는 다음과 같은 것을 되찾아야 한다.

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

★★★★★★★★★★★★★★★★★★★★★★★★★★게다가 Backbone은 이 문제를 즉시 해결하는 방법을 알고 있습니다.지만 조조 ?꾸 꾸? ???id그것은 식별하기 위한 분야였다.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은 모든 API가 조금씩 다르다는 것을 알고 있으며, 그 점은 괜찮습니다. 할 주기만 됩니다.idAttribute다음과 같은 경우:

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

컬렉션에서 모형을 확인하므로 이 정보만 모형에 추가하면 됩니다.그래서 Backbone은 당신의 API를 이해해요!안 해도...

이것의 단점은 기억해야만 한다는 것이다.bookId경우에 따라서는예를 들어, 이전에 사용하던 장소new BookModel({ id: 42 }).fetch()한 권의 책에 대한 데이터를 로드하려면, 우리는 이제 그 자료를 사용해야 할 것이다.new BookModel({ bookId: 42 }).fetch().


이 반응이 유익하고 참을 수 없을 정도로 지루하지 않았기를 바랍니다.많은 사람들에게 HTTP 프로토콜과 RESTful 아키텍처는 그다지 자극적인 주제가 아니라는 것을 깨닫고 약간의 재미를 더하려고 노력했습니다.나중에 이 모든 것을 읽었을 때 후회할 수도 있지만, 지금은 새벽 2시이기 때문에, 어쨌든 이것을 제출하겠습니다.

ajax 콜(/collection'에 대한 POST, GET 등)을 이해하고 있다고 가정합니다.

백본은 동기화를 사용하여 일부 모델 및 수집 방식을 REST 콜에 라우팅합니다.

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

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

사용하는 URL(/collection)을 모델/컬렉션에 전달하면 Backbone이 콜을 처리합니다.

언급URL : https://stackoverflow.com/questions/18504235/understand-backbone-js-rest-calls

반응형