Автор оригинала: LAU TIAM KOK.
Вступление
Не так давно я писал о Создании следующего приложения с Koyna, Express и Slim , которое нацелено на Node.js и веб-фреймворки PHP. Если вы используете Python, то это простой эксперимент и основная идея, как мы можем создать приложение Next с помощью веб-фреймворков Python, таких как Flask .
Следующий
Итак, вот что у меня есть в pages/index.vue
:
{{ message }}
This is Nuxt + Python.
И в моем nuxt.config.js
, мне нужно убедиться, что правильный адрес моего приложения Python, которое axios
будет вызывать – http://127.0.0.1:5000
:
module.exports = { /* ** Headers of the page */ head: { title: 'starter', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: 'Nuxt.js project' } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ] }, env: { HOST_URL: process.env.HOST_URL || 'http://127.0.0.1:5000' }, /* ** Global CSS */ css: ['~/assets/css/main.css'] }
Питон: Колба
В то время как на стороне сервера Python, в моем app/routes.py
, у меня есть:
from flask import Flask, jsonify from flask_cors import CORS app = Flask(__name__) cors = CORS(app, resources={r"/*": {"origins": "http://127.0.0.1:3000"}}) @app.route('/') def home(): message = {} data = {} message['message'] = 'Hello World from Flask!' data['status'] = 200 data['data'] = message return jsonify(data) if __name__ == '__main__': app.run(debug=True)
Мне нужно убедиться, что только http://127.0.0.1:3000
разрешен доступ к приложению Flask через CORS .
Запуск приложений
После настройки всех основных конфигураций выше, то мы готовы запустить и склеить их вместе:
# Flask $ cd [my-app-name] $ cd venv $ python app/routes.py
Вы можете получить доступ к нему по адресу http://localhost:5000/
непосредственно, и вы должны увидеть вывод json на вашем экране:
{ "data": { "message": "Hello World from Flask!" }, "status": 200 }
В то время как на другой стороне:
# Nuxt # Dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev
Доступ к нему можно получить по адресу http://localhost:3000/
. Вы должны увидеть домашнюю страницу с сообщением Hello World, поступающим из http://localhost:5000/
.
Вывод
Вот и все, и теперь у нас есть Nuxt как сервер и клиент, которые обрабатывают представление и шаблоны нашего приложения, в то время как Python просто обрабатывает логику нашей серверной стороны, и нам больше не нужны никакие шаблонные движки для представления нашего контента. Итак, раз и навсегда, возможно, нам не нужно изучать так много шаблонных движков, и нам не нужно беспокоиться о битве между ними, потому что теперь у нас есть universal one – Nuxt.
Вы можете скачать рабочий образец из repo в моем GitHub. Любые вопросы, проблемы или мысли, просто оставьте мне сообщение.