我的项目——不爱听书系统

王嘻嘻-

已于 2022-08-09 20:05:00 修改

阅读量365

点赞数 2

分类专栏：项目文章标签： servlet 前端 java

于 2022-08-09 18:36:25 首次发布

本文链接：https://blog.csdn.net/weixin_45699237/article/details/126253548

版权

项目专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、项目简介

访问不爱听书系统，用户可以根据自己的喜好选择对应的专辑进行内容播放；若想录制并上传自己的音频，创建专属专辑就需要在创作中心进行注册登录。

二、准备工作

1、库表的创建

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ikQJ8Tkc-1660041297070)(D:\desktop\bite\mdpng\image-20220809182823063.png)]$

2、后端对象(类)的类型:

1.主要表示过程的对象

servlet对象：处理过程的对象，动态资源，负责处理HTTP输入、输出
service对象：当数据来自多张表，需要在代码中做组装时，放在service中进行
dao对象/repository对象：单表直接访问Database的相关操作，直接使用SQL对数据库进行增删改查

2.主要表示数据的对象

data_object (DO)：描述从 Database取出来的数据
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>
   <!-- <button>登录</button> -->
</form>

后端：注册的步骤，多类配合完成

1、UsersDO类（处理数据库中的users表）对象中设置和数据库中相对应的属性名称（方便操作）。
2、UserServlet 类中注册新用户从前端获取信息并调用UesrSerice来进行插入用户信息。插入注册信息完成后重定向到首页。登录是从前端获取信息并调用UesrSerice来查询用户输入的用户名和密码是否正确。
3、UesrService 类中注册新用户将从form表单中获取的用户信息调用UserRepo中的方法添加到数据库中，实现数据的整合。登录将从form表单中获取的用户信息调用UserRepo来查询用户名和密码是否存在数据库中并且一一对应。
4、UserRepo 类负责直接使用SQL对数据库user表进行增加、查找操作。

insert into users(username,password) values (?,?) // 注册
select uid, username, password from users where username = ? // 登录

5、UserVO 类对外表现，准备传输数据给前端，so 不记录密码。

退出：在登录后才可以使用，用QuitServlet类来进行操作，在该类下使用session.removeAttribute方法来销毁用户关联的session，并且重定向到登录界面。

2、音频管理

a. 音频上传

前端：此功能必须登录后才能使用，验证放在后端进行处理

<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==multiparty/form-data 的 form 表单数据，必须用 @MultipartConfig 修饰

1、TrackServlet 类中验证用户是否登录，若登录后从前端获取到用户上传的信息并交给TrackService处理。
2、TrackService 类中将获得的信息与此时已经存在的UserVo中的uid一起使用TrackRepo的插入方法插入到数据库中。
3、UserRepo 类中使用SQL来对数据库表tracks进行增删查改，因为是上传，所以是增加操作。

insert into tracks (uid, title, type, content) values (?, ?, ?, ?)

b. 音频列表

前端：通过 list.html 文件加载 JS（发起ajax请求，渲染html文件），并显示最终的列表信息。

<div class="who"></div>
    <table>
        <thead>
            <tr>
                <th>#tid</th>
                <th>标题</th>
                <th>和专辑的关联次数</th>
            </tr>
        </thead>
        <!-- tbody 下的所有元素，应该是由 JS 动态添加进来 -->
        <tbody></tbody>
    </table>
    <div class="pagination">
        <a href="/studio/track/list.html?page=1">第一页</a>
        <!-- 由 js 根据响应中的结果填 page = 几 -->
        <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>

后端：

1、需要两个VO类来进行前端显示
2、 TrackServlet 类t中验证是否登录，并添加 ObjectMapper 类来转换JSON，并把获取的数据交给 TrackService 类处理。
3、 TrackService 类中调用 TrackRepo 类的方法进行查询操作，通过此时的登录的uid来进行匹配。
4、 TrackRepo 类中使用 SQL 来对数据库进行增删查改，是查询操作。

列表分页

1、 list.js 中写处理上一页下一页的函数并创建关于Page的VO类（html文件显示的信息）。
2、TrackServlet 中读入page信息，并交给 TrackService 处理。
3、TrackService 中定义每页最多有多少个信息，利用 TrackRepo 查询一共有多少个数据，并计算有多少页。
4、TrackRepo 类中使用SQL来对数据库进行增删查改。

select count(*) from tracks where uid = ?;

引用次数

RelationRepo 类取得 relations 表中的数据，根据当前要查询音频的 tid 来进行查询。

select tid, count(*) as ref_count from relations where tid in (%s) group by tid order by tid;

c. 音频录制

前端：使用 html 和 js 相互配合，html 使用 audio 标签来开始录制，js 使用navigator.mediaDevices 来使用麦克风配合录制并保存下来给后端保存在数据库。

<body>
<input type="text" id="title">
<button id="stop">停止录制</button>
<audio controls></audio>
<script src="./js/record.js"></script>
</body>

后端： RecordServlet 类中判断用户是否登录，登录完成后，将录制好的音频数据保存到数据库中。

d. 音频播放

前端：主体为一个audio标签，但是要播放音乐需要数据库提供音频数据的URL，还需要一个统一的数据接口来实现。

<audio src="./歌唱祖国.mp3"></audio>
<button class="playPause">播放</button>

后端：
1、根据用户要播放音频的tid来进行响应，响应不是文本，而是二进制，不用 resp.getWriter() 而是用 resp.getOutputStream()，把数据从 content(InputStream) 搬到 os(OutputStream)，利用一个桶(byte[]) 一点点搬，直到数据搬完。

select type, content from tracks where tid = ?

2、设置统一的数据接口，将专辑表albums、音频表track、关系表relations的数据统一起来。

select aid, username, title, cover from albums a join users u on a.uid = u.uid where aid = ?;//专辑表
select tid from relations where aid = ?;//关系表
select tid, title from tracks where tid in (%s) order by tid desc;//音频表

3、专辑管理

a. 创建专辑

前端：用户登录后才能使用，使用 form 表单提交

<form method="post" action="/studio/album/create.do">
        <input type="text" name="title">
        <input type="text" name="cover">
        <button>新建</button>
</form>

后端：CreateServlet 中验证用户是否登录，登陆完成后将用户提交的交给 CreateRepo 执行 SQL 表插入操作。

insert into albums (uid, title, cover, state) values (?, ?, ?, ?);

b. 专辑列表

前端: html与js配合使用，将专辑列表页展现出来。

后端：ListServlet 类验证用户是否登录，登录完成后，ListRepo 类查询数据库中当前用户的 uid 来查找对应的信息并交给前端展示。

select aid, title, cover, state from albums where uid = ? order by aid desc;

c. 专辑的发布和下线

前端：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就会执行上线操作，将数据库中该专辑的状态修改为发布。

4、关系管理（音频：专辑之间的关系）

前端：由 html 文件和 js 文件配合工作，点击绑定后就可以选择想要绑定的音频。
后端：
1、CandidateJsonServlet 中查询当前已将登录用户的音频列表，然后交给前端展示。

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表中。

insert into relations (aid, tid) values %s;

五、总结

1、开发环境：用 IDEA 进行代码的编写、Tomcat 做web服务器、MySQL做数据储存、Maven做项目管理。
2、整体框架：项目整体基于HTTP协议，前端采用HTML+JS+CSS来进行页面的整体布局，后端采用分层结构，分为Service层，Servlet层、Repo层、Dao层的设计，便于分类设计。
3、项目核心功能：
（1）用户的注册，登录，退出。
（2）音频的上传，录制，播放。
（3）专辑的创建，专辑和音频的绑定，专辑发布与下线。