javaweb结课设计

一、项目概述

电视节目管理系统是一个面向广播电台和电视节目制作单位的Web应用，实现节目信息管理、主持人管理、观众留言管理等核心功能，解决传统Excel管理方式中信息分散、查询不便、留言处理不及时等问题。

- - - 技术栈

后端采用 Spring Boot 3.5.15 + MyBatis 框架，数据库使用 SQL Server，分页使用 PageHelper 插件。

前端采用 Vue 2 + Element UI + Axios 进行页面构建和数据交互。

开发工具使用 IntelliJ IDEA 和 VS Code。

- - 二、系统架构

系统采用前后端分离架构，后端遵循三层架构设计：

前端（Vue）发送请求 → Controller层接收请求 → Service层处理业务逻辑 → Mapper层操作数据库 → 返回JSON数据给前端。

三层架构各层职责如下：

Controller层负责接收HTTP请求，调用Service层处理业务，返回JSON格式响应数据，使用 @RestController 注解标记。

Service层负责处理业务逻辑，协调多个Mapper完成数据库操作，使用 @Service 注解标记。

Mapper层负责直接操作数据库，执行SQL语句，使用 @Mapper 注解标记。

- - 三、功能模块

系统分为五个核心模块：

用户模块实现用户登录和注册功能，注册时校验用户名唯一性。

首页仪表盘 ：展示节目总数、主持人总数、留言总数三个统计卡片，下方表格展示所有节目及其对应的主持人列表，支持点击节目名称查看详情、点击主持人姓名查看完整信息。

节目管理 ：实现节目的增删改查功能，支持分页展示、按名称搜索、按类型筛选。

主持人管理模块 ：实现主持人的增删改查功能，支持分页展示、按姓名搜索、按性别筛选、按部门筛选，展示主持人的完整信息（编号、姓名、性别、电话、邮箱、入职日期、所属部门）。

留言管理模块 ：实现留言列表查看、按状态筛选（全部/已读/未读）、标记已读、回复留言、删除留言功能，点击留言内容可查看完整详情。

- - 四、数据库设计

系统共设计五张数据表：

节目表 program： 包含 programId（主键，自增）、programName（节目名称）、programType（节目类型）、broadcastTime（播出时间）、duration（时长）、description（节目描述）六个字段。

主持人表 host： 包含 hostId（主键，自增）、hostName（姓名）、gender（性别）、phone（电话）、email（邮箱）、joinDate（入职日期）、department（所属部门）七个字段。

关联表 host_program： 包含 hostId 和 programId 两个外键字段，共同作为联合主键，用于实现节目与主持人之间的多对多关系。

留言表 message： 包含 messageId（主键，自增）、programId（外键，关联节目表）、content（留言内容）、isRead（是否已读，默认0）、replyContent（回复内容）、submitTime（提交时间，默认当前时间）六个字段。

用户表 app_user： 包含 userId（主键，自增）、username（用户名，唯一）、password（密码）、createdAt（注册时间，默认当前时间）四个字段。

- - 五、核心代码实现

- - - 5.1 实体类（Program）

```java

@Data

@AllArgsConstructor

@NoArgsConstructor

public class Program {

private Integer programId;

private String programName;

private String programType;

private LocalTime broadcastTime;

private Integer duration;

private String description;

}

```

- - - 5.2 Mapper层（动态SQL + 分页）

```java

@Mapper

public interface ProgramMapper {

@Select("<script>" +

"SELECT * FROM program WHERE 1=1" +

"<if test='programName != null and programName != \"\"'> AND programName LIKE CONCAT('%', -{programName}, '%')</if>" +

"<if test='programType != null and programType != \"\"'> AND programType = -{programType}</if>" +

"</script>")

List<Program> getPrograms(@Param("programName") String programName,

@Param("programType") String programType);

}

```

- - - 5.3 Service层（分页逻辑）

```java

@Service

public class ProgramServiceImpl implements ProgramService {

@Autowired

private ProgramMapper programMapper;

@Override

public PageBean getPrograms(String programName, String programType, int page, int size) {

PageHelper.startPage(page, size);

List<Program> programs = programMapper.getPrograms(programName, programType);

PageInfo<Program> pageInfo = new PageInfo<>(programs);

return new PageBean(pageInfo.getTotal(), pageInfo.getList());

}

}

```

- - - 5.4 Controller层

```java

@RestController

public class ProgramController {

@Autowired

private ProgramService programService;

@GetMapping("/programs")

public Result getPrograms(@RequestParam(required = false) String programName,

@RequestParam(required = false) String programType,

@RequestParam(defaultValue = "1") int pageNum,

@RequestParam(defaultValue = "10") int pageSize) {

PageBean pageBean = programService.getPrograms(programName, programType, pageNum, pageSize);

return Result.success(pageBean);

}

}

```

- - - 5.5 前端Vue核心逻辑

```javascript

new Vue({

data: {

list: [],

page: 1,

pageSize: 10,

total: 0

},

mounted() {

this.fetchList();

},

methods: {

async fetchList() {

const res = await axios.get('/programs', {

params: { pageNum: this.page, pageSize: this.pageSize }

});

this.list = res.data.data.rows;

this.total = res.data.data.total;

}

}

});

```

- - 六、界面展示

登录页面 ：用户输入用户名和密码登录系统，支持切换到注册页面创建新账号。

首页仪表盘 ：展示节目总数、主持人总数、留言总数三个统计卡片，下方显示所有节目及其对应的主持人列表，点击节目名称或主持人姓名可查看详细信息。

节目管理页面 ：节目列表支持分页展示，可按名称搜索、按类型筛选，支持新增、编辑、删除操作。

主持人管理页面 ：主持人列表展示编号、姓名、性别、电话、邮箱、入职日期、所属部门等完整信息，支持按姓名搜索、按性别和部门筛选。

留言管理页面 ：留言列表支持按状态筛选（全部/已读/未读），点击留言内容查看完整详情，支持标记已读、回复、删除操作。

- - 七、关键技术点

动态SQL ：MyBatis的 `<if>` 标签实现按需拼接查询条件，当参数为 null 或空字符串时不拼接对应条件，避免 `WHERE column = null` 查不到数据的问题。

PageHelper分页 ：调用 `PageHelper.startPage(page, size)` 开启分页，PageHelper自动拦截SQL并生成COUNT查询，通过 `PageInfo` 封装分页结果（包含 total、list、pages 等完整信息）。

前后端数据交互 ：后端使用 `@RestController` 自动将Java对象转为JSON返回给前端，前端通过Axios发送异步请求，使用 async/await 处理响应。

多对多关联查询 ：节目与主持人的多对多关系通过 host_program 关联表实现，使用 LEFT JOIN 联查获取节目对应的主持人列表。

统一返回格式 ：后端使用 Result 类统一封装返回结果（包含 code、msg、data 三个字段），前端通过判断 code 值确定请求是否成功。

- - 八、总结与收获

本次课程设计让我完整经历了Web应用从需求分析到系统实现的开发过程。

在技术提升方面，掌握了 Spring Boot + MyBatis + Vue 的开发流程，理解了前后端分离架构的优势，熟练使用了 IDEA、VS Code、SQL Server Management Studio 等开发工具。

在项目经验方面，体验了从需求分析、数据库设计、接口开发到前后端联调的完整流程，对三层架构的职责划分和 RESTful 接口设计有了更深入的理解。

在问题解决方面，遇到了字段名不匹配导致表格无法渲染、动态SQL参数为null查不到数据、前后端联调跨域等问题，通过查阅资料和逐步调试最终解决。