如何在若依框架中自定义添加一个页面

前提条件：

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 路由中配置路由和菜单项。
- 可根据需求从后端获取动态数据。
后端（Spring Boot）：
- 创建新的 Controller 类，处理页面请求。
- 如果需要动态数据，提供 RESTful 接口。

通过这些步骤，你可以在若依框架中成功添加并自定义一个页面。