目录
前提条件：
1. 在 Vue 前端添加页面
2. 在 Spring Boot 后端添加页面
3. 数据交互（前后端）
再开发过程中，我们通常希望在 若依管理系统（RuoYi）中自定义添加一个页面，通常需要按照以下步骤操作。（适用于 Vue.js 前端 和 Spring Boot 后端 ）
前提条件：
- 已经搭建好 若依框架 环境，并能够正常运行。
- 已经熟悉 Vue.js 和 Spring Boot 的基本开发流程。
1. 在 Vue 前端添加页面
步骤 1：创建 Vue 组件
-
在
src/views目录下，创建一个新的文件夹和 Vue 文件，例如：src/views/customPage/CustomPage.vue。 -
添加基本的 Vue 组件代码：
<template><div class="custom-page"><h1>自定义页面</h1><p>这是一个自定义的 Vue 页面。</p></div>
</template><script>
export default {name: "CustomPage"
}
</script><style scoped>
.custom-page {padding: 20px;
}
</style>
步骤 2：在路由中添加页面
- 打开
src/router/index.js，将新页面添加到 Vue 路由中：
import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/layout'// 引入新页面组件
import CustomPage from '@/views/customPage/CustomPage'Vue.use(Router)export const constantRoutes = [{path: '/',component: Layout,children: [{path: 'customPage', // 新页面的路由地址name: 'CustomPage',component: CustomPage, // 引入刚才创建的页面meta: { title: '自定义页面', icon: 'el-icon-edit' } // 设置页面标题和图标}]}
]const createRouter = () => new Router({scrollBehavior: () => ({ y: 0 }),routes: constantRoutes
})const router = createRouter()export default router
步骤 3：在左侧菜单中添加路由
- 打开
src/layout/components/Sidebar.vue，在侧边栏菜单中添加自定义页面的菜单项：
<template><el-menu:default-active="activeIndex"class="el-menu-vertical-demo"background-color="#324157"text-color="#bfcbd9"active-text-color="#409EFF"><el-menu-item index="1"><router-link to="/customPage"><i class="el-icon-edit"></i><span slot="title">自定义页面</span></router-link></el-menu-item></el-menu>
</template>
步骤 4：重新编译并运行前端
在开发模式下运行 Vue 项目，使用命令：
npm run dev
然后访问 http://localhost:8080/customPage 即可查看自定义页面。
2. 在 Spring Boot 后端添加页面
步骤 1：创建 Controller
在 src/main/java/com/ruoyi/web/controller 下创建一个新的控制器类，例如：CustomPageController.java。
package com.ruoyi.web.controller.system;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;@Controller
public class CustomPageController {@GetMapping("/customPage")public String customPage() {return "redirect:/index.html#/customPage";}
}
步骤 2：配置前端资源
如果你需要后端支持某些静态文件或前端接口，可以在 Spring Boot 中配置访问权限和静态资源的映射。
例如，在 application.yml 或 application.properties 中进行配置：
spring:resources:static-locations: classpath:/static/, file:/path/to/your/static/files/
步骤 3：后端数据接口（可选）
如果需要在自定义页面中展示动态数据，可以通过 @RestController 来实现数据接口：
package com.ruoyi.web.controller.system;import com.ruoyi.common.core.domain.AjaxResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
public class CustomPageDataController {@GetMapping("/api/customPageData")public AjaxResult getCustomPageData() {// 假设返回一个数据对象return AjaxResult.success("This is custom page data");}
}
3. 数据交互（前后端）
步骤 1：前端获取后端数据
- 在
CustomPage.vue中，使用axios请求后端接口：
<template><div class="custom-page"><h1>自定义页面</h1><p>{{ pageData }}</p></div>
</template><script>
import axios from 'axios'export default {name: "CustomPage",data() {return {pageData: ""}},created() {axios.get("/api/customPageData").then(response => {this.pageData = response.data.msg;}).catch(error => {console.log(error);})}
}
</script>
步骤 2：重新编译并运行
- 确保前端和后端都已经启动并正常运行。
- 访问自定义页面，检查数据是否正确展示。
总结
-
前端（Vue）：
- 创建一个新的 Vue 组件（如
CustomPage.vue）。 - 在 Vue 路由中配置路由和菜单项。
- 可根据需求从后端获取动态数据。
- 创建一个新的 Vue 组件（如
-
后端（Spring Boot）：
- 创建新的 Controller 类，处理页面请求。
- 如果需要动态数据，提供 RESTful 接口。
通过这些步骤，你可以在若依框架中成功添加并自定义一个页面。
