json-server增删改查排序小结

Posted 2023-04-20

参考技术A 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

JavaScript数组：增删改查排序等

直接上代码

// 数组应用
    var peoples = ["Jack","Tom","William","Tod","Cart","Jhson"];
    console.log(‘原始：‘+‘length(‘+ peoples.length +‘)==‘ + peoples);
    // push(元素)，从尾部添加
    peoples.push("Smith","Wolf");
    console.log(‘push：‘+‘length(‘+ peoples.length +‘)==‘ + peoples);
    // unshift(元素)，从头部添加
    peoples.unshift("Anderson");
    console.log(‘unshift：‘+‘length(‘+ peoples.length +‘)==‘ + peoples);
    // pop()，从尾部删除
    peoples.pop();
    console.log(‘pop：‘+‘length(‘+ peoples.length +‘)==‘ + peoples);
    // shift()，从头部删除
    peoples.shift();
    console.log(‘shift：‘+‘length(‘+ peoples.length +‘)==‘ + peoples);
    // splice(开始，长度)，删除
    peoples.splice(2,3);
    console.log(‘splice(2,3)：‘+‘length(‘+ peoples.length +‘)==‘ + peoples);
    // splice(开始, 长度,元素…)，先删除，后插入（当长度为0时，相当于插入；当长度等于元素个数时，相当于替换）
    peoples.splice(2,1,"AK-47","91","八一");
    console.log(‘splice(2,1,"AK-47","91","八一")‘+‘length(‘+ peoples.length +‘)==‘ + peoples);
    // concat(数组2)连接两个数组
    peoples.concat(["Mini","Coper"]);
    console.log(‘concat(["Mini","Coper"])：‘+‘length(‘+ peoples.length +‘)==‘ + peoples);
    // join(分隔符)用分隔符，组合数组元素，生成字符串，字符串split
    peoples.join(‘-=0=-‘);
    console.log("join(‘-=0=-‘)："+‘length(‘+ peoples.length +‘)==‘ + peoples);

    // sort([比较函数])，排序一个数组，
    // 注：排序一个字符串数组和数字数组不同
    peoples.sort();
    console.log("sort："+‘length(‘+ peoples.length +‘)==‘ + peoples);
    var numArr = [12,7,1212,11,318,33];
    numArr.sort();
    console.log("sort："+‘length(‘+ numArr.length +‘)==‘ + numArr);
    numArr.sort(function(n1,n2){
        /*
            if(n1 < n2){
                return -1;
            }else if(n1 > n2){
                return 1;
            }else{
                return 0;
            }
        */
　　　　//上面的代码简化如下：

        return n1 - n2;
    });
    console.log("sort(function(...))："+‘length(‘+ numArr.length +‘)==‘ + numArr);

链接：

网易云课堂-关于数组讲解