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

需求

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

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

那么执行步骤如下：

开发后台处理 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();
            }

        })

    },
    ...