RuoYi使用本地mock模拟数据

2026/8/11 12:24:59

1. RuoYi使用本地mock模拟数据

在 RuoYi项目中使用本地 Mock 数据，最直接的方式是集成 Mock.js 库。Mock.js 可以拦截前端的 Ajax 请求，并返回你预先定义好的模拟数据，让你在后端服务就绪前就能独立进行开发和调试。

1.1. 思路

1.1.1. 安装 Mock.js

npm install mockjs--save-dev

或

yarn add mockjs-D

1.1.2. 创建 Mock 数据文件

在 src 目录下创建一个名为 mock 的文件夹，并在其中新建一个 index.js 文件。这个文件将作为所有 Mock 配置的入口。
在 src/mock/index.js 中，你可以开始定义接口和模拟数据。Mock.js 的 Mock.mock() 方法用于拦截特定的 API 请求。

// src/mock/index.jsimport Mock from'mockjs'// 1. 模拟用户登录接口Mock.mock('/auth/login','post',(options)=>{// 可以在这里解析 options.body 来获取登录信息，进行简单的校验return{code:200,msg:'操作成功',data:{token:'mock-token-'+newDate().getTime()}}})// 2. 模拟获取用户信息接口Mock.mock('/system/user/getInfo','get',()=>{return{code:200,msg:'操作成功',data:{user:{userId:1,userName:'admin',nickName:'管理员'},roles:['admin'],permissions:['*:*:*']}}})// 3. 模拟一个列表数据（使用 Mock.js 的语法糖）Mock.mock('/api/list','get',()=>{returnMock.mock({'list|1-10':[{// 随机生成1-10条数据'id|+1':1,'name':'@cname',// 随机中文名'age|18-60':1,// 18-60之间的随机年龄'address':'@county(true)'// 随机地址}]})})// 你可以在这里继续添加更多接口...

1.1.3. 在项目中导入 Mock 配置

为了让 Mock 配置生效，你需要在项目的入口文件 main.js 或 main.ts 中导入刚才创建的 mock/index.js 文件。

// src/main.jsimport{createApp}from'vue'import App from'./App.vue'// 本地模拟数据开发环境加载Mockif(import.meta.env.DEV){// 添加这一行，导入 Mock 配置import('./mock')}// ... 其他代码createApp(App).mount('#app')

当后端接口完成后，只需注释掉 Mock 导入即可切换到真实接口：

// src/main.jsimport{createApp}from'vue'import App from'./App.vue'// 本地模拟数据开发环境加载Mockif(import.meta.env.DEV){// 添加这一行，导入 Mock 配置// import('./mock')}// ... 其他代码createApp(App).mount('#app')

1.1.4. 注意事项

（1）环境隔离：建议只在开发环境启用 Mock。可以通过环境变量（如 import.meta.env.MODE）来控制是否导入 @/mock，避免在生产环境中引入不必要的代码。
（2）接口路径：确保 Mock.mock() 中的路径与你代码中 axios 请求的路径完全一致。
（3）请求方法：Mock.mock() 的第三个参数是请求方法（如 ‘get’、‘post’），请务必与你的请求方法匹配。
（4）Vite 代理：如果你在 vite.config.js 中配置了代理（proxy），需要确保 Mock 的拦截优先级更高，或者直接 Mock 最终请求的完整路径。

1.2. 导入 Mock 后数据如何使用

导入 Mock 后，数据并不会自动填充到页面上。它只是在你调用 API 接口时，拦截请求并返回你定义的模拟数据。你依然需要像调用真实后端接口一样，在前端代码中主动发起请求并处理返回的数据。
结合 RuoYi-Cloud-Vue3 的代码规范，具体使用流程分为以下三步：

1.2.1. 第一步：在 src/api/ 中定义接口函数（照常写）

你不需要修改 API 文件，Mock 会无缝替换真实的网络请求。
例如，在 src/api/system/user.js 中，你原本怎么写，现在还怎么写：

// src/api/system/user.jsimport request from'@/utils/request'// 获取用户列表（这个函数保持不变）export functionlistUser(query){returnrequest({url:'/system/user/list',// 这个路径会被 Mock 拦截method:'get',params:query})}

1.2.2. 在 Vue 组件中调用接口并赋值（照常写）

在页面的

<template><div><!--3.在模板中渲染数据--><p v-for="item in userList":key="item.id">{{item.userName}}-{{item.nickName}}</p></div></template><script setup>import{ref,onMounted}from'vue'// 1. 导入定义好的 API 函数import{listUser}from'../api/system/user'// 定义响应式数据，用来存放 Mock 返回的数据constuserList=ref([])// 2. 在生命周期或事件中调用接口constfetchData=()=>{listUser({pageNum:1,pageSize:10}).then(res=>{console.log('📦 完整响应数据:',res)// 检查 res 的结构，看是否包含 data.rows// 或者 res.rows，取决于你的 Mock 数据结构userList.value=res.data.rows}).catch(err=>{console.error('❌ 请求失败:',err)})// // 调用 API，此时 Mock 会直接返回你在 mock/index.js 中定义的数据// const res = await listUser({ pageNum: 1, pageSize: 10 })//// // 将 Mock 返回的数据赋值给变量// if (res.code === 200) {// userList.value = res.data // 或者 res.rows，取决于你的 Mock 数据结构// }}onMounted(()=>{fetchData()})</script>

1.2.3. 第三步：确保 Mock 返回的数据结构符合前端预期

你的 Mock 数据必须模拟真实后端返回的 JSON 结构，否则页面会渲染失败。
在 src/mock/index.js 中，返回的数据结构要和 RuoYi 后台的标准格式一致（通常包含 code、msg、data）：

// src/mock/index.jsimport Mock from'mockjs'console.log('✅ Mock 文件已加载！')// 模拟用户列表接口// ✅ 用户列表接口（使用正则匹配:能匹配包含该片段的 URL，忽略域名、端口和查询参数。）Mock.mock(/\/system\/user\/list/,'get',(options)=>{try{console.log('🎯 Mock 拦截请求，options:',options)// 模拟若依后台返回的标准分页格式return{code:200,msg:'操作成功',data:{total:100,rows:[{userId:1,userName:'admin',nickName:'管理员'},{userId:2,userName:'ry',nickName:'若依'}]}}}catch(error){console.error('❌ Mock 回调出错:',error)// 返回一个标准的错误响应，避免 500return{code:500,msg:'Mock 数据生成失败：'+error.message}}})

此时，你的组件中 res.data.rows 就能拿到数组并正常渲染了。

1.3. 总结流程图

（1）浏览器渲染页面 -> 执行 onMounted -> 调用 listUser()
（2）request 工具发出 Ajax 请求（路径：/system/user/list）
（3）Mock.js 拦截该请求（路径匹配），直接返回本地定义的 JSON 数据
（4）请求不会经过 Vite Proxy 转发到真实后端
（5）你的 res 接收到 Mock 数据 -> 赋值给 userList -> 页面更新