需求
前面操作已经完成了列表前后端分离的「增加、查询」功能,本篇章来看看「删除」功能。

本章节主要需要实现的功能是点击「删除」按钮,进行数据删除,同时重新渲染列表的数据。
那么执行步骤如下:
-
开发后台处理 del_list()
的视图函数。 -
前端设置post请求进行删除数据,然后执行get请求获取删除后的数据。
设计API接口
-
URL地址 :/del_list -
作用描述 :删除列表中的数据 -
请求方式 :POST -
传入api的参数:id -
返回数据格式 :json -
返回数据格式样例:
{
"messages": "删除成功",
"status": 0
}
Flask后台服务
定义数据列表为全局变量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
,如下:

前端Vue实现删除数据的功能
「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
的数据,列表正常刷新。
交流QQ群:

点击下面,查看更多Vue系列文章
原文始发于微信公众号(海洋的渔夫):25. Vue 使用 vue-resource 发起post请求,删除列表数据
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/32213.html