《听--海的声音》项目

article/2025/8/22 5:14:38

《听 – 海的声音》

一.项目简介

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

二.模块

该项目一共分为了两大模块,一类是游客模块,也就是前台模块。一类是创作者模块,称为后台管理模块。
两大模块的用例图如图所示。
在这里插入图片描述

游客用例图

在这里插入图片描述

创作者用例图

三.数据库的设计

本设计的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.一个数据发送的流程是什么?
这个范围有点大,我就拿登录页面来说,首先,从页面上获取到相关的用户名与密码,通过表单的方式进行提交。提交给相应的后端动态资源,动态资源获取到相关的用户名和密码后,该项目还可以加上密码相关的判断,通过数据库的查询工作进行对用户名和密码的匹配,如果匹配成功则通过重定向功能使进入到相关的用户中心首页中,若匹配失败则重定向到登录页面,这里也可以加上登录次数的限制。


http://chatgpt.dhexx.cn/article/FfWef26x.shtml

相关文章

html5 video标签播放视频流解决方案

项目要求从文件服务器读取音视频文件&#xff0c;以流的方式传给前台&#xff0c;并能够播放视频。 做了一个demo&#xff0c;用html5的video&#xff0c;audio标签实现。 后台实现代码&#xff1a; GetMapping(value "/getVideos") public String getVideos(Htt…

video 标签

一&#xff0c;video介绍 1&#xff0c;在H5之前要想在网页中播放视屏&#xff0c;需要相关的插件&#xff0c;例如flash。H5集成了视频组件video&#xff0c;可以轻松的在网页上添加视频。 2.在 <video></video> 标签中间的内容&#xff0c;是针对浏览器不支持此…

video标签样式属性设置

<!--初始标签--><video controls"controls"><source src"~/Content/Images/74d6af65-41f5-4be4-ba3d-e63b90107100.mp4" type"video/mp4" /></video>效果图 css隐藏一些视频操作 /*播放按钮*/video::-webkit-media-con…

h5 video标签

h5 video标签&#xff1a; Video 对象属性 属性描述audioTracks返回表示可用音频轨道的 AudioTrackList 对象。autoplay *设置或返回是否在就绪&#xff08;加载完成&#xff09;后随即播放视频。buffered返回表示视频已缓冲部分的 TimeRanges 对象。controller 返回表示视…

video标签和source标签

介绍 < video >元素用于在HTML或者XHTML文档中嵌入媒体播放器&#xff0c;用于支持文档内的视频播放。 < source >元素为< picture >,< audio >或者< video >元素指定多个媒体资源 video标签常见属性 autoplay 如果出现该属性&#xff0c;则…

html video标签播放直播视频,HTML5 Video 标签播放及控制视频

Video 是 HTML5 中新增的标签,使用 Video 标签可以播放 ogg、mp4、webm 等格式的视频,Video 标签的引入,减少前端页面对 Flash 动画的依赖。 0x0 预备知识 不同的浏览器支持的视频格式可能不同,以下是摘自 W3School 各个浏览器对三种视频格式的支持情况: 浏览器对视频格式…

html5 video css样式修改,htmlvideo标签用法

HTML5中 使用video标签 播放本地视频 JS&#xff1a; 在test.html页面&#xff0c;使用button标签创建四个按钮&#xff0c;分别是播放/暂停、大、中、小&#xff0c;用于控制视频的播放效果。同时&#xff0c;使用video标签创建一个视频。 网页设计中html5的video 标签如何写…

css video 样式,使用CSS修改 video 标签默认样式

使用CSS修改 video 标签默认样式 时间:2019-11-08 17:42:14 来源: 作者: 效果展示: 1、模拟直播,去除进度条、当前观看时间,剩余时间。 效果: 2、去除 video 标签全部控件 效果: Tags:CSS 点击:() 评论:() 声明:本站部分内容及图片来自互联网,转载是出于传递更多信…

video标签的使用

记录工作中的问题 需求&#xff1a;播放前自定义图片&#xff0c;添加遮罩&#xff0c;添加暂停按钮&#xff0c; 且不显示功能区。点击播放开始显示功能区。左右切换视频需要乱序重排&#xff0c;隐藏掉转发, 点击回到顶部等 左右切换&#xff1a; 播放前&#xff1a; 开始播…

有刷电机,无刷电机和电调的总结

有刷直流电机工作原理 &#xff1a; 有刷直流电机的主要结构就是定子转子电刷&#xff0c;通过旋转磁场获得转动力矩&#xff0c;从而输出动能。电刷与换向器不断接触摩擦&#xff0c;在转动中起到导电和换相作用。 有刷直流电机采用机械换向&#xff0c;磁极不动&#xff0c;…

BLDC无刷直流电机驱动电路-硬石电子

1.BLDC无刷直流电机驱动电路&#xff0c;因为BLDC是三相完全一样的驱动电路&#xff0c;下图为其中一相电路图&#xff0c;其他两相完全一样。 主要元器件&#xff1a; 高速光耦&#xff1a;TLP715 MOS管驱动IC&#xff1a;IR2110S MOS&#xff1a;IRF540NS D7和C13为自举电路…

涨知识:直流无刷电机的控制方式

目前直流无刷电机的控制主要分两大类&#xff1a;方波控制&#xff08;梯形波控制&#xff09;与正弦波控制&#xff0c;本文PEKEW派酷就具体解说一下这两种控制方式&#xff1a; 1&#xff09;方波控制 通过霍尔传感器获得电机转子的位置&#xff0c;然后根据转子的位置在36…

【零基础玩转BLDC系列】基于反电动势过零检测法的无刷直流电机控制原理

无刷直流电动机基本转动原理请参考《基于HALL传感器的无刷直流电机控制原理》&#xff0c;基本原理及基础知识本篇不再赘述。 目录 反电势过零检测法的原理 反电势过零检测实现方法 位置传感器的存在限制了无刷直流电机在某些特定场合中的应用&#xff0c;如&#xff1a;使电…

无刷电机与驱动

直流无刷电机 【自制FOC驱动器】深入浅出讲解FOC算法与SVPWM技术 | 稚晖的个人站 写得很清晰 机器人硬件三大核心部件&#xff08;电机、减速器、驱动器&#xff09; 照这样看来&#xff0c;直流电机驱动和无刷电机驱动完全不是一个维度的。 直流电机驱动都不用去管电机换…

无刷直流电机的PWM调制方式介绍

无刷直流电机的PWM调制方式介绍 (2014-01-03 15:35:28) 转载▼ 标签&#xff1a; 无刷直流电机 pwm调制方式 bldc驱动方案 原文&#xff1a;http://blog.sina.com.cn/s/blog_ae3ebe120101cutd.html 三相无刷直流电机的调制方式&#xff1a;方波120度脉宽调制(120D…

【零基础玩转BLDC系列】基于霍尔传感器的无刷直流电机控制原理

无刷直流电机&#xff08;Brushless Direct Current Motor, 简称BLDC&#xff09;采用电子开关电路来代替直流电机的机械换向器或电刷进行换向&#xff0c;提高了控制系统的可靠&#xff0c;性能上相较一般的传统直流电机有很大优势。无刷直流电机是永磁同步电机的一种&#xf…

无刷直流电动机矢量控制(二)——无刷直流电机的工作原理及其内部结构

相信很多同学刚开始学习无刷直流机的时候&#xff0c;都比较困惑其具体的工作原理&#xff0c;在这里一起梳理一下。&#xff08;本文图片来源于飞思卡尔公司技术文档PZ104&#xff09; 1 BLDC工作原理 首先我们看上面这张图&#xff0c;当两头线圈通电的时候&#xff0c;根据…

无刷电机控制

电机控制 常见的几种电机&#xff1a;直流有刷电机&#xff0c;直流无刷电机&#xff0c;步进电机&#xff0c;伺服电机&#xff0c;舵机。 有刷电机的主要结构是定子&#xff0c;转子&#xff0c;点数&#xff0c;通过旋转磁场获得力矩&#xff0c;获得动能&#xff0c;电刷…

BLDC无刷直流电机

视频1摘要&#xff1a; BLDCs的内部工作原理&#xff1b;如何使用Simscape Electrical在Simulink中模拟BLDC™ 并研究其反电势电压的形状&#xff1b;如何使用六步换向&#xff08;梯形控制&#xff09;控制无刷直流电动机&#xff1b;无刷直流电动机和永磁同步电动机通常分别…

无刷电机入门

FOC汇总&#xff1a; Arduino SimpleFOC - 中文官网 、SimpleFOC教程链接汇总、稚晖君。 一、有刷电机&#xff1a; 有刷电机是大家最早接触的一类电机&#xff0c;例如很多电动小玩具&#xff0c;或者很多家用的吹风机里面的电机都是有刷电机。 动图中可以看到&#xff0c;电…