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(); })

模拟查询

总结

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