听书系统（类似于喜马拉雅）
文章目录
前言
为什么做这个项目？
由于自己喜欢听音乐还有看小说，而且学习了相关知识所以想自己做一个可以听书和听音乐的系统。
准备工作
1、库表的创建
（1）用户表users（做主表）：
uid（用户编号） 、 username(用户名）、password（密码）。
（2） 音频表track ：
tid（音频编号）、title（标题）、uid 、type（类型）、content（内容）。
（3）专辑表albums：
aid（专辑编号）、title（标题）、uid、cover（封面图）、state（状态）。
（4）关系表relations：
rid、aid、tid。
2、后端对象（类）的类型：
1、主要负责过程的对象：
1、servlet对象：动态资源（负责处理HTTP输入，输出）。
2、service对象：当数据来自多张表的时候，需要在代码中组装，就在service中进行。
3、dao对象/repository对象：单表访问Datebase操作。
2、主要表示数据的对象：
1、date_object（DO）对象：描述从Datebase取得的数据。
2、view_object（VO）对象：描述展示出的额数据（一般会通过JSON序列化）
一、用户管理
1、注册
前端：利用form表单进行一个提交用户所填写的用户名和密码，属于静态资源。
代码如下：
<form method="post" action="/studio/user/register.do">
<input type="text" name="username">
<input type="password" name="password">
<button>注册</button>
</form>
后端：进行注册的具体操作，需要多个类配合进行工作。
1、在UsersDO类（处理users表）对象中设置和数据库中相对应的属性名称（方便操作）。
2、在UserServlet类中从前端获取信息并调用UesrSerice来进行插入用户信息。插入完成后重定向到首页。
3、在UesrService类中将从form表单中获取的用户信息调用UserRepo中的方法添加到数据库中，实现数据的整合。
4、在UserRepo类中使用SQL来对数据库进行增删查改，由于是注册操作所以是插入操作。
代码如下：
String sql = "insert into users (username, password) values (?, ?)";
5、最后将插入好的用户信息转换成UserVo来呈现给前端。
2、登录
前端： 在login.html中使用form表单来进行用户的登录。
代码如下：
<form method="post" action="/studio/user/login.do">
<input type="text" name="username">
<input type="password" name="password">
<button>登录</button>
</form>
后端：
1、在UserServlet类中从前端获取信息并调用UesrSerice来查询用户输入的用户名和密码是否正确。
2、在UesrService类中将从form表单中获取的用户信息调用UserRepo来查询用户名和密码是否在数据库中并且一一对应。
3、在UserRepo类中使用SQL来对数据库进行增删查改，因为是登录操作所以使用的是查询操作。
代码如下：
String sql = "select uid, username, password from users where username = ?";
4 、登录成功后，使用相对应的UserVo来呈现前端。
注销
注销必须是在登录后才可以使用不需要进行数据的增删查改，所以只使用QuitServlet类来进行操作，在该类下使用session.removeAttribute方法来销毁用户关联的session，并且重定向到登录界面。
二、音频管理
1.音频上传
**前端：**这个功能必须当用户登录后才可浏览使用，验证放在后端进行处理。
代码如下：
<form method="post" action="/studio/track/upload.do" enctype="multipart/form-data">
<input type="text" name="title">
<input type="file" name="track">
<button>上传</button>
</form>
后端：因为要接受 enctype="multipart/form-data"的form表单，所以后端使用@MultipartConfig注解类修饰，读取用getPrat（…)。
1、在TrackServlet类中验证用户是否登录，若登录后从前端获取到用户所上传的信息并交给TrackService处理。
2、在TrackService类中将获得的信息与此时已经存在的UserVo中的uid一起使用TrackRepo的插入方法插入到数据库中。
3、在UserRepo类中使用SQL来对数据库进行增删查改，因为是上传，所以是增加操作。
代码如下：
String sql = "insert into tracks (uid, title, type, content) values (?, ?, ?, ?)";
2、音频列表
前端：通过list.html文件来加载JS，并显示最终的列表信息,。
代码如下：
<div class="who"></div>
<table>
<thead>
<tr>
<th>#tid</th>
<th>标题</th>
<th>和专辑的关联次数</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div class="pagination">
<a href="/studio/track/list.html?page=1">第一页</a>
<a href="/studio/track/list.html?page=" class="prevPage">上一页</a>
<span>每页 <span class="countPerPage"></span> 个</span>
<span>第 <span class="currentPage"></span> 页</span>
<span>共 <span class="totalPage"></span> 页</span>
<a href="/studio/track/list.html?page=" class="nextPage">下一页</a>
<a href="/studio/track/list.html?page=" class="lastPage">最后一页</a>
</div>
<script src="./js/list.js"></script>
JS做了什么呢？
答：发起ajax请求，渲染html文件。
后端：通过JSON，根据当前用户找出相应的列表信息。
1、需要两个VO类来进行前端显示
2、在TrackServlet类t中验证是否登录，并添加ObjectMapper类来转换JSON，并把获取的数据交给TrackService类处理。
3、在TrackService类中调用TrackRepo类的方法进行查询操作，通过此时的登录的uid来进行匹配。
4、在TrackRepo类中使用SQL来对数据库进行增删查改，是查询操作。
代码如下：
String sql = "select tid, uid, title, type from tracks where uid = ? order by tid desc limit ? offset ?";
列表分页
1、在list.js中写处理上一页下一页的函数并创建关于Page的VO类（html文件显示的信息）。
2、在TrackServlet中读入page信息，并交给TrackService处理。
3、在TrackService中定义每页有最多有多少个信息，利用TrackRepo区查询一共有多少个数据，并计算有多少页。
4、在TrackRepo类中使用SQL来对数据库进行增删查改，是查询操作。
代码如下：
String sql = "select count(*) from tracks where uid = ?";
引用次数
设置RelationDO类取得relations表中的数据，根据当前所要查询的音频的tid来进行查询，查询的工作在RelationRepo中进行查询操作。
代码如下：
String sqlFormat = "select tid, count(*) as ref_count from relations where tid in (%s) group by tid order by tid";
3、音频录制
前端：使用html和js相互配合，html使用audio标签来开始录制，js使用navigator.mediaDevices来使用麦克风配合录制并保存下来给后端保存在数据库。
html代码如下：
<body>
<input type="text" id="title">
<button id="stop">停止录制</button>
<audio controls></audio>
<script src="./js/record.js"></script>
</body>
后端：在RecordServlet类中判断用户是否登录，若登录就将录制好的音频文件进行保存，过程和音频的上传类似。
三、专辑
1、专辑创建
前端：用户必须登陆后才能使用，用form表单进行提交。
代码如下”
<form method="post" action="/studio/album/create.do">
<input type="text" name="title">
<input type="text" name="cover">
<button>新建</button>
</form>
后端：
1、在CreatServlet中验证用户是否登录，若登录从用户提交的保存交给CreatRepo处理。
2、在CreatRepo执行SQL操作因为是创建所以是插入操作。
代码如下：
String sql = "insert into albums (uid, title, cover, state) values (?, ?, ?, ?)";
2、专辑列表的展现
前端:html与js配合使用，将专辑列表页展现出来。
后端：
1、首先在ListServlet类验证用户是否登录，若登录根据当前用户的uid来查找对应的信息并交给前端展示。
2、在ListRepo的执行查询操作。
代码如下：
String sql = "select aid, title, cover, state from albums where uid = ? order by aid desc";
3、专辑于音频的绑定
列表页有绑定选项，可以向该专辑绑定想要绑定的歌曲。
前端：由html文件和js文件配合工作，点击绑定后就可以选择想要绑定的音频。
后端：
1、在CandidateServlet中将当前已将登录用户的音频列表查询出来，并交给前端展现出来。
代码如下：
String sql = "select tid, title from tracks where uid = ? and tid not in (select tid from relations where aid = ?) order by tid desc";
2、在AddServlet中将用户选择绑定的音频的tid和专辑的aid插入relations表中。
代码如下：
String sql = "insert into relations (aid, tid) values %s";
这样就可以完成绑定。
4、专辑的发布和下线
会在专辑列表中每个专辑会有发布和下线操作。如果发布，所有人可以浏览；若下线，其他人不能浏览。如图所示：
前端：js中根据不同状态来执行不同操作。
代码如下：
if (a.state === '已发布') {
anchor = `<a href="/studio/album/withdraw.do?aid=${a.aid}">下线</a>`
} else {
anchor = `<a href="/studio/album/publish.do?aid=${a.aid}">发布</a>`
}
后端：
1、如果状态是发布，前端点击a标签就会跳转到未发布的状态，WithdrawServlet就会执行下线操作，将数据库中该专辑的状态修改为未发布。
2、如果状态是未发布，前端点击a标签就会跳转到发布的状态，PublishServlet就会执行上线操作，将数据库中该专辑的状态修改为发布。
四、播放
前端：
主体为一个audio标签，但是要播放音乐需要数据库提供音频数据的URL，还需要一个统一的数据接口来实现。
后端：
1、根据用户要播放音频的tid来进行查询，查询到之后利用“桶”将该音频的二进制流传递给播放器（数据从 content(InputStream) 搬到 os(OutputStream)）。
代码如下：
String sql = "select type, content from tracks where tid = ?";
ServletOutputStream os = resp.getOutputStream();
os.flush();
2、设置统一的数据接口，将专辑表albums、音频表track、关系表relations的数据统一起来。
代码如下：
String sql = "select aid, username, title, cover from albums a join users u on a.uid = u.uid where aid = ?";//专辑表
String sql = "select tid from relations where aid = ?";//关系表
String sql = "select tid, title from tracks where tid in (%s) order by tid desc";//音频表
五、总结
1、开发环境：使用IDEA做代码编写、Tomcat做web服务器、MySQL做数据储存、Maven做项目管理。
2、整体框架：项目整体基于HTTP协议，前端采用HTML+JS+CSS来进行页面的整体布局，后端采用分层结构，分为Service层，Servlet层、Repo层、Dao层的设计，便于分类设计。
3、项目核心功能：
（1）用户的注册，登录，注销。
（2）音频的上传，录制，播放。
（3）专辑的设计与创建，专辑和音频的绑定，专辑发布与下线。
4、涉及知识：简单的web服务器使用、Java操作MySQL数据库、数据库的设计、json的使用、
HTTP协议的理解、Java集合的使用、Servlet的使用、前端知识的简单使用如：CSS、JS、HTML等。
783
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
