一、项目概述
电视节目管理系统是一个面向广播电台和电视节目制作单位的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 接口设计有了更深入的理解。
javaweb课程设计
在问题解决方面，遇到了字段名不匹配导致表格无法渲染、动态SQL参数为null查不到数据、前后端联调跨域等问题，通过查阅资料和逐步调试最终解决。
