TL; DR
Значит, вы хотите иметь маленький стартер? Отлично, потому что я построил один для меня Здесь С этим уроком:)
Реальная проблема
Я начал работать над диссертацией бакалавра пару недель назад. Я строю систему рекомендателей для применения B2B и нуждалась в панели инструментов, чтобы показать некоторую статистику и информацию. За последние полтора года я в основном работал над реакциями, в последнее время в следующем. JS. Но я не хотел взорвать все свое приложение Django с помощью дополнительного приложения React, потому что это означало, что мне нужно было реализовать полнофункциональный REST-API для каждой информации, хранящейся в базе данных. Но то, что я хотел иметь, – это ощущение приложения одной страницы. Я знал, что хорошие парни в Basecamp построил что -то подобное. И эта штука была комбинацией турболонков и стимулов. Я всегда хотел попробовать этот другой подход к созданию современных веб -приложений. Но у меня никогда не было реальной «возможности» для этого. Так что сейчас было время.
TechStack
Другой частью моего поиска знаний была реализация WebPack в приложении Django. Я никогда не использовал его раньше в приложениях Django, потому что я использовал Django только для создания API REST для моих проектов машинного обучения. И у них была отдельная реакция, построенная с приложением Create-React-App (ужасно, я знаю). Итак, вот те части, которые мы будем иметь в нашем приложении:
- WebPack
- Turbolinks
- Стимул
- Джанго (управляется с Pipenv)
Запуск окружающей среды и установка зависимостей Python
Начните с создания папки. Вы можете назвать это так, как хотите, но я буду использовать имя Django-stimulus-turbolinks-Starter Анкет Все мои проекты Python не юпитера начинаются с простого использования:
pipenv install --python=3.7
Итак, теперь у нас есть нашу основную среду Python. Кто не знает Pipenv, вы можете описать это как NPM в мире Python. Проверьте это здесь
После успешного создания нашей среды мы хотим начать оболочку Поэтому нам не нужно указывать версию Python, которую мы используем:
pipenv shell
На данный момент мы начинаем работать в нашей виртуальной среде. Идеальный момент для установки Джанго.
pipenv install django
Когда установка закончена, мы хотим начать новый проект Django:
django-admin startproject dsts .
Точка в конце означает, что мы хотим запустить приложение в текущем каталоге. «DSTS» просто коротко для «стартера Django Stymulus Turbolinks».
Я почти всегда добавляю первое приложение после этого момента:
django-admin startapp dashboard
Я назвал это приборной панелью, потому что это было названием первого приложения, которое я использовал в коде моей диссертации.
Все идет нормально! Мы настроили базовое маленькое приложение Django. На этом этапе мы покинем мир Python, чтобы начать реализацию JavaScript -стороны этого проекта.
Инициализация и настройка NPM-проекта
Итак, NPM. Моя первая любовь к менеджерам пакетов. И, честно говоря, это все еще лучшее, что я знаю. Без сомнений. Итак, здесь мы начинаем с известной команды:
npm init -y
Чтобы ускорить ситуацию, я добавил -y Флаг. Если вы не знаете, что делает y-flag, прочитайте это Здесь Анкет
В качестве следующего шага нам нужно установить наши зависимости. Я добавил больше, чем только пакеты, которые мы действительно необходимость . Таким образом, у нас есть дополнительная загрузка файлов, Вавилон и так далее. Но в первую очередь до самой важной части:
npm install webpack webpack-cli stimulus turbolinks css-loader file-loader --save
Но нам нужны дополнительные пакеты для наших Dev-зависимости:
npm install --save-dev mini-css-extract-plugin nodemon @babel/core @babel/plugin-proposal-class-properties @babel/preset-env babel-loader webpack-dev-server
Вот и все! У нас есть самые важные части нашего приложения, готовые к использованию.
Создание и изменение файлов конфигурации
Чтобы правильно использовать WebPack в приложении, нам нужно создать файл конфигурации. В этом файле конфигурации мы можем реализовать все наши пожелания для объединения. Я нашел это Учебное пособие о Webpack довольно полезно. В главе выше мы добавили MinicsSextract в качестве зависимости. Мы сделали это, чтобы получить дополнительный файл CSS через WebPack, поэтому не каждый стиль будет добавлен в заголовок нашего сайта. Кроме того, в файл конфигурации WebPack нам нужно внести некоторые изменения в Package.json и настройки.py нашего приложения Django. Но давайте начнем с конфигурации WebPack.
Файл конфигурации WebPack
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { mode: 'development', entry: './static/js/index.js', plugins: [new MiniCssExtractPlugin()], module: { rules: [ { test: /\.css$/i, use: [MiniCssExtractPlugin.loader, 'css-loader'], }, { test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], plugins: [ '@babel/plugin-proposal-class-properties' ] } } } ] } }
Как вы можете видеть, у нас в настоящее время есть правила для CSS и JavaScript. Чтобы получить больше информации, я рекомендую посмотреть учебник, который я связал выше.
package.json
В этом файле мы добавим только две строки кода в раздел скрипта. Мы добавим сборка и старт командование
"scripts": { "start": "nodemon -w webpack.config.js -x webpack-dev-server", "build": "webpack", "test": "echo \"Error: no test specified\" && exit 1" },
Чтобы убедиться, что мы будем использовать NPM Run Build -Мамма сразу, чтобы создать Dist папка.
settings.py
В начале этой статьи мы создали первое приложение, поэтому я буду использовать этот момент, чтобы добавить его в наш раздел «Установленные приложения» в настройки.py Анкет Если вы хотите узнать больше о Django, я рекомендую учебные пособия Кори Шафер . На мой взгляд, он лучший учитель Python. Его содержание бесплатно, и я всегда нашел ответ на вопрос, который у меня был.
INSTALLED_APPS = [ // just add it at the end of this list 'dashboard' ] // at the bottom of the file STATIC_URL = 'http://127.0.0.1:8080/' # for webpack dev STATICFILES_DIRS = ['dist'] # for the generated dist folder
И это наш технический стек!
Index.js, index.css и первый контроллер стимула
Чтобы приложение полностью совместно работать, нам нужно добавить несколько дополнительных папок. На статической стороне вещей, которые нам нужны, чтобы создать Статический Папка в корневом каталоге. Мы уже видели, куда он пойдет, в webpack.config.js И в нашем приложении Панель инструментов Мы создадим папку под названием «Шаблоны».
Так что это будет выглядеть примерно так:
django-stimulus-turbolinks-starter | dashboard | | templates | static | | css | | | index.css | | js | | | controllers | | | | hello_controller.js | | | index.js
index.js
import { Application } from 'stimulus'; import { definitionsFromContext } from 'stimulus/webpack-helpers'; import Turbolinks from 'turbolinks'; // import css import './../css/index.css' const application = Application.start(); const context = require.context('./controllers', true, /\.js$/); application.load(definitionsFromContext(context)); Turbolinks.start();
index.css
.content { max-width: 300px; margin: auto; } p { font-size: 32px; }
Здесь мы создаем наш Стимул и Turbolinks Применение и добавил немного супер базового стиля. Я надеюсь, что этот код является самоочевидным.
Static/Controllers/home_controller.js
import { Controller } from "stimulus" export default class extends Controller { static targets = [ "name", "output" ] greet() { this.outputTarget.textContent = `Hello, ${this.nameTarget.value}!` } }
Это тот же контроллер, который вы можете увидеть на домашней странице стимула. Я не буду углубляться в стимул в этом уроке. Если вы хотите узнать больше, я рекомендую прочитать Документация Анкет
Шаблоны/Home.html
{% load static %}Django Stimulus Turbolinks Starter Hello Stimulus!
Это первый момент, когда мы видим шаблон Django вместе с контроллером стимула. И сюрприз, не выглядит незнакомым, верно? Это потому, что нам не нужно добавлять какой -либо JavaScript в этом месте. Довольно аккуратно!
Служить шаблону и начать приложение
Поздравляю! Это последний шаг этого учебника:)
В качестве последнего шага нам нужны дополнительные строки кода в нашем коде Django, чтобы полностью обслуживать наше приложение Django-Stimulus-Turbolinks.
Панель панели/виды
from django.shortcuts import render from django.views.generic import TemplateView # Create your views here. class LandingView(TemplateView): template_name = 'home.html'
DSTS/URLS
from django.contrib import admin from django.urls import path from dashboard.views import LandingView urlpatterns = [ path('admin/', admin.site.urls), path('', LandingView.as_view(), name='home') ]
Вот и все!
Теперь вы можете использовать следующие команды, чтобы запустить приложение и начать разработку вашего приложения Django-Stimulus-Turbolinks!
Строить!
npm run build
Начни это!
python manage.py runserver
Округлять
Крип! Ты сделал это. Вы создали приложение, которое построено на Джанго, стимуле и турболанке. Я надеюсь, что этот урок был полезным, и вы что -то узнали.
Оригинал: “https://dev.to/webspaceadam/how-to-build-a-django-app-with-stimulus-and-turbolinks-n1m”