美文网首页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之添加和删除列表的数据

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

  • python从入门到实战

    1.变量和简单数据类型 变量,字符串,数字,注释,Python 之禅 2.列表的简介 列表是什么,修改、添加和删除...

  • python--列表

    insert 在指定索引位置添加数据 append 在列表末尾添加数据 del 列表[索引] 删除指定索引的数据 ...

  • 缓存数据框

    搜索列表框 + 操作列表数据源添加数据:1.添加搜索框输入数据2.搜索不到列表项才能添加3.删除搜索到的选中列表项

  • 操作列表

    1、修改列表数据 list[2] = 'aaa' 2、添加列表数据 list.append('aaa') 3、删除...

  • 01.Python基础-3.集合容器

    1 列表list 1.1 列表介绍 Python内置的一种数据类型是列表:list。 有序的集合,可随时添加和删除...

  • python3 容器类型介绍

    容器类型: 列表和元组 例如:访问数据元素数据收纳盒名字[编号(从零开始)]列表是可变类型,所以可以添加、删除、替...

  • uni-app的table表格实现数据增添、单个删除、多选删除、

    功能展示区 添加数据 单项删除 多选删除 全选删除 清空数据列表 修改指定数据+界面的显示隐藏(点击修改按钮,界面...

  • python中的数据类型

    python中的四种数据类型 列表 定义列表是一种有序的集合,可以随时添加和删除其中的元素变量 = ["数据","...

  • VUE简单的分页购物清单

    1.需求分析 可以在购物列表中添加、删除数据。添加删除操作会改变分页。 可切换每条数据采购状态,已采购的数据才能从...

网友评论

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

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