一次在使用听书软件喜马拉雅时，觉得这个软件做的很好，给用户提供了极大的方便和帮助，特别是晚上睡不着的时候，在喜马拉雅上听一段郭德纲的相声，非常加速入眠时间，好的睡眠等于好的生产力，。我很喜欢喜马拉雅，想着自己也可以尝试做一个简易版的喜马拉雅网页，实现主要的听书服务，基于自己有编程的基础和经验，想要自己做一个类似的的听书网页，给他取名就是“听书”，简洁直观。
我将在这篇博客记录自己听书项目的逻辑梳理和记录。
听书项目大纲
主要角色（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
- register.html >>> 用户注册页面 >>> 页面名称：听书 | 注册
用户注册时需要提交自己的用户名username（数据库中的用户名是不能重复的）+昵称nickname（可以重复）+ 用户的密码password。
提交到”/register“类。
<form method="post" action="/register">
- login.html >>> 用户登录页面 >>> 页面名称：听书 | 登录
用户登录时需要提交自己注册过的用户名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。
扫一扫
2596
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
