小程序中以及vue中mock使用——mockjs_微信小程序mockjs

微信开发工具mock的使用

当接口调不通或者没数据时候，可以造假数据，页面就可以正常写逻辑

vue中使用mock

• npm i mockjs

• src目录下新建mock文件夹
  

• index.ts

import Mock from 'mockjs'
import { userList } from './data/user'

Mock.setup({
  timeout: '50-1000'
})
Mock.mock(/\/userList/, 'get', () => {
  return {
    code: 0,
    data: userList
  }
})
1
2
3
4
5
6
7
8
9
10
11
12

• data/user.ts

export const userList = [
  {
    id: 1,
    name: '张三'
  },
  {
    id: 2,
    name: '李四'
  },
]
1
2
3
4
5
6
7
8
9
10

• 组件内使用

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script setup lang='ts'>
import axios from 'axios'
interface User {
  id: number,
  name: string
}
let list = ref<User[]>([])
onMounted(() => {
  axios.get('/userList').then(res => {
    console.log(res.data)  // {code: 0, data: Array(2)}
    list.value = res.data.data
  })
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22