Способи збереження даних моделі Backbone.js?

Question 1

Я більше займаюся розробкою інтерфейсу, і нещодавно почав досліджувати Backbone.js у своєму додатку. Я хочу зберегти дані моделі на сервері.

Не могли б ви пояснити мені різні способи збереження даних моделі (у форматі json). Я використовую Java на стороні сервера. Також я в основному бачив, як REST використовується для збереження даних. Оскільки я більше займаюся розробником інтерфейсу, я не знаю про REST та інші подібні речі.

Було б чудово, якби хтось міг пояснити мені процес на якомусь простому прикладі.

Question 2

В основному моделі мають властивість, яка називається атрибутами, і це різні значення, які може мати певна модель. Backbone використовує об'єкти 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 та Backbone, то вам слід обернутися головою - це семантика запитів HTTP та те, що ви робите зі своїми даними.

Ви, мабуть, звикли до двох типів запитів HTTP. GET та POST. У середовищі RESTful ці дієслова мають особливе значення для конкретного використання, яке передбачає Backbone. Коли ви хочете отримати певний ресурс із сервера (наприклад, модель пампушки, яку я зберігав минулого разу, запис у блозі, специфікацію комп’ютера) і цей ресурс існує, ви робите запит GET. І навпаки, коли ви хочете створити новий ресурс, ви використовуєте POST.

До того, як я потрапив у Backbone, я навіть ніколи не торкався наступних двох методів запиту HTTP. ВСТАНОВИТИ І ВИДАЛИТИ. Ці два дієслова також мають специфічне значення для Backbone. Коли ви хочете оновити ресурс (наприклад, змінити смак лимонного пончика на пончик з лимоном тощо), ви використовуєте запит PUT. Коли ви хочете видалити цю модель із сервера разом, ви використовуєте запит DELETE.

Ці основи дуже важливі, оскільки з вашим додатком RESTful у вас, ймовірно, буде позначення URI, яке буде виконувати відповідне завдання на основі типу дієслова запиту, який ви використовуєте. Наприклад:

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

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

Якщо я зроблю GET до цього URI, він отримає модель пампушки з ідентифікатором 17. Ідентифікатор: залежить від того, як ви зберігаєте його на стороні сервера. Це може бути просто ідентифікатор вашого ресурсу пампушки в таблиці бази даних.

Якщо я вкладу в цей URI нові дані, я б оновлював їх, зберігаючи над ними. І якщо я ВИДАЛИТУ до цього URI, то це видалить його з моєї системи.

З POST, оскільки ви ще не створили ресурс, він не матиме встановленого ідентифікатора ресурсу. Можливо, ціль URI, яку я хочу створити, є просто такою:

http://localhost:8888/donut

У URI немає фрагмента ідентифікатора. Усі ці конструкції URI залежить від вас і від того, як ви думаєте про свої ресурси. Що стосується дизайну RESTful, я розумію, що ви хочете зберегти дієслова своїх дій у своєму HTTP-запиті та ресурси як іменники, які роблять URI легким для читання та зручним для людини.

Ти все ще зі мною? :-)

Тож повернімося до роздумів про Backbone. Магістраль чудова, бо робить для вас велику роботу. Щоб врятувати наш пончик та secondHelping, ми просто робимо наступне:

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

Магістраль розумна. Якщо ви щойно створили ресурс пампушки, він не матиме ідентифікатора сервера. У ньому є щось під назвою cID, що Backbone використовує внутрішньо, але оскільки у нього немає офіційного ідентифікатора, він знає, що йому слід створити новий ресурс, і він надсилає запит POST. Якщо ви отримали свою модель із сервера, вона, ймовірно, матиме ідентифікатор, якщо все було правильно. У цьому випадку при збереженні () Backbone передбачає, що ви хочете оновити сервер, і він надішле PUT. Щоб отримати конкретний ресурс, ви б використали метод Backbone .fetch (), який надсилає запит GET. Коли ви зателефонуєте .destroy () на моделі, він надішле DELETE.

У попередніх прикладах я ніколи прямо не говорив Backbone, де знаходиться URI. Зробимо це в наступному прикладі.

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просто додасть / пончик стебло до кореня вашого сайту.

Якщо ти все ще зі мною, добре. Я думаю. Якщо ви не розгублені. Але ми все одно будемо нав'язуватись. Друга частина - це сторона SERVER. Ми говорили про різні дієслова HTTP та семантичні значення цих дієслів. Значення, якими повинні поділятися ви, магістраль та ваш сервер.

Ваш сервер повинен розуміти різницю між запитом GET, POST, PUT та DELETE. Як ви бачили у прикладах вище, GET, PUT та DELETE можуть вказувати на один і той же URI, http://localhost:8888/donut/07якщо ваш сервер не зможе розрізнити ці HTTP-запити, він буде дуже заплутаний щодо того, що робити з цим ресурсом.

Це коли ви починаєте думати про свій кінцевий код сервера RESTful. Комусь подобається Рубі, комусь .net, мені подобається PHP. Особливо мені подобається мікрофреймворк SLIM PHP. SLIM PHP - це мікрофреймворк, який має дуже елегантний та простий набір інструментів для роботи з RESTful діями. Ви можете визначити маршрути (URI), як у прикладах вище, і залежно від того, чи є виклик GET, POST, PUT або DELETE, він виконає правильний код. Є й інші рішення, схожі на SLIM, такі як Recess, Tonic. Я вважаю, що більші фреймворки, такі як Cake та CodeIgniter, також роблять подібні речі, хоча мені подобається мінімум. Я сказав, що мені подобається Slim? ;-)

Ось так може виглядати код витягу на сервері (тобто, зокрема, щодо маршрутів).

$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. Завжди нехай ваш сервер позначає тип вмісту як 'application / json' і кодує його у форматі json, якщо можете. Потім, коли Backbone отримує об'єкт 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
});

Отже, ви майже здійснили повну подорож туди і назад! Піди по газировку. Мені подобається Diet Mountain Dew. Отримайте теж для мене.

Як тільки ваш сервер обробляє запит, робить щось із базою даних та ресурсом, готує відповідь (будь то простий номер стану http або повний ресурс JSON), тоді дані повертаються до Backbone для остаточної обробки.

За допомогою методів 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'

У цьому прикладі є кілька різних речей. Ви побачите, що для мого торта, замість того, щоб встановлювати () атрибути перед збереженням, я просто передав нові атрибути своєму дзвінку збереження. Backbone - симпатичний ніндзя, який всюди збирає дані JSON і обробляє їх як чемпіон. Тож я хочу зберегти свій торт з кокосами та горіхами. (Це 2 горіхи?) У будь-якому разі, я передав два об’єкти для свого збереження. Атрибути об'єкта JSON І деякі параметри. Перше, {wait: true} означає, що не оновлюю мою клієнтську модель, доки відключення сервера не буде успішним. Зворотний виклик успіху відбудеться, коли сервер успішно поверне відповідь. Однак, оскільки цей приклад призводить до помилки (статус, відмінний від 200, буде вказувати Backbone на використання зворотного виклику помилки), ми отримуємо представлення моделі без змін. Він все одно повинен бути простим і без горіхів. Ми також маємо доступ до об’єкта помилки, який сервер надіслав назад. Ми повернули рядок, але це може бути об’єкт помилки JSON з більшою кількістю властивостей. Це знаходиться в атрибуті error.responseText. Так, "ми не любимо горіхи".

Вітаю. Ви здійснили свою першу досить повну подорож із налаштування моделі, збереження її на стороні сервера та назад. Я сподіваюся, що ця епопея відповідей дасть вам ІДЕЮ про те, як це все поєднується. Звичайно, є багато деталей, про які я вже курсував, але основні ідеї Backbone save, RESTful дієслова, дії на стороні сервера, Response тут. Продовжуйте переглядати документацію Backbone (яку дуже легко читати в порівнянні з іншими документами), але майте на увазі, що це вимагає часу, щоб обернути голову. Чим більше ви будете дотримуватися цього, тим вільнішим ви будете. Щодня я вивчаю щось нове з Backbone, і це стає справді цікавим, коли ви починаєте робити стрибки і бачите, як ваша плавність у цій структурі зростає. :-)

Щасливого кодування!

РЕДАКТУВАТИ: Корисні ресурси:

Інші подібні відповіді на SO: Як генерувати ідентифікатори моделей за допомогою Backbone

На REST: http://rest.elkstein.org/ http://www.infoq.com/articles/rest-introduction http://www.recessframework.org/page/towards-restful-php-5-basic- поради