25. Vue 使用 vue-resource 发起post请求,删除列表数据

需求

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

25. Vue 使用 vue-resource 发起post请求,删除列表数据

本章节主要需要实现的功能是点击「删除」按钮,进行数据删除,同时重新渲染列表的数据。

那么执行步骤如下:

  1. 开发后台处理 del_list() 的视图函数。
  2. 前端设置post请求进行删除数据,然后执行get请求获取删除后的数据。

设计API接口

  1. URL地址 :/del_list
  2. 作用描述 :删除列表中的数据
  3. 请求方式 :POST
  4. 传入api的参数:id
  5. 返回数据格式 :json
  6. 返回数据格式样例:
{
"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,如下:

25. Vue 使用 vue-resource 发起post请求,删除列表数据

前端Vue实现删除数据的功能

「1.如果要删除数据,首先需要知道点击删除按钮的id」

25. Vue 使用 vue-resource 发起post请求,删除列表数据
			   <!-- 使用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信息确认一下看看。

25. Vue 使用 vue-resource 发起post请求,删除列表数据

浏览器执行如下:

25. Vue 使用 vue-resource 发起post请求,删除列表数据

从浏览器执行来看,已经正确将需要删除的数据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请求,刷新页面数据」

25. Vue 使用 vue-resource 发起post请求,删除列表数据

执行删除id = 1的数据,列表正常刷新。

交流QQ群:

25. Vue 使用 vue-resource 发起post请求,删除列表数据

25. Vue 使用 vue-resource 发起post请求,删除列表数据


点击下面,查看更多Vue系列文章

25. Vue 使用 vue-resource 发起post请求,删除列表数据25. Vue 使用 vue-resource 发起post请求,删除列表数据


25. Vue 使用 vue-resource 发起post请求,删除列表数据






原文始发于微信公众号(海洋的渔夫):25. Vue 使用 vue-resource 发起post请求,删除列表数据

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/32213.html

(1)
小半的头像小半

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!