本文共 1042 字，大约阅读时间需要 3 分钟。
在项目开发过程中，当后台数据不可用时，我们可以通过Mock.js来生成模拟数据，确保页面能够正常显示。以下是实现的具体步骤和技巧。
通过npm安装Mock.js工具，可以快速开始模拟数据。
npm install mockjs
使用Mock.js的模拟功能，可以创建符合实际需求的数据结构。以下是常用方法：
数据模板配置
template选项定义数据模板。{ 'data|1-10': [{}], 'code': 0 }，表示生成10个空对象，并返回code为0的状态。URL拦截与响应
rurl和rtype进行精确匹配。Mock.mock('/api/goods', 'GET', { 'code': 0, 'data': [] })，表示拦截所有 /api/goods 的GET请求，返回空数据。数据生成函数
function选项自定义数据生成逻辑。Mock.mock('/user', 'POST', (options) => ({ id: 1, username: 'testuser' }))，用于生成特定用户数据。在主文件中加载Mock.js配置文件。
import './mock/mockServer'，确保模拟数据能够被正确加载。拦截AJAX请求
export const reqShopInfo = () => ajax('/info')，注意路径与Mock.js中的rurl一致。状态管理优化
export default { goods: [], ratings: [] }，用于存储模拟数据。异步数据获取
async getShopGoods({ commit }) { const result = await reqShopGoods() if (result.code === 0) { commit('RECEIVE_GOODS', { goods: result.data }) }} code应与实际接口一致，例如code: 0表示成功。转载地址：http://agog.baihongyu.com/