使用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;