Logo

菜单

发布于 2026-01-06 1 阅读
0

Flask Vue.js 集成教程

Flask Vue.js 集成教程

本教程解答“如何将 Vue.js 与 Flask 集成？”这个问题。既然您正在阅读本教程，我假设您已经了解Flask是一个专为快速 Web 开发而构建的 Python 微框架。如果您不熟悉 Flask，或者可能以为我要讲的是保温瓶😜，那么我建议您在继续阅读本教程之前先阅读一下 Flask 的相关介绍（链接在此）。

Vue.js是一个用于构建用户界面的渐进式框架。如果您还不熟悉它，可以点击此处了解更多信息。

既然你已经熟悉了 Flask 和 Vue.js，我们就可以开始了。

Flask 设置

我们先来安装几个依赖项：



pip install --user cookiecutter
Enter fullscreen mode Exit fullscreen mode

Cookiecutter是一个非常棒的命令行工具，可以快速创建项目模板。我们使用 Cookiecutter 是为了节省项目设置时间。请记住，Flask 不像Django那样开箱即用，因此项目初始设置需要投入大量精力。

现在您已经安装了 Cookiecutter，接下来我们需要获取一个项目模板。在本教程中，我们只需要一个简单的 Flask API。请运行以下命令：



cookiecutter gh:mobidevke/cookiecutter-flask-api-starter
Enter fullscreen mode Exit fullscreen mode

你应该得到以下输出：



repo_name [api-starter]: flask-vuejs-tutorial
api_name [Api]: api
version [1.0.0]: 1.0.0
Enter fullscreen mode Exit fullscreen mode

应该创建一个名为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
Enter fullscreen mode Exit fullscreen mode

很漂亮，不是吗😃？

在继续之前，我们需要设置一个虚拟环境。运行：



python -m venv venv
Enter fullscreen mode Exit fullscreen mode

现在您可以使用您喜欢的 IDE/文本编辑器打开项目文件夹。请记住在进行下一步之前激活虚拟环境。
现在我们可以安装依赖项了。运行：



pip install -r requirements.txt
Enter fullscreen mode Exit fullscreen mode

打开后app/config.py，您会注意到此 API 模板使用了 PostgreSQL 数据库连接。如果您不介意，可以使用必要的凭据设置 PostgreSQL 数据库。否则，请将该文件夹的内容替换为以下代码：



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
}
Enter fullscreen mode Exit fullscreen mode

我们已移除所有 PostgreSQL 配置，转而使用 SQLite 配置。如果您想继续使用 PostgreSQL，请保持该conf.py文件不变。
现在我们需要导出 Flask 应用。运行：



export FLASK_APP=wsgi:app
Enter fullscreen mode Exit fullscreen mode

现在我们已经完成了 Flask API 的设置，请运行：



flask run
Enter fullscreen mode Exit fullscreen mode

然后打开http://127.0.0.1:5000/example。您应该会看到以下内容：



{"message": "Success"}
Enter fullscreen mode Exit fullscreen mode

Vue.js 设置

现在我们的 API 已经准备就绪，可以开始引导 Vue 应用了。
首先需要安装 Vue CLI。运行：



npm install -g @vue/cli
# OR
yarn global add @vue/cli
Enter fullscreen mode Exit fullscreen mode

安装完成后，您可以使用以下命令检查版本是否正确（3.x）：



vue --version
Enter fullscreen mode Exit fullscreen mode

在项目文件夹根目录下运行：



vue create web
Enter fullscreen mode Exit fullscreen mode

我选择了默认的配置（babel、eslint）和yarn作为包管理器。如果您熟悉 Node 项目，可以选择您喜欢的选项。如果不熟悉，请按照本教程的默认设置操作。
现在，进入新建的web文件夹并运行：



yarn serve
# OR
npm run serve
Enter fullscreen mode Exit fullscreen mode

如果您访问http://localhost:8080/，您应该会看到“欢迎使用您的 Vue.js 应用”的文本。

现在我们准备开始集成工作。
哇哦

在 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
};
Enter fullscreen mode Exit fullscreen mode

注意：如果您使用的是 Vue CLI 3.3 或更高版本，请使用 ` <vue-cli-config-file> publicPath` 代替 ` <vue-cli-config-file>` baseUrl。这里，我们定义了一些 Vue CLI 的配置。 我们只关注三个字段：`assetsDir`、`baseUrl` 和 `outputDir`。 首先来看 `outputDir`。 这个文件夹存放着已构建的 Vue 文件，也就是用于加载 Vue 应用的 `<vue-config-file>` 文件所在的文件夹。如果您查看提供的路径，会发现该文件夹位于Flask 应用的 `<vue-config-file>` 模块内。` <vue-config-file>` 存放着静态文件（css、js 等）。注意：它是相对于 `baseUrl` 字段中提供的值的相对路径。 最后，` baseUrl` 字段保存着 `<vue-config-file>` 中静态文件的路径前缀。您可以查看此文档以了解有关其他配置选项的更多信息。 现在运行：



index.htmlapp
assetsDiroutputDir
baseUrlindex.html



yarn build
# OR
npm run build
Enter fullscreen mode Exit fullscreen mode

打开app文件夹后，你会发现创建了两个新文件夹，分别是 `<build_vue_file>`templates和 `<build_vue_file> static`。它们包含了已构建的 Vue 文件。
现在，在 `<build_vue_file>` 文件夹中创建一个views.py文件app，并将以下内容粘贴到该文件中：



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)
Enter fullscreen mode Exit fullscreen mode

现在，这里发生了什么？
我们正在创建一个名为 `<blueprint_name>` 的 Flask 蓝图sample_page，并向其中添加一条路由。这条路由将渲染我们的 Vue 应用。

打开__init__.py并添加以下代码app = f.flask：



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

app.register_blueprint(sample_page, url_prefix='/views')
Enter fullscreen mode Exit fullscreen mode

在这里，我们注册了之前创建的蓝图。
我们给蓝图添加了一个 URL 前缀，以便我们的 Vue 应用可以从/views/sample.

真相大白的时刻已经到来。
片刻

打开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 -
Enter fullscreen mode Exit fullscreen mode

您已成功将 Flask 与 Vuejs 集成 😄。

本教程的源代码可以在这里找到。

文章来源：https://dev.to/michaelbukachi/flask-vue-js-integration-tutorial-2g90
欢迎帖 - v77 欢迎参加由 M...
Prettier 和具有鲜明个性的...