使用Flask和Vue.js开发一个单页面应用程序

Posted 2021-03-30 TalkPython

点击蓝字关注△ 回复“1024”领取福利大礼包

这一次给大家分享一下，如何使用Vue和Flask开发一个基本的CRUD应用程序。

首先，我会使用Vue CLI搭建一个新的Vue应用程序，然后通过Python和Flask支持的后端RESTful API执行基本的CRUD操作。

主要依赖软件包:

• Vue v2.5.2

• Vue CLI v2.9.3

• Node v10.3.0

• npm v6.1.0

• Flask v1.0.2

• Python v3.6.5

一、Flask服务端程序开发

创建一个新的工程目录：

$ mkdir flask-vue-crud
$ cd flask-vue-crud

在flask-vue-crud目录中，创建一个名为server的新目录。然后，在server目录中创建并激活一个虚拟环境:

$ mkdir server && cd server
$ python -m venv env
$ source venv/bin/activate

安装Flask-CORS跨域扩展插件：

(venv)$ pip install Flask==1.0.2 Flask-Cors==3.0.4

在server目录中，新建app.py文件后，编写代码：

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)

# sanity check route
@app.route('/ping', methods=['GET'])
def ping_pong():
    return jsonify('pong!')


if __name__ == '__main__':
    app.run()

运行app：

(venv)$ python app.py

运行成功后，在浏览器打开http://localhost:5000/ping。您应该看到:

"pong!"

回到终端，按Ctrl+C关闭服务器，然后导航回项目根目录。接下来，让我们将注意力转向前端并设置Vue。

Vue前端程序开发

我们将使用功能强大的Vue CLI生成一个定制的项目样板。全局安装：

$ npm install -g @vue/cli

然后在flask-vue-crud目录中运行以下命令，用webpack配置初始化一个名为client的新Vue项目:

$ vue create client

运行命令后，将看到下面这样的结果：

? Please pick a preset:(User arrow keys)
> default(babel,eslint)
Manually select features

选择defaualt回车，等待环境初始化完成。

前端项目的目录结构如下：

├── App.vue
├── assets
│ └── logo.png
├── components
│ └── HelloWorld.vue
├── main.js
├── store.js
├── router.js

运行开发服务器：

$ npm run serve

在你喜欢的浏览器中打开http://localhost:8080。您应该看到以下内容:

如果你觉得内容还不错，分享给更多朋友，一起提升编程技能。