Mockjs之模块化开发，假数据真香！_mockjs分模块

上一篇文件我们介绍了Mockjs的基本用法–Mockjs之后端兄弟不给力只能靠自己了，这篇文件就讲点实际开发中的用法
如果你的前端项目中有上百个接口时，就不能把模拟数据的代码写在业务代码里面，这个时候就需要将Mock数据单独放在一个模块中，并根据生产环境还是开发环境来决定是否启动mock模块

创建Mockjs模块

在项目src中创建mock文件夹，创建三个文件：index.js、user.js、login.js

// user.js

import Mock from 'mockjs'
// `/api/getUsers`
Mock.mock(/\/api\/getUsers/, 'get', option => {
    // get请求的参数可以在option.url中获取
    console.log(option.url);
    return {
        'data|10-20': [{
            'id|+1': 1,
            'name': '@cname',
            'age|18-30': 0,
            'email': '@email',
            'phone': /^1[3456789]\d{9}$/
        }]
    }
})


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// login.js
import Mock from 'mockjs'
// /api/login
Mock.mock('/api/login', 'post', option => {
    console.log(option);
    // 传入的参数在body里面，这里不做处理
    // if (option.body){
    // }
    return Mock.mock({
        'token|32': '@string'
    })
})

1
2
3
4
5
6
7
8
9
10
11
12
13

在index.js中引入上面两个文件

// index.js
// 登录相关接口
import './login'

// 用户信息相关接口
import './user'

1
2
3
4
5
6
7

使用 import 动态加载了 mock/index.js 文件，并使用 import.meta.env.DEV 来判断当前环境是否为开发环境。如果是开发环境，则加载 Mockjs；如果是生产环境，则不加载 Mockjs。

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 项目使用vite创建，如果是其他方式创建的项目，判断环境的方式可能不一样
if (import.meta.env.DEV) {
    await import('./mock')
}

createApp(App).mount('#app')

1
2
3
4
5
6
7
8
9
10
11

最后在页面中进行测试

<script setup>
import axios from "axios";
import {ref} from "vue";
const token = ref()
axios.post('/api/login', {
  userName: 'admin',
  password: '123456'
}).then(res => {
  token.value = res.data.token
  console.log(res);
})
axios.get('/api/getUsers?userName=admin').then(res => {
  console.log(res);
})
</script>

<template>
  <div>{{token}}</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

这样我们完成了Mockjs的模块化开发
附上源码下载地址
有人任何问题都可以在评论区留言交流，相互学习