Основы полного стека ELI5: прорыв с Django & Emberjs

Автор оригинала: Michael Xavier.

Добро пожаловать в Eli5 Full Stack: прорыв с Django & Emberjs Отказ Это введение в полную разработку стека для всех, особенно начинающие Отказ Мы будем пошаговать через разработку базового веб-приложения. Библиотека сортов. Вместе мы построим спину для хранения данных и восстановленного API для его управления. Затем мы построим интерфейс пользователя передний интерфейс для пользователей для просмотра, добавления, редактирования и удаления данных.

Это не должно быть глубоким погружением в либо Джанго или Эмбежс Отказ Я не хочу, чтобы мы увязли слишком много сложности. Скорее его цель – показать критические элементы основного развития полного стека Отказ Как вышивать вместе задний конец и передний конец в рабочее приложение. Я буду в подробности о программном обеспечении, рамках и инструментах, используемых в процессе. В этом руководстве присутствует каждая команда терминала и линейка кода в окончательном приложении.

Я сохранял каждую часть короткими и до такой степени, что ни одна голова не взрывается. Есть также индикаторы для отметки очков для размышлений, чтобы вы могли вернуться и посмотреть, что мы сделали и сохраняем состояние. Если вы не знаете, что означает что-то, нажмите на связанные статьи, которые подробно объяснят. Помните, что это как введение каждому, включая начинающие Отказ Если вам не нужна рука, нажав на разделы, относящиеся к вам.

Если вы начинаете, я предлагаю вам написать каждую строку кода и запустить каждую команду терминала. Не копируйте и вставьте. Это не погрузится. Возьми свое время и подумайте о том, что вы делаете. Это критическая черта эффективного и самодостаточного программиста. Вы разработаете это со временем, если вы пишете свой собственный код и подумаете о том, что вы пишете. Если вы испортите (посмотрите на мою историю совершения, я определенно сделал) Не потеть. Вернитесь назад. Это не гонка. Вы будете в порядке, если вы возьмете свое время.

Примечание : Я разработал этот учебник на MacBook Pro Runse Macos High Sierra (10.3.6) Отказ Я использую ITERM2 Для терминала и Sublime Text 3 как мой текстовый редактор. Все тестирование использует Хром Браузер и его встроенные инструменты. Фактический код не должен иметь никаких различий. Вы можете Загрузите финальные файлы проекта из репозитория GitHUB Отказ

1.1 Почему я написал это руководство 1.2 заднего конца, передний конец. Какая разница? 1.3 Концепция: Базовая библиотека Приложение 1.4 Структура каталогов проекта 1.5 Настройка каталогов проекта 1.6 Заключение

Раздел 2: Погружение в задний конец

2.1 Установка требуемого программного обеспечения 2.2 Запустите проект Django: сервер 2.3 Запустите приложение Django: Книги 2.4 Опишите книгу Модель 2.5 Зарегистрируйте модель с администратором 2.6 Заключение

Раздел 3: построить сервер, затем отдых

3.1 REST REST REST 3.2 Создание папки API Книги 3.3 Создать книгу Serializer 3.4 Создать представление для получения и почтовых книг Данные 3.5 Создание URL для доступа к данным книги 3.6 Заключение

Раздел 4: Укладка передних фундаментов

4.1 Установка требуемого программного обеспечения 4.2 Начните проект EMBER: клиент 4.3 Отображение книг Данные 4.4 Книги маршрута 4.5 Отображение реальных данных в книгах Маршрут 4.6 Заключение

Раздел 5: Правильные форматы данных, дело с отдельными записями

5.1 Установить Django Read Framework JSON API 5.2 Работа с отдельными записями книги 5.3 Книжный маршрут 5.4 Заключение

Раздел 6: Функциональный передний конец

6.1 Добавление новой книги в базу данных 6.2 Удаление книги из базы данных 6.3 Редактирование книги в базе данных 6.4 Заключение

Раздел 7: Движение на

7.1 Что дальше? 7.2 Дальнейшее чтение

Раздел 1: Что, как, и сжимает

1.1 Почему я написал это руководство

Представьте, что вы недавно присоединились к новой компании. Они были в бизнесе в течение некоторого времени, и их основные продукты уже в производстве. Подумайте о приложении, вы видите сегодня как торт. Процесс выбора ингредиентов, рецепта и положив все вместе … Ну, это хорошо. Вы будете работать на кусках этого готового пирога.

Разработчики в начале проекта уложили определенные конфигурации. Эти изменения и конвенции также разрабатываются с течением времени, когда разработчики приходят и уходят. К тому времени, когда вы приедете, может быть трудно понять, как мы попали в то, где мы находимся. Это была моя ситуация. Я чувствовал, что погружение на весь стек будет единственным способом для меня чувствовать себя комфортно. Это поможет мне понять, откуда мы пришли и как двигаться вперед с программным обеспечением, которое мы строим.

В этом руководстве является кульминацией моего опыта в качестве младшего разработчика программного обеспечения. Я многому учился в свое время с Закрытие папок Отказ Он представляет собой смещение в моем мышлении, как я принимаю шаги к более сложному развитию полной стеки. Он также служит точкой входа для разработчиков на сцене, где они задаются вопросом, как запекается торт. Я надеюсь, что это учебное пособие так же полезно для вас, как мне поучительно для меня.

Примечание : В типичном рабочем процессе разработчик начнет на задней панели, чтобы настроить базу данных и создать API для отдыха. Затем они будут работать на переднем конце и построить пользовательский интерфейс. Все не так просто. Мы делаем ошибки и часто должны идти вперед и назад, чтобы устранить их. Прыжки взад-вперед помогут построить больше соединений в вашем уме. И помочь вам лучше понять, как все кусочки вписываются вместе. Охватите свои ошибки. Вы будете делать много из них!

Примечание2 : Внимание старших разработчиков, младших Devs и дизайнеров! Закрытие папок сейчас нанимает, так что не стесняйтесь связаться.

1.2 Задний конец, передний конец. Какая разница?

Задняя разработка. Фронтальное развитие. Разработка полного стека. Так много развития … В чем вся разница?

Подумайте о предельном развитии как часть приложения, с которой вы видите и взаимодействуете. Например, пользовательский интерфейс является частью переднего конца. Вот где пользователь рассматривает данные и взаимодействует с ним.

Задняя разработка – это все, что хранит и служит данным. Подумайте о том, что происходит, когда вы войти в средний. Ни один из ваших данных профиля пользователя или историй не существует на переднем конце. Он хранится и подается с заднего конца.

Передний конец и задний конец работают вместе, чтобы сформировать приложение. Задний конец имеет инструкции для хранения и обслуживания данных. Передний конец имеет инструкции для захвата данных и как его отобразить.

Узнайте больше о различиях в Эта статья Отказ

1.3 Концепция: приложение базовой библиотеки

Прежде чем мы начнем строить что-либо, давайте описываем наши планы и что мы пытаемся достичь. Мы хотим построить Веб-приложение . называется my_library который работает в браузере. Приложение является именно то, что звучит, как цифровая библиотека книг. Мы не будем иметь дело с фактическим содержанием книги, хотя. У книг будет только название, автора и описание. Держать его просто.

Приложение будет иметь следующие функциональные возможности:

Просмотреть все книги как один список на домашней странице, заказанные по названию
Посмотреть каждую книгу в деталях, отображение его заголовка, автор и описание
Добавить новую книгу с названием полей, автор и описание
Редактировать название существующей книги, автор и описание
Удалить существующую книгу

1.3.1 Последний дизайн и функциональность My_library

Посмотрите на скриншоты ниже. Они изображают окончательный вид и функциональность приложения:

1.4 Структура каталогов проекта

Есть бесчисленные способы структурирования данного проекта. Я буду держать все под одним my_library Папка для простоты, как так:

my_library
  - server
    - server
    - books
      - api
    - db.sqlite3
    - manage.py
  - client
    - app
      - adapters
      - controllers
      - models
      - routes
      - templates
      - styles
      router.js

Это не все папки и файлы, которые будут содержать проект, хотя они основные. Вы заметите довольно много автогенерационных файлов, которые вы можете игнорировать. Хотя вам было бы полезно для чтения документации, которая объясняет их цель.

my_library Справочник содержит папки для подпроекта задней части и переднего конца. Сервер Относится к задней части Django, а клиент Относится к передней части Emberjs.

1.4.1 Вернуться назад

Сервер Содержит еще одну папку, называемую Сервер Отказ Внутри являются конфигурациями верхнего уровня и настройки для заднего конца.
Книги Папка будет содержать все модели, представления и другую конфигурацию для данных книги.
Внутри Книги/API Папка Мы создадим сериализаторы, URL и представления, которые составляют наш API отдыха.

1.4.2 Передний конец

клиент Это наша передняя часть Emberjs. Он содержит маршруты, шаблоны, модели, контроллеры, адаптеры и стили. Router.js Описывает все маршруты приложений.

Давайте пойдем вперед и настроим основной каталог проекта my_library Отказ

1.5 Настройка каталогов проекта

1.5.1 Создать основную папку проекта: my_library

Теперь, когда мы знаем, что мы собираемся построить, давайте займем несколько минут, чтобы настроить главный каталог проекта my_library :

# cd into desktop and create the main project folder
  cd ~/desktop && mkdir my_library

Создать базовый Readme.md Файл внутри папки со следующим содержимым:

# my_library
This is a basic full stack library application built. Check out the tutorial: 'ELI5 Full Stack: Breakthrough with Django & EmberJS'.

Теперь давайте совершим этот проект к новой репозитории Git, как начальная точка проекта.

1.5.2 Установка Git для контроля версий

Git – это программное обеспечение для управления версией. Мы будем использовать его, чтобы отслеживать наш проект и сохранить наше государство пошаговое пошаговое, поэтому мы всегда можем вернуться, если мы сделаем ошибки разбития. Я уверен, что большинство вас уже знаком с этим.

Для непосвященных, вы можете узнать больше здесь Отказ Если у вас нет установленного Git, вы можете скачать его здесь Отказ

Убедитесь, что это установлено с:

$ git --version

1.5.3 Создать новый репозиторий проекта

У меня есть аккаунт с Github Отказ Это популярно и хорошо работает, так что это то, что я буду пользоваться. Не стесняйтесь использовать другие решения, если они вам лучше подойдут.

Создайте новый репозиторий и получите удаленный URL, который должен выглядеть так:

git@github.com:username/repo_name.git

1.5.4 Обязательство и протолкните ваши изменения в репозиторий проекта

Внутри my_library Папка инициализирует пустой репозиторий:

git init

Сейчас Добавьте удаленный URL Таким образом, Git знает, где мы нажимаем наши файлы:

git remote add origin git@github.com:username/repo_name.git
# check that it's been set, should display the origin
  git remote -v

Время толкать наш код в Github:

# check the status of our repo
# should show the new file README.md, no previous commits
  git status
# add all changes
  git add .
# create a commit with a message
  git commit -m "[BASE] Project Start"
# push changes to the repo's master branch
  git push origin master

Удаленные обновления репозитория GIT с изменениями, которые мы нажали:

Теперь, когда у нас есть главный справочник проекта и репозиторий, мы, наконец, можем начать работать на нашем конце!

Примечание : С этой точки зрения я не буду идти в более подробную информацию о коммитах. ОБЗОР И ПОДПИСАТЬ индикатор ниже даст вам знать, когда это хорошее время, чтобы сделать это:

1.6 Вывод

Мы подошли к концу Раздел 1 Со следующими шагами выполнены:

Почувствовал, что мы строим и как это будет работать
Создал my_library Основной каталог проекта
Установлен Гит и создал удаленный репозиторий проекта на GitHub
Инициализировали локальный репозиторий и установите удаленный URL
Создал Readme.md Файл, затем совершил и выдвинул все изменения

Раздел 2: Погружение в задний конец

Этот раздел состоит в том же духе с Django. Мы начнем с установки требуемого программного обеспечения.

Далее мы перейдем к созданию нового проекта Django под названием Сервер и создать новое приложение под названием Книги Отказ В Книги Приложение мы описываем Книга Модель и зарегистрируйте модель с администратором.

Как только мы создадим Суперзор Счет мы можем войти в сайт администратора Django. Мы будем использовать сайт администратора Django для администрирования базы данных и начать посевать его с помощью книжных данных.

2.1 Установить требуемое программное обеспечение

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

2.1.1 Python

Если ваш MacOS в курсе, что он, скорее всего, уже имеет Python 2.7 установлены. Не стесняйтесь использовать либо 2.7 или 3.x Отказ Они одинаковы для целей этого учебника.

Установка проста. Загрузите установщик И установите, как вы бы типичный приложение MacOS. Откройте терминал и убедитесь, что он установлен:

python --version

2.1.2 Пип

Проще говоря, PIP (PIP устанавливает пакеты) – это система управления пакетами. Он используется для установки и управления программными пакетами, написанными на Python. В терминале:

# cd into the desktop
  cd ~/desktop
 
# download the pip Python script
  curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py
 
# run the script
  python get-pip.py
# once installation completes, verify that it's installed
  pip —-version

Доступна полная монтажная документация здесь Отказ

2.1.3 Virtualenv.

Virtualenv – это « » Инструмент для создания изолированных средов Python ‘. Эти среды имеют свои собственные каталоги установки. Они не делится библиотеками с другими. Такие бункеры защищают глобально установленные библиотеки из нежелательных изменений.

С этим мы можем играть с библиотеками Python без возобновления глобальной среды. Например, вы устанавливаете Teambesoftware 1.0 на твоем компьютере. С активированной виртуальной средой вы можете обновить до Teambesoftware 1.2 и использовать его. Это не повлияет на глобальную установку Teambesoftware 1.0 вообще.

Для разработки конкретного приложения вы можете использовать 1.2 и для других контекстов 1.0 будет уместно. Виртуальные среды дают нам возможность отделить эти контексты. Доступна полная монтажная документация здесь Отказ

Теперь откройте терминал для установки VirtualenV:

# use pip to install virtualenv
  pip install virtualenv
# verify that it's installed
  virtualenv —-version

Давайте создадим каталог для размещения нашей виртуальной среды:

# cd into the root directory
  cd ~/
# create a hidden folder called .envs for virtual environments
  mkdir .envs
# cd into the virtual environments directory
  cd .envs

Теперь мы можем создать виртуальную среду для нашего проекта:

# create a virtual environment folder: my_library
  virtualenv my_library
# activate the virtual environment from anywhere using
  source ~/.envs/my_library/bin/activate

Теперь, когда мы создали виртуальную среду под названием my_library Есть несколько правил, чтобы иметь в виду. Убедитесь, что среда всегда активируется перед установкой или обновлением любых пакетов.

Наконец, найдите время, чтобы обновить PIP внутри этой виртуальной среды:

pip install -U pip

2.1.4 Django 1.11 (ЛТС)

Django – это веб-каркас, который « поощряет быстрое развитие и чистый, прагматичный дизайн …

Он предоставляет нам набор общих компонентов, поэтому нам не нужно восстановить все с нуля.

Примеры включают в себя:

Панель управления
способ обработки аутентификации пользователя

Оформить заказ Эта статья Djangogirls Чтобы узнать больше о Джангу и почему он используется.

В этом проекте мы будем использовать Django, чтобы обработать задний конец. Наряду с его дополнениями, Django предоставляет основные инструменты для разработки API отдыха.

# inside my_library with virtualenv activated
  pip install Django==1.11
# verify that it's installed, open up the Python shell
  python
# access the django library and get the version (should be 1.11)
  import django
  print(django.get_version())
# exit using keyboard shortcut ctrl+D or:
  exit()

Доступна полная монтажная документация здесь Отказ

2.2 Начать проект Django: сервер

Давайте использовать Django-admin Для создания нового проекта Django. Это джанго ‘ Утилита командной строки для административных задач ‘:

# cd into the project folder
  cd ~/desktop/my_library
# initialize the virtual environment
  source ~/.envs/my_library/bin/activate
# use Django to create a project: server
  django-admin startproject server
# cd into the new Django project
  cd server
# synchronize the database
  python manage.py migrate
# run the Django server
  python manage.py runserver

Теперь посетите http://localhost: 8000 В вашем браузере и подтвердите, что проект Django работает:

Вы можете выключить сервер CMD + Ctrl Отказ

2.2.1 Создать учетную запись суперпользователя

Мы должны создать Суперзор Чтобы войти в сайт администратора и обрабатывать данные базы данных. Внутри my_library/сервер мы бежим:

# create superuser
  python manage.py createsuperuser

Заполните поля Имя пользователя , Адрес электронной почты (необязательно), а Пароль Отказ Вы должны получить сообщение успеха.

Теперь запустите сервер с Python Manage.py Runserver и пойти в localhost: 8000/admin Чтобы увидеть страницу входа администратора. Введите данные вашего суперпользователя, чтобы войти в систему.

Хороший! У нас есть доступ к сайту администратора Django. Как только мы создадим Книги Модель и выполните соответствующую настройку, мы сможем добавить, редактировать, удалять и просматривать данные книги.

Выйти и выключить сервер с CMD + Ctrl Отказ

2.2.2 Защита наших секретов

Прежде чем двигаться дальше, мы захотите обновить файл settings.py. Он содержит учетные данные аутентификации, которые мы не хотим выставлять публику. Мы захотим сохранить эти полномочия из нашего удаленного хранилища. Есть много способы защиты от себя. Это мой подход к нему:

# create a config.json file to hold our configuration values
  my_library/server/server/config.json

Внутри мы будем хранить наши Secret_key Значение от settings.py под API_KEY :

{
  "API_KEY" : "abcdefghijklmopqrstuvwxyz123456789"
}

В settings.py Импорт JSON Библиотека и загрузить переменные конфигурации:

import os
import json
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
with open(BASE_DIR + '/server/config.json', 'r') as config:
    obj = json.load(config)
SECRET_KEY = obj["API_KEY"]
...

Так что config.json (С секретным ключом) не выталкивается к репозитории, создать .gitignore Файл в my_library Отказ Это игнорирует его (наряду с некоторыми другими аутогенератыми файлами и базой данных):

### Django ###
config.json
*.log
*.pot
*.pyc
__pycache__/
local_settings.py
db.sqlite3
media

Теперь, когда вы совершаете изменения, файлы и папки, перечисленные выше, не добавляются. Наши секреты безопасны, и наше репо не содержит ненужных дополнительных файлов!

2.3 Начать приложение Django: книги

Подумайте о приложениях Django в качестве модулей, которые плагин в ваш проект. Мы создадим приложение под названием Книги Содержащие модели, представления и другие настройки. Вот как мы взаимодействуем с книгами данных в базе данных.

Каковы различия между проектами и приложениями в Джангу? Проверьте эта нить Отказ

# create new app: books
  python manage.py startapp books
# creates directory: my_library/server/books

Теперь мы устанавливаем Книги приложение в Сервер проект. Откройте файл настроек: my_library/server/server/settings.py Отказ

Прокрутите до Stall_apps множество. Django установил свои собственные основные приложения по умолчанию. Установите Книги Приложение в конце массива:

INSTALLED_APPS = [
  ...
  'books'
]

2.4 Опишите модель книги

Далее мы опишем Книга Модель в приложении книг. Откройте файл моделей my_library/server/books/models.py Отказ

Опишите Книга Модель, которая говорит Django, что каждая книга в базе данных будет:

А Название поле длиной до 500 символов
Автор поле до 100 символов
А Описание поле с открытым количеством символов

from django.db import models

class Book(models.Model):
  title       = models.CharField(max_length=500)
  author      = models.CharField(max_length=100)
  description = models.TextField()

2.5 Зарегистрируйте модель книги с администратором

Теперь мы регистрируем Книга Модель с администратором для наших Книги приложение. Это позволяет нам просмотреть его на сайте администратора и манипулировать данными книг оттуда. Откройте файл администратора my_library/сервер/Книги/admin.py и добавить:

from django.contrib import admin
from .models import Book

@admin.register(Book)
class bookAdmin(admin.ModelAdmin):
  list_display = ['title', 'author', 'description']

С новой моделью, созданной, нам придется сделать и запустить миграции так что база данных синхронизируется:

python manage.py makemigrations
python manage.py migrate

Запустите сервер и перейдите в localhost: 8000/admin чтобы залогиниться. Обратите внимание, что модель книги, зарегистрированная в дисплеев администратора:

Нажав на «книги» отображает пустой список, потому что в базе отсутствуют книги в базе данных. Нажмите «Добавить», чтобы начать создание новой книги, чтобы добавить в базу данных. Давай и создайте несколько книг.

Сохранить и вернуться в список, чтобы просмотреть новые данные. Теперь он отображает заголовок, автор и описание ( list_display массив ) поля.

Это здорово. Теперь мы можем просмотреть наши книги базы данных на сайте администратора. Создание, редактирование и функции удаления также доступны.

Примечание : Для простоты мы будем использовать База данных sqlite. Это приходит предустановленным с созданием каждого проекта Django. Не нужно делать дополнительную работу с базами данных для целей настоящего Учебника.

2.6 Вывод

Поздравляю, мы доверяли до конца Раздел 2 ! Это то, что мы сделали до сих пор:

Установлен питон
Используется Python установить Пип Менеджер пакета
Используется Пип Чтобы установить Виртуальский создать виртуальные среды
Создал виртуальную среду в ~/.envs называется моя библиотека
Активировал my_library Окружающая среда и модернизация пипс
Установлен Django 1.11 LTS в пределах my_library среда
Создан наш каталог проекта моя библиотека
Создан проект Django сервер
Создал Суперзор счет для доступа к сайту администратора Django
Защищенные наши секреты, перемещая наши Secret_key в config.json.
Игнорировал аутогенераты и/или чувствительные файлы с .gitignore.
Создано новое приложение под названием книги
Описал Книга модель
Зарегистрирован Книга Модель с администратором
Добавлены данные книг в базу данных

Раздел 3: построить сервер, затем отдых

В Этот раздел Мы используем Django Ress Framework для создания наших Книги API. Он имеет сериализаторы, представления и URL, которые запрашивают, структуру и доставляют данные книги. Данные и методы доступны через конечные точки API.

Эти конечные точки – один конец канала связи. TouchPoints связи между API и другой системой. Другая система в этом контексте является наш клиент Ember Front End. Клиент EMBER будет взаимодействовать с базой данных через конечные точки API. Мы создаем эти конечные точки с Django и Django Read Framework.

Мы использовали Django, чтобы настроить книга Модель и сайт администратора, который позволяет нам взаимодействовать с базой данных. Django Ress Framework поможет нам построить остальные API, что передний конец будет использоваться для взаимодействия с задней частью.

3.1 Конструкция отдыха Django

Django Rest Framework (DRF) строит на вершине Django. Это упрощает создание Redful web apis Отказ Он поставляется с инструментами, чтобы сделать процесс простой.

Разработчики DRF определили общие шаблоны для сериализаторов и просмотров. Поскольку наши данные и какие пользователи могут сделать с помощью простых, мы будем использовать встроенные сериализаторы и представления. Помните, что наши данные книги имеют только три поля Название , Автор и Описание Отказ Пользователи могут создавать новые записи книг, редактирования и удаления существующих записей. Эта функциональность хорошо в пределах базовых общих моделей. Они хорошо поддерживаются встроенными сериализаторами и взглядами. Нам не придется построить их с нуля.

Для более сложных проектов вы захотите перезаписать по умолчанию или сделать свой собственный. Опять же, для целей простоты мы будем использовать то, что выходит из коробки без неоправданной модификации.

3.1.1 Установка Django Rest Framework

Введите my_library каталог и активировать виртуальную среду. Чтобы начать работу с DRF, установите его с помощью Пип :

# enter my_library
  cd ~/desktop/my_library

# activate the virtual environment
  source ~/.envs/my_library/bin/activate

# install Django REST Framework
  pip install djangorestframework
# install Markdown support for the browsable API
  pip install markdown

Теперь открыть my_library/server/server/settings.py Отказ Установите DRF прямо над Книги Приложение в Stall_apps множество:

INSTALLED_APPS = [
  ...
  'rest_framework',
  'books'
]

Добавьте настройки по умолчанию в нижней части файла в качестве объекта, называемого REST_FRAMEWORK :

REST_FRAMEWORK = {
  'DEFAULT_PERMISSION_CLASSES': [      
   'rest_framework.permissions.DjangoModelPermissionsOrAnonReadOnly'
  ]
}

Объект настроек содержит Default_permission_classes ключ с массивом. Единственный элемент в массиве – это класс разрешений. Это « » Позволяет недоброжелательным пользователям иметь доступ только для чтения к API ‘ Отказ Узнайте больше о разрешениях здесь Отказ

3.2 Создать папку API книг

С установленным DRF давайте начнем строить Книги API. Создать новую папку под названием API внутри Книги приложение. Тогда создайте пустую __init__.py Файл внутри: my_library/server/books/api/__ init__.py Отказ

Пустой файл говорит Python, что эта папка – модуль Python. API Папка будет содержать сериализаторы, представления и URL для данных наших книг. Я попаду в значения этих терминов в соответствующих разделах ниже.

3.3 Создать книжный сериализатор

Простые условия, сериализаторы Примите данные базы данных и реструктурируйте ее. Эта структура представляет собой план для передачи данных для альтернативных слоев приложений. Он получает передний конец и бэкэнд, чтобы поговорить друг с другом на общим языку.

Например, передний конец мы создадим ожидает, что ответ возвращается к нему из запроса, который будет в формате JSON. Сериализация данных, которые будут в JSON гарантируют, что передний конец сможет прочитать и написать его.

from rest_framework import serializers
from books.models import Book
class bookSerializer(serializers.ModelSerializer):
  class Meta:
    model = Book
    fields = (
      'id',
      'title',
      'author',
      'description',
    )

Этот сериализатор принимает данные и преобразует его в формат JSON. Это гарантирует, что это понятно для переднего конца.

Импорт

Мы импортируем встроенный сериализаторы от DRF и Книга Модель из наших Книги приложение.

from rest_framework import serializers
from books.models import Book

Класс книгиРиализатора

Для этого проекта мы хотим Сериализатор класс, который ‘ Соответствует моменту поля ‘. Сериализатор должен сопоставить на поля модели Название , Автор и Описание Отказ Мы можем сделать это с Modelerializer Отказ Согласно документации:

Modelerializer Класс такой же, как обычный Сериализатор Класс, кроме того:

Он будет генерировать набор полей для вас, основываясь на модели.
Он будет генерировать валидаторы для сериализатора, такого как уникальные валидаторы.
Он включает в себя простые реализации по умолчанию .create () и .update () Отказ

Встроенные инструменты более чем способны обращаться с нашими основными потребностями.

class bookSerializer(serializers.ModelSerializer):
  class Meta:
    model = Book
    fields = (
      'id',
      'title',
      'author',
      'description',
    )

3.4 Создать представление, чтобы получить и почтить данные книги

Просмотр функций принять веб-запрос и вернуть веб-ответы. Веб-запрос на localhost: 8000/API/Книги Например, вызывает ответ с сервера.

Этот ответ может быть « HTML содержимое веб-страницы или перенаправить или ошибку 404 или документ XML или изображение. Отказ Отказ Или что-нибудь … «В нашем случае мы ожидаем, что данные о возврате книги, структурированные в формате JSON.

Создайте файл представлений в my_library/server/books/api/просмотр .py :

from rest_framework import generics, mixins
from books.models import Book
from .serializers import  bookSerializer
class bookAPIView(mixins.CreateModelMixin, generics.ListAPIView):
  resource_name = 'books'
  serializer_class = bookSerializer
  def get_queryset(self):
    return Book.objects.all()
  def post(self, request, *args, **kwargs):
    return self.create(request, *args, **kwargs)

Импорт

Сначала мы импортируем Джезы и Мистины от DRF. Тогда Книга Модель из наших Книги приложение и книгиРиализатор что мы создали.

Джезы Относится к API мнениям, что « Карта в ваши модели базы данных ‘. Это « » Предварительные представления, которые обеспечивают общие шаблоны ‘. Мистины это классы, которые « Предоставьте действия, которые используются для обеспечения основного поведения просмотра ‘. Модель нашей книги упрощена. У него есть только Название , Автор и Описание Атрибуты, поэтому они предоставляют нам основы, которые нам нужны.

from rest_framework import generics, mixins
from books.models import Book
from .serializers import  bookSerializer

Bookapi View.

Затем мы создаем Bookapiview который принимает в CreateModelmixin и Listapiview Отказ

CreateModelmixin предоставляет .create (запрос, * args, ** kwargs) Метод Отказ Это реализует создание и настойчивость нового экземпляра модели. Когда успешно он возвращает 201 создать отклик. Это поставляется с сериализованным представлением объекта, который он создал.

Например, мы сделаем запрос на почту, чтобы создать новую книгу книги для книги Стива Джобса Уолтером Исаакссоном. Если успешно, мы вернемся к ответу с кодом 201 Отказ Сериализованное представление книги записи, как так:

{
  "data": {
    "type": "books",
    "id":"10",
    "attributes": {
      "title": "Steve Jobs",
      "author": "Walter Isaacson",
      "description": "Based on more than forty interviews with Jobs conducted over two years—as..."
    }
  }
}

Когда не удалось, мы вернемся на 400 плохой запрос Ответ с ошибками деталей. Например, если мы попытаемся создать новую запись книги, но не предоставляйте никаких Название Информация:

{
  "errors":[
    {
      "status": "400",
      "source": {
        "pointer": "/data/attributes/title"
      },
      "detail": "This field may not be blank."
    }
  ]
}

Listapiview Предлагает наши конечные точки только для чтения (Get). Это представляет собой ‘ Коллекция экземпляров модели ‘. Мы используем его, когда мы хотим получить все или много книг.

Bookapiview Также занимается недавно созданным книгиРиализатор для его serializer_class Отказ

Мы устанавливаем Resource_Name к «книгам» на Укажите Тип Ключ в выходе JSON ‘. Слой хранения данных клиента переднего конца будет иметь книга Модель, которая чувствительна к регистру. Мы не хотим книга Модель в Эмбер и Книга Модель в Джангу, чтобы столкнуться. Установка Resource_Name Здесь NIPS этот вопрос в бутоне.

class bookAPIView(mixins.CreateModelMixin, generics.ListAPIView):
  resource_name = 'books'
  serializer_class = bookSerializer

Функции

Функция get_queryset Возвращает все объекты книги в базе данных. пост принимает запрос и аргументы и создает новую запись базы данных книги, если запрос действителен.

def get_queryset(self):
    return Book.objects.all()
def post(self, request, *args, **kwargs):
    return self.create(request, *args, **kwargs)

3.5 Создание URL-адресов для доступа к данным книги

Уровень URL-моделей на карте URL для просмотров. Например, посещение localhost: 8000/API/Книги следует отобразить карту URL. Тогда затем возвращает результаты запроса к этому мнению.

Создайте файл URL-адресов в my_library/server/books/api/urls.py :

from .views import bookAPIView
from django.conf.urls import url
urlpatterns = [
  url(r'^$', bookAPIView.as_view(), name='book-create'),
]

Импорт

Мы импортируем наше представление Bookapiview и URL Отказ Мы будем использовать URL Создать список экземпляров URL.

from .views import bookAPIView
from django.conf.urls import url

Уровень URL Bloodapi

В URLPatterns Массив Мы создаем узор URL со следующей структурой:

шаблон R '^ $'
Путь Python к виду bookapiview.as_view ()
Имя name = 'book-create'

Шаблон R '^ $' это регулярное выражение, которое « соответствует пустой линии/строке ‘. Это означает, что он соответствует localhost: 8000 Отказ Это совпадает с чем-то, что происходит после базового URL.

Мы называем .as_view () на Bookapiview Потому что подключить вид на URL. Это ” это функция (метод класса), которая свяжет [] класс с его URL ‘. Посетите определенный URL и попытки сервера соответствуют его шаблону URL. Этот шаблон будет возвращать Bookapi Посмотреть результаты, которые мы сказали, чтобы ответить.

name = 'Cooke-Create' Атрибут дает нам Имя атрибут. Мы используем его для обозначения нашего URL по всему проекту. Допустим, вы хотите изменить URL или представление, к которому это относится. Измените это здесь. Без Имя Мы должны были бы пройти через весь проект, чтобы обновить каждую ссылку. Проверьте эта нить узнать больше.

urlpatterns = [
  url(r'^$', bookAPIView.as_view(), name='book-create'),
]

Уровень URL-адреса сервера

Теперь давайте откроем Сервер URL-адрес файла my_library/server/server/urls.py :

from django.conf.urls import url, include
from django.contrib import admin
urlpatterns = [
  url(r'^admin/', admin.site.urls),
  url(r'^api/books', include('books.api.urls', 
                              namespace='api-books'))
]

Здесь мы импортируем включить и создать R '^ API/Книги' Узор, который принимает в любые URL-адреса, которые мы создали в API папка. Теперь базовый URL для нашего Книги URL API становится localhost: 8000/API/Книги Отказ Посещение этого URL будет соответствовать нашему R '^/API/Книги' шаблон. Это соответствует R '^ $' Узор, который мы построили в Книги API.

Мы используем nameSpace = 'API-книги' Так что URL-адреса не сталкиваются друг с другом. Это произойдет, если они назвали то же самое в другом приложении, которое мы создаем. Узнайте больше о том, почему мы используем пространства имен в эта нить Отказ

3.5.1 Демонстрация: просмотр книг API

Теперь, когда у нас есть настройка базовой основы для отдыха, давайте проверим данные, которые возвращается задний конец. С сервером работает, посетите localhost: 8000/API/Книги Отказ Roadiable API должен вернуть что-то вроде этого:

3.6 Вывод

Удивительно, мы идем сейчас. К концу Раздел 3 Мы завершили следующие шаги:

Установлен Django Ress Framework в наш проект
Начал строить Книги API.
Создал сериализатор для книг
Создал Вид для книг
Создано URL-адреса для книг
Просмотр книг API, который возвращает данные книги с заднего конца

Раздел 4: Укладка передних фундаментов

В этом разделе мы сдвигаем наше внимание на передний конец и начните работать с Ember Framework. Мы устанавливаем требуемое программное обеспечение, создать базовый DOM, стили, создайте книга Модель и Книги маршрут. Мы также загрузим фальшивые данные книги для демонстрационных целей, прежде чем мы продолжим доступ к реальным данным с конца.

4.1 Установить требуемое программное обеспечение

Чтобы начать впереди разработки, нам нужно установить программное обеспечение:

4.1.1 Nodejs и NPM

Nodejs – это среда сервера с открытым исходным кодом. Нам не нужно входить в детали прямо сейчас. NPM – это менеджер пакетов для пакетов Node.js. Мы используем его для установки пакетов, таких как Ember CLI.

Установите Nodejs и NPM, используя Установочный файл с официального сайта Отказ

После завершения установки убедитесь, что все установлено:

node --version
npm --version

4.1.2 Ember Cli.

Давайте использовать NPM для установки Ember CLI. Это « Официальная утилита командной строки, используемая для создания, сборки, обслуживания и тестирования Ember.js Приложения и аддоны ‘. Ember CLI поставляется со всеми инструментами, которые нам нужно построить передний конец нашего приложения.

# install Ember CLI
  npm install -g ember-cli
# check that it's installed
  ember --version

4.2 Начните проект Ember: клиент

Давайте создадим передний клиент под названием клиент Использование Ember CLI:

# cd into the main project folder
  cd ~/desktop/my_library
# create a new app: client
  ember new client
# cd into the directory
  cd client
# run the server
  ember s

Перейти к http://localhost: 4200 И вы должны увидеть этот экран:

Проект Base Ember Client работает как ожидалось. Вы можете выключить сервер Ctrl + C Отказ

4.2.1 Обновление .gitignore с эксклюзиями Ember

Прежде чем мы сделаем какие-либо новые коммиты, давайте обновим .gitignore файл. Мы хотим исключить ненужные файлы из репо. Добавьте в файл ниже раздела Django:

...
### Ember ###
/client/dist
/client/tmp
# dependencies
/client/node_modules
/client/bower_components
# misc
/client/.sass-cache
/client/connect.lock
/client/coverage/*
/client/libpeerconnection.log
/client/npm-debug.log
/client/testem.log
# ember-try
/client/.node_modules.ember-try/
/client/bower.json.ember-try
/client/package.json.ember-try

4.3 Отображение данных книг

4.3.1 Настройка DOM

Теперь, когда мы создали базовый проект, давайте создадим базовый дом и стили. Я не делаю ничего фантастического здесь. Наименьшее необходимо иметь наши данные, отображаемые в читаемом формате.

Найдите файл Клиент/приложение/шаблоны/приложение .hbs Отказ Избавиться от {{добро пожаловать}} и комментарии.

Далее создайте Div С классом .nav Отказ Используйте встроенный встроенный {{# Link-to}} хелпер, чтобы создать ссылку на маршрут Книги (Мы создадим это позже):


  {{#link-to 'books' class="nav-item"}}Home{{/link-to}}

Оберните все, включая {{outlet}} в оформлении Div с .Онтейнер класс. Каждый шаблон маршрута будет отображаться внутри {{outlet}} :


  
    {{#link-to 'books' class="nav-item"}}Home{{/link-to}}
  
{{outlet}}

Это шаблон для родительского уровня Приложение маршрут. Любые подпункты, такие как Книги сделает внутри {{outlet}} Отказ Это означает, что NAV всегда будет виден на экране.

4.3.2 Создание стилей

Я не собираюсь попасть в Nitty-Gritty от CSS. Это довольно просто выяснить. Найдите файл Клиент/приложение/стили/app.css и добавьте следующие стили:

Переменные и утилиты

:root {
  --color-white:  #fff;
  --color-black:  #000;
  --color-grey:   #d2d2d2;
  --color-purple: #6e6a85;
  --color-red:    #ff0000;
  --font-size-st: 16px;
  --font-size-lg: 24px;
  --box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.42),
                0 3px  20px  0px  rgba(0, 0, 0, 0.12),
                0 8px  10px -5px  rgba(0, 0, 0, 0.2);
}
.u-justify-space-between {
  justify-content: space-between !important;
}
.u-text-danger {
  color: var(--color-red) !important;
}

Общий

body {
  margin: 0;
  padding: 0;
  font-family: Arial;
}
.container {
  display: grid;
  grid-template-rows: 40px calc(100vh - 80px) 40px;
  height: 100vh;
}

Навигация

.nav {
  display: flex;
  padding: 0 10px;
  background-color: var(--color-purple);
  box-shadow: var(--box-shadow);
  z-index: 10;
}
.nav-item {
  padding: 10px;
  font-size: var(--font-size-st);
  color: var(--color-white);
  text-decoration: none;
}
.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

Заголовки

.header {
  padding: 10px 0;
  font-size: var(--font-size-lg);
}

Список книг

.book-list {
  padding: 10px;
  overflow-y: scroll;
}
.book {
  display: flex;
  justify-content: space-between;
  padding: 15px 10px;
  font-size: var(--font-size-st);
  color: var(--color-black);
  text-decoration: none;
  cursor: pointer;
}
.book:hover {
  background: var(--color-grey);
}

Кнопки

button {
  cursor: pointer;
}

Деталь книги

.book.book--detail {
  flex-direction: column;
  justify-content: flex-start;
  max-width: 500px;
  background: var(--color-white);
  cursor: default;
}
.book-title {
  font-size: var(--font-size-lg);
}
.book-title,
.book-author,
.book-description {
  padding: 10px;
}

Добавить/редактировать форму книги

.form {
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
  background: var(--color-white);
}
input[type='text'],
textarea {
  margin: 10px 0;
  padding: 10px;
  max-width: 500px;
  font-size: var(--font-size-st);
  border: none;
  border-bottom: 1px solid var(--color-grey);
  outline: 0;
}

Действия

.actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding: 10px 20px;
  background-color: var(--color-white);;
  box-shadow: var(--box-shadow)
}

4.4 Маршрут книг

4.4.1 Создать маршрут книг

Теперь у нас есть наши стили и контейнеры на месте. Давайте создадим новый маршрут, который отобразит все книги в нашей базе данных:

ember g route books

Файл маршрутизатора Клиент/приложение/Router.js Обновления с:

import EmberRouter from '@ember/routing/router';
import config from './config/environment';
const Router = EmberRouter.extend({
  location: config.locationType,
  rootURL: config.rootURL
});
Router.map(function() {
  this.route('books');
});
export default Router;

4.4.2 Загрузить поддельные данные в модельном крючке

Давайте отредактировать маршрут книг Клиент/приложение/маршруты/книги .JS загрузить все книги из базы данных.

import Route from '@ember/routing/route';
export default Route.extend({
  model() {
    return [
      {title: 'Monkey Adventure'},
      {title: 'Island Strife'},
      {title: 'The Ball'},
      {title: 'Simple Pleasures of the South'},
      {title: 'Big City Monkey'}
    ]
  }
});

Модель крюка возвращает массив объектов. Это поддельные данные для демонстрационных целей. Мы вернемся сюда позже и загрузим фактические данные из базы данных с использованием данных Ember, когда мы будем готовы.

4.4.3 Обновить шаблон маршрута книг

Давайте отредактировать шаблон маршрута книг Клиент/приложение/шаблоны/книги .hbs Отказ Мы хотим отобразить книги, возвращенные в модель.


  {{#each model as |book|}}
    
      {{book.title}}
    
  {{/each}}

Ember использует Библиотека шаблона руль Отказ Здесь мы используем каждый хелпер, чтобы повторить наш массив данных книг в Модель Отказ Мы охватываем каждый из предметов в массиве в Div С классом . книг Отказ Доступ и отображение его названия информации с {{book.title}} Отказ

4.4.4 Демонстрация: книги маршрута загрузки и отображения поддельных данных

Теперь, когда у нас есть Дом, книга Модель и Книги Настройка маршрута с некоторыми поддельными данными мы видим это работает в браузере. Посмотрите на localhost: 4200/Книги :

4.4.5 Создать маршрут приложения для перенаправления

Это рода раздражает, чтобы поставить /Книги посетить Книги маршрут. Давайте сгенерим Приложение маршрут. Мы можем использовать Перенаправить Крюк для перенаправления на Книги Маршрут, когда мы введем базовый маршрут / Отказ

ember g route application

Если будет предложено перезаписать Application.hbs Шаблон, скажем нет. Мы не хотим перезаписать шаблон, который мы уже настроили.

В Клиент/приложение/маршруты/Application.js Создать Перенаправить крюк:

import Route from '@ember/routing/route';
export default Route.extend({
  redirect() {
    this.transitionTo('books');
  }
});

Теперь, если вы посетите localhost: 4200 Это перенаправляется на localhost: 4200/Книги Отказ

4.5 Отображение реальных данных в маршруте книг

4.5.1 Создание адаптера приложения

Мы не хотим использовать поддельные данные навсегда. Давайте подключим к задней части, используя Адаптер и начните потянуть данные книги в клиент. Подумайте о адаптере как « объект, который получает запросы из магазина». ИТ «переводит их в соответствующие действия, чтобы взять против вашего слоя настойчивости …»

Создайте новый прикладной адаптер:

ember g adapter application

Найдите файл Клиент/приложение/адаптеры/Application.js и обновить его:

import DS from 'ember-data';
import { computed } from '@ember/object';
export default DS.JSONAPIAdapter.extend({
  host: computed(function(){
    return 'http://localhost:8000';
  }),
  namespace: 'api'
});

JSONAPIADAPTER – « » Адаптер по умолчанию, используемый Ember Data ‘. Он преобразует запросы магазина в HTTP-запросы, которые следуют за JSON API формат. Он подключил к библиотеке управления данными под названием Ember Data Отказ Мы используем данные Ember для интерфейса со спиной более эффективным способом. Он может хранить и управлять данными в переднем конце и сделать запросы на задний конец при необходимости. Это означает незначительные обновления страниц, не требуют постоянных запросов к задней части. Это помогает пользователю испытать больше жидкости, как правило, более быстрые время загрузки

Мы будем использовать его магазин Сервис для доступа к Сервер Данные без написания более сложных Ajax Запросы. Они все еще необходимы для более сложных случаев использования.

Здесь адаптер рассказывает данные Ember, что ее хозяин на localhost: 8000 , имен на API Отказ Это означает, что любые запросы на сервер начнутся с http://localhost: 8000/API/ Отказ

4.5.2 Создать модель книги

Данные EMBER имеют особые требования для отображения своих данных к тому, что происходит с конца. Мы создадим книга Модель, так что это понимает, что данные, приходящие с заднего конца, должны отображаться:

ember g model book

Найдите файл в Клиент/Модели/Book.js и определить книга модель:

import DS from 'ember-data';
export default DS.Model.extend({
  title: DS.attr(),
  author: DS.attr(),
  description: DS.attr()
});

Атрибуты такие же, как те, которые мы определили на заднем конце. Мы снова определяем их, чтобы данные Эмбер знали, что ожидать от структурированных данных.

4.5.3 Обновить маршрут книг

Давайте обновим маршрут книг, импортируя магазин Сервис и используя его, чтобы запросить данные.

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
export default Route.extend({
  store: service(),
  model() {
    const store = this.get('store');
    return store.findAll('book');
  }
});

4.5.4 Демонстрация: Книги имеют проблему CORS

До сих пор мы создали адаптер приложений и обновили Книги Маршрут в запрос на все книги в базе данных. Давайте посмотрим, что мы возвращаемся.

Запустите как Django и Ember Servers. Затем посетите localhost: 4200/Книги И вы должны увидеть это в консоли:

Кажется, есть проблема с CORS.

4.5.5 Установите вопрос об обмене ресурсов по перекрестному происхождению (CORS)

CORS определяет способ, которым браузер и сервер взаимодействуют, чтобы определить, безопасно ли разрешить запрос. Мы делаем запрос с перекрестным происхождением от localhost: 4200 к localhost: 8000/API/Книги Отказ От клиента к серверу с целью доступа к нашим книгам данных.

В настоящее время передний конец не является разрешенным происхождением, чтобы запросить данные с наших задних конечных точек. Этот блок вызывает нашу ошибку. Мы можем решить эту проблему, позволяя пройти пройти через.

Начните с установки приложения, добавляющей заголовки CORS в ответы:

pip install django-cors-headers

Установите его в Сервер ‘s settings.py Файл под Stall_apps множество:

INSTALLED_APPS = [
...
    'books',
    'corsheaders'
]

Добавьте его на вершину Промежуточное программное обеспечение множество:

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
...
]

Наконец, разрешить все запросы пройти через во время развития:

CORS_ORIGIN_ALLOW_ALL = DEBUG

4.5.6 Демонстрация: CORS Проблема разрешена, несовместимый формат данных

Посетить localhost: 4200 И вы должны увидеть это в консоли:

Похоже, мы решили проблему CORS, и мы получаем ответ от Сервер с данными, которые мы ожидаем:

[
    {
        "id": 1,
        "title": "Conquistador",
        "author": "Buddy Levy",
        "description": "It was a moment unique in ..."
    },
    {
        "id": 2,
        "title": "East of Eden",
        "author": "John Steinbeck",
        "description": "In his journal, Nobel Prize ..."
    }
]

Хотя получить массив объектов в формате JSON, он все еще не в формате, который мы хотим, чтобы это было. Это то, что ожидают данные Ember:

{
  data: [
    {
      id: "1",
      type: "book",
      attributes: {
        title: "Conquistador",
        author: "Buddy Levy",
        description: "It was a moment unique in ..."
      }
    },
    {
      id: "2",
      type: "book",
      attributes: {
        title: "East of Eden",
        author: "John Steinbeck",
        description: "In his journal, Nobel Prize ..."
      }
    }
  ]
}

Близко, но еще не совсем там.

4.6 Вывод

Мы завершили следующие шаги в Раздел 4 :

Установлены Nodejs и NPM
Установил Ember CLI и создал новый клиентский проект
Основная настройка DOM
Создал Книги Маршрут и шаблон для загрузки и отображения книг
Продемонстрировал приложение, работающее с поддельными данными
Создал адаптер приложений для подключения к задней части и приема данных
Создал книга Модель и обновлена Книги Маршрут для захвата задних данных
Продемонстрировал, что внутренние данные не структурированы так, как данные EMBER ожидают, что это будет

Раздел 5: Правильные форматы данных, дело с отдельными записями

В этом разделе Мы будем использовать Django Rest Framework JSON API для структурирования данных таким образом, с помощью которых могут работать данные Ember. Мы также обновим Книги API, чтобы вернуть забронировать один экземпляр книги записи. Мы также добавим функциональность, чтобы добавить, редактировать и создавать книги. Тогда мы закончили с нашим приложением!

5.1 Установите Django Rest Framework JSON API

Сначала мы используем PIP, чтобы установить Django Rest Framework JSON API (DRF). Это преобразует регулярные ответы DRF в личность Модель в JSON API Формат Отказ

С виртуальной средой включена:

# install the Django REST Framework JSON API
  pip install djangorestframework-jsonapi

Далее обновите настройки DRF в Server/Server/settings.py :

REST_FRAMEWORK = {
  'PAGE_SIZE': 100,
  
  'EXCEPTION_HANDLER': 
    'rest_framework_json_api.exceptions.exception_handler',
  
  'DEFAULT_PAGINATION_CLASS':    'rest_framework_json_api.pagination.JsonApiPageNumberPagination',
'DEFAULT_PARSER_CLASSES': (
    'rest_framework_json_api.parsers.JSONParser',
    'rest_framework.parsers.FormParser',
    'rest_framework.parsers.MultiPartParser'
  ),
'DEFAULT_RENDERER_CLASSES': (
    'rest_framework_json_api.renderers.JSONRenderer',
    'rest_framework.renderers.BrowsableAPIRenderer',
   ),
'DEFAULT_METADATA_CLASS': 'rest_framework_json_api.metadata.JSONAPIMetadata',
'DEFAULT_FILTER_BACKENDS': (
     'rest_framework.filters.OrderingFilter',
    ),
'ORDERING_PARAM': 'sort',
   
   'TEST_REQUEST_RENDERER_CLASSES': (
     'rest_framework_json_api.renderers.JSONRenderer',
    ),
   
   'TEST_REQUEST_DEFAULT_FORMAT': 'vnd.api+json'
}

Они переопределяют настройки по умолчанию для DRF по умолчанию из API JSON. Я увеличил Page_size Таким образом, мы можем получить до 100 книг обратно в ответ.

5.2 Работа с отдельными записями книги

5.2.1 Создать вид

Давайте также обновим наше Книги API, чтобы мы могли извлечь отдельные экземпляры записи книги.

Создать новый вид под названием BookRudview в Сервер/Книги/API/Просмотр .py :

class bookRudView(generics.RetrieveUpdateDestroyAPIView):
  resource_name       = 'books'
  lookup_field        = 'id'
  serializer_class    = bookSerializer
  def get_queryset(self):
    return Book.objects.all()

Эта точка зрения использует ID lookup_field Чтобы получить отдельную запись книги. RetreveUpdateStretroyapiview Обеспечивает основные Получить , Поставить , Патч и Удалить Метод обработчики. Как вы можете себе представить, что они создают, обновите и удалите отдельные данные книги.

5.2.2 Обновление URL-адресов API книги

Нам нужно создать новый узор URL, который подает данные через BookRudview Отказ

from .views import bookAPIView, bookRudView
from django.conf.urls import url
urlpatterns = [
  url(r'^$', bookAPIView.as_view(), name='book-create'),
  url(r'^(?P\d+)', bookRudView.as_view(), name='book-rud')
]

Импорт BookRudview Сопоставьте его с рисунком R '^ (? P ; \ D +)’, и дайте ему имя книга-руд Отказ

5.2.3 Обновите URL-адреса сервера

Наконец, обновите Книги Уровень URL API в Сервер/сервер/URLS.PY Отказ Мы хотим сопоставить шаблоны, которые начинаются после Книги/ :

...
urlpatterns = [
  ...
  url(r'^api/books/?', include('books.api.urls', namespace='api-books')),
]

5.2.4 Демонстрация: Доступ к одной книжной записи

Теперь, если вы посетите localhost: 8000/API/Книги/1 Он должен отобразить одну запись книги, которая соответствует книге ID :

Обратите внимание, что у нас есть доступ к Удалить , Поставить , Патч и другие методы. Они приходят с RetreveUpdateStretroyapiview Отказ

5.2.5 Демонстрация: захват и отображение данных с задней части в правильном формате

С Jsonapi Установленный конец должен быть отправлен обратно ответы EMBER может работать с. Выполните оба сервера и посетите localhost: 4200/Книги Отказ Мы должны вернуть реальные данные с задней части и отобразить его маршрут. Успех!

Посмотрите на последнюю реакцию. Это в действительности Jsonapi Формат, с которым работает данные Ember.

5.3 Книжный маршрут

Теперь мы можем просмотреть список книг из нашей базы данных в Книги маршрут. Далее давайте создадим новый маршрут в интернет-конце клиент Отказ Это подробно отобразит отдельные книги с Название , Автор и Описание данные.

5.3.1 Создать книжный маршрут

Создайте новый маршрут для отдельных страниц книги:

ember g route book

В Router.js Обновите новый маршрут по пути «Книги/: Book_id» Отказ Это переопределяет путь по умолчанию и занимает book_id параметр.

...
Router.map(function() {
  this.route('books');
  this.route('book', { path: 'books/:book_id' });
});
...

Следующее обновление книга Маршрут Клиент/приложение/маршруты/Book.js Для получения одной записи книги из базы данных:

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
export default Route.extend({
  store: service(),
model(book) {
    return this.get('store').peekRecord('book', book.book_id);
  }
});

Как указано в Router.js книга Маршрут принимает в book_id параметр. Параметр входит в маршрут Модель Крюк, и мы используем его, чтобы получить книгу с помощью данных EMBER магазин Отказ

5.3.2 Обновить шаблон книги

Наше Клиент/Приложение/Шаблоны/Книга .hbs Шаблон должен отображать данные книги, которые мы возвращаемся из магазин Отказ Избавиться от {{outlet}} и обновить его:


  
    {{model.title}}
  
  
    {{model.author}}
  
  
    {{model.description}}

Как в Книги Шаблон, который мы доступм доход Модель Атрибуты, использующие точечная запись Отказ

5.3.3 Обновить шаблон книг

Наконец, давайте обновим Книги шаблон. Мы хотим обратиться к каждой отдельной странице книги, как показано в книга Маршрут мы создали:


  {{#each model as |book|}}
    {{#link-to 'book' book.id class="book"}}
      {{book.title}}
    {{/link-to}}
  {{/each}}

Оберните Book.title с Ссылка на помощник. Это работает так:

Создает ссылку на книга маршрут
берет в Book.id как параметр
берет Класс стильно < ; A> Тег, генерируемый в доме.

5.3.4 Демонстрация: Выберите Книгу для просмотра подробной информации

Теперь проверить localhost: 4200/Книги Отказ Мы можем нажать на наши книги, чтобы получить подробный вид. Сладкий!

5.4 Вывод

Мы подошли к концу Раздел 5 Со следующими шагами выполнены:

Выявил проблему с данными, поступающими из Django
Установлен Django Read Framework JSON API
Обновлено Книги Шаблон маршрута
Создал книга Маршрут и шаблон

Раздел 6: Функциональный передний конец

В этом разделе мы добавим следующие функциональные возможности на опыт работы в интернет:

Добавить новую книгу с названием полей, автор и описание
Редактировать название существующей книги, автор и описание
Удалить существующую книгу

Это все, что мы должны сделать, чтобы завершить остальную часть нашего приложения. Мы приходим на долгий путь. Давайте нажать до конца!

6.1 Добавление новой книги в базу данных

Теперь мы можем просмотреть все книги из базы данных и подробно просмотреть отдельные записи книги. Пришло время создать функциональность, чтобы добавить новую книгу в базу данных. Это шаги, которые мы возьмем, чтобы сделать это:

Create-book Маршрут обрабатывает процесс создания новой книги и добавление его в базу данных
Create-book Шаблон будет иметь форму с двумя входами и текстовой областью, чтобы взять в себя Название , Автор и описание
Create-book Контроллер обрабатывает данные, введенные в форму

6.1.1 Создание маршрута и контроллера Create-Book

Генерировать Create-book Маршрут для обработки новой книги Создание:

ember g route create-book

Создайте контроллер того же имени, чтобы держать данные формы:

ember g controller create-book

6.1.2 Настройка контроллера создания книги

В Клиент/Приложение/Контроллеры/Create-Book.js Создайте компьютерное свойство под названием Форма Отказ Это вернет объект с нашими атрибутами данных книги. Именно здесь мы захватываем новые данные книги, введенные пользователем. По умолчанию это пусто.

import Controller from '@ember/controller';
import { computed } from '@ember/object';
export default Controller.extend({
  form: computed(function() {
    return {
      title: '',
      author: '',
      description: ''
    }
  })
});

6.1.3 Настройка маршрута Create-Book

В Клиент/приложение/маршруты/Create-book.js Мы следуем следующим образом:

Создание действий для подтверждения создания новой книги
Отмените процесс создания
Используйте крючок маршрута для очистки данных формы при входе в маршрут:

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
export default Route.extend({
  store: service(),
  setupController(controller, model) {
    this._super(controller, model);
    this.controller.set('form.title', '');
    this.controller.set('form.author', '');
    this.controller.set('form.description', '');
  },
  actions: {
    create() {
      const form = this.controller.get('form');
      const store = this.get('store');
      const newBook = store.createRecord('book', {
        title: form.title,
        author: form.author,
        description: form.description
      });
      newBook.save()
        .then(() => {
          this.transitionTo('books');
        });
     },
     cancel() {
       this.transitionTo('books');
     }
  }
});

SetuppController Крюк позволяет сбросить значения формы. Это так, чтобы они не сохранялись, когда мы идем вперед и назад через страницы. Мы не хотим нажать на другую страницу, не выполняя процесс создания книжного процесса. Если мы сделаем, мы вернемся, чтобы увидеть неиспользуемые данные, все еще сидящие в нашей форме.

Создать () Действие примет данные формы и создают новую запись с помощью данных EMBER магазин Отказ Затем он сохраняет его до конца Джанго. После завершения он перейдет пользователь обратно к Книги маршрут.

Отмена Кнопка переходит пользователь обратно к Книги маршрут.

6.1.4 Настройка шаблона создания книги

Далее, в Клиент/приложение/шаблон/create-book.hbs Строим форму:


  
    Add a new book
  
  {{input
    value=form.title
    name="title"
    placeholder="Title"
    autocomplete='off'
  }}
  {{input
    value=form.author
    name="author"
    placeholder="Author"
    autocomplete='off'
  }}
  {{textarea
    value=form.description
    name="description"
    placeholder="Description"
    rows=10
  }}

Форма использует встроенный {{ввод}} помощники:

принимать ценности
отображать заполнители
выключить автозаполнение.

{{Text}} Район Хелпер работает аналогичным образом, с добавлением количества рядов.

Действия Div Содержит две кнопки для создания и отмены. Каждая кнопка связана с его тезкой, используя {{действие}} помощник.

6.1.5 Обновите шаблон маршрута книг

Последний кусок головоломки создания книги состоит в том, чтобы добавить кнопку в Книги маршрут. Это приведет нас к Create-book Маршрут и начать создавать новую книгу.

Добавьте на дно Клиент/приложение/шаблоны/книги .hbs :

...
{{#link-to 'create-book' class='btn btn-addBook'}}
  Add Book
{{/link-to}}

6.1.6 Демонстрация: можно добавить новую книгу

Теперь, если мы вернемся и попытаемся снова создать новую книгу, мы найдем успех. Нажмите в книгу, чтобы увидеть более подробный вид:

6.2 Удаление книги из базы данных

Теперь, когда мы можем добавить книги в базу данных, мы сможем их тоже удалить.

6.2.1 Обновить шаблон маршрута книги

Первое обновление книга Шаблон маршрута. Добавить на Книга книги - деталь :

...

  {{#if confirmingDelete}}
    
      Are you sure you want to delete this book?
    
    
      
      
    
  {{else}}
    
      
    
  {{/if}}

Действия Div Содержит кнопки и текст для процесса удаления книги.

У нас есть Bool называется ПодтверждениеDelete который будет установлен на маршруте контроллер Отказ ПодтверждениеDelete Добавляет .u-оправдание-пространство - между Утилита класса на Действия Когда это правда Отказ

Когда это правда, он также отображает подсказку с утилитом класса .u-текстовая опасность Отказ Это подсказывает пользователю подтвердить удаление книги. Появляются две кнопки. Один, чтобы запустить Удалить действие на нашем маршруте. Другой использует мутность хелпер, чтобы перевернуть ПодтверждениеDelete к ложь Отказ

Когда ПодтверждениеDelete это ложь (состояние по умолчанию) один Удалить дисплей кнопки. Нажав на него переворачивает ПодтверждениеDelete к правда Отказ Это затем отображает подсказку и две другие кнопки.

6.2.2 Обновите маршрут книги

Следующее обновление книга маршрут. Под Модель Крюк Добавить:

setupController(controller, model) {
  this._super(controller, model);
  this.controller.set('confirmingDelete', false);
},

В SetuppController Мы называем Это ._super () Отказ Это так, что контроллер проходит через обычные движения, прежде чем делать наш бизнес. Тогда мы устанавливаем ПодтверждениеDelete к ложь Отказ

Почему мы это делаем? Допустим, мы начнем удалять книгу, но покинуть страницу без отмены действия или удаления книги. Когда мы идем на любую страницу книги ПодтверждениеDelete будет установлен на правда как остаток.

Давайте давайте создадим Действия Объект, который проведет наши маршрутные действия:

actions: {
  delete(book) {
    book.deleteRecord();
    book.save().then(() => {
      this.transitionTo('books');
    });
  }
}

Удалить Действие как упоминается в нашем шаблоне, принимает в себя книга Отказ Мы бежим DELETERECORD на книга а потом Сохранить чтобы сохранить изменения. Как только это обещание завершает Переход для Переходы к Книги Маршрут (взгляд нашего списка).

6.2.3 Демонстрация: может удалить существующую книгу

Давайте проверим это в действии. Запустите серверы и выберите книгу, которую вы хотите удалить.

Когда вы удаляете книгу, которую она перенаправляет на Книги маршрут.

6.3 Редактирование книги в базе данных

Последнее, но не в последнюю очередь, мы добавим функциональность для редактирования существующих книг информации.

6.3.1 Обновить шаблон маршрута книги

Откройте книга Шаблон и добавить форму для обновления данных книги:

{{#if isEditing}}
  
    Edit
    {{input
      value=form.title
      placeholder="Title"
      autocomplete='off'
    }}
    {{input
      value=form.author
      placeholder="Author"
      autocomplete='off'
    }}
    {{textarea
      value=form.description
      placeholder="Description"
      rows=10
    }}
  
  
    
      
      
    
  
{{else}}
  ...
  
    
    
  
  ...
{{/if}}

Сначала давайте обернум весь шаблон в Если утверждение. Это соответствует зрелищ Свойство, которое по умолчанию будет ложь Отказ

Обратите внимание, что форма очень практически идентична нашей форме создания книги. Единственная реальная разница в том, что действия Обновить управляет Обновить Действие в книга маршрут. Отмена Кнопка также переворачивает зрелищ недвижимость на ложь Отказ

Все, что у нас было, прежде чем вложены внутри еще Отказ Мы добавляем Редактировать Кнопка для переворачивания зрелищ истина и отобразить форму.

6.3.2 Создайте контроллер книги для обработки значений формы

Помните Create-book контроллер? Мы использовали его, чтобы удерживать значения, которые позже отправлены на сервер для создания новой записи книги.

Мы будем использовать аналогичный метод, чтобы получить и отобразить данные книги в нашем зрелищ форма. Он предварительно заполнит форму с данными текущей книги.

Создайте контроллер книги:

ember g controller book

Открыть Клиент/приложение/контроллеры/Book.js и создать Форма Вычисляемое свойство, как раньше. В отличие от того, как мы будем использовать Модель предварительно заполнить нашу форму с текущим книга данные:

import Controller from '@ember/controller';
import { computed } from '@ember/object';
export default Controller.extend({
  form: computed(function() {
    const model = this.get('model');
    return {
      title: model.get('title'),
      author: model.get('author'),
      description: model.get('description')
    }
  })
});

6.3.3 Обновить маршрут книги

Нам нужно снова обновить наш маршрут:

setupController(controller, model) {
  ...
  this.controller.set('isEditing', false);
  this.controller.set('form.title', model.get('title'));
  this.controller.set('form.author', model.get('author'));
  this.controller.set('form.description', model.get('description'));
},

Давайте добавим к SetuppController крюк. Установить зрелищ к ложь и сбросить все значения формы по умолчанию.

Давайте давайте создадим Обновить действие:

actions: {
  ...
  update(book) {
    const form = this.controller.get('form');
    book.set('title', form.title);
    book.set('author', form.author);
    book.set('description', form.description);
    book.save().then(() => {
      this.controller.set('isEditing', false);
    });
  }
}

Это довольно просто. Мы получаем значения формы, установите эти значения на книга и сохраняться с Сохранить Отказ Однажды успешным мы откидываем зрелищ Вернуться к ложь Отказ

6.3.4 Демонстрация: может редактировать информацию о существующей книге

6.4 Вывод

Мы завершили следующие шаги к концу Раздел 6 :

Выявил проблему с данными, поступающими из Django
Установлен JSON API в Django
Обновил шаблон маршрута книг
Создал книгу подробного маршрута и шаблона
Можно просмотреть, добавить, редактировать и удалять записи базы данных из клиента Emberjs

Вот и все. Мы сделали это! Мы построили очень базовое приложение для полного стека, используя Django и Ember.

Давайте вернемся и подумайте о том, что мы построили в течение минуты. У нас есть приложение под названием my_library что:

Перечисляет книги из базы данных
Позволяет пользователям просматривать каждую книгу более подробно
Добавить новую книгу
редактировать существующую книгу
Удалить книгу

Как мы построили приложение, мы узнали о Django и как он используется для администрирования базы данных. Мы создали модели, сериализаторы, представления и узоры URL для работы с данными. Мы использовали Ember для создания пользовательского интерфейса для доступа и изменения данных через конечные точки API.

Раздел 7: Движение на

7.1 Что дальше

Если вы это далеко получили, вы закончили учебное пособие! Приложение работает со всеми предполагаемыми функциями. Это много, чтобы гордиться. Разработка программного обеспечения, сложный? Это занижение. Это может чувствовать себя совершенно недоступным даже со всеми доступными для нас ресурсами. Я получаю это чувство все время.

Что работает для меня, состоит в том, чтобы принять частые перерывы. Встать и уйти от того, что вы делаете. Сделать что-то еще. Затем вернитесь и сломайте свои проблемы с шагом за шагом в самые маленькие единицы. Исправить и решить, пока не доберетесь туда, где вы хотите быть. Нет ярлыков для создания ваших знаний.

В любом случае, мы могли бы многое сделать здесь для введения, но мы только царапаем поверхность. Вам больше многое узнать о полном развитии стека. Вот несколько примеров, чтобы подумать:

Учетные записи пользователей с аутентификацией
Функциональность тестирования приложения
Развертывание приложения в Интернет
Написание остальных API с нуля

Когда у меня есть время, я буду смотреть в писать больше на этих темах.

Я надеюсь, что вы нашли этот учебник полезным. Предназначен для того, чтобы вы служить выключенным точком для вас, чтобы узнать больше о Django, Ember и Full Stack Development. Это было определенно обучение для меня. Shoutout к моему Закрытие папок команда для поддержки и поддержки. Мы нанимаем сейчас, так что не стесняйтесь связаться!

Если вы хотите прозревать, вы можете связаться со мной через следующие каналы:

электронное письмо
linkedin.
Средняя
персональный сайт

7.2 Дальнейшее чтение

Написание этого урока заставило меня противостоять краям моих знаний. Вот ресурсы, которые помогали с моим пониманием тем, покрытых темами:

Оглавление

Раздел 1: Что, как, и сжимает

Раздел 2: Погружение в задний конец

Раздел 3: построить сервер, затем отдых

Раздел 4: Укладка передних фундаментов

Раздел 5: Правильные форматы данных, дело с отдельными записями

Раздел 6: Функциональный передний конец

Раздел 7: Движение на

Раздел 1: Что, как, и сжимает

1.1 Почему я написал это руководство

1.2 Задний конец, передний конец. Какая разница?

1.3 Концепция: приложение базовой библиотеки

1.3.1 Последний дизайн и функциональность My_library

1.4 Структура каталогов проекта

1.4.1 Вернуться назад

1.4.2 Передний конец

1.5 Настройка каталогов проекта

1.5.1 Создать основную папку проекта: my_library

1.5.2 Установка Git для контроля версий

1.5.3 Создать новый репозиторий проекта

1.5.4 Обязательство и протолкните ваши изменения в репозиторий проекта

1.6 Вывод

Раздел 2: Погружение в задний конец

2.1 Установить требуемое программное обеспечение

2.1.1 Python

2.1.2 Пип

2.1.3 Virtualenv.

2.1.4 Django 1.11 (ЛТС)

2.2 Начать проект Django: сервер

2.2.1 Создать учетную запись суперпользователя

2.2.2 Защита наших секретов

2.3 Начать приложение Django: книги

2.4 Опишите модель книги

2.5 Зарегистрируйте модель книги с администратором

2.6 Вывод

Раздел 3: построить сервер, затем отдых

3.1 Конструкция отдыха Django

3.1.1 Установка Django Rest Framework

3.2 Создать папку API книг

3.3 Создать книжный сериализатор

Импорт

Класс книгиРиализатора

3.4 Создать представление, чтобы получить и почтить данные книги

Импорт

Bookapi View.

Функции

3.5 Создание URL-адресов для доступа к данным книги

Импорт

Уровень URL Bloodapi

Уровень URL-адреса сервера

3.5.1 Демонстрация: просмотр книг API

3.6 Вывод

Раздел 4: Укладка передних фундаментов

4.1 Установить требуемое программное обеспечение

4.1.1 Nodejs и NPM

4.1.2 Ember Cli.

4.2 Начните проект Ember: клиент

4.2.1 Обновление .gitignore с эксклюзиями Ember

4.3 Отображение данных книг

4.3.1 Настройка DOM

4.3.2 Создание стилей

4.4 Маршрут книг

4.4.1 Создать маршрут книг

4.4.2 Загрузить поддельные данные в модельном крючке

4.4.3 Обновить шаблон маршрута книг

4.4.4 Демонстрация: книги маршрута загрузки и отображения поддельных данных

4.4.5 Создать маршрут приложения для перенаправления

4.5 Отображение реальных данных в маршруте книг

4.5.1 Создание адаптера приложения

4.5.2 Создать модель книги

4.5.3 Обновить маршрут книг

4.5.4 Демонстрация: Книги имеют проблему CORS

4.5.5 Установите вопрос об обмене ресурсов по перекрестному происхождению (CORS)

4.5.6 Демонстрация: CORS Проблема разрешена, несовместимый формат данных

4.6 Вывод

Раздел 5: Правильные форматы данных, дело с отдельными записями

5.1 Установите Django Rest Framework JSON API

5.2 Работа с отдельными записями книги

5.2.1 Создать вид

5.2.2 Обновление URL-адресов API книги