В то время как Джанго полезен для написания API, его основная цель – как основа для создания полных веб -сайтов. Рендеринг HTML является одной из фундаментальных способностей Django, и он использует шаблоны Jinja, чтобы сделать написание гибких, многоразовых веб -страниц простыми. Эта статья научит вас, как сделать базовый веб -сайт с Django; Мы создадим защищенную в системе панели панели продаж. Этот проект продемонстрирует необходимые методы веб -разработки с Django: написание представлений для HTML, аутентификация с формами, показывая данные из DB и включающую статические активы.
В этой статье будет представлен итеративный подход к разработке веб -страницы. Вы можете начать с установки Python 3 и Django 2.2, или вы можете пропустить вперед и Клонировать окончательную версию от Github Анкет Если вы строите вместе со мной, начните с работы Django-admin startProject Dashboard . CD Dashboard Чтобы войти в каталог, тогда Python Manage.py StartApp Core Создаст приложение. Обязательно добавьте 'core.apps. Coreconfig ' к Insted_apps в настройках.py. Оттуда вы сможете следовать за изменением отдельных файлов.
Независимо от того, начали ли вы клонировать проект или создать свой собственный, убедитесь, что вы запустите Python Manage.py Migrate и Python Manage.py CreateSuperuser Чтобы закончить настройку. Запустить Python Manage.py Runserver Чтобы начать сайт Django.
Мы начнем с написания простого представления для рендеринга HTML в браузере. Джанго поддерживает представления на основе функций и взгляды на основе классов. В этих примерах мы будем использовать взгляды на основе классов, но это решение сводится к личным предпочтениям, поскольку оба предоставляют одинаковые функции с различным синтаксисом. Например, представления на основе классов наиболее полезны, если вы хотите поддерживать несколько взаимодействий с одним URL-адресом, например, если вам нужно поддерживать несколько методов HTTP.
В этой статье мы практикуем Django, а не HTML или CSS. Таким образом, мы собираемся использовать Фантастический шаблон с открытым исходным кодом от начала начальной загрузки Анкет Шаблон предоставит нам все HTML, CSS и JS, которые нам нужны для этого упражнения, что позволит нам сосредоточиться на Django. Если вы начинаете с нуля, загрузите шаблон и скопируйте файлы index.html и login.html в/core/stemplates. Хотя мы оставим большую часть функциональности в этих шаблонах в качестве заполнителей, они помогут нам написать интерактивный веб -сайт.
После сохранения шаблона на «/Core/Templates/index.html» мы можем использовать следующее представление в «/core/views.py» для рендеринга страницы.
from django.shortcuts import render
from django.views import View
class Index(View):
template = 'index.html'
def get(self, request):
return render(request, self.template)
Затем добавьте маршрут в “/dashboard/urls.py” следующим образом:
from django.contrib import admin
from django.urls import path
from core import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.Index.as_view(), name='index')
]
С написанным представлением, когда мы запускаем сервер и перейдем к http://127.0.0.1:8000 , мы видим страницу.
Прямо сейчас страница выглядит не очень хорошо. К счастью, шаблон включал кучу статических активов (CSS, JavaScript и другие файлы), которые мы можем включить для улучшения сайта. Для этого сначала сделайте папку «статичным» под «ядром», затем скопируйте папки «CSS», «JS» и «Продавец» в статике. Наконец, на странице HTML вам необходимо подготовить «/static/» к путям трех импорта CSS в заголовке и девяти импорта JavaScript в нижнем колонтитуле. После этого страница выглядит намного лучше.
Как только мы сможем правильно увидеть содержимое страницы, оказывается, что здесь есть много (поддельных) конфиденциальных данных! Давайте ограничим доступ, внедрив страницу входа в систему, которая послужит отличным знакомством с использованием форм в веб -страницах в Django.
Начните с копирования шаблона «login.html» в одну и ту же «Core/Templates/« Папка », как и« index.html. «Вы также захотите внести те же изменения, что и раньше, на два импорта CSS и три источника JavaScript. Мы добавим маршрут и просмотр, чтобы поддержать эту новую страницу.
В urls.py:
path('login', views.Login.as_view(), name='login'),
В взгляде.py:
class Login(View):
template = 'login.html'
def get(self, request):
return render(request, self.template)
Вы заметите, что на данный момент наше представление логина почти идентична нашему представлению индекса. Это скоро изменится, чтобы поддержать фактическую страницу. Посетим страницу входа в систему в http://127.0.0.1/login/ Анкет Попробуйте войти в систему, используя учетные данные Superuser, которые вы создали ранее.
Хотя страница выглядит великолепно, она еще ничего не делает. Для этого нам нужно будет использовать форму. К счастью, Django обеспечивает отличный дефолт Аутентификация форма Это принимает имя пользователя и пароль. Мы можем добавить это в представление следующим образом:
from django.contrib.auth.forms import AuthenticationForm
from django.contrib.auth import login, authenticate
class Login(View):
template = 'login.html'
def get(self, request):
form = AuthenticationForm()
return render(request, self.template, {'form': form})
def post(self, request):
form = AuthenticationForm(request.POST)
username = request.POST['username']
password = request.POST['password']
user = authenticate(request, username=username, password=password)
if user is not None:
login(request, user)
return HttpResponseRedirect('/')
else:
return render(request, self.template, {'form': form})
Это также потребует некоторых изменений в HTML страницы входа. Джанго поддерживает шаблон джинджи из коробки. Шаблон Jinja – это расширение HTML, которое позволяет включать данные с двойным кронштейном {{data}} и выражения с аналогичным синтаксисом { % выражение %} Анкет Мы будем использовать теги Jinja, чтобы включить форму в HTML -страницу.
Мы можем добавить несколько CSS, включив этот сценарий впоследствии. Поскольку элементы Jinja приведены в HTML-серверную сторону, мы можем полагаться на идентификаторы элементов, существующие в DOM, когда этот скрипт работает на клиенте.
После этих изменений посещение страницы входа позволит нам войти и просматривать основную панель инструментов. Тем не менее, читатели с орлиными глазами заметят, что нам еще предстоит реализовать какую-либо защиту для приборной панели. Действительно, любой все еще может посетить индекс и просмотреть там всю конфиденциальную информацию. Таким образом, мы должны унаследовать другой класс в Индекс Посмотреть.
from django.contrib.auth.mixins import LoginRequiredMixin
class Index(LoginRequiredMixin, View):
template = 'index.html'
login_url = '/login/'
def get(self, request):
return render(request, self.template)
LoginRequiredMixin Класс предотвращает доступ к кому -либо, кроме аутентификации добраться до страниц, которые он защищает. Если кто -то попытается перейти к индексу перед возобновлением, он удобно перенаправляет их на страницу входа в систему, чтобы аутентифицировать себя.
Мы использовали Джинджу, чтобы включить форму; Мы также можем использовать его, чтобы избежать повторного кода. Прямо сейчас у нас есть только две HTML -страницы, но полная реализация этого приложения будет иметь десятки. Вместо того, чтобы копировать и вставлять общие элементы, мы можем унаследовать заголовок от базового шаблона.
Мы начнем с создания нового файла «base.html», в «Core/Semplates». «Этот файл будет включать общую информацию заголовка между двумя страницами.
{% block title %}{% endblock %} {% block links %} {% endblock %} {% block body %} {% endblock %}
Затем будущие страницы могут использовать следующий синтаксис из модифицированного «index.html».
{% extends "base.html" %}
{% block title %}Employee Dashboard{% endblock %}
{% block links %}
{% endblock %}
{% block body %}
{% endblock %}
У нас есть еще одно место для применения шаблона джинджи на домашней странице. В настоящее время все цифры в таблице жестко кодируются в HTML, что требует редактирования самой веб-страницы при изменении данных. Вместо этого мы можем сохранить эти данные в нашей базе данных и передать их в представление. Это также сэкономит нам почти 500 строк ручного HTML с текущими данными.
Во -первых, нам нужна модель для представления сотрудников в базе данных. В «Core/Models.py» мы определяем сотрудника следующим образом.
from django.db import models
class Employee(models.Model):
name = models.CharField(max_length=150)
position = models.CharField(max_length=150)
office = models.CharField(max_length=150)
age = models.PositiveIntegerField()
start_date = models.DateField()
salary = models.PositiveIntegerField()
def __str__(self):
return self.name
Убедитесь, что вы зарегистрируете модель в «Core/admin.py».
from django.contrib import admin
from .models import Employee
class EmployeeAdmin(admin.ModelAdmin):
list_display = [f.name for f in Employee._meta.fields]
admin.site.register(Employee, EmployeeAdmin)
При написанной и зарегистрированной модели мы можем совершать и запускать миграции (бросить сервер, python Manage.py Makemigrations , Python Manage.py Migrate , Python Manage.py Runserver ) Перейдите к администратору и нажмите на таблицу сотрудников. Нажмите «Добавить сотрудника» в верхнем правом углу и введите все данные, которые вы хотите в форме.
Сделайте это еще несколько раз, пока у вас не появится небольшая фальшивая компания. Затем вернитесь к нашим “Views.py” и измените Индекс Передайте базу данных сотрудника в файл HTML в качестве запроса.
def get(self, request):
employees = Employee.objects.all()
return render(request, self.template, {'employees': employees})
Наконец, удалите всю поддельную таблицу в «index.html» и замените ее на цикл по данным, которые мы ввели в базу данных.
{% for employee in employees %}
{{ employee.name }}
{{ employee.position }}
{{ employee.office }}
{{ employee.age }}
{{ employee.start_date }}
${{ employee.salary }}
{% endfor %}
Django создает индекс, рендеринг из нашей базы данных вместо того, чтобы просто возвращать данные наполнителя. Все функции поиска и упорядочения по-прежнему работают точно так же, как и раньше, единственное отличие состоит в том, что HTML генерируется на стороне сервера из базы данных, а не жестко.
Теперь мы видели несколько мощных шаблонов для создания веб -страниц с Джанго и Джинджой. Использование шаблонов и расширений позволяет нам повторно использовать общий код между страницами. Формы позволяют нам надежно собирать и передавать пользовательские данные (когда веб -сайт обслуживается по HTTP). Мы можем использовать рендеринг на стороне сервера для включения данных в HTML и отправить их клиенту. Эти фундаментальные шаблоны являются основными навыками, которые позволят вам создать широкий спектр веб -страниц в Джанго.
Это Статья MKDEV написано Филиппом Кили. Вы можете нанять Наши наставники Python Чтобы выучить Python и Django самостоятельно.
Оригинал: “https://dev.to/mkdev/fundamentals-of-front-end-django-b2k”