练习项目-听书

最新推荐文章于 2024-07-22 14:15:06 发布

惊喜狍子

最新推荐文章于 2024-07-22 14:15:06 发布

阅读量182

点赞数 1

分类专栏：练习项目文章标签： java

本文链接：https://blog.csdn.net/qq_43477157/article/details/119738029

版权

练习项目专栏收录该内容

1 篇文章 0 订阅

订阅专栏

听书

一、项目设计

1、观察页面，理解名词关系，简化需求

简单实现喜马拉雅听书的基本功能，观察喜马拉雅页面

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NiHssOxB-1629105910901)(C:\Users\J1764\AppData\Roaming\Typora\typora-user-images\image-20210728150204917.png)]$
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WeAHWzU4-1629105910904)(C:\Users\J1764\AppData\Roaming\Typora\typora-user-images\image-20210728150133538.png)]$

有一些名词：专辑、声音、用户、故事

理解名词之间的对应关系：

用户创建(1:m) 专辑 (故事、声音必须通过这个用户添加)

专辑包含(1:m) 故事

故事描述(1:1) 声音

2、简单的功能设计：

不需要用户必须登录：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t63ZDQ3X-1629105910906)(C:\Users\J1764\AppData\Roaming\Typora\typora-user-images\image-20210814201324975.png)]$

需要用户必须登录：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eQlIPgqR-1629105910907)(C:\Users\J1764\AppData\Roaming\Typora\typora-user-images\image-20210814203211956.png)]$

3、开发方式：前后端分离方式

前端：AJAX + DOM树修改
AJAX完成对API的请求，根据请求结果完成对DOM树的修改
后端：提供两种响应

API 型
（1）格式：application/json
（2）返回内容为 JSON 格式 {success:true/false, data: 数据}
非 API 型
（1）用于 form 表单中，重定向到其他页面
（2）用于录制声音的返回必须是二进制的声音数据

4、库表设计：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FAEAyC4L-1629105910909)(C:\Users\J1764\AppData\Roaming\Typora\typora-user-images\image-20210728155833224.png)]$

二、代码结构

1、用户可见的前端页面

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xGrs6MkU-1629105910911)(C:\Users\J1764\AppData\Roaming\Typora\typora-user-images\image-20210814212001590.png)]$

2、业务分层分为接入层->服务层->数据访问层

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1hvYdmvr-1629105910912)(C:\Users\J1764\AppData\Roaming\Typora\typora-user-images\image-20210728172603070.png)]$

相关代码结构：
在这里插入图片描述

三、实现效果

1、未登录状态

在这里插入图片描述

2、查找专辑

在这里插入图片描述

3、登陆状态

在这里插入图片描述

4、新建专辑

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B6qimAvm-1629105910918)(C:\Users\J1764\AppData\Roaming\Typora\typora-user-images\image-20210816172040791.png)]$

5、新建故事

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0TDrbHPW-1629105910919)(C:\Users\J1764\AppData\Roaming\Typora\typora-user-images\image-20210816172109571.png)]$

四、代码

gitee链接：https://gitee.com/cz-shisan/listening-to-books

惊喜狍子

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
练习项目-听书

听书一、项目设计1、观察页面，理解名词关系，简化需求简单实现喜马拉雅听书的基本功能，观察喜马拉雅页面有一些名词：专辑、声音、用户、故事理解名词之间的对应关系：用户创建(1:m) 专辑 (故事、声音必须通过这个用户添加)专辑包含(1:m) 故事故事描述(1:1) 声音2、简单的功能设计：不需要用户必须登录：需要用户必须登录：3、开发方式：前后端分离方式前端：AJAX + DOM树修改后端：提供 JSON 格式的
复制链接

扫一扫