json-server模拟后端接口处理数据

在开发过程中,前后端不论是否分离,接口多半是滞后于页面开发的。所以建立一个REST风格的API接口,给前端页面提供虚拟的数据,是非常有必要的。

对比过多种mock工具后,我最终选择了使用 json server 作为工具,因为它足够简单,写少量数据,即可使用。
也因为它足够强大,支持CORS和JSONP跨域请求,支持GET, POST, PUT, PATCH 和 DELETE 方法,更提供了一系列的查询方法,如limit,order等。下面我将详细介绍 json server 的使用。

 

 
json-server需要电脑安装nodeJs。
 
  1. 全局安装json-server
  2. cnpm install json-server -g
    在项目文件夹下建立一个存放测试数据的文件夹,在创建一个名为list的json文件,在启动这个测试接口,在文件夹下输入命令
    会自动生成一个接口  " http://localhost:3000/list"
    json-server list.json

 

在一切都搭建好之后,就可以根据生成的接口对数据进行操作了,主要的操作包括对数据的:增加、删除、修改、查找

    对数据进行操作(本文主要用axios访问接口,对数据进行操作):

  1. //增数据的时候用post           每个新增的数据都会有一个ID
    axios({
       method:"post",
       url:"http://localhost:3000/list",
       data:{
           "username": "张三",
           "age": 24,
           "sex": "",
    }
    }).then((data)=>{
       console.log(data);
    })

     

  2. //改数据  put会将当前数据里面所有的东西都被覆盖  patch :只会修改数据中的某一个
    axios({
        method : "put",
        url : "http://localhost:3000/list/2",        //根据数据中指定的ID进行修改  
        data:{
            "name" : "小来"
        }
    }).then((data)=>{
        console.log(data);
    })

     

  3. 查(查找数据的方式有很多种,下面主要根据字段的信息、数据的ID、模糊查询)
    //根据数据中字段的信息进行查询
    axios({ method :
    "get", url : "http://localhost:3000/list?username=孔义&&username=哈哈" //指定字段查询 }).then((data)=>{ console.log(data); }) //根据ID进行查找 axios({ method : "get", url : "http://localhost:3000/list/1" //指定ID查询 }).then((data)=>{ console.log(data); }) //模糊查询 axios({ method : "get", url : "http://localhost:3000/list?q=小" //模糊查询 字段中有“小”的 }).then((data)=>{ console.log(data); })

     

  4. 删除
    axios({
        method : "delete",
        url : "http://localhost:3000/list/2"            //根据ID删除
    }).then((data)=>{
        console.log(data);
    })

     

        

 

 

 

转载于:https://www.cnblogs.com/CZforever/p/9942956.html

你可能感兴趣的:(json,后端,前端,ViewUI)