一次在使用听书软件喜马拉雅时，觉得这个软件做的很好，给用户提供了极大的方便和帮助，特别是晚上睡不着的时候，在喜马拉雅上听一段郭德纲的相声，非常加速入眠时间，好的睡眠等于好的生产力，。我很喜欢喜马拉雅，想着自己也可以尝试做一个简易版的喜马拉雅网页，实现主要的听书服务，基于自己有编程的基础和经验，想要自己做一个类似的的听书网页，给他取名就是“听书”，简洁直观。

我将在这篇博客记录自己听书项目的逻辑梳理和记录。

听书项目大纲

主要角色（2个）：普通用户+up主

普通用户注册登录后就成为了up主。

主要功能（多个功能）

针对不同角色拥有的不同的主要实现功能

普通用户：

在首页中获取全部专辑列表
在首页中根据keyword查找想要专辑列表
指定专辑中的故事进行故事声音播放

up主：（在普通用户的基础上拥有自己的特有功能）

浏览自己创建的专辑
新建专辑
为专辑录制故事

次要功能

展示专辑的播放量（MySQL事务的具体使用）

库表详情

概念

需要设计3个Tables保存网页具体信息：
用户（User）+专辑（Album）+故事（Story）

关系

用户创建专辑（1：m）
用户创建故事（1：m）
专辑包含故事（1：m）
故事绑定声音（1：1）

展示页面详情

不要求用户登录情况下可以展示的页面：
首页（专辑列表页）
专辑详情页（故事列表页）
故事播放页

用户注册/登录时展示的页面：
注册/登录页面

用户处于登录状态时展示的页面：
我的专辑页面（我的专辑列表页面）
新建专辑页面
专辑编辑页面
新建故事页面（故事录制页）

听书项目梳理

MySQL建库表部分详情

MySQL数据库名称为”listen“。
listen数据库里一共有三个表。分别为User，Album，Story。

User：（需要4个字段保存相应的信息）
UserId + User登录名称 + User昵称 + 用户登录密码

uid（INT+PK、NN、AI） + username（VARCHAR+NN、UQ） +  nickname（VARCHAR+NN）  +  password（CHAR（128）+NN）

将用户密码用sha-512算法加密，所以password字段Datatybe必须为CHAR（128）。

Album：（需要5个字段保存相应的信息）
AlbumId + 专辑名称 + 创建专辑的UserId + 专辑封面（以封面图片的URL格式保存） + 专辑的播放次数（播放次数设置默认值为0）

aid（INT+PK、NN、AI） + name（VARCHAR+NN）+uid（INT+NN） + cover（VARCHAR+NN）+ count（INT+ NN + DEfault:‘0’）

专辑的播放次数由专辑中各个故事的播放次数相加。

Story（需要5个字段保存相应的信息）
StoryId + 故事名称 + 故事所属的StoryId + 故事播放次数（播放次数设置默认值为0） + 故事录制的声音文件

sid（INT+PK、NN、AI） + name（VARCHAR+NN）+aid（INT+NN） +  count（INT+ NN + DEfault:‘0’） +  audio（LONGBLOB+NN）

audio字段的Datatybe为LONGBLOB，因为声音字段保存为二进制数据格式。

听书项目Java语言具体实现

需要的maven依赖

        <!-- 以war包的形式打包 -->
<packaging>war</packaging><!-- 需要用到1.8版本的maven --><properties><maven.compiler.source>1.8</maven.compiler.source><maven.compiler.target>1.8</maven.compiler.target></properties><dependencies><!-- servlet技术的依赖 --><dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>3.1.0</version><scope>provided</scope></dependency><!-- MySQL数据库的依赖 --><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.49</version></dependency><!-- jackson格式的依赖 --><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.11.4</version></dependency><!-- 操作 redis 的依赖 --><dependency><groupId>redis.clients</groupId><artifactId>jedis</artifactId><version>3.6.3</version></dependency></dependencies>

Java语言的实现逻辑

简单的将项目代码分层。

接入层：servlet包 + api包
服务层：service包
数据访问层：dao包（DAO：Data Access Object）

model包

=将用户（User）+专辑（Album）+故事（Story）类实现放入model包里。=

model包里只存放自定义的三个类。

三个类的具体变量根据MySQL的字段和其数据类型定义。

util包

数据库的连接实现类：DBUtil。
使用单例模式的二次判断书写DBUtil里的具体代码。
配置相关信息：PropertiesUtil。

api包

类名：AlbumListApi >>> 拉取专辑列表API >>> URL：/api/album-list.json

根据用户有没有传关键字 keyword 做不同的处理。实现根据关键字在专辑列表中查找（模糊匹配）的功能。
从数据库中获取符合条件的专辑列表。
创建一个专辑的线性表albumList，元素类型为Album，保存从数据库中拉取到的符合条件的专辑列表。创建匿名类result存放返回的所有信息。
拉取成功时返回success = true，和拉取到的专辑列表Object类型数据data（将result序列化为JSON字符串放入resp对象中）。
拉取失败返回success = false，打印异常栈，便于找到出错原因，把异常中的消息作为错误原因写到 API 中，返回异常原因（将result序列化为JSON字符串放入resp对象中）。

2.类名：AlbumDetailApi >>> 专辑详情页API >>> URL：/api/album-detail.json

点击专辑名称，实现根据aid查找相应的专辑详情。
从album表中查询该专辑的元信息。（name + cover）
从story表中查找属于该专辑的故事列表。(name + sid)
查询不到则输出“aid 对应的专辑不存在”，查询成功则返回专辑的详细信息及专辑的故事列表（顺序展示）。

类名：StoryDetailApi >>> 故事播放页API >>> URL：/api/story-detail.json

获取 sid，读取 story 的信息。动态资源的实现过程和专辑详情页API：AlbumDetailApi差不多。

AbsApiServlet >>> 将API中公共代码都抽象到类中

实现一个abstract class，将req、resp、序列化Json里的公共代码抽象到里面。

类名：APIException >>> 实现自己的异常类

定义受查异常extends RuntimeException。

类名： AlbumEditorApi >>> 专辑编辑页 >>> URL： /api/album-editor.json

专辑编辑页要对异常情况正确反馈给用户。比如：未登陆之类的。

类名：MyAlbumListApi >>> 我的专辑列表页 >>> URL：/api/my-album-list.json

在用户登录的前提下，展示登录用户的专辑列表。

类名：NewStoryApi >>> 故事录制页 >>> URL：/api/new-story.json

根据专辑id将故事的名字，所属专辑id和故事的声音录制信息插入story数据表中。

需要的API接口最终有8个。

servlet包

类名：RegisterServlet >>> 实现用户注册的动态资源 >>> URL：/register

form表单的形式提交，没用Ajax形式提交。
1.读取用户信息；2.在存储中进行数据保存(INSERT)；3.完成登录(Session中保存当前登录用户信息)；4.注册成功后引导浏览器回到首页(重定向)。
注册失败抛出异常。
在用户密码放面：基于安全考虑，我们不保存用户的明文密码，我们利用 SHA-512 算法对密码做 hash。实现自己的hash密码。

类名：LoginServlet >>> 实现用户登录的动态资源 >>> URL：/login

form表单的形式提交。
3. 读取用户写下的信息；2. 通过 MySQL 查询，得到用户对象（查不到对应的用户，代表用户名密码错误）；3. 完成登录；4.引导用户去首页。
登录失败抛出异常。
根据登录时用户名和提交的密码hash后在数据库中查询，如果找到则查询登录成功，否则，失败。

类名：NewAlbumServlet >>> 新建专辑的动态资源 >>> URL： /new-album

后端有责任进行权限验证：要求用户必须登录后才能使用该资源。未登录情况下输出：“用户未登录”。
需要注意图片是以二进制形式传递上来的，使用req.getPart()方法。
我们需要一个 FileOutputStream，把图片保存成本地的一个文件。
新专辑的name, cover保存到数据库。
cover需要保存在数据库里的是能正常访问的URL。

GetAudioServlet >>> 故事播放 >>>URL：/get-audio

负责故事播放的相关处理。

类名：CurrentUserApi >>> 获取当前用户的登陆状态的API >>> URL：/api/current-user.json

创建匿名类result存放返回的所有信息。
登录状态时返回logged = true，和登录的user对象具体信息（将result对象序列化为JSON字符串放入resp对象中）。
非登录状态时返回logged = false。

一共需要实现5个类在servlet包里。

service包

类名：AlbumService

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

dao包

DAO层负责：纯粹的数据存储访问：每张表的增删查改。

==类名：AlbumDao ==

负责来联系Java代码和专数据库。主要操作包括选择专辑和新建专辑。

==类名：StoryDao ==

负责选出故事列表。

前端实现

主要做的是Ajax、DOM树的修改和css样式的编写。

HTML页面（静态资源）

== index.html >>> 首页 >>> 页面名称：听书 | 首页==

首页分为两大部分。
上半部分（header）为首页的导航栏和头部分。包括听书项目的标志brand”听“+搜索功能的入口search+登录/注册和之后的新建专辑/我的专辑的功能区function。
下半部分（main）为展示专辑列表部分。最新创建的专辑放在最前面。
使用的JS资源：index.js + header.js + func.js

用户注册时需要提交自己的用户名username（数据库中的用户名是不能重复的）+昵称nickname（可以重复）+ 用户的密码password。
提交到”/register“类。
<form method="post" action="/register">

用户登录时需要提交自己注册过的用户名username + 用户注册的密码password。
提交到”/login“类。
<form method="post" action="/login">

album-detail.html >>> 专辑详情页面 >>> 页面名称：听书 | 专辑详情

展示专辑的元信息和故事列表。
使用的JS资源：album-detail.js + func.js

story-detail.html >>> 故事详情页面 >>> 页面名称：听书 | 故事播放

展示故事的名字和故事的声音播放。
使用的JS资源：story-detail.js + func.js

new-album.html >>> 新建专辑页面 >>> 页面名称：听书 | 新建专辑

提交到“/new-album”类。
<form method="post" action="/new-album" enctype="multipart/form-data">
用户新建专辑时需要提交专辑名称name和上传专辑封面图片cover。
新建专辑时，Tomcat正处于运行时，我们不进行重新部署。我么使用静态方式访问图片，图片资源保存在target下的项目的相对应的图片目录下。不能放在webapp下。

album-editor.html >>> 专辑编辑页面 >>> 页面名称：听书 | 专辑编辑

专辑编辑页面有专辑的元信息和新建故事功能。
使用的JS资源：album-editor.js + func.js

my-album-list.html >>> 我的专辑页面 >>> 页面名称：听书 | 我的专辑

取到专辑列表时，每个专辑都添加一个 <li> 标签。
使用的JS资源：func.js + header.js + my-album-list.js

new-story.html >>> 新建故事页面（故事录制页面） >>> 页面名称：声音录制并上传

<form method="post" action="/api/new-story.json" enctype="multipart/formdata">
里面包含填写故事名称，授权，开始，停止，上传按钮。
使用的JS资源：new-story.js

一共需要实现9个HTML页面。

HTML部分参考HTML语言文档。

JS部分

func.js

前后分离过程中有大量的 AJAX 操作，实现ajax方法。
实现getParameter方法，要实现功能是：从 url 的 query string 部分，获取需要的参数。用spilt方法一点一点分割。

header.js

作用在index.html里的header，表现在首页的上半部分。
实现header方法，要实现功能是：将还未登录的首页中 header 部分的功能区注册 和登录 登陆后替换成 新建专辑 和 我的专辑。

index.js

作用在index.html里的main，表现在首页的下半部分。
当浏览器把所有的资源都加载到位时，再去执行我们的 main 方法。
先从 url 中的 query string 部分，获取 keyword 参数。
为了使得中文可以正常传输，我们把 keyword 做 url 编码。var url = "/api/album-list.json?keyword=" + encodeURIComponent(keyword)。
实现main方法：要实现功能是：拉取专辑列表，遍历专辑列表，针对每个专辑创建 html，以有序列表<ol><li>元素形式展现。
如果main方法拉取失败，以alert弹窗的形式输出失败原因。

album-detail.js

实现main方法，main方法里实现：更新 meta 信息，把故事列表中的故事添加到 story-list 中。

story-detail.js

实现main方法，main方法里实现： 从 url 上获取 sid，展示故事的名字和故事的声音播放。

album-editor.js

登陆后，在我的专辑页面点击专辑名称，进入专辑编辑页面。从 url 中获取 aid（query string）。
负责更新 meta 信息和把故事列表中的故事添加到 story-list 中。

my-album-list.js

对于我的专辑列表页面的展示。
展示内容包含每张专辑列表的专辑名称，专辑封面和专辑播放次数。

new-story.js

负责新建故事也就是故事录制页面的js部分。
包括获取声音数据和用户每个操作之后的输出响应。

一共需要实现8个JS页面。

JS部分参考JavaScript编程语言文档。

CSS部分

CSS样式部分，只实现了首页的CSS和新建故事页面（故事的录制页面）。
首页：

新建故事页面（故事的录制页面）：

CSS部分参考CSS编程语言文档。
参考使用的颜色网站：https://flatuicolors.com。