需求
上一章节说明了发起get请求，渲染列表的数据，如下：
本章节主要需要实现的功能是点击添加按钮，进行数据添加，同时重新渲染列表的数据。
那么执行步骤如下：
- 开发后台处理
add_list() 的视图函数。 - 前端设置post请求进行数据添加，然后执行get请求获取添加后的数据。
设计API接口
- URL地址 ： /add_list
- 作用描述 ： 增加列表中的数据
- 请求方式 ： POST
- 传入api的参数：
{"id":1,"name":"千里马"}- 返回数据格式 ： json
- 返回数据格式样例：
{
"messages": "添加成功",
"status": 0
}Flask后台服务
定义数据列表为全局变量data_list，开发add_list视图函数设置增加data_list数据，开发get_list读取data_list数据。
from flask import Flask, jsonify,request,make_response
# 实例化app
app = Flask(import_name=__name__)
# 定义全局列表数据变量
data_list = [
{'id': 1, 'Name': '奔驰', 'Ctime': '2020-01-21 21:25:44'},
{'id': 2, 'Name': '宝马', 'Ctime': '2020-01-20 21:25:44'},
{'id': 3, 'Name': '法拉利', 'Ctime': '2020-01-19 11:25:44'},
{'id': 4, 'Name': '丰田', 'Ctime': '2020-01-18 13:25:44'},
{'id': 5, 'Name': '特斯拉', 'Ctime': '2020-01-17 15:25:44'},
]
# 添加列表数据
@app.route('/add_list', methods=["POST"])
def add_list():
# 设置返回数据
data = {
'status': 0, # 0请求成功 1请求失败
'messages': "添加成功",
}
res = make_response(jsonify(data)) # 设置响应体
res.status = '200' # 设置状态码
res.headers['Access-Control-Allow-Origin'] = "*" # 设置允许跨域
res.headers['Access-Control-Allow-Methods'] = 'PUT,GET,POST,DELETE'
# 接收post请求的form参数
id = request.form.get('id')
name = request.form.get('name')
print('id = %s, name = %s' % (id, name))
# 请求数据异常，则返回失败
if name is None:
data = {
'status': 1, # 0请求成功 1请求失败
'messages': "添加失败",
}
res = make_response(jsonify(data)) # 设置响应体
return res
# 将数据加入到列表list中
data_list.append({'id': id, 'Name': name, 'Ctime': '2020-01-17 15:25:44'})
# 返回json数据
return res
# 获取列表数据
@app.route('/get_list', methods=["GET"])
def get_list():
data = {
'status': 0, # 0请求成功 1请求失败
'messages': data_list,
}
res = make_response(jsonify(data)) # 设置响应体
res.status = '200' # 设置状态码
res.headers['Access-Control-Allow-Origin'] = "*" # 设置允许跨域
res.headers['Access-Control-Allow-Methods'] = 'PUT,GET,POST,DELETE'
return res
if __name__ == '__main__':
app.run(debug=True)使用postman测试添加数据add_list，如下：
使用postman测试读取数据get_list，如下：
可以看到成功新增了数据。
那么下面只要在前端Vue中调用这两个api即可实现添加数据的功能。
前端Vue实现添加数据的功能
1.开发发送post请求，添加数据功能
addList(){
// 需要添加的数据内容
console.log(`id = ${this.id}, name = ${this.name}`);
// 发送post请求，添加数据
// 设置 post 方法的第二个参数，设置传递的数据对象
// 通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式 application/x-www-form-urlencoded
this.$http.post('http://127.0.0.1:5000/add_list', {id:this.id, name:this.name}, { emulateJSON: true }).then(result => {
console.log(result.body)
})
},- 测试添加数据，发起post请求，查看返回的结果
可以看到添加数据成功之后，则会返回{messages: "添加成功", status: 0}数据。
- 再次刷新列表，重新执行
get_list接口，刷新列表数据
- 开发判断使用
status == 0的条件判断添加数据成功后，再执行get_list请求，立即刷新数据。
methods: {
addList(){
// 需要添加的数据内容
console.log(`id = ${this.id}, name = ${this.name}`);
// 发送post请求，添加数据
// 设置 post 方法的第二个参数，设置传递的数据对象
// 通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式 application/x-www-form-urlencoded
this.$http.post('http://127.0.0.1:5000/add_list', {id:this.id, name:this.name}, { emulateJSON: true }).then(result => {
console.log(result.body);
if (result.body.status === 0){
// 当执行成功，则立即刷新列表数据
this.getList()
}
})
},
getList(){
// 当发起get请求之后， 通过 .then 来设置成功的回调函数
this.$http.get('http://127.0.0.1:5000/get_list').then(function (result) {
// 注意： 通过 $http 获取到的数据，都在 result.body 中放着
console.log(result.body.status); // 打印返回json中的status状态
console.log(result.body.messages); // 打印返回json中的messages数组
if (result.body.status === 0){
// 请求正常
this.list = result.body.messages; // 将messages数组赋值给this.list，然后this.list会渲染到列表中
console.log(this.list);
} else{
// 请求异常
alert("请求失败！")
}
})
}
},- 再次添加数据，检查列表的刷新情况
添加数据成功后，立即刷新列表的数据。
- 添加成功后，还要重置id、name输入框的数据
