Django + Vue + API

@IRIP · Регистрация: 18.04.2015

Студворк — интернет-сервис помощи студентам

Подскажите пожалуйста как правильно настроить проект на Django 2.0, чтобы сервер раздавал клиентскую часть и все остальное через RESTApi.

У меня несколько приложений в одном проекте

хотелось бы использовать SPA принцип, когда единственный HTML-документ выступает, как оболочка для всех веб-страниц и организует взаимодействие с пользователем через динамически подгружаемые HTML, CSS, JavaScript, посредством VUE (желательно с вкладками вверху страницы)

Добавлено через 24 минуты
делаю как написано тут:
(по аналогии)

на этапе написания views.py

Python
1
2
3
4
5
6
7
8
9
10
from django.shortcuts import render
from rest_framework import viewsets
 
from .models import *
from .serializers import TroubleSerializer
 
# Create your views here.
 
class TroubleViewSet(viewsets.ModelViewSet):
    queryset = Trouble.objects.all().order_by('-edit_date')

Возникает ошибка в Trouble.objects.all().order_by('-edit_date') следующего содержания:

solved attribute reference 'objects' for class 'Trouble' less... (Ctrl+F1)
This inspection detects names that should resolve but don't. Du

Добавлено через 2 минуты
На сколько я понимаю, преимущество такого решения в том, что так как мы используем ViewSet, то нам нет необходимости самим настраивать URLs.

Можно использовать готовый класс Router, который предоставляет django rest framework!

А это здорово экономит время и силы и нервы и вообще, много чего еще экономит =)

@IRIP · 02.04.2018, 12:37 **[ТС]**

сделал первое API

пытаюсь туда отправить данные, пишет

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
HTTP/1.1 405 Method Not Allowed
Allow: GET, HEAD, OPTIONS
Content-Length: 55
Content-Type: application/json
Date: Mon, 02 Apr 2018 09:35:12 GMT
Server: WSGIServer/0.2 CPython/3.6.3
Vary: Accept, Cookie
X-Frame-Options: SAMEORIGIN
 
{
    "detail": "Метод \"POST\" не разрешен."
}

@IRIP · 02.04.2018, 13:28 **[ТС]**

Во второй части http://apirobot.me/posts/djang... api-part-2 (создании frontend)

застрял на этапе

HTML5
1
2
3
4
5
Настройка фронтэнда и установка зависимостей
Давайте начнем с создания шаблона с помощью коммандной утилиты vue-cli:
 
$ cd django-vue-simplenote
$ vue init webpack simplenote

при вводе команды vue init webpack simplenote или vue init webpack frontend

возникает ошибка

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
/usr/local/lib/node_modules/vue-cli/bin/vue-init:60
let template = program.args[0]
^^^
 
SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:374:25)
    at Object.Module._extensions..js (module.js:417:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Function.Module.runMain (module.js:442:10)
    at startup (node.js:136:18)
    at node.js:966:3

Добавлено через 21 минуту
У меня ubuntu 16

и помогло предварительно обновление node.js до актуальной версии следующими командами:

HTML5
1
2
3
sudo npm install -g n 
sudo n stable  
sudo npm install npm -g

после этого уже, vue init webpack simplenote и вперед =)

@IRIP · 02.04.2018, 13:51 **[ТС]**

и, Ура! =)

vue запустилось, на 8080 порте

продолжаем, теперь нужно его заставить работать по API с приложением на django

@outoftime · 02.04.2018, 15:17

Сообщение от IRIP

Подскажите пожалуйста как правильно настроить проект на Django 2.0, чтобы сервер раздавал клиентскую часть и все остальное через RESTApi.

Не надо гибриды делать. Для API - Django REST Framework и запуск как обычное djnago приложение а клиент (Вы выбрали Vue - так пишите на Vue)

Отдельно по поводу Vue общайтесь с сообществом в IRC канале на Freenode ребята очень отзывчивые. Есть много разных версий самого фреймворка и набора инструментов для него. Либо пользуйтесь последней кодументацией либо общайтесь с сообществом по поводу того как собирать проэкты Webpack-ом, так как это далеко не тривиальная задача и шаг влево, шаг в право - вас уже не спасти.

Настроить сервер вообще элементарно, отдельно папка с django приложением и venv для него и отдельно папка с webpack bundle (собранный Vue с помощью webpack) - static-ка в терминологии django. nginx надо настроить на выдачу статики и, если статика не найдена - запуск django приложения, который будет обрабатывать остальные запросы. https://www.digitalocean.com/c... untu-16-04

@IRIP · 05.04.2018, 10:21 **[ТС]**

Я так и хочу - использовать django только под api, поскольку считаю, что на django это проще всего реализовать

но много вопросов.

Django я запускаю через uwsgi
а как быть в vue?

на проде все это дело пускать через nginx?

@outoftime · 06.04.2018, 05:05

Сообщение от IRIP

поскольку считаю, что на django это проще всего реализовать

Зависит от задачи...

Сообщение от IRIP

а как быть в vue?
на проде все это дело пускать через nginx?

Ну так это же статика, просто куча файлов, которые не меняются. RTFM

@IRIP · 06.04.2018, 07:28 **[ТС]**

Почему статика? Реактивное приложение запускается на node.js

@outoftime · 06.04.2018, 13:44

Сообщение от IRIP

Реактивное приложение запускается на node.js

Чаво?

@IRIP · 07.04.2018, 06:28 **[ТС]**

ну а как? Везде в манах написано

что если django дает API
а это api использует фронтенд vue
который запущен на node.js
который отдает страницы клиенту
через nginx ... ?

1. django надо запускать на uwsgi? Или внутреннего сервера (встроенного) хватит?
2. фронт на node.js

@outoftime · 07.04.2018, 22:38

Сообщение от IRIP

фронтенд vue который запущен на node.js

Это как вообще?

Сообщение от IRIP

1. django надо запускать на uwsgi? Или внутреннего сервера (встроенного) хватит?
2. фронт на node.js

Фронт это простые файлы. **** ПРОСТЫЕ ФАЙЛЫ! Разделение на фронт и бек было для уменьшения нагрузки на бек, а ты предлагаешь опять весь рендер на сервер засунуть зачем?

RTFM:

Не по теме:

IRIP, ты где учишься?

@IRIP · 08.04.2018, 08:46 **[ТС]**

Да, вот здесь https://github.com/techiediaries/django-auth0-vue это хорошо показано, когда фронт - это простые файлы!

А вот здесь, в примерах http://apirobot.me/posts/djang... api-part-2 именно про запуск отдельно VUE На 8080 порте
а django на 8000

@outoftime · 09.04.2018, 04:20

Сообщение от IRIP

запуск отдельно VUE На 8080 порте а django на 8000

Какое отношение dev сервер имеет к prod-у,

@IRIP · 09.04.2018, 07:14 **[ТС]**

вот в этом и вопрос. Как это все в проде запускать...

@vrm2 · 09.04.2018, 08:58

Вроде так:

Собрать js-приложение (vue + app + зависимости) в один bundle с помощью webpack
Затем этот бандл отправляется клиенту обычными средствами - подключением скрипта на страницу

@outoftime · 10.04.2018, 02:13

IRIP, vrm2, https://www.youtube.com/watch?v=MRlBKfGktwI

@IRIP · 11.04.2018, 07:34 **[ТС]**

Вот в этом, и других конкретных примерах https://github.com/techiediaries/django-auth0-vue

для запуска фронтенда на vue требуется установка node

@outoftime · 11.04.2018, 14:41

IRIP, node надо только для server side rendering. Если интересует эта тема, следует создать отдельный thread на форуме.

@IRIP · 12.04.2018, 11:21 **[ТС]**

Сообщение от outoftime

node надо только для server side rendering

Об этом и речь!
Все эти темы про native, и тому подобные - попытка всесторонне рассмотреть одну и ту же тему.

Цель простая - API на django
а вот уже взаимодействие с пользователем - отдельный вопрос!

Добавлено через 16 часов 36 минут
https://www.techiediaries.com/django-vuejs-auth0/ - вот неплохая статья, делаю по ней

Добавлено через 1 минуту

Сообщение от outoftime

node надо только для server side rendering. Если интересует эта тема, следует создать отдельный thread на форуме.

это понятно, но как на прод.сервере поступать?
Запускать джанго+uwsgi+nginx, предварительно сгенерировав webpack npm run build

который будет храниться в static?

@outoftime · 12.04.2018, 15:39

IRIP, Правила

5.16 Запрещено создавать темы с множеством вопросов во всех разделах, кроме разделов платных услуг. Один вопрос - одна тема.

Вопрос о "server side rendering" следует задать в отдельной теме.

Новые блоги и статьи Все статьи Все блоги /
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .

@IRIP 514 / 146 / 28 Регистрация: 18.04.2015 Сообщений: 1,904 Записей в блоге: 16
	02.04.2018, 13:51 [ТС]
	и, Ура! =) vue запустилось, на 8080 порте продолжаем, теперь нужно его заставить работать по API с приложением на django Миниатюры 0

@IRIP 514 / 146 / 28 Регистрация: 18.04.2015 Сообщений: 1,904 Записей в блоге: 16
	05.04.2018, 10:21 [ТС]
	Я так и хочу - использовать django только под api, поскольку считаю, что на django это проще всего реализовать но много вопросов. Django я запускаю через uwsgi а как быть в vue? на проде все это дело пускать через nginx? 0

@IRIP 514 / 146 / 28 Регистрация: 18.04.2015 Сообщений: 1,904 Записей в блоге: 16
	06.04.2018, 07:28 [ТС]
	Почему статика? Реактивное приложение запускается на node.js 0

@IRIP 514 / 146 / 28 Регистрация: 18.04.2015 Сообщений: 1,904 Записей в блоге: 16
	07.04.2018, 06:28 [ТС]
	ну а как? Везде в манах написано что если django дает API а это api использует фронтенд vue который запущен на node.js который отдает страницы клиенту через nginx ... ? 1. django надо запускать на uwsgi? Или внутреннего сервера (встроенного) хватит? 2. фронт на node.js 0

@IRIP 514 / 146 / 28 Регистрация: 18.04.2015 Сообщений: 1,904 Записей в блоге: 16
	08.04.2018, 08:46 [ТС]
	Да, вот здесь https://github.com/techiediaries/django-auth0-vue это хорошо показано, когда фронт - это простые файлы! А вот здесь, в примерах http://apirobot.me/posts/djang... api-part-2 именно про запуск отдельно VUE На 8080 порте а django на 8000 0

@IRIP 514 / 146 / 28 Регистрация: 18.04.2015 Сообщений: 1,904 Записей в блоге: 16
	09.04.2018, 07:14 [ТС]
	вот в этом и вопрос. Как это все в проде запускать... 0

@vrm2 431 / 302 / 90 Регистрация: 03.12.2015 Сообщений: 741
	09.04.2018, 08:58
	Вроде так: Собрать js-приложение (vue + app + зависимости) в один bundle с помощью webpack Затем этот бандл отправляется клиенту обычными средствами - подключением скрипта на страницу 0

@outoftime ║XLR8║ 1212 / 909 / 270 Регистрация: 25.07.2009 Сообщений: 4,360 Записей в блоге: 5
	10.04.2018, 02:13
	IRIP, vrm2, https://www.youtube.com/watch?v=MRlBKfGktwI 1

@IRIP 514 / 146 / 28 Регистрация: 18.04.2015 Сообщений: 1,904 Записей в блоге: 16
	11.04.2018, 07:34 [ТС]
	Вот в этом, и других конкретных примерах https://github.com/techiediaries/django-auth0-vue для запуска фронтенда на vue требуется установка node 0

@outoftime ║XLR8║ 1212 / 909 / 270 Регистрация: 25.07.2009 Сообщений: 4,360 Записей в блоге: 5
	11.04.2018, 14:41
	IRIP, node надо только для server side rendering. Если интересует эта тема, следует создать отдельный thread на форуме. 0

@outoftime ║XLR8║ 1212 / 909 / 270 Регистрация: 25.07.2009 Сообщений: 4,360 Записей в блоге: 5
	12.04.2018, 15:39
	IRIP, Правила 5.16 Запрещено создавать темы с множеством вопросов во всех разделах, кроме разделов платных услуг. Один вопрос - одна тема. Вопрос о "server side rendering" следует задать в отдельной теме. 0