var list=[
{
id:1,
name:"张三",
age:12
},
{
id:2,
name:"李四",
age:21
},
{
id:3,
name:"王五",
age:31
}
]
这个json数组有三个对象，每个对象有三个属性，id,name,age
//增操作，增加一个叫小胖的人
var obj={
id:4,
name:"小胖",
age:3
}
//push方法可以向数组进行增加操作
list.push(obj)
//console.log会在浏览器f12时在控制太看到，建议用谷歌浏览器
console.log(obj)
//删操作，删除刚刚叫小胖的人
//delnum用来记录要删除的人的索引
var delnum=-1
//用$.each进行循环，function里面的i，item是数组里每个对象的索引和具体对象,可以打印查看，方便理解
$.each(list,function(i,item){
console.log(i)
console.log(item)
if(item.name=="小胖"){
delnum=i
}
})
//splice方法表示从数组从索引delnum开始，删除1个对象
list.splice(delnum,1)
//打印一下
console.log(list)
//改操作，修改所有人大于20岁的人，姓名前加一个“大”
//也是用$.each
$.each(list,function(i,item){
if(item.age>20){
item.name="大"+item.name
}
})
//查操作，其实已经贯穿在上面了，查询所有大于20岁的人并打印出来
//用newlist记录查询的结果
var newlist=[]
//也是用$.each
$.each(list,function(i,item){
if(item.age>20){
//这一步不理解的，可以去看前面的增操作
newlist.push(item)
}
})
//打印查询结果，会有姓名为李四和王五的数据出来（因为已经做了改操作，其实应该是“大李四”和“大王五”）
console.log(newlist)
手敲得代码
json-server 可以用于模拟请求 ----Restful风格
查询 get params:{}
增加 post data:{}
删除 delete
修改 put /patch data:{}
使用步骤
1-全局安装 npm i json-server -g / yarn global add json-server 相当于安装了一个命令行工具
2-准备json文件
{"list":[{"name":"斑老师","flag":true,"id":6},{"name":"猫咪老师","flag":true,"id":8}]}
3-在当前json文件下运行 json-server data.json 开启本地服务
开启服务
4-看到上图表示服务开启成功 http://localhost:3000/list
增删改查----axios
查询以axios为例 请求方式为get
1-查询全部数据 并且按照id进行排序 排序方式为降序排序
axios({method:"get",url:"http://localhost:3000/list?_sort=id&_order=desc"}).then(res=>{this.list=res.data}).catch(err=>{console.log(err)})
2-查询指定id的数据 http://localhost:3000/list/6
axios({method:"get",url:"http://localhost:3000/list/6"}).then(res=>{this.list=res.data}).catch(err=>{console.log(err)})
3-增加数据post
axios({method:"post",url:"http://localhost:3000/list",data:{name:todoName,flag:false}}).then(res=>{this.getData()}).catch(err=>{console.log(err)})
4-删除指定id的数据
axios({method:"delete",url:`http://localhost:3000/list/${id}`,}).then(res=>{this.getData()}).catch(err=>{console.log(err)})
url:`http://localhost:3000/list/${id}`,这个位置用到了es6的模板字符串
5-修改数据
屏幕快照 2019-07-01 17.42.19.png
axios({method:"patch",url:`http://localhost:3000/list/${id}`,data:{flag}}).then(res=>{this.getData()}).catch(err=>{console.log(err)})
补充点：put和patch的区别
put和patch都可以进行修改操作
区别
put 方式如果没有将所有属性都写完整 没写的属性会丢失
patch方式没修改的属性不写默认为之前的值
举例：{id:1,name:"zs",age:18}
修改age=20
put:{id:1,age:20}
patch:{id:1,name:"zs",age:20}
链接：https://www.jianshu.com/p/2e4027bad282
