如何在 Flask 中集成 Vue.js ?

本教程回答了这么一个问题, "我怎么把 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, 您应该能看到以下内容:

Image

如果您检查日志, 将看到正确加载了内置资源:

 * 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集成 😄。

这篇教程的源码可以在这里找到: 这里.

本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://dev.to/michaelbukachi/flask-vue-...

译文地址:https://learnku.com/python/t/38868

本文为协同翻译文章,如您发现瑕疵请点击「改进」按钮提交优化建议
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!