Рубрики
Без рубрики

Как построить приложение Django со стимулами и турболанками

Как построить приложение с Django, Turbolinks и стимулом TL; DR Итак, вы хотите h … Tagged с Python, JavaScript, WebDev, Django.

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”