基于flask,flask组件

2022-08-27 12:10:48 分类：python 阅读()

　　基于flask,flask组件

　　本教程回答了一个问题，“我如何将Vue.js集成到Flask中？”因为您正在阅读本教程，我假设您知道Flask是为快速Web开发而构建的Python微框架。如果你不熟悉烧瓶，或者你认为我可能会说热水瓶，那么我建议你在继续本教程之前阅读这里。

　　Vue.js是一个用于构建用户界面的渐进式框架。如果你不熟悉，你可以在这里阅读。

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

　　00-1010让我们先安装一些依赖项：

　　PIP-User CookieCutter CookieCutter是一个很棒的命令行工具，用来快速指导项目模板。我们用的是cookiecutter，所以不需要花太多时间配置项目。请记住，Flask不像Django那样包含电池，所以必须在项目的初始设置中投入大量工作。

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

　　Cookie GH : Mobidewke/Cookie Cutter-Flask-API-Starter您应该得到以下输出：

　　repo _ name[API-starter]: flask-vue js-tutorial

　　api_name [Api]: api

　　应该创建一个名为flask-vuejs-tutorial的文件夹。导航到该文件夹，您应该会看到以下结构：

　　应用程序

　　 config.py

　　 工厂. py

　　 __init__。巴拉圭

　　 模特

　　 base.py

　　 数据库. py

　　 datastore.py

　　 __init__。巴拉圭

　　 资源

　　 example.py

　　 __init__。巴拉圭

　　 utils.py

　　 pytest.ini

　　自述. md

　　要求. txt

　　设置. py

　　测试

　　 __init__。巴拉圭

　　 测试_app.py

　　 测试_模型. py

　　 测试_资源. py

　　 utils.py

　　单元测试

　　 wsgi.py很美吧？

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

　　现在，你可以用你喜欢的IDE/文本编辑器打开项目文件夹。在继续下一步之前，请记住激活虚拟环境。

　　现在我们可以安装依赖项了。执行：

　　当pip install -r requirements.txt完成后，打开app/config.py你会注意到这个API模板使用postgres数据库连接。如果不介意，可以用必要的凭证设置postgres db。否则，请使用以下代码行代替该文件夹的内容：

　　导入操作系统

　　类别配置：

　　错误_ 404 _帮助=假

　　SECRET _ KEY=OS . getenv( APP _ SECRET ， secret key )

　　SQLALCHEMY_DA

　　TABASE_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的详细内容，更多请关注盛行IT软件开发工作室其它相关文章！

　　

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

标签： python

相关文章阅读

  • ,,Python中的flask框架详解
  • flask开源项目博客,flask博客源码
  • flask框架教程,flask api文档
  • python flask模块,flask框架介绍
  • python flask框架教程,如何安装flask
  • python flask 部署,flask部署服务器
  • python用flask框架开发的,flask前端框架选择
  • apscheduler interval,apscheduler flask
  • flask 配置文件,flask 参数
  • flask 阻塞,flask并发请求
  • flask登录注册表单验证,flask表单提交
  • flask开发实例,flask使用教程
  • flask jinjia,flask中文网
  • flask和django的对比,flask web开发实战
  • python flask 高并发,flask如何处理多并发
    • 留言与评论（共有 条评论）
       
    验证码：