小熊听书项目的详细介绍

目录

一、项目概述

二、项目需求

2.1功能需求

2.2 其他需求

2.3系统功能流程图

2.4总体设计

三、开发环境

四、准备工作

五、介绍文件的存放规则

六、各部分功能的详细介绍

1.建立数据库与定义数据库属性的包(data_object包)

 2.用户的登录、注册、注销功能的实现

    加密操作的原理：

3.音频管理

4.专辑管理

总结：

---

一、项目概述

项目名称：小熊听书

项目介绍：本系统实现了用户分享音乐的平台，普通用户不进行登录即可收听音乐，而博主可以在该平台上传音频，以及在线音频录制上传。博主可以把自己的音乐整理为专辑发布，并实现了在线播放的功能。该系统登录后的创作中心分为用户管理、音频管理、专辑管理三个模块。

二、项目需求

2.1功能需求

  (1)用户可以注册登录进听书系统，并可以随时注销自己的账号

  (2)用户可以自己录制音乐制作专辑，并且可以收听单曲，和专辑播放，也可以上传在自己电脑中的音乐，并对上传的音乐进行管理。

  (3)对专辑进行上线和下线的管理。

2.2 其他需求

（1）系统界面有良好的视觉体验，营造美观舒适的界面；

（2）操作简单流畅，无可视卡顿；

（3）有良好的引导提示，增强用户体验；

2.3系统功能流程图

2.4总体设计

本系统采用了浏览器/服务器模式，即B/S模式。对表现层、业务层、持久层三层结构均进行了实现。

表现层(data_view)：在表现层通过前端界面处理（html+css+JavaScript）配合前端框架进行实现。前端与用户直接接触，保证良好的设计风格和视觉体验。前端数据通过javaScript发送Ajax传输给后端，再通过后端servlet返回的数据进行DOM树的渲染，形成了最终的页面。

业务层(service包和servlet包)：service对从数据库或者前端页面获取来的数据进行转换，转换为当下需要的数据格式。在业务层通过Servlet处理，进行前后端交互。由于前端数据需要向后端发出请求。所以在前后端交互处理使用了JavaScript的开源框架jQuery-Ajax进行数据请求响应处理。后端通过servlet接收对应数据进行处理。

持久层(util包、data_object、repository)：通过JDBC对数据库进行了连接，创建了用户表、音频表、专辑表、以及关系表，用来存储信息，并创建建了四个表在后端的实体类(UserDo,TrackDo,AlbumDo,TidToCountDo)，以及在view_object包下面定义我们需要的json格式的数据，以及对repository对数据库中数据的增删查改。

三、开发环境

1.前端开发：

技术：Html、Css、JavaScript

工具：Intellij IDEA 2020.1.4

2.后端开发：

算法：哈希算法进行加密 

技术：jdk1.8、workbench、servlet、Maven

服务器：tomcat-8.5.50

工具：Intellij IDEA 2020.1.4

3.开发环境：Windows10 家庭版

4.运行环境：Intellij IDEA 2020.1.4

四、准备工作

1.使用Maven创建项目

完善项目------在main目录下创建webapp目录，在webapp目录下再创建WEB-INF目录，在WEB-INF目录下创建web.xml。

2.配置pom.xml内容(添加依赖)

通过war为后续打包，打成war包。通过第三方仓库导入MYSQL，Servlet，Thymeleaf,jackson的依赖。通过${project.artifactld}将war包名称改变，方便后续部署到云服务器。

3.配置Tomcat和MYSQL

五、介绍文件的存放规则

data_object：用来存放与数据库直接交互的实体类

Repository:用来对直接数据库中的数据进行操作

Service：服务层：把数据转换为当前需要的格式

Servlet：进行前后端的交互，接收请求和发送响应给浏览器

Util：使用JDBC与数据库进行连接

view_object：定义浏览器需要的JSON格式的属性

org包:存储了对密码进行加密的哈希算法

sql包:存放建表语句

webapp中存储前端文档以及动态的资源，实现了页面的动态呈现。

六、各部分功能的详细介绍

1.建立数据库与定义数据库属性的包(data_object包)

在workbench中创建好了数据库，并且通过JDBC与数据库进行连接，包括getDataSource(),getConnection(),以及后续回收资源的getClose操作。

建表语句省略。

数据库中的表信息与data_object包对应，在后端操作的实际上是这里定义的数据库属性。

下面是对各表的详细介绍：

用户表：用户(uid)主键自增、用户名(username)、密码(password)

音频表:音频(tid)主键自增、用户(uid)、标题(title)、type(音频类型)、content(音频内容)

专辑表:albums：aid()主键自增、标题(title)、用户(uid)、封面图(cover)、状态(state)

注：状态中 0代表已下线、1代表未发布、2代表已发布

关系表:relations：rid()主键自增、专辑(aid)、音频(tid)

relations表用于维护专辑与音频之间多对多的关系

数据库中的四个表对应data_object中的四个实体类

 2.用户的登录、注册、注销功能的实现

注册功能：

通过from表单发送HTTP的post请求，后端RegisterDoServlet接收HTTP请求，并进行相关的处理，在这个类里可以进行合法性校验，（然后需要进行密码的加密操作，在service中进行操作），注册之后，将用户对象放入session中，再重定向到首页，重定向之后注册完成。

登录用到的类的介绍：

UserVO: 是对外表现的对象，存放在session中，传给前端，只定义了uid 和username ，并没有把password写进这个类里面。

UserService:（3个操作） 对密码做加密，保证数据库中存的密码不是明文，哈希操作，和完成注册（完成数据库地插入操作），在类中把UserDO（数据库需要的形式）转化为UserVO（我们需要的形式）。

UserDO：这里的数据是被数据库操作的，所以为了方便操作，属性名称都与数据库相同。

UserRepo:进行sql操作，对User表操作。为了代码简洁，直接用@SneakyThrows (lombok包下)，不添加throws也可以正常抛出受查异常。

为了是代码简洁，引入了 lombok.Data,@Data可以给我们自动添加getter/setter/toString/equals。

---

登录功能：

在LoginDoServlet中判断session

UserService:（3个操作）

(1)首先根据用户名在数据库中查出数据

(2)然后检查密码是否正确

(3)UserRepo用来进行查询操作

---

注销功能：（实现：把session中的currentUser删掉即可）

在servlet中删除session

加密操作的原理：

加密操作介绍：（在UserService中处理）

加密操作原理：使用hash技术，用户输入的明文经过hash操作之后变为密文，把密文保存到表中，当用户登录时，再次输入密码，使用同样地hash算法对密码做哈希，与数据库中的密码比对，如果相同则登录成功，不相同则登录失败。

技术实现：下载使用了别人实现的加密算法bcrypt，首先生成盐值，再对明文加密。

3.音频管理

音频管理所需要的类：

前端：

后端

 以及根据用户信息查找列表的TrackService

---

文件上传：

需要上传文件：前端 upload.html

(1)from必须使用post提交

(2)From的enctype必须是multipart/formdata

(3)input type=file

UploadDoServle类中：用来接收前端的from表单，而要想接收enctype=multipart/formdata 必须使用@MultipartConfig修饰。

(1)首先第一步利用session来判断用户是否登录。

(2)从请求中获取我们需要的信息，我们要取title 、type（文件类型）以及音频数据（content）

(3)将拿到的数据插入到数据库中，由于插入比较简单没有引入service，直接在UploadDoServle类中进行插入

Trackrepo：对数据库进行操作的插入操作。

遇到的问题：但是mysql服务器支持的查询包的大小是4194304，但是上传的音频文件过大就无法上传。所以要进行mysql的设置，只要在workbench中执行SQL：

set global_allowed_packet=500*1024*1024；但每次重启MySQL都需要手动执行一下，即可。

音频列表的实现：

1.采用前后端分离的技术：后端以json格式来提供数据

2.前端：通过Ajax（XHR技术），进行请求+进行DOM树的修改

3.指定具体的JSON格式

具体实现：

(1)前端list.html页面首先要加载JS，准备好展示的列表的容器元素（table/div）,list.js发送ajax请求后端的JSON数据，js获取到数据之后进行DOM树的渲染

(2)在后端ListJsonServlet接收到js发送的HTTP请求构造响应，首先判断用户是否登录。

这是在StudioTrackListView中定义的两个属性 List trackList，currentUser赋值，如果未登录，则赋值为null即可，如果已登录则这个新的对象赋值为trackService（主要工作是把查询到的数据库TrackDo类型的数据转为ListTrackView类型的数据）中加工后的List集合。

在ListJsonServlet中把list集合的数据序列化为JSON格式的数据，传给前端js，浏览器解析js得到页面。

 音频录制：

在前端record.html中留下容器用来开启浏览器的麦克风权限，然后再js中进行DOM树的渲染，给每一个前端的按钮都加上响应，让音频开始录制，结束录制，并且发送post请求，发送给RecordJsonServlet，由这个类把数据保存在数据库表中

 

4.专辑管理

专辑管理所需要的类

前端

后端

以及查询数据库中三张表的AblumService

 

---

新建专辑：

1.在前端create.html中用from表单提交前端提交的数据，后端用CreateDoServlet接收HTTP请求，接收到之后首先判断用户是否登录，若登录，直接把数据插入在数据库中，并返回专辑创建成功。（业务简单并没有用到service层辅助操作）

关联音频：

在bind.html中保存一个添加的a标签，点击之后，js再次发送HTTP请求，跳转到add.html(新增音频),然后add.js发送ajax请求，请求后端json格式的数据，后端把数据返回给前端，然后js进行渲染，把所有的音频呈现出来（复选框的形式）。

后端json格式的数据由CandidateJsonServlet来做，同样是判断用户是否登录，然后在数据库中查询数据，并把数据转化为JSON格式。

专辑列表：

同上面几乎相同，前端list.html中留下容器，经过js发送ajax得到数据对页面进行渲染得到，后端ListJsonServlet中创建了外部需要的类AblumView，并且写上构造方法，也创造了一个ResultView类定义了当前用户、和专辑列表，然后把数据库中查询得到的数据放在ablumList中，再把数据转化为JSON格式传给前端。

总结：

项目到这里就结束啦！！！