前面操作已经完成了列表前后端分离的增加、查询功能,本篇章来看看删除功能。
本章节主要需要实现的功能是点击删除按钮,进行数据删除,同时重新渲染列表的数据。
那么执行步骤如下:
del_list()
的视图函数。{
"messages": "删除成功",
"status": 0
}
定义数据列表为全局变量data_list
,开发del_list
视图函数根据id
删除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('/del_list', methods=["POST"])
def del_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')
print('id = %s' % (id))
# 请求数据异常,则返回失败
if id is None:
data = {
'status': 1, # 0请求成功 1请求失败
'messages': "删除失败",
}
res = make_response(jsonify(data)) # 设置响应体
res.status = '401' # 设置状态码
return res
# 将根据id删除列表list中的数据
for i in range(0,len(data_list)-1):
item = data_list[i]
if item['id'] == int(id):
data_list.pop(i) # 删除数据
# 返回json数据
return res
# 添加列表数据
@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)
测试删除接口del_list
,如下:
1.如果要删除数据,首先需要知道点击删除按钮的id
<!-- 使用v-for遍历数据,并且设置key保证组件唯一性 -->
<tr v-for="item in list" :key="item.id">
<th scope="row">{{ item.id }}</th>
<td>{{ item.Name }}</td>
<td>{{ item.Ctime }}</td>
<!-- 1.绑定click事件,并且使用prevent修饰符阻止默认事件,避免a跳转页面 -->
<!-- 2.绑定delList()方法,将该行的item.id传入delList()方法中 -->
<td><a href="#" @click.prevent="delList(item.id)">删除</a></td>
</tr>
在成功将item.id
传入delList()
方法中,打印一下id信息确认一下看看。
浏览器执行如下:
从浏览器执行来看,已经正确将需要删除的数据id传入方法中,那么下一步就是将这个id数据,发出删除接口请求。
2.基于获取到的删除id,发出删除的post请求,执行数据删除
methods: {
delList(id) { // 根据Id删除数据
console.log(`删除数据的id = ${id}`);
// 发送post请求,删除数据
// 设置 post 方法的第二个参数,设置传递的数据对象
// 通过 post 方法的第三个参数, { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式 application/x-www-form-urlencoded
this.$http.post('http://127.0.0.1:5000/del_list', {id:id}, { emulateJSON: true }).then(result => {
console.log(result.body);
if (result.body.status === 0){
// 当执行成功,则立即刷新列表数据
this.getList();
}
})
},
...
3.删除数据之后,重新发出get请求,刷新页面数据
执行删除id = 1
的数据,列表正常刷新。