Flask[官方主页]是一个使用Python编写的轻量级web后端框架,其使用 Jinja模板引擎和Werkzeug 作为 WSGI 工具箱。使用Flask可以很方便地实现RESTful的后端API。而Vue.js[官方主页]则是近年来非常火的前端框架。在国内,前端程序员用Vue比较多,因为比较好上手,再加上对中文友好,遇到问题能比较容易搜索出中文结果。可能和Vue.js的作者尤雨溪(Evan You)是华人有一定关系,Vue的中文社区比较活跃。这里以一个简单的例子,展示如何把前端页面的增删改查请求,传递到后端进行数据的操作。 本示例所涉及的工具/模块版本如下:
软件/工具 | 版本 |
---|---|
Vue | v2.6.12 |
Vue CLI | v4.5.9 |
Node | v15.3.0 |
npm | v7.0.14 |
Flask | v1.1.2 |
Python | v3.8.5 |
Flask 配置
由于Flask是基于Python的,自然需要先安装Python。推荐通过Anaconda来管理Python环境。当然,也可以通过Python的venv命令来管理包环境。具体可以参考网上教程。这里就以Anaconda的环境为例。 首先创建一个项目文件夹,并为后端创建server
文件夹:
mkdir flask-vue-crud
cd flask-vue-crud
mkdir server
cd server
然后创建Flask的运行环境:
conda create -n flask python=3.8
conda activate flask
conda install flask flask-cors
在server
文件夹下创建app.py
文件,内容如下:
#!/usr/bin/env python
# -*- coding: utf-8 -*-
from flask import Flask, jsonify
from flask_cors import CORS
# configuration
DEBUG = True
# instantiate the app
app = Flask(__name__)
app.config.from_object(__name__)
# enable CORS
CORS(app, resources={r'/*': {'origins': '*'}})
# sanity check route
@app.route('/open', methods=['GET'])
def open_door():
return jsonify(u'芝麻开门!')
if __name__ == '__main__':
app.config['JSON_AS_ASCII'] = False
app.run()
在flask
环境运行命令python app.py
,会看到如下提示:
* Serving Flask app "app" (lazy loading)
* Environment: production
WARNING: This is a development server. Do not use it in a production deployment.
Use a production WSGI server instead.
* Debug mode: on
* Restarting with stat
* Debugger is active!
* Debugger PIN: 118-107-448
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
在浏览器里打开如下链接:http://localhost:5000/open,会看到页面显示"芝麻开门!"
。说明Flask已经配置成功。(按Ctrl+C可以结束app运行。由于是纯文本,没有样式,某些浏览器比如Safari缺省字体设置可能显示乱码,推荐使用Chrome/Microsoft Edge测试。)
Vue.js安装配置
安装Vue之前,需要先安装Node.js,然后通过Node.js官方提供的包管理工具npm来安装Vue和Vue CLI。可以从Node.js的官方网站https://nodejs.org/en/下载安装包。安装之后,从命令行查看是否正确安装,正确安装的话,会显示各自的版本号。
node -v
npm -v
然后通过npm
安装vue CLI
(如果出现文件夹不可访问的错误,Windows需要管理员权限,Mac/Linux需要sudo
):
npm install -g @vue/cli
国内用户在运行npm
或者vue
命令时,可能会碰到网络连接超时的错误,可以将npm改为国内源再运行:
npm config set registry https://registry.npm.taobao.org
// 配置后可通过下面方式来验证是否成功
npm config get registry
确认回到项目文件夹flask-vue-crud
,然后使用vue
命令创建前端页面。(此处会生成一个client
文件夹,这个文件夹应该和server
文件夹平级,都在项目文件夹flask-vue-crud
下面。所以在执行vue
命令之前,确保已经cd
到项目文件夹下面。)
vue create client
此处会出现选择,缺省选vue2(敲回车即可)。 添加router
插件(中间出现两个问题选yes),并启动vue的demo页面:
cd client
vue add router
npm run serve
启动之后,根据提示,可以在浏览器中打开如下链接:http://localhost:8080/,可以看到Welcome to Your Vue.js App
的demo页面,说明Vue.js安装设置成功。 此时,项目文件夹结构如下: