后台管理系统文档

功能概述

本系统采用传统iframe框架实现后台管理页面，支持菜单权限控制、表单按钮权限管理等。

技术栈

模板引擎: Thymeleaf
UI框架: Bootstrap 5 + Layui
图标库: Bootstrap Icons
日期处理: Day.js
权限控制: 自定义注解 (@RequiresPermission, @RequiresRole)

页面结构

复制代码

src/main/resources/templates/admin/
├── index.html                  # 后台管理主框架
├── main.html                   # 工作台
└── [业务模块]/
    ├── sys/
    │   ├── user/list.html      # 用户管理
    │   ├── role/list.html      # 角色管理
    │   ├── menu/list.html      # 菜单管理
    │   ├── dept/list.html      # 部门管理
    │   └── ...
    ├── edu/
    │   ├── student/list.html   # 学生管理
    │   ├── teacher/list.html   # 教师管理
    │   └── ...
    ├── life/
    │   ├── cafeteria/list.html # 食堂管理
    │   └── ...
    ├── dorm/
    │   ├── building/list.html  # 宿舍楼管理
    │   └── ...
    ├── cms/
    │   ├── news/list.html      # 新闻管理
    │   └── ...
    └── ...

权限注解

@RequiresPermission

用于标记需要特定权限的接口。

java 复制代码

@RequiresPermission("user:view")
@GetMapping("/list")
public Result<List<SysUser>> list() {
    // ...
}

权限标识规则:

module:view - 查看权限
module:add - 新增权限
module:edit - 编辑权限
module:delete - 删除权限
module:export - 导出权限
module:import - 导入权限

@RequiresRole

用于标记需要特定角色的接口。

java 复制代码

@RequiresRole("admin")
@GetMapping("/admin/operation")
public Result<Void> adminOperation() {
    // ...
}

后台控制器

AdminController

后台管理首页控制器。

java 复制代码

@Controller
@RequestMapping("/admin")
public class AdminController {
    @GetMapping("/")
    public String index() {
        return "admin/index";
    }

    @GetMapping("/main")
    public String main() {
        return "admin/main";
    }
}

业务控制器

所有后台业务控制器位于 com.example.demo.controller.admin 包下。

命名规范:

用户管理: SysUserAdminController
学生管理: EduStudentAdminController
教师管理: EduTeacherAdminController

URL规范:

复制代码

/admin/api/{module}/{action}

视图控制器

所有视图路由位于 AdminViewController 中。

java 复制代码

@Controller
@RequestMapping("/admin/view")
public class AdminViewController {
    @GetMapping("/sys/user/list")
    public String sysUserList() {
        return "admin/sys/user/list";
    }
}

iframe框架

主框架 (index.html)

左侧菜单: 可折叠的树形菜单
顶部导航: 面包屑、消息通知、用户信息
内容区域: iframe加载子页面

菜单配置

菜单数据在JavaScript中配置，支持：

一级菜单
二级菜单
权限控制

javascript 复制代码

const menuData = [
    {
        id: 'system',
        title: '系统管理',
        icon: 'bi-gear',
        children: [
            { id: 'sys-user', title: '用户管理', url: '/admin/view/sys/user/list', permission: 'user:view' }
        ]
    }
];

页面加载

使用iframe加载子页面：

javascript 复制代码

function loadPage(url, title) {
    const iframe = document.getElementById('contentFrame');
    const currentPage = document.getElementById('currentPage');
    currentPage.textContent = title;
    iframe.src = url;
}

权限校验

切面校验

使用AOP切面实现权限校验。

java 复制代码

@Aspect
@Component
public class PermissionAspect {
    @Before("@annotation(requiresPermission)")
    public void checkPermission(JoinPoint joinPoint, RequiresPermission requiresPermission) {
        // 校验逻辑
    }
}

前端权限控制

在菜单配置中根据权限显示/隐藏菜单项。

javascript 复制代码

if (sub.permission && !hasPermission(sub.permission)) {
    return ''; // 不渲染该菜单项
}

超级管理员

用户名为 admin 的用户拥有所有权限。

javascript 复制代码

if (username === 'admin') {
    return true; // 超级管理员
}

表单权限控制

按钮权限

根据用户权限控制按钮显示。

html 复制代码

<!-- 查看权限 -->
<button id="btnView" onclick="view()">查看</button>

<!-- 新增权限 -->
<button id="btnAdd" onclick="add()">新增</button>

<!-- 编辑权限 -->
<button id="btnEdit" onclick="edit()">编辑</button>

<!-- 删除权限 -->
<button id="btnDelete" onclick="delete()">删除</button>

javascript 复制代码

// 根据权限显示/隐藏按钮
function initButtons() {
    const permissions = getUserPermissions();
    document.getElementById('btnAdd').style.display =
        permissions.includes('user:add') ? 'inline-block' : 'none';
    document.getElementById('btnEdit').style.display =
        permissions.includes('user:edit') ? 'inline-block' : 'none';
    document.getElementById('btnDelete').style.display =
        permissions.includes('user:delete') ? 'inline-block' : 'none';
}

业务模块列表

系统管理

用户管理 ✅
角色管理
菜单管理
部门管理
字典管理
文件管理
定时任务
操作日志
登录日志

教学管理

学生管理 ✅
教师管理
教职工管理
院系管理
专业管理
班级管理
课程管理
上课安排
考勤管理
请假管理

生活服务

食堂管理
食堂窗口管理
菜品管理
饭卡管理

宿舍管理

宿舍楼管理
宿舍房间管理
宿舍床位管理

官网管理

新闻管理
新闻分类管理
轮播图管理
学校概况管理

活动管理

节日活动管理
活动参与人员管理
投票管理

消息平台

消息模板管理
消息发送记录
站内信管理

创建新页面

1. 创建Controller方法

java 复制代码

@RestController
@RequestMapping("/admin/api/xxx")
public class XxxAdminController {

    @GetMapping("/page")
    @RequiresPermission("xxx:view")
    public Result<Object> page(
            @RequestParam(defaultValue = "1") Long current,
            @RequestParam(defaultValue = "10") Long size,
            @RequestParam(required = false) String keyword) {
        return Result.success(xxxService.page(current, size, keyword));
    }

    @PostMapping("/")
    @RequiresPermission("xxx:add")
    public Result<Void> save(@RequestBody Xxx xxx) {
        xxxService.save(xxx);
        return Result.success("新增成功");
    }

    @PutMapping("/{id}")
    @RequiresPermission("xxx:edit")
    public Result<Void> update(@PathVariable Long id, @RequestBody Xxx xxx) {
        xxx.setId(id);
        xxxService.updateById(xxx);
        return Result.success("更新成功");
    }

    @DeleteMapping("/{id}")
    @RequiresPermission("xxx:delete")
    public Result<Void> delete(@PathVariable Long id) {
        xxxService.removeById(id);
        return Result.success("删除成功");
    }
}

2. 添加视图路由

java 复制代码

@GetMapping("/xxx/list")
public String xxxList() {
    return "admin/xxx/list";
}

3. 创建HTML模板

html 复制代码

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>模块管理</title>
    <!-- 引入CSS -->
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

4. 添加菜单配置

javascript 复制代码

{
    id: 'xxx-module',
    title: '模块管理',
    icon: 'bi-icon',
    children: [
        { id: 'xxx-list', title: '模块列表', url: '/admin/view/xxx/list', permission: 'xxx:view' }
    ]
}

CDN资源

html 复制代码

<!-- Bootstrap 5 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>

<!-- Bootstrap Icons -->
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.1/font/bootstrap-icons.min.css">

<!-- Layui -->
<link href="https://cdn.bootcdn.net/ajax/libs/layui/2.8.17/css/layui.css">
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.8.17/layui.js"></script>

<!-- Day.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.10/dayjs.min.js"></script>

访问地址

启动项目后访问：

复制代码

后台首页:   http://localhost:8080/api/admin/
用户管理:   http://localhost:8080/api/admin/view/sys/user/list
学生管理:   http://localhost:8080/api/admin/view/edu/student/list

特性说明

1. iframe框架

传统前后端不分离架构
左侧菜单 + 顶部导航 + 内容区域
支持侧边栏折叠

2. 权限控制

后端注解权限校验
前端菜单权限过滤
按钮权限控制

3. 统一风格

Bootstrap 5 + Layui混用
统一的卡片布局
统一的操作按钮

4. 响应式设计

支持桌面端
支持平板端
支持移动端

后续开发

需要继续完善的页面：

角色管理
菜单管理
部门管理
字典管理
教师管理
教职工管理
院系管理
专业管理
班级管理
课程管理
上课安排
考勤管理
请假管理
食堂管理
宿舍管理
新闻管理
活动管理
消息管理