# Django Unicorn --- ## ajax ---- AJAX — это аббревиатура, которая означает Asynchronous Javascript and XML. На самом деле, AJAX не является новой технологией, так как и Javascript, и XML существуют уже довольно продолжительное время, а AJAX — это синтез обозначенных технологий. AJAX чаще всего ассоцириуется с термином Web 2.0 ---- Обобщим достоинства AJAX: * Возможность создания удобного Web-интерфейса * Активное взаимодействие с пользователем * Частичная перезагрузка страницы, вместо полной * Удобство использования --- ## unicorn ---- По своей природе unicorn - библиотека, которая позволяет вам ускоренно писать ajax запросы, используя только синтаксис python ![](https://i.imgur.com/FM2Krku.png) ---- Преимуществом такого подхода является относительная простота в понимании происходящего (ведь все комманды выполняются на уже привычном питоне), а недостатком являются добполнительные ограничения, которые мы должны наложить на себя при разработке нашего ПО. ---- Для начала нам нужно установить библиотеки ``` pipenv install django pipenv install django-unicorn ``` ---- Далее создаем проект и приложение ``` django-admin startproject OneShot . python manage.py startapp Pages ``` ---- Включаем их в наш набор настроек в settings.py ``` INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', "django_unicorn", "Pages" ] ``` ---- И указываем пути для использования скриптов django unicorn ``` urlpatterns = [ path('admin/', admin.site.urls), path("unicorn/", include("django_unicorn.urls")), path("", include("Pages.urls")), ] ``` ---- После этого создаем в нашем приложении Pages папки components и templates ![](https://i.imgur.com/qo1EJeO.png) ---- Обратите внимание на названия файлов: * они должны совпадать * ру файл пишется через нижнее подчеркивание, html через дефис Это ограничение самого юникорна, связанное с механизмом адресации ---- Далее создадим простую таблицу ``` from django.db import models class Tasks(models.Model): task = models.TextField(max_length=350) date = models.DateField() ``` ---- И напишем наш первый компонент ``` from django_unicorn.components import UnicornView from Pages.models import Tasks class MainPageView(UnicornView): tasks = [[x.task, x.date, x.pk] for x in Tasks.objects.all()] new_task = '' new_date = '' def save(self): new_field = Tasks(task = self.new_task, date = self.new_date) new_field.save() self.tasks = [[x.task, x.date, x.pk] for x in Tasks.objects.all()] self.new_task = '' self.new_date = '' def delete(self, pk): field = Tasks.objects.get(id = pk) field.delete() self.tasks = [[x.task, x.date, x.pk] for x in Tasks.objects.all()] ``` ---- Здесь нужно обратить внимание на название нашего класса, оно должно совпадать с названием ру файла, но без подчеркиваний, каждое слово с большой буквы и с припиской View ---- Рассмотрим шаблон ``` {% load unicorn %} <html> <head> {% unicorn_scripts %} </head> <body> <div unicorn:view> {% csrf_token %} <input type="text" unicorn:model.lazy="new_task" placeholder="New task" id="new_task"> <input type="text" unicorn:model.lazy="new_date" placeholder="New date" id="new_date"> <button unicorn:click="save">Add</button> {% if tasks %} {% for elements in tasks %} <p> {% for element in elements %} {% if forloop.counter == 3 %} <button unicorn:click="delete({{element}})">Delete</button> {% else %} {{element}} {% endif %} {% endfor %} </p> {% endfor %} {% endif %} </div> </body> </html> ``` ---- Из нового мы загружаем юникорн `{% load unicorn %}` и его скрипты `{% unicorn_scripts %}`. Далее мы вставляем `{% csrf_token %}` непосредственно в `body` и добавляем `unicorn:view` к `div`, чтобы указать библиотеке, с чем именно она должна работать. ---- Юникорн отправляет все переменные класса, как контекст, по этому мы можем к немку обратиться. Чтобы привязать поле ввода к переменной мы используем конструкцию unicorn:model.lazy="имя_переменной" ---- К кнопкам мы привязали функции нашего класса, которые будут выполняться по нажатию. На примере функции delete мы можем увидеть прямое указание переменных для обработки. ---- Настроим маршруты для нашей главной страницы ``` from django.urls import path from .components.main_page import MainPageView urlpatterns = [ path('', MainPageView.as_view(), name='index'), ] ``` ---- Задание: * Написать вторую страницу для редактирования записей * Создать механизм педактирования записей
{"metaMigratedAt":"2023-06-16T19:29:06.816Z","metaMigratedFrom":"Content","title":"Django Unicorn","breaks":true,"contributors":"[{\"id\":\"0d39d5a3-691d-488c-8f1e-1a0fb0be4f13\",\"add\":4867,\"del\":2}]"}
    569 views