Сегодня речь пойдет о том, как использовать модный, новый и активно набирающий популярность javascript-фреймворк Vue.js с python-фреймворком Django. Исходники 1 части здесь!
Что мы хотим получить? (конечно - блог)
1. CRUD API - основные функции добавления, чтения, изменения и удаления статей.
2. Разделить backend (django + django-rest-framework) и frontend (html + css + vue.js) части сайта.
3. Получить Single Page Application.
Оговорюсь сразу, я не Frontend-разработчик, с дизайном у меня не очень =(, но я постараюсь.
Процесс установки инструментов пропустим. На оф. страницах есть подробные инструкции для этого.
Я буду работать в Visual Studio Code. Для тестирование API использую утилиту Postman.
После создания и настройки django-проекта (blog) и приложения (api) добавляем в список установленных приложений 'rest-framework':
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'api',
]
В приложении добавляем еще один файл "serializers.py", который будет отвечать за преобразование данных.
Перейдем к проектированию БД. Пусть будут 2 таблицы: Категория, Статья.
Процесс создания миграций, создания пользователей и тп. пропущу.
Перейдем к нашему API функционалу. Редактируем файл serializers.py. Создадим класс - сериализацию каждой модели.
Переходим к написанию вьюх.
Создаем функции, обернутые в декоратор api_view. Реализуем выбор запроса стандартной конструкцией if/elif/else. Логика такова: выбираем объект или объекты, передаем из сериализатору, далее он все делает за нас, и возвращаем response.
Создаем еще 2 функции для работы со статьями. Добавим самую простую возможность фильтрации по категориям.
Определяем роуты в нашем приложении в файле urls.py (не забудьте в проекте добавить маршруты из приложения)
В самом простом случае наш backend готов. Для упрощения я не изменял настройки БД. Упростил архитектуру БД. Упростил логику вьюх.
Во второй части статьи, я расскажу про механизм CORS, который защищает API.
Продолжение будет во второй части статьи!
Спасибо за внимание! Если понравилась статья, буду ждать лайк или подписку =)