Jsonserver模拟前后端请求(react项目实践)

前言

大家好 我是歌谣 今天应中间方的要求 写接口之前先用json server模拟数据格式 一开始觉得是比较麻烦的东西 但是用了之后发现是真的好

安装命令

npm install -g Json-server

执行命令加端口

json-server --watch db.json --port 5000

模拟五个json接口

db.json

{
  "produceText": [
    {
      "po": "1000",
      "id": 1
    },
    {
      "id": 2,
      "code": "WF230146",
      "styleId": 2,
      "styleNumber": "G15661",
      "registerDate": "2023-04-24 18:50:10",
      "po": "2"
    },
    {
      "id": 3,
      "code": "WF230147",
      "styleId": 3,
      "styleNumber": "B30131012",
      "registerDate": "2023-04-24 18:50:10",
      "po": "2"
    },
    {
      "id": 4,
      "code": "WF230148",
      "styleId": 4,
      "styleNumber": "6021",
      "registerDate": "2023-04-24 18:50:10",
      "po": "2"
    },
    {
      "id": 5,
      "code": "WF230148",
      "styleId": 4,
      "styleNumber": "6021",
      "registerDate": "2023-04-24 18:50:10",
      "po": "2"
    },
    {
      "id": 6,
      "code": "WF230145",
      "styleId": 1,
      "styleNumber": "002",
      "registerDate": "2023-04-24 18:50:10",
      "po": "2"
    },
    {
      "id": 7,
      "code": "WF230146",
      "styleId": 2,
      "styleNumber": "G15661",
      "registerDate": "2023-04-24 18:50:10",
      "po": "2"
    },
    {
      "id": 8,
      "code": "WF230147",
      "styleId": 3,
      "styleNumber": "B30131012",
      "registerDate": "2023-04-24 18:50:10",
      "po": "2"
    },
    {
      "id": 9,
      "code": "WF230148",
      "styleId": 4,
      "styleNumber": "6021",
      "registerDate": "2023-04-24 18:50:10",
      "po": "2"
    },
    {
      "id": 10,
      "code": "WF230148",
      "styleId": 4,
      "styleNumber": "6021",
      "registerDate": "2023-04-24 18:50:10",
      "po": "2"
    },
    {
      "id": 11,
      "code": "WF230148",
      "styleId": 4,
      "styleNumber": "6021",
      "registerDate": "2023-04-24 18:50:10",
      "po": "2"
    },
    {
      "id": 12,
      "code": "WF230148",
      "styleId": 4,
      "styleNumber": "6021",
      "registerDate": "2023-04-24 18:50:10",
      "po": "2"
    },
    {
      "id": 13
    }
  ],
  "produceTextDetail": [
    {
      "165": "1",
      "170": "2",
      "175": "1",
      "180": "1",
      "materalId": "1",
      "materalName": "领子",
      "fileName": "面料-1.44M-175",
      "fileId": "领子",
      "time": 2,
      "status": "是",
      "width": "2",
      "mark": "7"
    },
    {
      "165": "1",
      "170": "2",
      "175": "1",
      "180": "1",
      "materalId": "1",
      "materalName": "领子",
      "fileName": "面料-1.44M-175",
      "fileId": "领子",
      "time": 2,
      "status": "是",
      "width": "2",
      "mark": "7"
    },
    {
      "165": "1",
      "170": "2",
      "175": "1",
      "180": "1",
      "materalId": "1",
      "materalName": "领子",
      "fileName": "面料-1.44M-175",
      "fileId": "领子",
      "time": 2,
      "status": "是",
      "width": "2",
      "mark": "7"
    },
    {
      "165": "1",
      "170": "2",
      "175": "1",
      "180": "1",
      "materalId": "1",
      "materalName": "领子",
      "fileName": "面料-1.44M-175",
      "fileId": "领子",
      "time": 2,
      "status": "是",
      "width": "2",
      "mark": "7"
    }
  ],
  "StyleNumberList": [
    {
      "id": 1,
      "name": "002"
    },
    {
      "id": 2,
      "name": "G15661"
    },
    {
      "id": 3,
      "name": "B30131012"
    },
    {
      "id": 4,
      "name": "6021"
    }
  ],
  "MatuDataList": [
    {
      "id": 1,
      "name": "WF230145"
    },
    {
      "id": 2,
      "name": "WF230146"
    },
    {
      "id": 3,
      "name": "WF230147"
    },
    {
      "id": 4,
      "name": "WF230148"
    }
  ],
  "MatrialList": [
    {
      "id": 1,
      "name": "面布",
     
      "children": []
    },
    {
      "id": 2,
      "name": "面料1",
     
      "children": []
    },
    {
      "id": 3,
      "name": "面料2",
   
      "children": []
    },
    {
      "id": 4,
      "name": "面料3",
  
      "children": []
    }
  ],
  "FileDataList": [
    {
      "id": 1,
      "name": "5622-1345",
      "flag": true
    },
    {
      "id": 2,
      "name": "5622-1346",
      "flag": true
    },
    {
      "id": 3,
      "name": "5622-1347",
      "flag": true
    },
    {
      "id": 4,
      "name": "5622-1348",
      "flag": true
    }
  ]
}

运行结果

质疑

1.跨域问题 （后来验证没有） 2修改问题 （根据id修改）

下一步

直接加入axios

import axios from "axios"; // 引入axios
const instance = axios.create({
  baseURL: "http://localhost:5000",
  timeout: 60000,
});
// 请求拦截器
instance.interceptors.request.use(
  function (config) {
    console.log("发请求之前", config);
    return config;
  },
  function (error) {
    console.log("请求错误", error);
    return Promise.reject(error);
  }
);
// 响应拦截器
instance.interceptors.response.use(
  function (response) {
    console.log("得到的响应数据", response);
    return response;
  },
  function (error) {
    console.log("响应错误", error);
    return Promise.reject(error);
  }
);
// get请求
export function get(url, data = {}) {
  console.log(data, "datattattata");
  return new Promise((resolve, reject) => {
    instance
      .get(url, {
        params: data,
      })
      .then((response) => {
        resolve(response);
      })
      .catch((err) => {
        reject(err);
      });
  });
}
// post请求
export function post(url, data = {}) {
  return new Promise((resolve, reject) => {
    instance.post(url, data).then(
      (response) => {
        resolve(response.data);
      },
      (err) => {
        reject(err);
      }
    );
  });
}

import {get,post} from "../request"
import {returnMsg } from "../return"

export const UserLogin = data => post('/pda/login', data)
//查询任务界面
export const getLayData = async data => await returnMsg(get('/pda/selectPDAAuth', data))

export const ProduceText = async data => await returnMsg(get('/produceText', data))

export const produceTextDetail = async data => await returnMsg(get('/produceTextDetail', data))

export const StyleNumberList = async data => await returnMsg(get('/StyleNumberList', data))

export const MatuDataList = async data => await returnMsg(get('/MatuDataList', data))

export const MatrialList = async data => await returnMsg(get('/MatrialList', data))

export const FileDataList = async data => await returnMsg(get('/FileDataList', data))

修改

axios.put(`http://localhost:5000/produceText/${info.id}`, {
                    po: form.getFieldValue("po")
                }).then(res => {
                    console.log('修改成功')
                    props.onConfirm();
                })

模拟查询

总结

可以快速的增删改查接口 秀啊