Лекции
May 27, 2020

Пишем свою фриланс-биржу #1

Привет! Сегодня мы настроим проект и полностью подготовим всё к работе.

Создадим папку и перейдём в неё:

mkdir naive-freelance && cd naive-freelance

Вирутальное окружение

Добавим виртуальное окружение (убедитесь, что у вас установлена утилита python-venv):

python3 -m venv venv

Активируем вирутальное окружение (команда для linux):

source venv/bin/activate

Подробная инструкция для вирутального окружения: https://uoa-eresearch.github.io/eresearch-cookbook/recipe/2014/11/26/python-virtual-env/

Установка модулей

Теперь, когда виртуальное окружение активировано установим все необходимые зависимости:

pip install django django-rest-framework django-cors-headers djoser

Папка для бэкенда:

mkdir django-freelance && cd django-freelance

Создаём проект django:

django-admin startproject django_freelance && cd django_freelance

Теперь давайте сделаем новое приложение:

python manage.py startapp freelance

Установим модули для PostgreSQL:

pip install pgsql psycopg2-binary

Скачать PostgreSQL: https://www.postgresql.org/download/

Настраиваем settings.py

В INSTALLED_APPS дописываем:

'freelance',
'rest_framework',
'djoser',
'corsheaders'

В MIDDLEWARE:

'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',

После AUTH_PASSWORD_VALIDATORS добавим:

CORS_ORIGIN_WHITELIST = [
    "http://localhost:8080",
]
CORS_ALLOW_METHODS = [
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
]
Если Вам незнакомы HTTP-методы, то посмотрите это моё видео.

DATABASES перепишем следующим образом:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': 'freelance',
    }
}

Не забудьте создать БД:

createdb freelance

Makefile

Теперь создадим Makefile (важно сделать это в той же папке, где у вас лежит manage.py) для упрощения взаимодействия с Django:

migrate:
	python manage.py makemigrations && python manage.py migrate

run:
	python manage.py runserver

Vue init

Инициализируем проект:

vue init webpack vue-freelance

В качестве линтера в этот раз берём линтер от airbnb.

Доставим необходимые модули:

npm i axios vue-axios vuex -D

Запуск

Переходим в ту самую папку, где у вас лежит файлик manage.py и вводим следующую команду в терминал:

make run

Теперь во втором экземпляре консоли запустим приложение Vue:

npm start

Если всё запустилось, то Вы всё сделали правильно.

Видео: