Как подружить DRF и Ember.JS?

Question

[Абдулла Мурсалов]

Хочу подробно узнать, как правильно работать с этой связкой.
1. Как выводить данные в Ember из DRF? Какие шаги нужно выполнить?
Прописал роутрер:

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
    this.route('products', { path: 'products' });
    this.route('product', {path: 'product/:product_id'});
});

export default Router;

... и сам роут:

import Ember from 'ember';

export default Ember.Route.extend({
	model: function () {
		return this.store.find('product');
	}
});

... описал модель:

import DS from 'ember-data';

export default DS.Model.extend({
	scu: DS.attr(),
	full_title: DS.attr(),
	price: DS.attr()
});

... создал адаптер:

import DS from 'ember-data';

export default DS.RESTAdapter.extend({
	host: 'http://127.0.0.1:8000',
	namespace: 'api'
});

Ничего не работает. Объясните как вывести данные из примера ниже? Для чего нужны serializers?

2. В каком формате нужно отдавать JSON? Например api/products отдает JSON вида:

[
    {
        "id": 1,
        "scu": "191625",
        "title": "hp ProBook 450 G2",
        "price": "53598.00",
        "url": "http://127.0.0.1:8000/api/products/1/",
        "category": "Ноутбуки",
        "images": [
            {
                "id": 1,
                "image": "http://127.0.0.1:8000/media/catalog/product/images/191625/01.jpg"
            }
        ]
    },
   ...
]

Однако, это не соответсвует JSON API, я пока не знаю насколько это важно, но в документации эмбер говорится, что нужно соответствовать.
Как реализовать это в DRF?

3. С Ember работаю с помощью Ember CLI. Ember хостится на localhost: 4200, джанго на localhost:8000. При обращении к API Ember выдавал ошибку XMLHttpRequest cannot load. Решил это с помощью Django Cors Header прописав в settings.py
CORS_ORIGIN_ALLOW_ALL = True. Как я понимаю в деплое такой проблемы не будет? И какие проблемы с безопасностью это влечет?

4. Как избежать обработки URL Джангой?

Порекомендуйте, что почитать по этой теме. Если нет какого-то сводного руководства, можно будет на основе этого поста написать небольшой туториал.

Answer 1

[Алексей]

Сам такую связку не готовил, но попробуйте покрутить проект django-rest-framework-json-api

Comments

[Абдулла Мурсалов]

да, но он отдает

{
    "data": [
        {
            "type": "products",
            "id": "1",
            "attributes": {
                "scu": "191625",
                "title": "hp ProBook 450 G2",
                "full_title": "hp ProBook 450 G2 < J4S38EA#ACB > i7 4510U / 8 / 750 / DVD-RW / WiFi / BT / Win7Pro / 15.6\" / 2.22 кг",
                "price": "53598.00"
            },
            "relationships": {
                "images": {
                    "data": [
                        {
                            "type": "productimages",
                            "id": "1"
                        }
                    ]
                }
            },
            "links": {
                "self": "http://127.0.0.1:8000/api/products/1/"
            }
        },
}

в то время как Ember требует

{
  "posts": [
    {
      "id": 1,
      "title": "I'm Running to Reform the W3C's Tag",
      "author": "Yehuda Katz"
    },
    {
      "id": 2,
      "title": "Rails is omakase",
      "author": "D2H"
    }
  ]
}

Возможно DRF научить этому? Или нужно писать serializer на стороне Ember?

[Алексей]

к сожалению не подскажу

Answer 2

[Андрей Шерстобитов]

Как раз этот плагин/фреймворк django-rest-framework-json-api и отдает нужный формат для JSONAPIAdaper-а Эмбера.
Вот примеры ответов валидного JSON API сервера - jsonapi.org/examples. И сравните с ответами django-rest-framework-json-api.
А ответы сервера вида:

{
  "posts": [
    {
      "id": 1,
      "title": "I'm Running to Reform the W3C's Tag",
      "author": "Yehuda Katz"
    },
    {
      "id": 2,
      "title": "Rails is omakase",
      "author": "D2H"
    }
  ]
}

- это под RESTAPIAdapter.
И по поводу 4-го вопроса - просто пропишите в роутинге Джанги переход на главную страницу (со скриптами Ембера) с любых адресов, кроме API-шных. И все.

Comments

[Андрей Шерстобитов]

И всегда можно настроить сериалайзер под любые нюансы. Как на прием с сервера. так и на отдачу на сервер от клиента. Все это в Эмбере доступно.

[Абдулла Мурсалов]

Андрей Шерстобитов: спасибо, сейчас-то я уже подразобрался, а пять месяцев назад ничего в этом не смыслил ))

[Андрей Шерстобитов]

Да, я как-то просмотрел дату вопроса))
Просто очень нравится Эмбер и радостно видеть, что интерес к нему растет все больше)
Обращайтесь, если будут вопросы по Эмберу, буду рад помочь. Тоже пришлось повозиться с ним и шишек понабивать) Но это того стоило.

Answer 3

[Станислав Романов]

Тут недавно был вопрос про django rest framework, и работу с адаптером. Посмотрите по тегу Ember.js