使用json server 模拟接口(mock数据的创建以及增删查改)

mock数据是用来模拟后端提供的数据，用json文件代替接口 

1.安装

npm install -g json-server

2.使用步骤

在src文件下新建文件夹mock,创建data.json文件

 src/mock/data.json

写模拟数据

3.注意：data文件模拟数据的书写要求非常严格：

1）所有的key必须添加双引号"",而且必须要有id这个key

2)所有的key都代表一个接口

3）所有的key对应的value，最外层必须是一个数组

例：

{

  "newgoods":[
      {
        "id": 1,
        "name": "裤子",
        "price": 79,
        "sales": 4070000,
        "stock": 50000
      },
      {
        "id": 2,
        "name": "袜子",
        "price": 29,
        "sales": 4070000,
        "stock": 50000
      }

  ],
  "user":[
      {
           "id": 1,
           "name": "maria",
           "sex":"女",
           "age": 13
       },
       {
           "id": 2,
           "name": "lucy",
           "sex":"女",
           "age": 20
        },
       {
           "id": 3,
           "name": "George",
           "sex":"男",
           "age": 18
        }


   ]

}

4.启动json-server模拟服务器

//在data.json的路径下，通过cmd输入
json-server --watch data.json 启动服务器

出现这个界面就说明启动成功啦：端口号是3000

当需要使用不同数据的时候，调用对应的url地址：

url:"http://localhost:3000/newgoods",

url:"http://localhost:3000/user" 

 

 5.使用模拟接口进行增删查改（将一下请求放在函数里，进行函数调用即可实现操作）

注：在此之前已经进行了axios的封装

1）查全部数据：传参方式get

        service({
            url: 'http://localhost:3000/newgoods',
            method: 'get',
        }).then((res: any) => {
             //一般正确响应返回的时候，status值为200
            // if (res.status === 200) {

               console.log(res.data);
               
            // } 
            
        })

查满足条件的数据，需要传入对应数据：传参方式get，参数放在params

        // 查询满足条件的数据
        service({
            url: 'http://localhost:3000/newgoods',
            method: 'get',
            params:{
                //可以通过任意条件查询满足条件的数据
                //如果是id可以直接加在url后面
                // id:1
                price:29

            }
        }).then((res) => {
            //一般正确响应返回的时候，status值为200
            // if (res.status === 200) {

               console.log(res.data);
               
            // } 
            
        })

2）增加数据:传参方式post，参数放在data

        // 增加数据
        service({
            url: 'http://localhost:3000/newgoods',
            method: 'post',
            data: {
                name: "外套",
                price: 29,
                sales: 500,
                stock: 300
            },
        }).then(res=> {
                console.log(res)        //为新添加的信息，id会自动生成
        })

3)删除数据：传参方式delete（通常只能利用id进行删除），参数id加在url后面

        // 删除数据
        //删除的id参数一般由函数传过来，删除当前id对应的内容，

        service({
            //id加在url后面
            url: `http://localhost:3000/newgoods/`+id,
            method: 'delete',
        }).then((res) => {
             console.log(res.data);
            
        })

4）修改数据：传参方式为patch，参数传输用data，里面是要修改的参数

    //修改数据，id一定写在url后面，不能写在参数里
    //如果不加id，则默认修改id为1的数据
    service({
        //url: `http://localhost:3000/newgoods/`+id,
        url: `http://localhost:3000/newgoods/3`,
        method: 'patch',
        data: {
            name: "鞋子",
        }
    }).then((res) => {
        console.log(res)   
    })

以上就是mock数据的使用，及增删查改功能啦，如果需要传入动态参数，则将固定值替换即可。

附：封装好的axios,在使用json server发请求的时候需要引入axios调请求

在src下建axios文件夹，建立service.js文件

// src/axios/service.js


import axios from "axios";
import type { InternalAxiosRequestConfig, AxiosResponse } from "axios";

const service = axios.create({
  // baseURL: "http://118.178.238.19:3001/admin",
});

// 请求拦截器
// axios.interceptors.request.use();
service.interceptors.request.use((config: InternalAxiosRequestConfig) => {
   
  //如果需要使用token则获取token
  let token = sessionStorage.getItem("token");
  if (token) {
    // 给headers增加自定义属性token
    config.headers.token = token;
  }
  return config;
});

// 响应拦截器
service.interceptors.response.use((res: AxiosResponse) => {
  return res;
});

export default service;