所属分类:php教程
程序员必备接口测试调试工具:立即使用
Apipost = Postman + Swagger + Mock + Jmeter
Api设计、调试、文档、自动化测试工具
后端、前端、测试,同时在线协作,内容实时同步
本教程回答了这么一个问题, "我怎么把 Vue.js 集成到 Flask中?" 因为你正在阅读本教程,因此我假设您知道 Flask 是一个为快速 Web 开发而构建的 Python 微框架。如果您不熟悉 Flask,或者您认为我可能要说保温瓶,那么我建议在继续本教程之前,您先阅读一下这里。
Vue.js 是用于构建用户界面的渐进式框架。如果您不熟悉它,可以在这里上阅读有关内容。
现在您已经熟悉了 Flask 和 Vue.js,我们可以开始了。
让我们先安装几个依赖:
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"}
现在我们的 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的详细内容,更多请关注zzsucai.com其它相关文章!