项目中mock的使用
1.下载
npm i mockjs
ts项目下载
npm i @types/mockjs
2.项目准备
-
准备一个mock文件夹,专门存放mock假数据
-
index.ts为入口文件
3.开始使用
准备一个index.json文件
{
"user/info": {
"code": 0,
"data": {
"id": 1,
"username": "admin",
"nickname": "管理员",
"roles": ["admin"]
},
"msg": "ok"
}
}
开启json-server 服务,控制台输入
json-server .\index.json
按下回车显示
JSON Server started on PORT :3000
Press CTRL-C to stop
Watching .\index.json...
(˶ᵔ ᵕ ᵔ˶)
Index:
http://localhost:3000/
Static files:
Serving ./public directory if it exists
Endpoints:
http://localhost:3000/user/info
做接口的时候Endpoints的值就是url,Index可以在封装axios的时候,作为基地址
接下来以Endpoints http://localhost:3000/user/info 开始准备获取数据的接口
-
先封装axios
import axios from 'axios' const instance = axios.create({ baseURL: 'http://localhost:3000/', timeout: 10000 }) instance.interceptors.request.use( (config) => { return config }, (err) => Promise.reject(err) ) instance.interceptors.response.use( (res) => { return res }, (err) => { return Promise.reject(err) } ) export { instance }
2.准备接口
import { instance } from './index'
export function getUserInfoApi() {
return instance.get('/user/info')
}
3.在testMock.vue页面调用接口
import { getUserInfoApi } from '@/api/user'
import { onMounted, ref } from 'vue'
onMounted(async () => {
const res = await getUserInfoApi()
console.log(res)
})
4.准备Mock假数据,在mock文件新建user.ts文件
import { mock } from 'mockjs'
mock(/.*\/user/, 'get', {
code: 0,
'data|3': [
{
id: '@id',
name: '@cname',
age: '@integer(18, 60)',
address: '@city(true)',
email: '@email',
phone: '@phone'
}
],
msg: 'success'
})
mock(url,type,data)
url:请求的url可以是string也可以是字符串,type请求类型,data假数据
5.在mock文件新建index.ts文件,作为入口文件
import '@/mock/user'
6.在main.ts文件导入
import '@/mock'
7.不需要的时候,直接在main.ts注释mock文件的index.ts
import ‘@/mock/user’
6.在main.ts文件导入
```js
import '@/mock'
[外链图片转存中…(img-eSChjbVo-1718369700741)]
7.不需要的时候,直接在main.ts注释mock文件的index.ts