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

Posted 2021-01-19 真的很前端

在开发过程中，前后端不论是否分离，接口多半是滞后于页面开发的。所以建立一个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);
   })