留声机系统设计文档

╰+攻爆jí腚メ 2024-04-08 10:04 48阅读 0赞

#### 文章目录 ####

*  一、项目概述
 *   *  1.项目背景
     *  2.项目介绍
 *  二、项目设计
 *   *  1.项目整体架构
     *  2.项目涉及知识点
     *  3.项目具体实现
     *   *  3.1数据库设计
         *  3.2连接数据库
         *  3.3定义后端对象（类）的类型
         *  3.4功能场景化
         *  3.5前端页面渲染
 *  三、效果展示
 *  四、项目优化
 *  五、总结评价

--------------------

## 一、项目概述 ##

### 1.项目背景 ###

有很多app或者网站都有属于自己的创作中心，能够为用户提供一个展示自己的平台。例如，喜马拉雅听书，用户登录注册之后，可以在上面录制自己的音频，或者遇到自己喜欢的音乐，都可以在这里创建一个属于自己的专辑，然后把这些音频都放进来，与广大网友一起分享，非常方便好用。所以，我也模仿着做了这样一个类似的系统，让更多的美妙动听的声音都进入到我的网站里面来。

### 2.项目介绍 ###

（1）首先，整个项目是用Spring 框架写的，是一个基于Web Sevlet的音频管理系统。用户创作的专辑以及录制上传的音频都保存在数据库中，通过查询数据库，在系统首页展示所有绑定过音频并发布的专辑。  
（2）整个项目分为前台和后台，前台是普通用户使用的，是不需要登录就能使用的，普通用户可以在系统首页浏览或收听其他用户发布的专辑；后台，即创作中心，是需要登录才能使用的，用户注册登录之后，可以创建属于自己的专辑，录制并上传自己的音频，添加到自己的专辑里面，专辑发布之后，会在首页展示。  
（3）创作中心仿照了喜马拉雅听书的创作中心的设计，只实现了三个模块的功能：  
用户管理：实现了注册、登录和注销功能，这里的注销只是退出，并不是删除用户信息；  
音频管理：实现了上传、录制和列表展示功能，这里展示的只是当前用户上传且未关联专辑的音频；  
专辑管理：实现了创建专辑、列表展示和关联（添加）音频的功能。

--------------------

## 二、项目设计 ##

### 1.项目整体架构 ###

整个项目的核心就是通过HTTP服务器，实现对音频的录制、上传，并提供对音频的增删查改的功能。同时搭配一个简单页面辅助完成音频的列表展示功能。其次就是项目是使用Spring框架写的，所以项目的初始结构，pom.xml以及用到的类都是提前初始化好了的，所以在项目设计中，只注重功能的实现以及数据的流转。最后就是音频播放器的设计，仿照了别人的设计模板，自己稍微改动了一下，增加了一点色彩渲染。整个项目需要用到IDEA，MySQL。

### 2.项目涉及知识点 ###

（1）web服务器设计  
（2）Java操作数据库MySQL  
（3）数据库设计  
（4）JSON数据格式基础  
（5）对HTTP、TCP、UDP等协议的掌握  
（6）Servlet的使用  
（7）SSM框架的熟练使用  
（8）对HTML、JavaScript、CSS等前端技术的简单运用  
（9）软件测试的基本思想和方法

### 3.项目具体实现 ###

#### 3.1数据库设计 ####

（1）使用MySQL创建数据库，本项目的数据库以“tingshu”命名，在该数据库下创建用户表，用来存放用户信息；创建音频表，存放用户上传的音频；创建专辑表，存放用户创建的专辑；关系表，关联专辑和音频：

SET GLOBAL max_allowed_packet = 500 * 1024 * 1024;
    CREATE DATABASE `tingshu` /*!40100 DEFAULT CHARACTER SET utf8mb4 */;
    USE tingshu;
    CREATE TABLE `albums` (
        `aid` int(11) NOT NULL AUTO_INCREMENT,
        `uid` int(11) NOT NULL,
        `cover` varchar(600) NOT NULL,
        `title` varchar(10) NOT NULL,
        `state` int(11) NOT NULL,
        PRIMARY KEY (`aid`)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
    CREATE TABLE `relations` (
        `rid` int(11) NOT NULL AUTO_INCREMENT,
        `aid` int(11) NOT NULL,
        `tid` int(11) NOT NULL,
        PRIMARY KEY (`rid`)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
    CREATE TABLE `tracks` (
        `tid` int(11) NOT NULL AUTO_INCREMENT,
        `uid` int(11) NOT NULL,
        `title` varchar(10) NOT NULL,
        `type` varchar(40) NOT NULL,
        `content` longblob NOT NULL,
        PRIMARY KEY (`tid`)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
    CREATE TABLE `users` (
        `uid` int(11) NOT NULL AUTO_INCREMENT,
        `username` varchar(45) NOT NULL,
        `password` char(60) NOT NULL,
        PRIMARY KEY (`uid`),
        UNIQUE KEY `username_UNIQUE` (`username`)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

#### 3.2连接数据库 ####

由于项目使用SSM框架开发，MyBatis就代替了原来的Servlet+JDBC连接数据库这套机制。只需要在application中声明即可：

datasource:
        url: jdbc:mysql://127.0.0.1:3306/tingshu?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai
        username: root
        password: 123456

#### 3.3定义后端对象（类）的类型 ####

（1）创建一个软件包data\_object，里面封装DO类代码，表示从数据库中取出来的数据；具体如下：

import lombok.Data;
    
    @Data
    public class AlbumDo {
        
        public Integer aid;
        public Integer uid;
        public String cover;
        public String title;
        public Integer state;
    }
    
    @Data
    public class AlbumWithUserDo {
        
        public Integer aid;
        public Integer uid;
        public String username;
        public String title;
        public String cover;
    }
    
    @Data
    public class RelationDo {
        
        public Integer rid;
        public Integer aid;
        public Integer tid;
    }
    
    @Data
    public class TrackDo {
        
        public Integer tid;
        public Integer uid;
        public String title;
        public String type;
        public byte[] content;
    }
    
    @Data
    public class UserDo {
        
        public Integer uid;
        public String username;
        public String password;
    
        public UserDo(String username, String password) {
        
            this.username = username;
            this.password = password;
        }
    }

（2）创建repository软件包，放入Repo类代码，表示单表直接访问数据的操作，实现数据的增删查改,大体思路就是使用@param等注解来为数据库表参数赋值，实现数据的流转，达到数据库操作的目的，具体如下：  
UserRepo:

@Mapper
    @Repository
    public interface UserRepo {
        
        @Insert("insert into users (username, password) values (#{username}, #{password})")
        @Options(useGeneratedKeys = true, keyColumn = "uid", keyProperty = "uid")
        void insert(UserDo userDo);
    
        @Select("select uid, username, password from users where username = #{username} and password = #{password}")
        UserDo selectOneByUsernameAndPassword(
                @Param("username") String username,
                @Param("password") String password
        );
    }

TrackRepo:

@Mapper
    @Repository
    public interface TrackRepo {
        
        @Insert("insert into tracks (uid, title, type, content) values (#{uid}, #{title}, #{type}, #{content})")
        void insert1(
                @Param("uid") int uid,
                @Param("title") String title,
                @Param("type") String type,
                @Param("content") InputStream content);
    
        @Insert("insert into tracks (uid, title, type, content) values (#{uid}, #{title}, #{type}, #{content})")
        void insert2(
                @Param("uid") int uid,
                @Param("title") String title,
                @Param("type") String type,
                @Param("content") byte[] content);
    
        @Select("select type, content from tracks where tid = #{tid}")
        TrackDo selectOneByTid(@Param("tid") int tid);
    
        @Select("select tid, title from tracks where uid = ${uid} order by tid desc")
        List<TrackDo> selectListByUid(@Param("uid") int uid);
    
    
        @Select({
        
                "<script>",
                "select tid, title from tracks where tid in (",
                "<foreach collection='tidList' item='id' separator=', '>",
                    "#{id}",
                "</foreach>",
                ")",
                "</script>"})
        List<TrackDo> selectListByTidList(@Param("tidList") List<Integer> tidList);
    
        @Select({
        
                "<script>",
                "select tid, title from tracks where tid not in (",
                "<foreach collection='tidList' item='id' separator=', '>",
                "#{id}",
                "</foreach>",
                ") and uid = #{uid} order by tid desc",
                "</script>"})
        List<TrackDo> selectListByUidAndNotInTidList(
                @Param("uid") int uid,
                @Param("tidList") List<Integer> tidList);
    }

这里只附加部分代码，加以说明，详细代码内容可到Gitee中下载查看（文章下方有代码连接）。

#### 3.4功能场景化 ####

创建场景包controller，里面存放controller类代码，表示项目功能模块的各个场景，具体实现就是采用@Controller注解，将模块下的每个功能作为一个场景，form表单提交的action都以\*.do的操作重定向到对应的场景中，然后使用session机制，保存并记录用户的一系列状态，保证访问Web的数据资源不会因页面的跳转而丢失，从而使各个场景能够紧密联系。相关代码：

@Slf4j
    @Controller
    public class PublicController {
        
        private final TrackRepo trackRepo;
        private final AlbumRepo albumRepo;
        private final RelationRepo relationRepo;
    
        @Autowired
        public PublicController(TrackRepo trackRepo, AlbumRepo albumRepo, RelationRepo relationRepo) {
        
            this.trackRepo = trackRepo;
            this.albumRepo = albumRepo;
            this.relationRepo = relationRepo;
        }
    
        @GetMapping("/track")
        public ResponseEntity<byte[]> getTrack(int tid) {
        
            TrackDo trackDo = trackRepo.selectOneByTid(tid);
            log.debug("Get track(tid={}), {}, {}", tid, trackDo.type, trackDo.content.length);
            return ResponseEntity.ok()
                    .contentType(MediaType.valueOf(trackDo.type))
                    .body(trackDo.content);
        }
    
        static class AlbumView {
        
            public Integer aid;
            public String cover;
            public String title;
            public Integer uid;
            public String username;
    
            AlbumView(AlbumWithUserDo albumWithUserDo) {
        
                this.aid = albumWithUserDo.aid;
                this.cover = albumWithUserDo.cover;
                this.title = albumWithUserDo.title;
                this.uid = albumWithUserDo.uid;
                this.username = albumWithUserDo.username;
            }
        }
    
        static class AlbumListView {
        
            public List<AlbumView> albumList;
        }
    
        @GetMapping("/album-list.json")
        @ResponseBody
        public AlbumListView list() {
        
            List<AlbumWithUserDo> doList = albumRepo.selectListAllWithUser();
            AlbumListView view = new AlbumListView();
            view.albumList = new ArrayList<>();
            for (AlbumWithUserDo albumWithUserDo : doList) {
        
                AlbumView albumView = new AlbumView(albumWithUserDo);
                view.albumList.add(albumView);
            }
    
            return view;
        }
    
        @Data
        static class TrackView {
        
            public Integer tid;
            public String title;
    
            public TrackView(TrackDo trackDo) {
        
                this.tid = trackDo.tid;
                this.title = trackDo.title;
            }
        }
    
        @Data
        static class AlbumDetailView {
        
            public Integer aid;
            public String title;
            public String cover;
            public Integer uid;
            public String username;
    
            public List<TrackView> trackList;
    
            public void from(AlbumWithUserDo albumWithUserDo) {
        
                this.aid = albumWithUserDo.aid;
                this.title = albumWithUserDo.title;
                this.cover = albumWithUserDo.cover;
                this.uid = albumWithUserDo.uid;
                this.username = albumWithUserDo.username;
            }
        }
    
        @GetMapping("/album.json")
        @ResponseBody
        public AlbumDetailView detail(int aid) {
        
            AlbumDetailView view = new AlbumDetailView();
            AlbumWithUserDo albumWithUserDo = albumRepo.selectOneWithUserByAid(aid);
            if (albumWithUserDo == null) {
        
                log.error("aid 对应的专辑不存在");
                return view;
            }
    
            view.from(albumWithUserDo);
    
            List<Integer> tidList = relationRepo.selectTidListByAid(aid);
            List<TrackDo> trackDoList = trackRepo.selectListByTidList(tidList);
            view.trackList = new ArrayList<>();
            for (TrackDo trackDo : trackDoList) {
        
                TrackView trackView = new TrackView(trackDo);
                view.trackList.add(trackView);
            }
    
            return view;
        }
    }

同时，SpringMVC这套机制本身就提供了Web业务处理的条件，就不再使用HttpServlet来实现请求响应了。

#### 3.5前端页面渲染 ####

首先，我自己对前端技术掌握的并不是很好，静态页面勉强可以使用HTML写出来，但是对于页面的渲染技术CSS，我完全是仿照别人的设计做的，这的确是需要艺术细胞的，不然做出来真的很ugly。  
整个过程就是通过js代码，发起ajax请求，渲染html。在CSS中锁定标签或容器，改变色彩，大小，增加背景，修改字体，移动位置等设置，达到页面渲染的效果。  
项目前端页面HTML：

<!DOCTYPE html>
    <html lang="zh-hans">
    <head>
      <meta charset="UTF-8">
      <title>悦响留声机</title>
      <link rel="stylesheet" href="./css/index.css">
    </head>
    <body>
      <div class="studio-entry">
        <a href="/">畅享听音</a>
        <a href="/studio/">创作中心</a>
      </div>
      <div class="albumList"></div>
      <script src="./js/index.js"></script>
    </body>
    </html>

页面渲染CSS：

* {
        
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    body {
        
        background-image: url(../image/bg.gif);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 0 0;
    }
    
    .studio-entry {
        
        width: 100%;
        height: 60px;
        background-color: rgb(255, 136, 0);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 80px;
        padding-right: 80px;
        box-shadow: 0 1px 10px 0 #000;
    }
    
    .studio-entry a {
        
        color: #333;
        text-decoration: none;
    }
    
    .albumList {
        
        width: 1400px;
        margin: 0 auto;
    
        display: flex;
        flex-wrap: wrap;
    }
    
    .album {
        
        margin: 20px;
        padding: 15px;
        width: 240px;
        height: 340px;
        border-radius: 15px;
        border: 1px solid #333;
        box-shadow: 1px 1px 10px 0 #000;
        background-color: #eee;
    }
    
    .cover-wrapper {
        
        width: 210px;
        height: 210px;
        border-radius: 10px;
        overflow: hidden;
    }
    
    .cover {
        
        width: 100%;
        height: 100%;
    }
    
    .title {
        
        font-size: 28px;
        margin-top: 17px;
    }
    
    .title a {
        
        text-decoration: none;
        color: #666;
    }
    
    .author {
        
        margin-top: 17px;
        color: #999;
    }

--------------------

## 三、效果展示 ##

![在这里插入图片描述][aea0b5ae30254f4891e7c9ec94ca818c.png]  
**访问地址**：[悦响留声机][Link 1]

--------------------

## 四、项目优化 ##

（1）增加普通用户的登录注册功能，即在首页增加登陆注册，普通用户登录之后可以查看所有用户上传的音频以及创建的专辑，并且可以收藏，会保存在普通用户的收藏表中，但是普通用户不能进行创作，需要在创作中心注册登录之后才能创作。  
（2）增加音频列表和专辑列表的共享机制，即在列表中可以浏览其他用户上传的音频或专辑。  
（3）增加首页专辑分页展示以及列表分页展示的功能。  
（4）优化注册登录功能，非指定类型用户名和密码不能注册登录。  
（5）优化文件上传功能代码，上传文件不能为空，并且提升文件上传速度。  
（6）用户注册的密码是以明文的形式保存到数据库的，实际业务是绝对不允许的，所以需要相应代码进行优化，即对数据进行加密操作。

--------------------

## 五、总结评价 ##

（1）因为整个项目是采用Spring框架设计的，所以代码编写很容易，但是具体的业务逻辑需要深究，设计思路很重要，先把思路整理清楚，再写，否则很容易混乱，不知道自己在写啥。  
（2）Spring项目写着很上手，但是它不像Web Servlet那样容易检查错误，一旦出现错误，很难排查，所以需要写一点测一点，这样后期出错了，就很容易知道哪里出错了。  
（3）**项目源码地址**：https://gitee.com/zhen-caiyao/phonograph  
（4）**测试文档**：[留声机系统测试文档][Link 2]

[aea0b5ae30254f4891e7c9ec94ca818c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/9654e8842d144fb89b3a7fd67adb688b.png
[Link 1]: http://121.4.68.38:8000/
[Link 2]: https://blog.csdn.net/ZCYaiCLX3344/article/details/126521125