美文网首页vue
vue-resource之添加和删除列表的数据

vue-resource之添加和删除列表的数据

作者: 夕禾口 | 来源:发表于2019-05-04 17:38 被阅读0次

    接上文~~~~~~~~~~~~

    在实现添加和删除的功能时,发现之前的api 用不了了,换了一个api实现。

    全局变量

    在使用接口时,每次都要写完整路径,所以偷懒使用了全局变量

    以下时功能的具体实现

    添加数据

    通过在methods中定义add方法,并使用@click 绑定到按钮上

    在这里使用了post 方法,post方法有三个参数:

    1.要请求的URL地址

    2.需要提交给服务器的数据,数据要以对象的形式船体给服务器{name:this.name}

    3.第三个参数时配置对象,说明要以那种表单数据类型传递,(emulateJSON:true)以普通表单格式,把数据交给服务器

    格式:application/x-www-form-urlencoded

    在post方法中使用了.then 来设置成功的回调函数,当result.status === 201时,添加数据成功

    删除数据

    删除数据时,设定以id为索引值删除,此时需要获取数据id, 然后判断status 状态码是否为200,若为200,则将传入的id和列表id比较,当两者相同时,删除id及对应的数据。

    注:删除数据时,只是删除了本地数据,服务器的数据还是存在的,但刷新页面时,依旧可以看见原来的数据

     大体上实现了添加和删除的功能,但是都存着bug,在添加时时间没有刷新;在删除数据时,id没有重新排列,且都删除的时第一个数据,与理论效果存在偏差,后续改进。

    最后感谢网友提供的api:http://jsonplaceholder.typicode.com/users

    如果本文有幸被各位大佬看到,请给出一些建议,萌新在此谢谢啦~

    相关文章

      网友评论

        本文标题:vue-resource之添加和删除列表的数据

        本文链接:https://www.haomeiwen.com/subject/ecqfoqtx.html