在 Flask 中集成 Vue-Python教程

资源魔 2020-07-19 19:05:15 24 0

本教程答复了这么一个成绩， "我怎样把 Vue.js 集成到 Flask中?" 由于你在浏览本教程，因而我假定您晓得 Flask 是一个为疾速 Web 开发而构建的 Python 微框架。假如您没有相熟 Flask，或许您以为我可能要说保温瓶，那末我倡议正在持续本教程以前，您先浏览一下这里。

Vue.js 是用于构建用户界面的渐进式框架。假如您没有相熟它，能够正在这里上浏览无关内容。

如今您曾经相熟了 Flask 以及 Vue.js，咱们能够开端了。

Flask设置

让咱们先装置几个依赖：

pip install --user cookiecutter

Cookiecutter 是一个很棒的饬令行对象，用来疾速疏导名目模板。咱们在应用 cookiecutter，以是咱们没有需求破费太多工夫来设置装备摆设名目。请记住, Flask 其实不像 Django 同样蕴含电池, 因而必需正在名目的初始设置中投入年夜量工作。

如今您曾经装置了Cookiecutter, 咱们需求抓取一个名目模板。关于这个教程, 咱们只要要一个简略的 Flask API。运转如下饬令:

cookiecutter gh:mobidevke/cookiecutter-flask-api-starter

您应该失去如下输入：

repo_name [api-starter]: flask-vuejs-tutorial
api_name [Api]: api
version [1.0.0]: 1.0.0

应该创立一个名为 flask-vuejs-tutorial 的文件夹。导航到该文件夹，您应该看到如下构造：

├── app
│   ├── config.py
│   ├── factory.py
│   ├── __init__.py
│   ├── models
│   │   ├── base.py
│   │   ├── database.py
│   │   ├── datastore.py
│   │   └── __init__.py
│   ├── resources
│   │   ├── example.py
│   │   └── __init__.py
│   └── utils.py
├── pytest.ini
├── README.md
├── requirements.txt
├── settings.py
├── tests
│   ├── conftest.py
│   ├── __init__.py
│   ├── test_app.py
│   ├── test_models.py
│   ├── test_resources.py
│   └── utils.py
├── unit-tests.sh
└── wsgi.py

很漂亮，没有是吗 ?

正在持续以前，咱们需求设置一个虚构环境。执行:

python -m venv venv

如今，您能够应用喜爱的IDE /文本编纂器关上名目文件夹。正在持续下一步以前，请记住激活虚构环境。
如今咱们能够装置依赖项。执行：

pip install -r requirements.txt

实现后，关上 app/config.py。您会留意到，此API模板应用了postgres数据库衔接。假如您没有介怀，能够应用须要的凭证设置postgres db。不然，请应用如下代码行替代该文件夹的内容：

import os

class Config:
    ERROR_404_HELP = False

    SECRET_KEY = os.getenv('APP_SECRET', 'secret key')

    SQLALCHEMY_DATABASE_URI = 'sqlite:///tutorial.db'
    SQLALCHEMY_TRACK_MODIFICATIONS = False

    DOC_USERNAME = 'api'
    DOC_PASSWORD = 'password'

class DevConfig(Config):
    DEBUG = True

class TestConfig(Config):
    SQLALCHEMY_DATABASE_URI = 'sqlite://'
    TESTING = True
    DEBUG = True

class ProdConfig(Config):
    DEBUG = False

config = {
    'development': DevConfig,
    'testing': TestConfig,
    'production': ProdConfig
}

咱们曾经删除了了一切的 postgres 设置装备摆设，以支持 sqlite 的设置装备摆设。假如您要应用 postgres，请放弃 conf.py 文件没有变。
如今咱们需求导出 Flask 使用顺序。执行:

export FLASK_APP=wsgi:app

如今咱们曾经实现了 Flask 的 API 的设置，执行:

flask run

而后正在阅读器上关上 http://127.0.0.1:5000/example。您应该能看到如下内容：

{"message": "Success"}

Vue.js设置

如今咱们的 API 曾经预备就绪，咱们能够持续疏导vue使用顺序了。
咱们需求做的第一件事是装置 vue cli。执行:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

一旦装置实现后, 您能够应用如下饬令反省版本能否正确(3.x)：

vue --version

正在名目文件夹的根目次中运转:

vue create web

我抉择 default (babel, eslint) 作为预设，并抉择 yarn 作为我的包裹治理器。假如您相熟node名目，则能够持续并抉择您的首选选项。假如不，请遵照本教程的默许设置。
如今导航到新建的 web 文件夹并运转：

yarn serve
# OR
npm run serve

假如导航到http://localhost:8080/, 您应该可看到 Welcome to Your Vue.js App 文本。

如今咱们预备开端集成。

正在 Web 文件夹中，创立一个名为 vue.config.js 的文件并粘贴如下内容：

const path = require('path');

module.exports = {
  assetsDir: '../static',
  baseUrl: '',
  publicPath: undefined,
  outputDir: path.resolve(__dirname, '../app/templates'),
  runtimeCompiler: undefined,
  productionSourceMap: undefined,
  parallel: undefined,
  css: undefined
};

正在这里, 为 Vue cl i界说了一些设置装备摆设。咱们只对三个字段感兴味: assetsDir, baseUrl, outputDir。
让咱们从 outputDir 开端。
此文件夹保留已构建的 Vue 文件的地位，行将保留将加载 Vue 使用顺序的 index.html 的文件夹。假如您察看这提供的门路, 您将会留意到该文件夹位于flask使用顺序的 app 模块外部。
assetsDir 保留用于寄存动态文件(css, js 等)的文件夹。留意它是绝对于 outputDir 字段中提供的值的。
最初, baseUrl 字段将正在 index.html 中保留动态文件的门路前缀。您能够反省这个以理解无关其余设置装备摆设选项的更多信息。
如今运转:

yarn build
# OR
npm run build

假如关上 app 文件夹, 您会留意到曾经创立了两个新文件夹, 即templates 以及 static。它们蕴含内置的vue文件。
如今正在app 文件夹中创立一个 views.py 文件并粘贴如下内容：

from flask import Blueprint, render_template, abort
from jinja2 import TemplateNotFound

sample_page = Blueprint('sample_page', 'sample_page', template_folder='templates')

@sample_page.route('/sample')
def get_sample():
    try:
        return render_template('index.html')
    except TemplateNotFound:
        abort(404)

如今，这是怎样回事呢？
好吧，如今咱们创立一个名为 sample_page 的 Flask 蓝图(blueprint)，并增加路由。这条路由将衬着咱们的 Vue 使用。

关上 __init__.py 文件并正在 app = f.flask 下增加如下几行:

.....
app = f.flask
from .views import sample_page

app.register_blueprint(sample_page, url_prefix='/views')

正在这里, 咱们在注册以前创立的蓝图(blueprint)。
咱们为蓝图(blueprint)指定了url前缀，以便于能够从 /views/sample拜访咱们的vue使用顺序。

假相时辰到啦。

关上 http://127.0.0.1:5000/views/sample，您应该能看到如下内容:

假如您反省日记, 将看到正确加载了内置资本:

 * Serving Flask app "wsgi:app"
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
127.0.0.1 - - [24/May/2019 20:45:02] "GET /views/sample HTTP/1.1" 200 -
127.0.0.1 - - [24/May/2019 20:45:02] "GET /static/css/app.e2713bb0.css HTTP/1.1" 200 -
127.0.0.1 - - [24/May/2019 20:45:02] "GET /static/js/chunk-vendors.b10d6c99.js HTTP/1.1" 200 -
127.0.0.1 - - [24/May/2019 20:45:02] "GET /static/js/app.c249faaa.js HTTP/1.1" 200 -
127.0.0.1 - - [24/May/2019 20:45:02] "GET /static/img/logo.82b9c7a5.png HTTP/1.1" 200 -
127.0.0.1 - - [24/May/2019 20:45:02] "GET /views/favicon.ico HTTP/1.1" 404 -

您曾经胜利将Flask与Vuejs集成

保举教程：《Python教程》

以上就是正在 Flask 中集成 Vue的具体内容，更多请存眷资源魔其它相干文章！

标签： Python python教程 python编程 python使用问题 vue