项目中mock的使用

项目中mock的使用

1.下载

npm i mockjs

ts项目下载

npm i @types/mockjs

2.项目准备

1. 准备一个mock文件夹，专门存放mock假数据

2. 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 开始准备获取数据的接口

1. 先封装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