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

 

目录

        前提条件：

1. 在 Vue 前端添加页面

2. 在 Spring Boot 后端添加页面

3. 数据交互（前后端）

---

再开发过程中，我们通常希望在 若依管理系统（RuoYi）中自定义添加一个页面，通常需要按照以下步骤操作。（适用于 Vue.js 前端 和 Spring Boot 后端 ）

前提条件：

• 已经搭建好 若依框架 环境，并能够正常运行。
• 已经熟悉 Vue.js 和 Spring Boot 的基本开发流程。

---

1. 在 Vue 前端添加页面

步骤 1：创建 Vue 组件

1. 在 src/views 目录下，创建一个新的文件夹和 Vue 文件，例如：src/views/customPage/CustomPage.vue。

2. 添加基本的 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：在路由中添加页面

1. 打开 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：在左侧菜单中添加路由

1. 打开 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：前端获取后端数据

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：重新编译并运行

1. 确保前端和后端都已经启动并正常运行。
2. 访问自定义页面，检查数据是否正确展示。

---

总结

1. 前端（Vue）：

   • 创建一个新的 Vue 组件（如 CustomPage.vue）。
   • 在 Vue 路由中配置路由和菜单项。
   • 可根据需求从后端获取动态数据。

2. 后端（Spring Boot）：

   • 创建新的 Controller 类，处理页面请求。
   • 如果需要动态数据，提供 RESTful 接口。

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

原文地址：https://blog.csdn.net/Future_yzx/article/details/145211670

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！