1. RuoYi使用本地mock模拟数据在 RuoYi项目中使用本地 Mock 数据最直接的方式是集成 Mock.js 库。Mock.js 可以拦截前端的 Ajax 请求并返回你预先定义好的模拟数据让你在后端服务就绪前就能独立进行开发和调试。1.1. 思路1.1.1. 安装 Mock.jsnpm install mockjs--save-dev或yarn add mockjs-D1.1.2. 创建 Mock 数据文件在 src 目录下创建一个名为 mock 的文件夹并在其中新建一个 index.js 文件。这个文件将作为所有 Mock 配置的入口。在 src/mock/index.js 中你可以开始定义接口和模拟数据。Mock.js 的 Mock.mock() 方法用于拦截特定的 API 请求。// src/mock/index.jsimport Mock frommockjs// 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}fromvueimport App from./App.vue// 本地模拟数据开发环境加载Mockif(import.meta.env.DEV){// 添加这一行导入 Mock 配置import(./mock)}// ... 其他代码createApp(App).mount(#app)当后端接口完成后只需注释掉 Mock 导入即可切换到真实接口// src/main.jsimport{createApp}fromvueimport 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’请务必与你的请求方法匹配。4Vite 代理如果你在 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 组件中调用接口并赋值照常写在页面的templatediv!--3.在模板中渲染数据--p v-foritem in userList:keyitem.id{{item.userName}}-{{item.nickName}}/p/div/templatescript setupimport{ref,onMounted}fromvue// 1. 导入定义好的 API 函数import{listUser}from../api/system/user// 定义响应式数据用来存放 Mock 返回的数据constuserListref([])// 2. 在生命周期或事件中调用接口constfetchData(){listUser({pageNum:1,pageSize:10}).then(res{console.log( 完整响应数据:,res)// 检查 res 的结构看是否包含 data.rows// 或者 res.rows取决于你的 Mock 数据结构userList.valueres.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()})/script1.2.3. 第三步确保 Mock 返回的数据结构符合前端预期你的 Mock 数据必须模拟真实后端返回的 JSON 结构否则页面会渲染失败。在 src/mock/index.js 中返回的数据结构要和 RuoYi 后台的标准格式一致通常包含 code、msg、data// src/mock/index.jsimport Mock frommockjsconsole.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()2request 工具发出 Ajax 请求路径/system/user/list3Mock.js 拦截该请求路径匹配直接返回本地定义的 JSON 数据4请求不会经过 Vite Proxy 转发到真实后端5你的 res 接收到 Mock 数据 - 赋值给 userList - 页面更新