温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何把Vue集成到Flask中

发布时间:2020-06-16 10:29:09 来源:亿速云 阅读:1745 作者:Leah 栏目:编程语言

如何把Vue集成到Flask中?针对这个问题,今天小编总结了这篇文章,希望能帮助更多想解决这个问题的朋友找到更加简单易行的办法。

Vue.js 是用于构建用户界面的渐进式框架。如果您不熟悉它,可以在这里上阅读有关内容。

现在您已经熟悉了 Flask 和 Vue.js,我们可以开始了。

Flask设置

让我们先安装几个依赖:

(猜你喜欢:如何部署vue+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 的文件夹。 导航到该文件夹,您应该看到以下结构:

(猜你喜欢:七步教你搭建一个Vue Flask项目)

├── 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 文件夹, 您会注意到已经创建了两个新文件夹, 即templatesstatic。 它们包含内置的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, 您应该能看到以下内容:

如何把Vue集成到Flask中

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

 * 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 -

关于把Vue集成到Flask中的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI