Backbone.js 모델 데이터를 저장하는 방법

Backbone.js 모델 데이터를 저장하는 방법

저는 프런트 엔드 개발에 더 관심이 많아서 최근 Backbone.js를 앱으로 탐색하기 시작했습니다.모델 데이터를 서버에 보관하고 싶습니다.

모델 데이터를 저장하는 다양한 방법을 알려주세요(json 포맷으로).서버측에서 Java를 사용하고 있습니다.또, 데이터 보존에 REST 를 사용하는 것을 주로 봐 왔습니다.저는 프런트 엔드 개발에 더 관심이 많아서 REST나 다른 비슷한 것에 대해서는 잘 모릅니다.

간단한 예를 들어 그 과정을 설명해 주시면 감사하겠습니다.

기본적으로 모델에는 특정 모델이 가질 수 있는 다양한 값인 속성이라는 속성이 있습니다.백본은 JSON 개체를 사용하는 다양한 방법을 사용하여 이러한 값을 입력하는 간단한 방법으로 JSON 개체를 사용합니다.예:

Donuts = Backbone.Model.extend({
    defaults: {
        flavor: 'Boston Cream',  // Some string
        price: '0.50'  // Dollars
    }
});

모델을 입력하려면 몇 가지 방법이 있습니다.예를 들어 JSON 또는 set()이라는 이름의 메서드를 사용하여 모델인스턴스를 설정할 수 있습니다.이 메서드는 속성의 JSON 개체를 가져옵니다.

myDonut = new Donut({'flavor':'lemon', 'price':'0.75'});
mySecondHelping = new Donut();
mySecondHelping.set({'flavor':'plain', 'price':'0.25'});

console.log(myDonut.toJSON());
// {'flavor':'lemon', 'price':'0.75'}
console.log(mySecondHelping.toJSON());
// {'flavor':'plain', 'price':'0.25'}

이를 통해 모델을 저장하고 서버에 유지할 수 있습니다."REST/RESTFUL이란 무엇인가?"에 대한 자세한 내용이 많이 있습니다.그리고 이 모든 것을 여기서 간단히 설명하기란 다소 어렵다.특히 REST와 Backbone의 절약에 관해서는 HTTP 요구의 의미와 데이터로 무엇을 하고 있는지에 대해 충분히 이해할 필요가 있습니다.

두 가지 HTTP 요청에 익숙할 것입니다.GET 및 POST.RESTful 환경에서 이러한 동사는 Backbone이 가정하는 특정 용도에 특별한 의미를 가집니다.서버에서 특정 리소스(예: 이전에 저장한 도넛 모델, 블로그 항목, 컴퓨터 사양)를 가져오고 해당 리소스가 존재하는 경우 GET 요청을 수행합니다.반대로, 새로운 자원을 작성할 때는, POST 를 사용합니다.

Backbone을 사용하기 전에는 다음 두 가지 HTTP 요청 메서드는 한 번도 만져본 적이 없습니다.저장 및 삭제.이 두 동사는 또한 백본에 특정한 의미를 가지고 있다.리소스를 업데이트하려면(예: 레몬 도넛의 맛을 리몬 도넛으로 변경하는 등) PUT 요청을 사용합니다.서버에서 해당 모델을 모두 삭제하려면 DELETE 요청을 사용합니다.

RESTful 앱에서는 사용하는 요청 동사의 종류에 따라 적절한 작업을 수행하는 URI 지정이 이루어지기 때문에 이러한 기본은 매우 중요합니다.예를 들어 다음과 같습니다.

// The URI pattern
http://localhost:8888/donut/:id

// My URI call
http://localhost:8888/donut/17

그 URI에 GET을 하면 ID가 17인 도넛 모델이 나옵니다.:id는 서버 측의 저장 방법에 따라 달라집니다.데이터베이스 테이블에 있는 도넛 리소스의 ID일 수 있습니다.

새로운 데이터로 URI에 PUT을 하면 업데이트하여 데이터를 절약할 수 있습니다.그 URI를 삭제하면 시스템에서 삭제됩니다.

POST를 사용하면 리소스를 아직 생성하지 않았으므로 리소스 ID가 확립되지 않습니다.리소스를 작성하는 URI 타깃은 다음과 같습니다.

http://localhost:8888/donut

URI에 ID fragment가 없습니다.이러한 모든 URI 설계는 자원과 관련된 사용자의 생각에 달려 있습니다.다만, RESTful 디자인에 관해서는, 당신의 HTTP 요구에 따른 동작의 동사와 URI를 읽기 쉽고 인간 친화적으로 만드는 명사로서의 자원을 유지하고 싶다고 생각하고 있습니다.

듣고 있어? :-)

이제 Backbone에 대해 생각해 보겠습니다.등뼈는 당신에게 많은 도움이 되기 때문에 훌륭합니다.우리의 도넛과 두 번째 도넛을 구하려면델은 다음과 같은 지원을 제공합니다.

myDonut.save();
mySecondHelping.save();

백본은 스마트합니다.방금 도넛 리소스를 만든 경우 서버의 ID가 없습니다.backbone은 내부적으로 사용하는 cID라고 불리는 것을 가지고 있습니다만, backbone에는 공식 ID가 없기 때문에 새로운 자원을 작성해야 한다는 것을 인식하고 POST 요구를 송신합니다.서버로부터 모델을 취득했을 경우는, 정상적으로 동작했을 경우는 ID가 붙어 있을 가능성이 있습니다.이 경우 save() backbone은 서버 갱신을 전제로 PUT를 송신합니다.특정 리소스를 가져오려면 Backbone 메서드 .fetch()를 사용하여 GET 요청을 전송합니다.모델에서 .destroy()를 호출하면 DELETE가 전송됩니다.

위의 예에서는 URI의 위치를 Backbone에 명시적으로 알리지 않았습니다.다음 예에서는 그렇게 하겠습니다.

thirdHelping = Backbone.Model.extend({
    url: 'donut'
});
thirdHelping.set({id:15});  // Set the id attribute of model to 15
thirdHelping.fetch();  // Backbone assumes this model exists on server as ID 15

은 세 을 합니다.★★에서의:http://localhost:8888/donut/15사이트 루트에 /donut 스템을 추가합니다.

아직도 내 옆에 있다면, 좋아.생각합니다.네가 헷갈리지 않는다면.그래도 열심히 할 거예요.두 번째 부분은 SERVER 쪽입니다.지금까지 HTTP의 다른 동사와 그 동사의 의미에 대해 이야기했습니다.사용자, 백본 및 서버가 공유해야 하는 의미입니다.

GET, POST, PUT, DELETE를 선택합니다.알 수 GET, 및 URI를 수 .GET, PUT, DELETE는 URI를 가리킵니다.http://localhost:8888/donut/07서버가 이러한 HTTP 요청을 구별할 수 없는 한 해당 리소스로 무엇을 해야 할지 매우 혼란스러울 수 있습니다.

이때부터 RESTful 서버의 엔드 코드를 생각하게 됩니다.루비를 좋아하는 사람도 있고, .net을 좋아하는 사람도 있고, 나는 PHP를 좋아합니다.특히 SLIM PHP 마이크로프레임워크를 좋아합니다.SLIM PHP는 RESTful 액티비티에 대응하는 매우 우아하고 심플한 툴 세트를 갖춘 마이크로 프레임입니다.위의 예와 같이 루트(URI)를 정의할 수 있으며 콜이 GET, POST, PUT 또는 DELETE 중 어느 쪽인지에 따라 올바른 코드가 실행됩니다.리세스나 토닉과 같은 SLIM과 유사한 솔루션이 있습니다.케이크나 CodeIgniter 같은 큰 프레임워크도 미니멀을 좋아하지만 비슷한 일을 할 수 있다고 생각합니다.내가 슬림 좋아한다고 했지?;-)

서버상의 발췌 코드(구체적으로는 루트에 관한 것)는, 다음과 같습니다.

$app->get('/donut/:id', function($id) use ($app) {
    // get donut model with id of $id from database.
    $donut = ...
    
    // Looks something like this maybe:
    // $donut = array('id'=>7, 'flavor'=>'chocolate', 'price'=>'1.00')

    $response = $app->response();
    $response['Content-Type'] = 'application/json';
    $response->body(json_encode($donut));
});

여기서 중요한 것은 Backbone은 JSON 객체를 상정하고 있다는 것입니다.가능하면 항상 서버에서 content-type을 'application/json'으로 지정하고 json 형식으로 인코딩하십시오.그런 다음 백본은 JSON 개체를 수신하면 해당 개체를 요청한 모델을 채우는 방법을 알고 있습니다.

SLIM PHP를 사용하면 위와 거의 비슷하게 루트가 동작합니다.

$app->post('/donut', function() use ($app) {
    // Code to create new donut
    // Returns a full donut resource with ID
});
$app->put('/donut/:id', function($id) use ($app) {
    // Code to update donut with id, $id
    $response = $app->response();
    $response->status(200);  // OK!
    // But you can send back other status like 400 which can trigger an error callback.
});
$app->delete('/donut/:id', function($id) use ($app) {
    // Code to delete donut with id, $id
    // Bye bye resource
});

그럼 거의 왕복이 다 됐구나!가서 탄산음료 가져와.다이어트 마운틴듀 좋아해요.나도 하나 사줘.

서버가 요청을 처리하고 데이터베이스와 리소스를 사용하여 응답을 준비하면(단순한 http 상태 번호든 전체 JSON 리소스든), 데이터가 백본으로 돌아와 최종 처리를 수행합니다.

save(), fetch() 등의 메서드를 사용하여 성공 및 오류 시 옵션 콜백을 추가할 수 있습니다.이 케이크의 설정 예를 다음에 나타냅니다.

Cake = Backbone.Model.extend({
    defaults: {
        type: 'plain',
        nuts: false
    },
    url: 'cake'
});

myCake = new Cake();
myCake.toJSON()  // Shows us that it is a plain cake without nuts

myCake.save({type:'coconut', nuts:true}, {
    wait:true,
    success:function(model, response) {
        console.log('Successfully saved!');
    },
    error: function(model, error) {
        console.log(model.toJSON());
        console.log('error.responseText');
    }
});

// ASSUME my server is set up to respond with a status(403)
// ASSUME my server responds with string payload saying 'we don't like nuts'

이 예에는 다음과 같은 몇 가지 다른 점이 있습니다.저장하기 전에 속성을 set()하는 대신 새 속성을 저장 콜에 전달한 것을 알 수 있습니다.Backbone은 JSON 데이터를 사방에 가져가 챔피언처럼 다루는 데 능한 닌자입니다.그래서 나는 코코넛과 견과류로 내 케이크를 구하고 싶어.(그게 견과류 2개야?)어쨌든, 나는 두 가지 물건을 내 저장소로 넘겼다.특성 JSON 개체 및 일부 옵션.첫 번째 {wait:true}는 서버 측 트립이 성공할 때까지 클라이언트 측 모델을 업데이트하지 않음을 의미합니다.서버에서 응답이 정상적으로 반환되면 콜백이 성공합니다.단, 이 예에서는 에러가 발생하므로(200 이외의 상태는 에러 콜백을 사용하는 것을 Backbone에 나타냅니다) 변경은 없습니다.그것은 여전히 평범하고 견과류가 없어야 한다.서버가 반환한 에러 오브젝트에도 액세스 할 수 있습니다.문자열을 돌려보냈지만 더 많은 속성을 가진 JSON 오류 개체일 수 있습니다.이것은 error.responseText 속성에 있습니다.네, '우리는 견과류를 좋아하지 않아요.'

축하해요.모델 셋업, 서버 측 저장, 복귀 등 첫 번째 완전 왕복입니다.이 답변 서사시가 이 모든 것이 어떻게 결합되는지에 대한 아이디어를 제공해 주길 바랍니다.물론 많은 세부사항들이 있지만 Backbone save, RESTful 동사, 서버측 액션, Response 등의 기본 아이디어는 여기에 있습니다.Backbone 매뉴얼(다른 문서에 비해 매우 읽기 쉬운 문서)을 계속 읽어보시기 바랍니다.단, 이 문서에는 충분한 시간이 소요됩니다.계속하면 할수록 더 유창해질 것이다.저는 매일 Backbone을 통해 새로운 것을 배우고 있습니다.그리고 이 프레임워크에서 당신의 유창성이 향상되는 것을 보면 매우 즐겁습니다. :-)

편집: 유용한 리소스:

SO에 관한 기타 유사한 답변: 백본을 사용한 모델 ID 생성 방법

REST : http://rest.elkstein.org/ http://www.infoq.com/articles/rest-introduction

언급URL : https://stackoverflow.com/questions/9816274/ways-to-save-backbone-js-model-data