owned this note
owned this note
Published
Linked with GitHub
# Django Unicorn
---
## ajax
----
AJAX — это аббревиатура, которая означает Asynchronous Javascript and XML. На самом деле, AJAX не является новой технологией, так как и Javascript, и XML существуют уже довольно продолжительное время, а AJAX — это синтез обозначенных технологий. AJAX чаще всего ассоцириуется с термином Web 2.0
----
Обобщим достоинства AJAX:
* Возможность создания удобного Web-интерфейса
* Активное взаимодействие с пользователем
* Частичная перезагрузка страницы, вместо полной
* Удобство использования
---
## unicorn
----
По своей природе unicorn - библиотека, которая позволяет вам ускоренно писать ajax запросы, используя только синтаксис python
----
Преимуществом такого подхода является относительная простота в понимании происходящего (ведь все комманды выполняются на уже привычном питоне), а недостатком являются добполнительные ограничения, которые мы должны наложить на себя при разработке нашего ПО.
----
Для начала нам нужно установить библиотеки
```
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
----
Обратите внимание на названия файлов:
* они должны совпадать
* ру файл пишется через нижнее подчеркивание, 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'),
]
```
----
Задание:
* Написать вторую страницу для редактирования записей
* Создать механизм педактирования записей
Google Drive
Gist
Clipboard
Sign in with Wallet
