Вы знаете, как использовать Django для создания веб-приложений, а также знаете, как создавать красивые интерфейсы с использованием Angular, но вы, вероятно, задавались вопросом, как интегрировать их друг с другом для создания одного веб-приложения, которое имеет преимущества обоих?
Это было то, что крутилось у меня в голове, когда я изучал Django и Angular 4. Я хотел, чтобы они оба были в одном приложении, чтобы я мог пользоваться мощью Python и совершенством Angular и без отдельного изучения node.js для создания полноценного веб-приложения. И, я думаю, у вас, читая эту историю, тоже есть тот же мотив.
Давайте начнем
Сначала немного предыстории.
Django - это универсальный пакет, имеющий различные функции и возможности. Это:
- Быстро - он предназначен для разработчиков, чтобы быть максимально быстрым, что помогает сделать его рентабельным и эффективным.
- Множество функций - Множество дополнительных функций, таких как аутентификация пользователей, администрирование контента, RSS-каналы и т. Д.
- Безопасность - множество функций безопасности для предотвращения атак, таких как внедрение SQL и межсайтовые сценарии.
- Масштабируемость - он может выдерживать большой спрос на трафик, что делает его подходящим для загруженных веб-сайтов.
Наряду со всем этим у него есть питон, я имею в виду, должен ли я говорить, насколько это хорошо? 😉
Но тогда почему мы пытаемся использовать вместе с этим Angular?
Потому что это кроссплатформенный, быстрый, помогает нам создавать красивый пользовательский интерфейс, и этот список можно продолжить. Подробнее читайте здесь.
А еще система шаблонов Django - отстой! Angular может помочь создать масштабируемое, чистое и одностраничное веб-приложение.
Хватит разговоров. Построим сами.
Настройка каталогов
- Создайте каталог для нашего приложения.
mkdir my-app && cd my-app
2. Создайте две отдельные папки для нашего внутреннего интерфейса (Django) и внешнего интерфейса (Angular 4).
mkdir backend && mkdir frontend
Настройка Django
- Сначала загрузите это репо в виде zip-файла и скопируйте его в серверную директорию. В этом zip-файле есть шаблон, готовый для развертывания Heroku. Итак, развертывание на Heroku теперь без проблем.
- Разархивируйте и переименуйте папку по вашему выбору имени приложения.
- В папке есть еще одна папка, также измените ее название на ваше усмотрение, допустим, «my-app»
- Переименуйте все экземпляры «my-app» (без кавычек) с именем вашего приложения в следующих файлах:
а. Procfile
б. manage.py
c. мое приложение / wsgi.py
d. мое приложение / settings.py
4. Теперь создайте новое приложение в Django.
python3 manage.py startapp new_app
5. В текущем каталоге будет создан проект с именем «new_app».
6. Мы будем использовать DRF (Django REST Framework) для настройки API в нашем приложении Django для подключения к Angular. Подробнее про DRF читайте здесь.
Создайте новый файл serializers.py (без кавычек) в папке new_app. Чтобы правильно использовать DRF, загляните здесь.
Вы можете изменить serializers.py в соответствии с моделями, которые вы определили в файле «models.py». Сделаем макет.
Файл models.py должен выглядеть так:
Файл serializers.py должен выглядеть так:
Также не забудьте обновить файл settings.py, добавив «new_app» и «rest_framework» и еще несколько необходимых изменений ( См. Строки 31–41 ниже).
Обновите файл следующим образом:
Чтобы использовать шаблоны, необходимо обновить файл settings.py.
Теперь создайте новую папку «Шаблоны» и файл «home.html». Скопируйте в него приведенное ниже содержимое.
Итак, это важная вещь, о которой нужно помнить. «home.html» будет использовать файлы CSS и Javascript, которые Angular будет генерировать каждый раз, когда вы меняете приложение Angular с именем:
а. styles.css
б. runtime.js
c. polyfills.js
d. main.js
Здесь следует помнить, что для работы с Angular в части Django мы создадим домашний URL-адрес, как определено ниже в строке 9, а другие URL-адреса будут REST API, которые часть Angular будет использовать для подключения к Django. .
Помните, что часть Angular (интерфейс) будет взаимодействовать с Django (серверной частью), используя эти API-интерфейсы REST, определенные в файле «urls.py».
Теперь измените файл urls.py.
Измените «views.py» следующим образом. DRF используется для обработки запроса GET. Здесь мы просто возвращаем все данные, хранящиеся в базе данных, в виде ответа JSON.
Вам также потребуется обновить файл «requirements.py», добавив к нему DRF, что требуется только при развертывании в Heroku.
Теперь это самая простая установка Django, которая вам понадобится.
Это довольно просто, правда? Просто настройте проект Django и добавьте DRF.
Настройка Angular 4
Теперь займемся угловой частью.
- Перейдите в каталог внешнего интерфейса и запустите новое приложение Angular 4.
ng new my-app
2. Это простое приложение Angular, но нам нужно использовать Django в качестве бэкэнда.
Итак, идея состоит в том, что DRF поможет нам создать API (мы определили эти URL-адреса ранее в файле urls.py), которые приложение Angular будет использовать с помощью HTTP запросы. Мы заменяем Node.js на Django.
Стек MEAN (Mongo, Express.js, Angular, Node.js) теперь является стеком MAD (Mongo, Angular, Django). Но в этом приложении мы просто используем базу данных SQLite для простоты.
3. Перейдите в этот репозиторий, чтобы увидеть все изменения, которые необходимы приложению Angular. Я отмечу здесь необходимые.
Сначала мы увидим файл app.router.js. Вы можете видеть, что в строке 13 «PageNotfoundComponent» используется для обработки ошибок 404 Page Not found. В Django это была встроенная функция, но теперь нам нужно реализовать ее самостоятельно.
4. В «app.module.ts» импортируйте HttpModule и AppRoutingModule.
5. А остальное - это обычный Angular.
Весь исходный код находится в моем репозитории Github. Найдите его внизу.
Запустите проект
Чтобы запустить сервер Django, просто запустите
python manage.py runserver
И запустите приложение Angular,
ng build --prod --output-path /path-to your-project-directory/backend/my-app-name/my-app/static/ang --watch --output-hashing none
prod используется для создания рабочей версии приложения.
output-path - это каталог, в который мы помещаем приложение Angular. Мы помещаем файлы в папку static Django, поскольку эти файлы будут использоваться как статические.
смотрите, чтобы постоянно искать изменения в приложении Angular, которое вы делаете, а затем немедленно компилировать и помещать их в каталог выходного пути.
hashing none удаляет хэши, созданные в файлах styles.css, runtime.js, polyfills.js и main.js имена файлов.
И это все, что вам нужно сделать. Запомните шаги:
- Создайте проект Django.
- Используйте DRF, вкусный пирог или любую другую платформу API по вашему выбору.
- Не забудьте определить свой API в файле urls.py.
- Создайте приложение Angular.
- Обрабатывайте страницы ошибок, например 404.
- Создайте HTTP запросы к API, который вы создали для получения и отправки данных.
- Выполнено!
Поздравляем !!! Теперь вы знаете, как использовать возможности Django + Angular для создания мощных приложений.
Код выше: Ссылка на репозиторий Github.
Пожалуйста, нажмите кнопку 👏, если вам понравился пост, и удерживайте его, чтобы подарить больше любви.
Если вы хотите подключиться:
Twitter Instagram LinkedIn Github
Эта история опубликована в The Startup, крупнейшем предпринимательском издании Medium, за которым следят + 379 306 человек.
Подпишитесь, чтобы получать наши главные новости здесь.
