专栏首页Devops专栏28. Vue 使用 vue-resource 发起post请求,增加列表数据

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

需求

上一章节说明了发起get请求,渲染列表的数据,如下:

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

那么执行步骤如下:

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

设计API接口

  1. URL地址 : /add_list
  2. 作用描述 : 增加列表中的数据
  3. 请求方式 : POST
  4. 传入api的参数:
{"id":1,"name":"千里马"}
  1. 返回数据格式 : json
  2. 返回数据格式样例:
{
  "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)
    })

},
  1. 测试添加数据,发起post请求,查看返回的结果

可以看到添加数据成功之后,则会返回{messages: "添加成功", status: 0}数据。

  1. 再次刷新列表,重新执行get_list接口,刷新列表数据
  1. 开发判断使用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("请求失败!")
            }

        })
    }
},
  1. 再次添加数据,检查列表的刷新情况

添加数据成功后,立即刷新列表的数据。

  1. 添加成功后,还要重置id、name输入框的数据

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 63. Vue MUI的基本使用

    MUI 并不能使用 npm 去下载,需要自己手动从 github 上,下载现成的包,自己解压出来,然后手动拷贝到项目中使用;

    Devops海洋的渔夫
  • Django 2.1.7 视图

    上一篇中讲诉了Django关于模型的设计以及数据操作,本篇章就来继续讲解关于模板的内容。

    Devops海洋的渔夫
  • Redis 数据结构之hash类型

    Devops海洋的渔夫
  • java-覆盖equals和hashcode方法

    在effective java 一书中,第三章第一节,讲了覆盖equals及hashcode的相关约定。通常情况下,equals表示逻辑值相等,而则表示引用指向...

    冬天里的懒猫
  • 抢发论文,不顾疫情?权威流行病学期刊发布迄今最详细研究,疾控中心回应质疑

    1月30日,《新英格兰医学杂志》(NEJM)发表的的一篇文章——Early Transmission Dynamics in Wuhan, China, of ...

    大数据文摘
  • CentOS 7 yum 安装 PHP7.3 教程

    参考:https://www.mf8.biz/centos-rhel-install-php7-3/ 1、首先安装 EPEL 源:

    双面人
  • SSH框架之旅-struts2(1)

    struts2 框架在 struts1 和 WebWork的技术上合并而来的,全新的struts2 框架是以 WebWork 框架为核心,采用拦截器的机制来处理...

    Wizey
  • 都有哪些进程间通信方式?麻烦你不要再背了

    学习软件工程规范的时候,我们知道瀑布模型,在整个项目开发过程分为多个阶段,上一阶段的输出作为下一阶段的输入。各个阶段的具体内容如下图所示

    我是程序员小贱
  • w3c官网解读——js基础教程_js对象

    帮0基础的你分析w3c官网的javascript基础教程及小案例,让喜欢javascript的朋友可以爱上他并能拥抱他!

    用户1730674
  • Seq2Seq的PyTorch实现

    本文介绍一下如何使用 PyTorch 复现 Seq2Seq,实现简单的机器翻译应用,请先简单阅读论文Learning Phrase Representation...

    mathor

扫码关注云+社区

领取腾讯云代金券