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" следует задать в отдельной теме.

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@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