Установка виртуального окружения Django REST + VUE
Создание проекта Django
Подготовка
Для работы с Django нам нужна актуальная версия Python.
Для начала научимся немного управляться с командной строкой.
При запуске cmd мы увидим нечто похожее на:
C:\Users\Aleksey>
Я работаю на Windows 10, а не на Linux, к сожалению, но пока так. Поэтому на примере Windows.
Мой проект будет лежать на диске отличном от того, где расположена ОС, поэтому нам необходимо переместиться в корень другого каталога. Для этого указываем название диска с двоеточием после, например:
C:\Users\Aleksey>D: D:\>
С помощью команды dir мы можем посмотреть содержание каталога
D:\>dir
Том в устройстве D имеет метку DATA
Серийный номер тома: DA76-6E89
Содержимое папки D:\
07.07.2020 17:59 <DIR> B2B_platform
15.02.2021 01:21 <DIR> Documents
17.02.2021 22:47 <DIR> Elcabinet
23.02.2020 18:35 <DIR> Games
15.02.2021 01:21 <DIR> Music
15.02.2021 01:21 <DIR> Pictures
03.01.2021 15:12 <DIR> PythonProg
23.11.2020 23:29 <DIR> Soft
15.02.2021 01:21 <DIR> Загрузки
27.02.2020 23:05 <DIR> Файлы
3 файлов 905 232 байт
23 папок 504 108 752 896 байт свободноС помощью команды mkdir Elcabinet создаем директорию в домашнем каталоге.
D:\> D:\>cd Elcabinet D:\Elcabinet>
Теперь мы создадим виртуальное окружение. Это позволит нам использовать изолированные настройки в рамках каждого проекта.
D:\Elcabinet>python -m venv elvenv
elvenv - это название моего виртуального окружения, название может быть любым, но с использованием строчных букв.
Активируем виртуальное окружение:
D:\Elcabinet>elvenv\Scripts\activate
Увидим следующее:
(elvenv) D:\Elcabinet>
Проверяем и апгрейдим версию pip - система управления пакетами Python
(elvenv) D:\Elcabinet>python -m pip install --upgrade pip
Создаем директорию для бэкэнда:
(elvenv) D:\Elcabinet>mkdir django-elcabinet (elvenv) D:\Elcabinet>cd django-elcabinet (elvenv) D:\Elcabinet\django-elcabinet>
Установка Django
Устанавливаем Django:
(elvenv) D:\Elcabinet\django-elcabinet>pip install Django
И еще несколько важных инструментов для работы с API:
(elvenv) D:\Elcabinet\django-elcabinet>pip install django-rest-framework djoser django-cors-headers
Создаем Django-проект в директории бэкэнда:
(elvenv) D:\Elcabinet\django-elcabinet>django-admin startproject django_elcabinet
Перейдем в директорию проекта и создадим приложение:
D:\Elcabinet\django-elcabinet>cd django_elcabinet D:\Elcabinet\django-elcabinet\django_elcabinet>python manage.py startapp elcabinet
После создания приложения, структура проекта должна выглядеть примерно вот так:
Изменение настроек
Теперь после создания Django проекта нам необходимо его настроить.
Для этого мы вносим изменения в файл settings.py
Первое, что нам нужно сделать, это добавить наше приложение и rest-framework и djoser в INSTALLED_APPS
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'elcabinet',
'rest_framework',
'djoser',
'corsheaders',
]С официального репозитория django-cors-headers копируем строки в MIDDLEWARE
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
]Так же копируем и добавляем список источников (пока оставляя "http: // localhost: 8080" ), которым разрешено выполнять межсайтовые HTTP-запросы и список HTTP-команд, разрешенных для фактического запроса.
CORS_ALLOWED_ORIGINS = [
"http: // localhost: 8080" ,
]
CORS_ALLOW_METHODS = [
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
]Ну и укажем:
LANGUAGE_CODE = 'ru-ru' TIME_ZONE = 'Europe/Moscow'
База данных
Теперь настроим базу данных. Будем работать с БД PostgreSQL. Для этого нам необходимо установить модули psycopg2-binary и pgsql
(elvenv) D:\Elcabinet>pip install pgsql psycopg2-binary
Установить Postgresql и создать БД. Создание БД требует отдельной статьи, возможно опишу позже. Пока гуглим, читаем доки.
После создания БД и пользователя БД вносим изменения в settings.py:
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.postgresql',
'NAME': 'elcabinet',
'USER': 'your_user',
'PASSWORD': 'your_password',
'HOST': 'localhost',
'PORT': '5432',
}
}Создаем и применяем миграцию:
(elvenv) D:\Elcabinet\django-elcabinet\django_elcabinet>python manage.py makemigrations (elvenv) D:\Elcabinet\django-elcabinet\django_elcabinet>python manage.py migrate
Запуск сервера
Теперь пробуем запустить север:
(elvenv) D:\Elcabinet\django-elcabinet\django_elcabinet>python manage.py runserver
Обратите внимание, все команды в директории, где лежит файл manage.py. Иначе интерпретатор будет ругаться на отсутствие файла.
Если все прошло удачно, в браузере вы увидите страницу. По умолчанию у Django она выглядит так:
Создание проекта Vue
Установка Node.js
Для создание проекта Vue нам понадобиться установить Vue- CLI. На официальном сайте Vue-CLI указано:
Vue CLI 4.x требуется Node.js версии 8.9 или выше (рекомендуется v10+).
Поэтому, если у вас не установлен Node.js, то устанавливаем с официального сайта Node.js.
Установка Vue-CLI
Устанавливаем с помощью командной строки командами:
npm install -g @vue/cli # ИЛИ yarn global add @vue/cli
Подробно установка описана на официальном сайте.
Создание проекта
Создаем vue-проект с помощью командной строки в директории нашего проекта:
(elvenv) D:\Elcabinet>vue create vue-elcabinet
Подробно установка и настройка проекта описана в статье.
Запуск сервера
После создания проекта Vue, можем запустить сервер. Для этого сначала переходим в директорию нашего проекта Vue:
(elvenv) D:\Elcabinet>cd vue-elcabinet (elvenv) D:\Elcabinet\vue-elcabinet>npm run serve
В итоге после запуска получим ссылки:
App running at: - Local: http://localhost:8080/ - Network: http://192.168.0.105:8080/
Открываем в браузере. По умолчанию страница проекта Vue выглядит вот так:
Поздравляю, начальный этап пройден, но впереди много интересного.