vue 3 使用mock

### Vue 3 中实现 Mock 请求或使用 Mock.js 进行数据模拟 在 Vue 3 开发过程中，当后端接口尚未完成时，可以通过 `Mock.js` 来模拟接口数据。以下是具体方法： #### 创建 Mock 文件 创建一个新的文件命名为 `mock.js` 并引入 `Mock.js` 库[^2]。 ```javascript // 引入 mock.js import Mock from 'mockjs'; // 模拟 /api/personManage/queryPersonData 接口的数据结构 Mock.mock('/api/personManage/queryPersonData', { "ret": 0, "data": { "tableData|5": [ { "ordNum|+1": 1, // 自动递增属性值 "name": "@cname", // 随机生成中文名字 "birday": "@date", // 随机日期 "sex|1-2": true, // 随机 Boolean 值 "aihao|1": ["篮球", "羽毛球", "足球", "乒乓球"] // 随机数组中的一个元素 } ] } }); // 设置请求延迟时间 Mock.setup({ timeout: '200-600' }); ``` 上述代码定义了一个 `/api/personManage/queryPersonData` 的 GET 请求，并返回一组随机生成的人员管理数据。 --- #### 封装 Axios 请求 为了更好地管理和调用 API，在 Vue 3 项目中通常会封装一个通用的 HTTP 工具类。以下是一个简单的封装示例[^3]： ```javascript // axios.js import axios from 'axios'; import { ElMessage } from 'element-plus'; // 如果需要全局提示消息功能 const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API || '', // 默认基础路径 timeout: 5000 // 超时时间 }); // 添加请求拦截器 service.interceptors.request.use( config => { return config; }, error => Promise.reject(error) ); // 添加响应拦截器 service.interceptors.response.use( response => { const res = response.data; if (res.ret !== undefined && res.ret === 0) { return res.data; // 返回成功状态下的 data 字段 } ElMessage.error(res.message || 'Error'); return Promise.reject(new Error(res.message || 'Error')); }, error => { ElMessage.error(error.message); return Promise.reject(error); } ); export default service; ``` 通过此工具类，可以在不修改业务逻辑的情况下轻松切换真实接口和 Mock 数据。 --- #### 在组件中发起请求 假设我们有一个 Vue 组件需要获取模拟数据，可以直接调用封装好的 Axios 实例发送请求[^4]。 ```javascript <template> <div v-if="loading">加载中...</div> <ul v-else> <li v-for="(item, index) in tableData" :key="index"> {{ item.name }} - {{ item.birday }} </li> </ul> </template> <script setup> import { ref, onMounted } from 'vue'; import request from '@/utils/axios'; const loading = ref(true); const tableData = ref([]); onMounted(() => { request.get('/api/personManage/queryPersonData') .then((response) => { tableData.value = response.tableData; }) .finally(() => { loading.value = false; }); }); </script> ``` 在此示例中，组件会在挂载完成后向 `/api/personManage/queryPersonData` 发起 GET 请求，并展示返回的结果。 --- #### 使用 Mock 拦截其他类型的请求 除了 GET 请求外，还可以利用 `Mock.js` 模拟 POST、PUT 和 DELETE 等操作。例如，模拟新增用户的 POST 请求如下所示[^1]： ```javascript Mock.mock('/api/user', 'post', function(options) { const body = JSON.parse(options.body); // 获取请求体参数 return { success: true, message: '用户已成功添加', user: { id: Math.ceil(Math.random() * 100), name: body.name, age: body.age } }; }); ``` 这样即可覆盖多种场景的需求。 ---