Как взаимодействует flask и vue-router?

Question

[Maxim Rezvanov]

Всем привет. Пытаюсь построить обычный todo как full spa на flask и vuejs. Столкнулся с проблемой роутинга. Как через flask отдавать пути во vue-router?

Answer 1

[D3lphi]

Независимо от того, используете вы flask или любой другой фреймворк или пишите без оного, spa приложение принято разделять на 2 независимые части: frontend и backend. Первое - это html css и js (vue, vue-router), а второе - сама серверная логика. Данные следует получать при помощи асинхронных(ajax) запросов к backend. То есть, backend, в данном случае выступает как независимый api.

Например, вы хотите написать hello world, получив данные с сервера.

• Создаете роут с путем /example во vue-router.
  
• В flask'е создаете такой же роут и обработчик для него, который будет возвращать данные в формате json.
  
• Посылаете ajax-запрос через js (Например, с использованием http-клиента axios, он наиболее популярен), принимаете данные, выводите.
  

Comments

[Maxim Rezvanov]

правильно ли я понял, что нужно запускать 2 сервера? один для flask, другой для vue?

[D3lphi]

Maxim Rezvanov: Что? Сервер для vue? Вы о чем? Собрались делать серверный рендеринг?

[Maxim Rezvanov]

D3lphi: вот смотрите. Я вообще как бы новичок во vue и сразу извиняюсь, за то что мои вопросы требуют способностей телепатии :) Flask у нас отдает по маршруту "/" одну единственную страницу index.html. А если пользователь хочет пойти на маршрут "/about", то как flask должен отдать путь во vue-router?

[D3lphi]

Maxim Rezvanov: фласк не отдает страницы! Он вообще не знает о том, что мы сайт пишем. Фласк - это api. Пользователь пользуется index.html к которому подключен вьюшный роутинг. если нам нужно получить данные с сервера - делаем запрос к фласку.

[Alexander]

Maxim Rezvanov: посмотрите ссылку в моем ответе. Нужно сделать fallback на index.html

[Maxim Rezvanov]

получается страницу нужно отдавать средствами nginx, apache и т.д. ?

[D3lphi]

Maxim Rezvanov: Да, сливаете(реврайтите) все url'ы на index.html, кроме какого-то одного url, например api/. Все url'ы, начинающиеся с api/ нужно обрабатываться фласком.

[Maxim Rezvanov]

Alexander: спасибо, ща гляну

[Maxim Rezvanov]

D3lphi: все, понял) спасибо) а еще такой вопрос: если приложение строить как non-spa (роутинг полностью на фласке), то как взаимодействуют шаблоны jinja и vue? Допустим, если jinja будет рендерить только компоненты vue ()?

[D3lphi]

Maxim Rezvanov:

то как взаимодействуют шаблоны jinja и vue?

Они полностью независимы. jinja - производит рендер при загрузке страницы, vue - уж во время работы пользователя на страницы.

Если я вам помог, можете отметить ответ решением.

[Maxim Rezvanov]

D3lphi: конечно)

[Maxim Rezvanov]

D3lphi: мне просто интересно, будут ли рендериться компоненты vue после рендеринга jinja...

[D3lphi]

Maxim Rezvanov:

мне просто интересно, будут ли рендериться компоненты vue после рендеринга jinja...

Будут, конечно, они же полностью независимы. Правда, их нужно будет эскейпить. А конкретно, помещать в блок {% raw %}

{% raw %}

Эти скобки будут выведены, как есть, что позволит vue обработать их {{ example }}.

{% endraw %}

[Maxim Rezvanov]

D3lphi: понял, спасибо)

Answer 2

[Alexander]

Не очень понял, с какой именно проблемой вы столкнулись. Но наверное вам нужно все же использовать роуты vue-router'а, а не flask'а для навигации по SPA. А роуты flask'а оставить в покое как api endpoints.

Возможно эта страница будет полезна - https://router.vuejs.org/ru/essentials/history-mod...

Answer 3

[Oleg Agapov]

Тоже задавался таким вопросом :) По итогу разобрался и написал статью:
https://codeburst.io/full-stack-single-page-applic...