如何在若依框架中自定义添加一个页面
目录
前提条件：
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 接口。
通过这些步骤，你可以在若依框架中成功添加并自定义一个页面。