28. Vue 使用 vue-resource 发起post请求，增加列表数据

Devops海洋的渔夫

发布于 2020-04-16 19:01:10

1.2K0

发布于 2020-04-16 19:01:10

文章被收录于专栏：Devops专栏

需求

上一章节说明了发起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("请求失败！")
            }

        })
    }
},