本教程答复了这么一个成绩, "我怎样把 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
抱歉,评论功能暂时关闭!