六安火车站网站,商务网站开发公司,thea wordpress,wordpress 推送 微信一、项目介绍 项目名称#xff1a;lucky player 项目的主要功能#xff1a;本系统主要功能为构建了一个用户分享音乐的平台#xff0c;普通用户不进行登录即可收听其他用户已经发布的专辑中的音乐。 作为博主则可以在该平台上传音频#xff0c;以及在线音频录制上传。音频上…一、项目介绍 项目名称lucky player 项目的主要功能本系统主要功能为构建了一个用户分享音乐的平台普通用户不进行登录即可收听其他用户已经发布的专辑中的音乐。 作为博主则可以在该平台上传音频以及在线音频录制上传。音频上传成功后博主可以把自己的音频整理到一个专辑内进行发布并实现了在线播放的功能。该系统登录后的创作中心分为用户管理、音频管理、专辑管理三个模块。 二、项目需求 2.1功能需求 (1)用户可以注册后登录进播放器并且也可以随时退出已经登陆的账户。 (2)用户可以自己录制音频进行上传也可以从本地进行上传并对上传的音乐进行管理。 (3)用户可以新建专辑将自己的音频进行收录并且能够对专辑进行上线和下线的管理。 2.2 其他需求 1系统界面有良好的视觉体验营造美观舒适的界面 2操作简单流畅无可视卡顿 3有良好的引导提示增强用户体验 2.3 播放器功能流程图 2.4 总体设计 本系统采用了浏览器/服务器模式即B/S模式。对表现层、业务层、持久层三层结构均进行了实现。 表现层(data_view)在表现层通过前端界面处理htmlcssJavaScript配合前端框架进行实现。前端与用户直接接触保证良好的设计风格和视觉体验。前端数据通过javaScript发送Ajax传输给后端再通过后端servlet返回的数据进行DOM树的渲染形成了最终的页面。 业务层(service包和servlet包)service对从数据库或者前端页面获取来的数据进行转换转换为当下需要的数据格式。在业务层通过Servlet处理进行前后端交互。由于前端数据需要向后端发出请求。所以在前后端交互处理使用了JavaScript的开源框架jQuery-Ajax进行数据请求响应处理。后端通过servlet接收对应数据进行处理。 持久层(util包、data_object、repository)通过JDBC对数据库进行了连接创建了用户表、音频表、专辑表、以及关系表用来存储信息并创建建了四个表在后端的实体类(UserDo,TrackDo,AlbumDo,TidToCountDo)以及在view_object包下面定义我们需要的json格式的数据以及对repository对数据库中数据的增删查改。 三、开发环境 1.前端开发 技术Html、Css、JavaScript 工具Intellij IDEA 2020.1.4 2.后端开发 算法哈希算法进行加密 技术jdk1.8、workbench、servlet、Maven 服务器tomcat-8.5.50 工具Intellij IDEA 2020.1.4 3.开发环境Windows11 家庭版 4.运行环境Intellij IDEA 2020.1.4 四、准备工作 1.创建 Spring Boot 项目 具体创建方法参考怎样用IDEA社区版以及企业版创建spring boot项目这篇博客哟注意在创建时记得勾选下面两个依赖 2.配置pom.xml内容(添加依赖) 通过packagingwar/packaging为后续打包打成war包。通过第三方仓库导入MYSQLServletThymeleaf,jackson的依赖。通过buildfinalName${project.artifactld}/finalName/build将war包名称改变方便后续部署到云服务器。 3.配置MYSQL连接 在application.yml中配置关联数据库的相关信息 五、包的命名规则 data_object用来存放与数据库直接交互的实体类 repository: 用来直接对数据库中的数据进行操作 service(服务层)把数据转换为当前需要的格式当数据来自多张表需要在代码中做组装时在Service中进行。 controller进行前后端的交互接收请求和发送响应给浏览器 session_object定义浏览器需要的JSON格式的属性 resources存储前端文档以及动态的资源实现了页面的动态呈现。 六、各个功能的详细介绍
6.1库表的建立 建表语句 -- 修改 MySQL 服务器的查询包最大限制为 500M
-- 但每次重启 MySQL 之后包括重启电脑/关机之后都需要手动再执行下
-- 直接去 MySQL Workbench 上去执行即可
set global max_allowed_packet 500 * 1024 * 1024;
-- 设置之后需要将 MySQL Workbench 重新打开下
-- 设置之后需要重启 Tomcat让 MySQL 重新连接
create database lucky_player charset utf8mb4;use lucky_player;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(40) not null,content longblob not null comment 音频的二进制数据
);create table albums (aid int primary key auto_increment,uid int not null,title varchar(10) not null,cover varchar(600) not null,state int not null comment 0: 已下线 / 1: 未发布 / 2: 已发布
);create table relations (rid int primary key auto_increment,aid int not null,tid int not null
) comment 维护专辑和音频之间的多对多关系; 数据库中的表信息与data_object包对应在后端操作的实际上是这里定义的数据库属性。 下面是对各表的详细介绍 用户表 users 音频表 tracks 专辑表 albums 关系表 relations relations表用于维护专辑与音频之间多对多的关系 数据库中的四个表对应data_object中的四个实体类 6.2用户管理 注册功能 通过from表单发送HTTP的post请求后端RegisterDoServlet接收HTTP请求并进行相关的处理在这个类里可以进行合法性校验注册之后将用户对象放入session中再重定向到首页重定向之后注册完成。 登录用到的类的介绍 UsersSO: 是对外表现的对象存放在session中传给前端只定义了uid 和username 并没有把password写进这个类里面。 UserService: 完成注册完成数据库地插入操作在类中把UserDO数据库需要的形式转化为UserSO我们需要的形式。 UserDO这里的数据是被数据库操作的所以为了方便操作属性名称都与数据库相同。 UserRepo: 进行sql操作对User表操作。为了代码简洁直接用SneakyThrows (lombok包下)不添加throws也可以正常抛出受查异常。 为了是代码简洁引入了 lombok.Data,Data可以给我们自动添加getter/setter/toString/equals。 登录功能 在LoginDoServlet中判断session UserService:3个操作 (1)首先根据用户名在数据库中查出数据 (2)然后检查密码是否正确 (3)UserRepo用来进行查询操作 注销功能 实现把session中的currentUser删掉即可在servlet中删除session 6.3.音频管理 文件上传 需要上传文件前端 upload.html (1)from必须使用post提交 (2)From的enctype必须是multipart/formdata (3)input typefile UploadDoServle类用来接收前端的from表单而要想接收enctypemultipart/formdata 必须使用MultipartConfig修饰。 (1)首先第一步利用session来判断用户是否登录。 (2)从请求中获取我们需要的信息我们要取title 、type文件类型、content音频数据 (3)将拿到的数据插入到数据库中由于插入比较简单没有引入service直接在UploadDoServle类中进行插入 Trackrepo类对数据库进行操作的插入操作。 遇到的问题由于mysql服务器支持的查询包的大小是4194304但是上传的音频文件过大就无法上传。所以要进行mysql的设置只要在workbench中执行SQL set global_allowed_packet500*1024*1024但每次重启MySQL都需要手动执行一下即可。 音频列表 1.采用前后端分离的技术后端以json格式来提供数据 2.前端通过AjaxXHR技术进行请求进行DOM树的修改 3.指定具体的JSON格式 具体实现 (1)前端list.html页面首先要加载JS准备好展示的列表的容器元素table/div,list.js发送ajax请求后端的JSON数据js获取到数据之后进行DOM树的渲染 (2)在后端ListJsonServlet接收到js发送的HTTP请求构造响应首先判断用户是否登录。 这是在StudioTrackListView中定义的两个属性 ListListTrackView trackListcurrentUser赋值如果未登录则赋值为null即可如果已登录则这个新的对象赋值为trackService主要工作是把查询到的数据库TrackDo类型的数据转为ListTrackView类型的数据中加工后的List集合。 在ListJsonServlet中把list集合的数据序列化为JSON格式的数据传给前端js浏览器解析js得到页面。 音频录制 在前端record.html中留下容器audio disabled controls/audio用来开启浏览器的麦克风权限然后再js中进行DOM树的渲染给每一个前端的按钮都加上响应让音频开始录制结束录制并且发送post请求发送给RecordJsonServlet由这个类把数据保存在数据库表中 6.4.专辑管理 新建专辑 1.在前端create.html中用from表单提交前端传入的数据后端用CreateDoServlet接收HTTP请求接收到之后首先判断用户是否登录若登录直接把数据插入在数据库中并返回专辑创建成功。业务简单并没有用到service层辅助操作 关联音频 在bind.html中保存一个添加的a标签点击之后js再次发送HTTP请求跳转到add.html(新增音频),然后add.js发送ajax请求请求后端json格式的数据后端把数据返回给前端然后js进行渲染把所有的音频呈现出来复选框的形式。 后端json格式的数据由CandidateJsonServlet来做同样是判断用户是否登录然后在数据库中查询数据并把数据转化为JSON格式。 专辑列表 同上面几乎相同前端list.html中留下容器经过js发送ajax得到数据对页面进行渲染得到后端ListJsonServlet中创建了外部需要的类AblumView并且写上构造方法也创造了一个ResultView类定义了当前用户、和专辑列表然后把数据库中查询得到的数据放在ablumList中再把数据转化为JSON格式传给前端。
