《听 – 海的声音》

一.项目简介

该项目是一个类似于喜马拉雅听书项目的一个简化版，实现了能够在线听歌，用户能够上传歌曲，用户能够录制歌曲等相关的一些功能。

二.模块

该项目一共分为了两大模块，一类是游客模块，也就是前台模块。一类是创作者模块，称为后台管理模块。
两大模块的用例图如图所示。

游客用例图

创作者用例图

三.数据库的设计

本设计的ER图如下：

E-R图

一共建立了4张表：

1.用户表：

users：字段有 uid（primary key）、username、password

2.音频表：

track：tid（primary key）、title、uid、类型、二进制内容（歌曲以及录制内容）

3.专辑表：

albums:aid（primary key）、uid 、专辑标题（title）、封面（cover）、状态（state）

4.音频于专辑关系表

relations： rid（primary key）、aid 、 tid

5.表与表的关系

用户-> 音频：一对多关系关系字段在多表（音频表有uid字段）
用户->专辑：一对多关系
音频 <-> 专辑：多对多关系
多对多需要借助中间表：relations表

6.约束关系

1.音频表的uid与用户表的uid建立外键约束
2.专辑表的uid与用户表的uid建立外键约束
3.关系表的aid与专辑表aid建立外键约束
4.关系表的tid与音频表的tid建立约束关系


create database MyListenBook charset utf8mb4;use MyListenBook;create table users(uid int primary key auto_increment,username varchar(20) not null unique,password char(60)  not null );create table tracks (tid int primary key auto_increment,uid int not null,title varchar(10) not null,type char(20) not null,content longblob not null comment '音频的二进制数据') comment '曲目表';create table albums (aid int primary key auto_increment,uid int not null,title varchar(60) not null,cover varchar(60) not null,state int not null comment '0：已下线，1：未发布，2：已发布')comment'专辑表';create table relations(rid int primary key auto_increment,aid int not null,tid int not null)comment '维护专辑和音频之间的多对多关系';-- 增加外键
alter table tracks add constraint FK_ID foreign key (uid) REFERENCES users(uid);
alter table albums add constraint FK_ID2 foreign key (uid) REFERENCES users(uid);
alter table relations add constraint FK_ID3 foreign key (aid) REFERENCES albums(aid);
alter table relations add constraint FK_ID4 foreign key (tid) REFERENCES tracks(tid);

7.功能对应sql语句

1.首页—查询所有专辑

select aid ,username,title, cover
from albums a join users u on a.uid = u.uidwhere state = 2 order by aid desc;

2.专辑播放页

查询出专辑相关信息

select *
from albums a join users u on a.uid = u.uidwhere aid = ?

查询出专辑对用的歌曲

sele tid
from realtions
where aid = ?

查询出歌曲相对应的相关信息

select *
from tracks
where tid in () order by ...

3.用户管理

insert into users(username,password) values(?,?);

select * from users where username = ?;

4.音频管理

录制和上传

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

音频列表

select * form tracks where uid = ? order by ...

分页

查询总数量
select count(*) from tracks where uid = ?
查询每一页的歌曲名
select tid, uid, title, type
from tracks
where uid = ? order by tid desc limit ? offset ?
关联数量
select tid， count(*)
from relations
where tid in () group by aid order by ...;

5.专辑管理

1.新建

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

2.专辑列表

select * from albums where uid = ... order by...

3.分页

select count （*）
from albums where uid = ...select * from albums where uid = ... order by ...limit ...offset...

4.已绑定音频

select * from albums where aid = ...;
select * from relations where aid = ...;
select * form tracks where tid in () order by ...;

5.添加新音频

查询已绑定歌曲名
select tid form relations where aid = ?;
查询未绑定歌曲名单
select * from tracks
where uid = ...and tid not in(...) order by...
添加新关联,添加多条
insert into relations (aid,tid) values ((?,?) ,(?,?));

6.发布与下架

update albums set state = 2 where aid = ?
update albums set state = 0 where aid = ?

四.各个模块功能的以及数据流向的设计

该设计的软件层次图如下：

软件层次图

模块的功能

1.游客模块（publish）
主要功能有

所有专辑列表的展示
专辑列表中绑定的歌曲列表展示
播放专辑歌曲的展示

2.创作中心模块
1.用户管理模块

用户的注册功能
用户的登录功能
用户的注销功能
退出

2.音频管理模块

上传音频功能
录制音频功能
查看音频列表

3.专辑管理模块

 新建专辑功能专辑绑定歌曲功能查看专辑列表

模块的数据流向

该设计的数据流图如下：

数据流图

五.类的设计

将该项目的类分为如下结构：

类的结构 1.servlet 是接入层，主要负责从前端页面获取数据并处理并包装数据给前端。

2.service层

主要负责业务逻辑，类似多表进行数据拼接.
3.repository

主要负责数据库的查询等工作

4.dataObject

主要是一些数据的类，比如用户类，基本与数据库中的字段一致

5.util

主要负责数据库的连接操作以及打印日志的操作

6.viewObject

主要是负责提供前端数据的类。

六.前端模块的设计

前端主要是应用html和css样式的设计以及js对于DOM树的修改以及与后端进行数据交互的对ajax的请求。

七.项目成果演示

1.游客界面演示

首页展示

首页可以看到所有人已经发布的专辑，并且有封面以及标题作者的展示，点击专辑的标题，进入到相关的专辑列表。

播放页展示点击播放，能够播放音乐。能够拖动进度条来调整进度，能够通过上一曲下一曲来进行相关的操作。

2.创作者模块

创作中心模块

上传
录制
列表

新建专辑

列表页

绑定关联页

添加关联页

八.总结

项目源码git地址：https://gitee.com/wry15/mylistenbook
项目展示:http://43.142.146.34:8080/

1.为什么要做这个项目？
在如今这个快速发展的时代里，时常也需要静下心来慢慢体会这个这个世界。在每次睡不着的时候，总是会打开喜马拉雅听一段故事，能够更好的促进睡眠，使得第二天的工作变得高效。基于此，我应用自己所学的知识，开发一款基于web的网上听书的网页版，不仅能够提升自己的技术，而且还方便了自己。
2.本次项目的难点是什么？
我认为本次项目的难点首先在于环境的搭建，有一系列Tomcat环境的搭建以及content Path的配置等等，接着就是和之前的编码方式的不同，整个数据传输的过程比较繁琐，需要理清楚数据如何进行发送与接收。最后就是相关业务的流程，在需要理清楚业务流程的整个过程，以及业务对于sql的编写等工作。
3.本项目对你最大的提升是什么？
通过本次项目，最大的提升莫过于技术方面的提升，使得自己对于web编程更加清楚基本流程是什么，以及对于每一个数据他背后所存在的意义是什么，如何发送一个数据到前端，后端如何接收一个数据，如何处理一个业务，最重要的是在相关的业务中的逻辑需要一个个的捋清楚，每一步是怎样做的，这样做的目的是什么等等，有没有更好的方法。
4.一个数据发送的流程是什么？
这个范围有点大，我就拿登录页面来说，首先，从页面上获取到相关的用户名与密码，通过表单的方式进行提交。提交给相应的后端动态资源，动态资源获取到相关的用户名和密码后，该项目还可以加上密码相关的判断，通过数据库的查询工作进行对用户名和密码的匹配，如果匹配成功则通过重定向功能使进入到相关的用户中心首页中，若匹配失败则重定向到登录页面，这里也可以加上登录次数的限制。