Было бы здорово, если бы вы могли создать прототип пользовательского
0. Введение: разработка полного стека 101
Я расскажу, как создать прототип пользовательского
С этой целью я полностью объединим управление данными, представление и маршрутизацию между Django и Vue.js — так что будьте готовы!
О Джанго
Вы, возможно, знаете о Django,
О Vue.js
То же самое и с Vue.js, прогрессивной средой JavaScript, доступной, универсальной и производительной. Если вы не знакомы с ним, здесь вы получите быстрое и грязное введение.
Я также расскажу о двух официальных библиотеках Vue.js:
Vue Router для отображения маршрута/представления
Vuex для управления состоянием
Python + JavaScript = ПОБЕДА!
В этой статье мы настроим проект публикации с базовой схемой базы данных для сохранения authorsи articles, а также с минимальным пользовательским интерфейсом (UI) для взаимодействия с ними.
Надеюсь, это послужит игрушечной программой для понимания того, как интегрировать Django с использованием кода Python на серверной части с фреймворком JavaScript на внешнем интерфейсе, который вы сможете позже адаптировать к своим потребностям.
1. Настройка проекта Django
Очень быстро настроим проект с нуля. Если вы уже знаете, как работать с проектами Django, вы можете пропустить этот раздел. Предположим, что у вас уже установлен Python.
Более подробное руководство см. в разделе Как установить Django на сайте документации Django.
Виртуальная среда Python
Давайте откроем консоль и создадим виртуальную среду (дополнительную информацию см. в разделе Виртуальные среды в Python Made Easy):
$ virtualenv myenvironment
Using base prefix 'c: \\users\\luzdealba\\appdata\\local\\programs\\python\\python37'
New python executable in C: \Users\luzdealba\Development\myenvironment\Scripts\python.exe
Installing setuptools, pip, wheel...
done
Не обращайте внимания на пути, так как они будут меняться от системы к системе.
Давайте получим доступ и активируем виртуальную среду.
В Windows:
$ cd myenvironment
$ Scripts\activate
В macOS и Linux:
$ cd myenvironment
$ source bin/activate
Пакет Джанго
Давайте установим Джанго:
(myenvironment) $ pip install django
Collecting django
Downloading
Collecting sqlparse≥0.2.2
Downloading
Collecting pytz
Using cached pytz-2019.3-py2.py3-none-any.whl (509 kB)
Collecting asgiref≈3.2
Downloading
Installing collected packages: sqlparse, pytz, asgiref, django
Successfully installed
Еще раз, не обращайте внимания на версии программ и размеры файлов, так как они могут различаться.
Проект
Давайте начнем проект под названием myproject:
(myenvironment) $
Давайте получим доступ к проекту:
(myenvironment) $ cd myproject
Приложение
Запустите приложение под названием myapp:
(myenvironment) $
И добавьте myapp.apps.MyappConfigв INSTALLED_APPSпостоянный список myproject/settings.py, чтобы включить приложение.
2. Настройка базы данных с помощью Django
Здесь мы определим внутреннюю базу данных с помощью Django, которую позже интегрируем с внешним хранилищем с помощью Vuex.
Джанго Модели
Модели — это способ Django для реализации
Давайте закодируем следующие модели для нашего приложения в myapp/models.py:
from django.db import models
class Article (models.Model):
«„„Table schema to store articles.““»
name = models.CharField (max_length=64)
author = models.ForeignKey ('myapp.Author’, on_delete=models.CASCADE)
content = models.TextField ()
slug = models.CharField (default='', max_length=64)
def __str__ (self):
return '%s’% self.name
class Author (models.Model):
«„„Table schema to store auhtors.““»
name = models.CharField (max_length=64)
slug = models.CharField (default='', max_length=64)
def __str__ (self):
return '%s’% self.name
Обратите внимание, что мы внедрили
Дополнительные сведения см. в справочнике по Model API на сайте документации Django.
Джанго Админ
Прежде чем мы сможем управлять этими моделями через административный сайт, нам сначала нужно registerих сделать, чтобы Django сделал их доступными для нас.
Давайте просто отредактируем myapp/admin.pyтак, чтобы это выглядело так:
from django.contrib import admin
from.models import Article
from.models import Author
# register models to use in admin site
admin.site.register (Article)
admin.site.register (Author)
Узнайте больше о сайте администрирования Django на сайте документации Django.
Джанго Миграции
Из документации Django Migrations:
Миграции — это способ Django распространять изменения, которые вы вносите в свои модели (добавление поля, удаление модели и т. д.), в схему вашей базы данных.
Короче говоря: миграции делают все;
(myenvironment) $ python manage.py makemigrations
Migrations for 'myapp’:
myapp\migrations\0001_initial.py
— Create model Author
— Create model Article
Теперь воспользуемся этой информацией для обновления базы данных:
(myenvironment) $ python manage.py migrate
Operations to perform:
Apply all migrations: admin, auth, contenttypes, myapp, sessions
Running migrations:
Applying contenttypes. 0001_initial... OK
Applying auth. 0001_initial... OK
Applying admin. 0001_initial... OK
Applying admin. 0002_logentry_remove_auto_add... OK
Applying admin. 0003_logentry_add_action_flag_choices... OK
Applying contenttypes. 0002_remove_content_type_name... OK
Applying auth. 0002_alter_permission_name_max_length... OK
Applying auth. 0003_alter_user_email_max_length... OK
Applying auth. 0004_alter_user_username_opts... OK
Applying auth. 0005_alter_user_last_login_null... OK
Applying auth. 0006_require_contenttypes_0002... OK
Applying auth. 0007_alter_validators_add_error_messages... OK
Applying auth. 0008_alter_user_username_max_length... OK
Applying auth. 0009_alter_user_last_name_max_length... OK
Applying auth. 0010_alter_group_name_max_length... OK
Applying auth. 0011_update_proxy_permissions... OK
Applying myapp. 0001_initial... OK
Applying sessions. 0001_initial... OK
Не обращайте внимания на длинный список. Это потому, что это была наша первая миграция, поэтому были созданы не только наши таблицы Authorи Article, но и все схемы Django по умолчанию.
Дополнительные сведения см. в разделе Операции миграции на сайте документации Django.
3. Базовый интерфейс с компонентами Vue в шаблоне Django
Вот одна из самых интересных частей мэшапа, так как мы будем смешивать тесно связанные инструменты из разных технологий.
Джанго Вью
Django использует шаблон проектирования программного обеспечения
Мы закодируем следующее представление в myapp/views.py:
from django.shortcuts import render
from.models import Article
from.models import Author
def frontend (request):
«„„Vue.js will take care of everything else.““»
articles = Article.objects.all ()
authors = Author.objects.all ()
data = {
'articles’: articles,
'authors’: authors,
}
return render (request, 'myapp/template.html’, data)
Обратите внимание, что мы запросили все статьи и авторов из базы данных. Это пригодится позже.
Дополнительные сведения о написании представлений и представлений на основе классов (API) см. на сайте документации Django.
Шаблон Джанго
Django имеет богатый язык шаблонов со встроенными шаблонными тегами и фильтрами, а также API для программистов на Python; но да, как вы уже догадались — мы не будем здесь подробно об этом рассказывать. 😅
Однако мы будем использовать шаблон Bootstrap Starter, чтобы установить очень простой макет навигации для приложения:
белый передний план
содержимое по центру
Итак, мы закодируем следующий шаблон myapp/templates/myapp/template.html (вам нужно будет создать подкаталоги templates/myapp/внутри myapp/):
<! doctype html>
Prototyping a Web App with Django and Vue.js
Подробнее о шаблонах Django.
Шаблоны Vue.js
Vue.js также имеет доступный синтаксис шаблона и, кроме того, позволяет нам создавать собственные
Мы создадим четыре шаблона:
Авария
Что мы сделали здесь, в двух словах:
Рендеринг списка с
Привязка данных в атрибутах HTML с помощью
Условный рендеринг с
Рендеринг необработанного HTML с помощью
$storeи $routeбудет иметь больше смысла, когда мы представим хранилище и маршрутизацию.
Интерполяция текста между шаблонами Django и Vue.js
Как и в случае с Django, наиболее простой формой интерполяции текста в Vue.js является синтаксис «усы» (двойные фигурные скобки).
Как это:
Message: {{ msg }}
Чтобы избежать конфликтов между ними, при создании экземпляра Vue.js мы настроим его на использование двойных квадратных скобок:
delimiters: ['[[', ']]']
Темы Vue.js
Знаете ли вы, что можете «темировать» Vue.js?
Встраиваемые темы для Vue.js
Vuetify.js, фреймворк компонента Material Design
BootstrapVue, компоненты Bootstrap и система сетки для Vue.js
Buefy, легкие компоненты пользовательского интерфейса для Vue.js на основе Bulma
Element UI — библиотека компонентов для разработчиков, дизайнеров и
Vue Material, Material Design и Vue.js
Quasar Framework, высокопроизводительный пользовательский интерфейс Vue.js
Компоненты Vue.js
Компоненты — это многократно используемые экземпляры Vue. Это означает, что мы можем определить компонент, создать для него
В конце мы покажем весь код одностраничного приложения (SPA). А пока давайте представим несколько фрагментов.
Как и в случае с шаблонами, мы определим четыре компонента — ArticleList, AuthorList, ArticleItemи AuthorItem:
ArticleList = Vue.component ('
data: function () { return { articles: store.state.articles } },
template: '#
}) ;
AuthorList = Vue.component ('
data: function () { return { authors: store.state.authors } },
template: '#
}) ;
ArticleItem = Vue.component ('
delimiters: ['[[', ']]'],
props: ['name’, 'slug’, 'content’],
template: '#
}) ;
AuthorItem = Vue.component ('
delimiters: ['[[', ']]'],
props: ['name’, 'slug’],
template: '#
}) ;
Авария
В компоненте dataдолжна быть функция ($storeсейчас будет объяснено).
Мы используем ранее определенные шаблоны.
Чтобы устранить неоднозначность интерполяции текста, убедитесь, что вы установили delimitersотличные от Django ({{/ }}).
Мы используем propslist в качестве массива для передачи данных нашим компонентам.
4. Подключение магазина Vue.js для сбора базы данных Django с помощью Vuex
Богатый внешний интерфейс может иметь множество слабо связанных компонентов, каждый из которых имеет собственный набор параметров, что может усложнить совместное использование данных или управление состоянием переменных.
Вот где Vuex пригодится:
Он служит централизованным хранилищем для всех компонентов приложения с правилами, гарантирующими, что состояние может изменяться только предсказуемым образом.
Создание магазина Vuex
Давайте создадим и определим хранилище в нашем шаблоне Django и воспользуемся данными, доступными в представлении Django:
const store = new Vuex.Store ({
state: {
authors: [
{% for author in authors%}
{
name: '{{ author.name }}',
slug: '{{ author.slug }}',
},
{% endfor%}
],
articles: [
{% for article in articles%}
{
content: '{{ article.content | linebreaksbr }}',
name: '{{ article.name }}',
slug: '{{ article.slug }}',
},
{% endfor%}
],
},
getters: {
getArticleBySlug: (state) => (slug) => {
return state.articles.find (articles => articles.slug === slug)
},
getAuthorBySlug: (state) => (slug) => {
return state.authors.find (authors => authors.slug === slug)
},
}
})
Авария
Давайте рассмотрим, что только что произошло:
Мы создали магазин с использованием Vuex.Store ().
Мы определили состояние Vuex, в котором собраны все символы articlesи authors.
Мы использовали forцикл, встроенный в шаблоны Django, для перебора всех articlesи authors.
Мы создали два геттера Vuex для получения статьи или автора по их слагу getArticleBySlugи getAuthorBySlug, соответственно.
Vuex — это еще многое другое, поэтому обязательно ознакомьтесь с руководством по началу работы и справочником по API.
5. Маршрутизация
В Django есть мощный диспетчер URL, который мы будем использовать в сочетании с маршрутизацией Vue.js.
Мы создадим приложение, которое:
использует динамическое сопоставление маршрутов для беспрепятственного переключения между страницами без обновлений (см. пример)
работает с вложенными маршрутами (см. пример)
С Джанго
Реактивные
Мы отредактируем myproject/urls.pyтак, чтобы он использовал базовый каталог /в качестве маршрута для нашего приложения:
from django.contrib import admin
from django.urls import path
# don’t forget to import the app’s view!
from myapp import views as myapp_views
urlpatterns = [
path ('admin/', admin.site.urls),
# paths for our app
path ('', myapp_views.frontend),
path ('article//', myapp_views.frontend),
path ('author//', myapp_views.frontend),
]
С маршрутизатором Vue
По умолчанию Vue Router использует «режим хеширования» (то есть: http: //site/#/path) в качестве трюка JavaScript для загрузки частей страницы с использованием привязок. Однако мы будем использовать режим истории HTML5 Vue Router, что означает, что все наши
Мы настроим маршрутизатор так, чтобы он соответствовал каждому пути к соответствующему ранее определенному компоненту:
const routes = [
{ component: ArticleList, path: '/article/', },
{ component: AuthorList, path: '/author/', },
{ component: ArticleItem, path: '/article/: slug/', },
{ component: AuthorItem, path: '/author/: slug/', },
]
const router = new VueRouter ({
mode: 'history’,
routes: routes,
})
Как мы видим, синтаксис для определения путей немного отличается от синтаксиса Django, но по сути это одно и то же.
Узнайте больше о маршрутизаторе Vue.
6. Тестирование всего
Теперь, когда мы собрали все части вместе, пришло время провести тестирование серого ящика и посмотреть, как все работает!
Создайте суперпользователя Django
Прежде чем мы сможем войти в систему администратора, нам нужно создать суперпользователя.
Создадим администратора:
(myenvironment) $ python manage.py createsuperuser
Далее вы введете имя пользователя, адрес электронной почты и пароль (дважды).
Запустите локальный сервер
Мы запустим встроенный сервер Django, runserverчтобы запустить
На консоли:
(myenvironment) $ python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...
System check identified no issues (0 silenced).
March 09, 2020 — 19:41:22
Django version 3.0.3, using settings 'myproject.settings’
Starting development server at http: //127.0.0.1:8000/
Quit the server with
Создание записей в базе данных
Теперь мы заполним базу данных, чтобы мы могли просматривать
Перейдем по адресу http: //127.0.0.1:8000/admin/ и введем учетные данные администратора, которые вы только что создали, чтобы мы могли создать двух авторов и четыре статьи:
На панели MYAPP рядом с пунктом «Авторы» щелкните ссылку «Добавить «и создайте не менее двух авторов. Добавлены два автора
На панели MYAPP рядом со статьями нажмите ссылку «Добавить «и создайте как минимум две разные статьи для каждого автора. Добавлены статьи для каждого автора
Обратите внимание, что вы должны добавить статьи после создания нескольких авторов, чтобы вы могли связать их.
Просмотрите сайт!
Пришло время посмотреть, как все это работает вместе!
Полный
Вы можете перемещаться по всему коду проекта в моем репозитории GitHub, luzdealba/djangovuejs.
Во всяком случае, это, вероятно, то, что вас больше всего интересует:
<! doctype html>
Django and Vue.js
Wouldn’t it be cool if you could prototype a custom web application that’s responsive (mobile ready), reactive (
<
class="nav-link text-primary"
to="/author/"
>
Go to Authors
<
class="nav-link text-primary"
to="/article/"
>
Go to Articles
<
Впереди: микросервисы!
На данный момент у вас уже есть надежный прототип, который может служить доказательством концепции, чтобы представить идею вашим потенциальным клиентам или коллегам, или послужить основой для вашего собственного проекта.
Хотя созданный нами интерфейс может отображать реестры базы данных, вы не можете взаимодействовать с ними
Хотите верьте, хотите нет, но реализовать микросервис через REST API с помощью Django довольно просто. Все, что вам нужно, это надстройка Django REST framework, которая очень хорошо документирована и, как и все вещи Django, мощная, гибкая и безопасная.
Следующее, что вы можете сделать с открытым API, — это управлять данными прямо на вашем внешнем интерфейсе с помощью Vue.js. Я не могу описывать здесь подробности, но вы можете ознакомиться со статьей «Использование Axios для потребления API «в Vue.js Cookbook.
Подведение итогов
Как вам такое введение в полнофункциональную разработку? Мы создали прототип проекта, который может стать основой для
И я ничего не разбавлял! На самом деле, поскольку мы используем хранилище Vuex для управления состоянием и Vue Router для динамического сопоставления маршрутов с самого начала, нам не нужно вносить существенных изменений по мере масштабирования приложения. Таким образом, вы можете взять его оттуда и расширить в любом направлении, которое вам нужно — настроить базу данных, улучшить интерфейс и даже создать микросервис!
Не стесняйтесь, если ваши знания Python или JavaScript несколько ограничены. Нам всем нужно с
