Рубрики
Без рубрики

Создание следующего приложения с помощью фреймворков Python

Простой эксперимент по использованию Next и Python для разделения шаблонных движков в веб-приложениях Python.

Автор оригинала: LAU TIAM KOK.

Вступление

Не так давно я писал о Создании следующего приложения с Koyna, Express и Slim , которое нацелено на Node.js и веб-фреймворки PHP. Если вы используете Python, то это простой эксперимент и основная идея, как мы можем создать приложение Next с помощью веб-фреймворков Python, таких как Flask .

Следующий

Итак, вот что у меня есть в pages/index.vue :







И в моем 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/ .

Доступ к нему можно получить по адресу || http://localhost:3000/|| . Вы должны увидеть домашнюю страницу с сообщением Hello World, поступающим из || http://localhost:5000/|| .

Вывод

Вот и все, и теперь у нас есть Nuxt как сервер и клиент, которые обрабатывают представление и шаблоны нашего приложения, в то время как Python просто обрабатывает логику нашей серверной стороны, и нам больше не нужны никакие шаблонные движки для представления нашего контента. Итак, раз и навсегда, возможно, нам не нужно изучать так много шаблонных движков, и нам не нужно беспокоиться о битве между ними, потому что теперь у нас есть universal one – Nuxt.

Вы можете скачать рабочий образец из repo в моем GitHub. Любые вопросы, проблемы или мысли, просто оставьте мне сообщение.