每日音乐推荐系统
一、项目简介
本项目是一个基于 Spring Boot + Vue.js + MyBatis + MySQL 的每日音乐推荐系统，采用前后端分离架构，实现了前台音乐推荐展示和后台音乐管理两大模块。
f技术栈：Spring Boot 3.5.15、MyBatis 3.0.5、MySQL 8.0、Vue.js 2、Element UI、Axios
开发模式：前后端分离，RESTful API
数据库：MySQL，包含 song（歌曲表）和 daily_recommend（每日推荐表）
二、项目功能
前台功能（用户端）
今日推荐浏览（首页卡片式展示当日精选歌曲）
曲库浏览（全部歌曲列表）
流派筛选（按 Pop/Rock/Folk/Classical 分类）
关键词搜索（歌曲名/歌手模糊搜索）
歌曲详情查看
后台功能（管理端）
歌曲增删改查（CRUD）
分页查询与条件搜索（按歌曲名、歌手、流派组合搜索）
每日推荐管理（按日期配置推荐歌曲）
三、核心技术实现
3.1 后端架构（三层架构）
Controller 层（接收请求、返回响应）
↓
Service 层（业务逻辑处理）
↓
Mapper 层（数据库操作）
3.2 RESTful API 设计
HTTP 方法 URL 功能
GET /api/admin/songs?page=1&pageSize=10 分页+条件查询
GET /api/admin/songs/{id} 按 ID 查询
POST /api/admin/songs 新增歌曲
PUT /api/admin/songs 更新歌曲
DELETE /api/admin/songs/{id} 删除歌曲
3.3 分页原理
后端分页核心逻辑：
int start = (page - 1) * pageSize; // 计算起始位置
Long total = mapper.countByCondition(...); // 查总数
List<Song> rows = mapper.findByCondition(start, pageSize, ...); // 查当前页
return new PageBean(total, rows); // 封装返回
前端使用 Element UI 的 el-pagination 组件，通过 @current-change 和 @size-change 事件触发分页请求。
3.4 动态 SQL（MyBatis）
<where>
<if test="name != null and name != ''">
and name like concat('%', #{name}, '%')
</if>
<if test="genre != null and genre != ''">
and genre = #{genre}
</if>
</where>
四、项目界面视频展示
网页介绍
前台首页：今日推荐卡片展示（http://localhost:8081）
管理后台-歌曲列表：分页表格 + 搜索表单 + 增删改查操作（http://localhost:8081/admin/song_list.html）
新增/编辑歌曲：表单页面（http://localhost:8081/admin/song_form.html）
推荐管理：按日期配置推荐（http://localhost:8081/admin/recommend_list.html）
五、项目源码结构
src/main/java/com/example/
├── MusicRecommendApplication.java -- 启动类
├── pojo/
│ ├── Song.java -- 歌曲实体
│ ├── DailyRecommend.java -- 推荐实体
│ ├── Result.java -- 统一响应
│ └── PageBean.java -- 分页封装
├── mapper/
│ └── SongMapper.java -- 数据访问层（注解+动态SQL）
├── service/
│ ├── SongService.java -- 业务接口
│ └── impl/SongServiceImpl.java -- 业务实现
└── controller/
├── SongController.java -- 后台API（RESTful CRUD）
├── FrontController.java -- 前台API
└── DailyRecommendController.java -- 推荐API
src/main/resources/static/
├── front/ -- 前台页面（Vue）
└── admin/ -- 后台页面（Vue + Element UI）
六、项目总结
本项目完整实践了 Web 应用开发的典型流程：数据库设计 → 实体类建模 → Mapper SQL 编写 → Service 业务实现 → Controller API 暴露 → 前端 Vue 页面开发。通过该项目，深入理解了前后端分离、三层架构、RESTful API 设计、MyBatis 动态 SQL、服务端分页等核心技术。