项目描述：

         Similar to the listening project,Ordinary users can choose according to their own like corresponding album album list of songs.
        Distributors need registered and logged in to upload、To record your audio and the audio to see all,And bound to create a new album and audio,上架发布,For ordinary users choose to use.

项目主要功能：

        普通用户
                无需登录,Can view the album list,Choose album for the audio broadcast.
        The creator page,
                用户管理：登录功能、Registration and logout functions;
                音频管理：上传音频、Audio and view the list of audio recording function;
                专辑管理：新建专辑、Display the album list(Including the state of each album)And album associated with audio function.

项目结构分析 ：

数据库
        E-R:
                3个实体(Entity):用户,音频,专辑;1个关系(Relation):关系表

         实体间关系分析
                用户 -> 音频 : 一对多    Relationship fields in table(Audio table hasuid字段)

               用户 -> 专辑 : 一对多    Relationship fields in table(Album table hasuid字段)

               音频 <-> 专辑 : 多对多    Many-to-many relationships require intermediate table,Become two a couple more

        Table structure and table relationships
         实体表:

                用户表 users {uid,用户名,密码(经过加密)}

                Audio table tracks {tid,标题,上传用户id,类型,二进制内容}

                     TODO:使用MySQLAudio data and such large binary data is not reasonable

                专辑表 albums  {aid,uid,专辑标题,专辑封面图URL,Album state}

                     TODO:Album cover not upload function(Because the picture is large binary data)

         关系表

                Audio album relational tables relations {rid,aid,tid}
 

准备工作：

1、库表的创建
（1）用户表users（做主表）：
uid（用户编号） 、 username(用户名）、password（密码）.

（2） Audio tabletrack ：
tid（音频编号）、title（标题）、uid 、type（类型）、content（内容）.

（3）专辑表albums：
aid（Album number）、title（标题）、uid、cover（封面图）、state（状态）.

（4）关系表relations：
rid、aid、tid.

2、后端对象（类）的类型：
1、Mainly be responsible for the process of object：
1、servlet对象：动态资源（负责处理HTTP输入,输出）.
2、service对象：When data from multiple tables,Need in the code assembly,就在service中进行.
3、dao对象/repository对象：单表访问Datebase操作.

2、The main represent data objects：
1、date_object（DO）对象：描述从Datebase取得的数据.
2、view_object（VO）对象：Description shows the amount of data（一般会通过JSON序列化）

一、用户管理

1、注册
前端：利用formTo a form submitted by the user to fill in the user name and password,属于静态资源.
代码如下：

<form method="post" action="/studio/user/register.do">
        <input type="text" name="username">
        <input type="password" name="password">
        <button>注册</button>
    </form>

后端：To register the specific operation,Need multiple classes to cooperate to work.
1、在UsersDO类（处理users表）Object to set up and the database corresponding to the attribute name（方便操作）.
2、在UserServletClass to obtain information from the front and callUesrSericeTo insert the user information.After the completion of the insert is redirected to the home page.
3、在UesrServiceClasses will be fromformThe form of user information callUserRepoThe method is added to the database,实现数据的整合.
4、在UserRepo类中使用SQLTo add or delete the database to check change,Because it is registered so is inserted into the operation.

String sql = "select uid, username, password from users where username = ?";

5、Finally, it will insert a good user intoUserVoTo present to the front end.

2、登录

前端： 在login.html中使用formThe form for the user login.
代码如下：

    <form method="post" action="/studio/user/login.do">
        <input type="text" name="username">
        <input type="password" name="password">
        <button>登录</button>
    </form>

后端：
1、在UserServletClass to obtain information from the front and callUesrSericeTo query the user input user name and password is correct.
2、在UesrServiceClasses will be fromformThe form of user information callUserRepoTo check whether the user name and password in the database and one to one correspondence.
3、在UserRepo类中使用SQLTo add or delete the database to check change,Because is the login operation is using a query operation.
代码如下：

String sql = "select uid, username, password from users where username = ?";

4 、登录成功后,使用相对应的UserVoTo render the front.

注销
Cancellation must be in login before you can use don't need to add or delete data check change,所以只使用QuitServlet类来进行操作,In the classsession.removeAttributeMethods to destroy the user associatedsession,And redirected to the login screen.

二、音频管理

1.音频上传
**前端：**This function must be used when a user logs in before can browse,Validation in the back-end process.
代码如下：

<form method="post" action="/studio/track/upload.do" enctype="multipart/form-data">
    <input type="text" name="title">
    <input type="file" name="track">
    <button>上传</button>
</form>

后端：因为要接受 enctype="multipart/form-data"的form表单,所以后端使用@MultipartConfigAnnotation class decoration,读取用getPrat（…).
1、在TrackServletClass to verify whether the user login,If logged in from the front to the users to upload information and toTrackService处理.
2、在TrackServiceClass will get information and already exist at this timeUserVo中的uid一起使用TrackRepoInsertion method is inserted into the database.
3、在UserRepo类中使用SQLTo add or delete the database to check change,Because is the upload,So is to increase operating

2、音频列表
前端：通过list.html文件来加载JS,And display the final list of information,.
代码如下：

<div class="who"></div>
<table>
    <thead>
    <tr>
        <th>#tid</th>
        <th>标题</th>
        <th>And the number of associated to album</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>
<div class="pagination">
    <a href="/studio/track/list.html?page=1">第一页</a>
    <a href="/studio/track/list.html?page=" class="prevPage">上一页</a>
    <span>每页 <span class="countPerPage"></span> 个</span>
    <span>第 <span class="currentPage"></span> 页</span>
    <span>共 <span class="totalPage"></span> 页</span>
    <a href="/studio/track/list.html?page=" class="nextPage">下一页</a>
    <a href="/studio/track/list.html?page=" class="lastPage">最后一页</a>
</div>
<script src="./js/list.js"></script>

JS做了什么呢？
答：发起ajax请求,渲染html文件.

后端：通过JSON,According to the current user to find the corresponding list information.
1、需要两个VOClass for the front-end display
2、在TrackServlet类tVerify the login,并添加ObjectMapper类来转换JSON,And give access to dataTrackService类处理.
3、在TrackService类中调用TrackRepoClass of methods for query operations,By this time the loginuid来进行匹配.
4、在TrackRepo类中使用SQLTo add or delete the database to check change,是查询操作.

列表分页
1、在list.jsIn the back page handler and create aboutPage的VO类（html文件显示的信息）.
2、在TrackServlet中读入page信息,并交给TrackService处理.
3、在TrackServiceHow many letters are there in the defined in each page has the most information,利用TrackRepoArea query how many data,And calculate how many pages.
4、在TrackRepo类中使用SQLTo add or delete the database to check change,是查询操作.

引用次数
设置RelationDOClass to obtainrelations表中的数据,Based on the current have to query the audiotid来进行查询,Query work inRelationRepo中进行查询操作.

3、音频录制

前端：使用html和js相互配合,html使用audioTag to start recording,js使用navigator.mediaDevicesTo use a microphone with recorded and preserved to the backend is saved in the database.
html代码如下：

<body>
<input type="text" id="title">
<button id="stop">停止录制</button>
<audio controls></audio>
<script src="./js/record.js"></script>
</body>

后端：在RecordServletClass to determine whether a user login,If the login will be recorded audio file to save,Process and audio upload similar.

三、专辑

1、Album creation

前端：The user must be logged in to use,用form表单进行提交.
代码如下

<form method="post" action="/studio/album/create.do">
    <input type="text" name="title">
    <input type="text" name="cover">
    <button>新建</button>
</form>

后端：
1、在CreatServletVerify the user is logged in,If the login from the user submits to theCreatRepo处理.
2、在CreatRepo执行SQLIs because is to create the insert operation.

2、Album list show

前端:html与js配合使用,The album list page show.
后端：
1、首先在ListServletClass to verify whether the user login,If the login according to the current useruidTo find the corresponding information to the front-end display.
2、在ListRepoThe execution of the query operation.

3、Album for the audio binding list page has bind options,To the album binding to binding songs.

前端：由html文件和jsFile work together,After click bindings can choose to bind audio.
后端：
1、在CandidateServletIn the current has put a logged in user list query audio out,And to the front-end display.

2、在AddServletOf the user to select binding audiotidAnd the albumaid插入relations表中.

So you can finish binding.

4、Album release and offline

Each album in the album list will have released and offline operation.如果发布,All the people can browse;If the offline,Others can't browse.如图所示：

前端：jsAccording to the different state to perform the operation.
代码如下：

if (a.state === '已发布') {
                anchor = `<a href="/studio/album/withdraw.do?aid=${a.aid}">下线</a>`
            } else {
                anchor = `<a href="/studio/album/publish.do?aid=${a.aid}">发布</a>`
            }

后端：
1、If the status is released,前端点击aLabel will jump to unpublished state,WithdrawServletWill perform offline operation,Amend the database state of the album is not released.
2、If the state is not released,前端点击aLabel will jump to release status,PublishServletCan perform on-line operation,The database state is modified to release the album.

四、播放功能

Subject to aaudio标签,But to play music require the database to provide audio dataURL,Also need a uniform data interface to realize.

后端：
1、According to the user to play the audiotid来进行查询,After the query to use“桶”Binary passed the audio player（数据从 content(InputStream) 搬到 os(OutputStream)）.

2、Unified data interface,The album listalbums、Audio tabletrack、关系表relationsThe unifying of data.

五、总结

1、开发环境：使用IDEATo do coding、Tomcat做web服务器、MySQLTo do data storage、Maven做项目管理.
2、整体框架：项目整体基于HTTP协议,前端采用HTML+JS+CSSTo carry out the overall layout of the page,The back-end using hierarchical structure,分为Service层,Servlet层、Repo层、Dao层的设计,Facilitate the classification design.
3、项目核心功能：
（1）用户的注册,登录,注销.
（2）音频的上传,录制,播放.
（3）Album design and create,The album and audio binding,Album released with offline.
4、涉及知识：简单的web服务器使用、Java操作MySQL数据库、数据库的设计、json的使用、
HTTP协议的理解、Java集合的使用、Servlet的使用、前端知识的简单使用如：CSS、JS、HTML等.

数据流转流程（Album features, for example）

用户->浏览器->网络->Tomcat->MySQL

新建专辑 | After the user fill out information,点击按钮,Album release success

    1.用户点击按钮,按钮输入form表单,所以,Click on the button will trigger a newHTTP请求

    2.该HTTPThe requested method according to theform表单的method属性(get/post)确定,路径按照action属性确定,Carry according to the content of theform包

        含的input标签带有nameProperties determine the content of the

    3.该HTTPThrough the network toTomcat,Tomact根据Context Path + Servlet Path Determine how theServletObject to deal with it(@WebServlet指定的)

    4.Tomcat根据HTTP请求方法,调用doGet,doPost....

    5.Read information necessary for the album parameters the user fills out,And the necessary parameters legitimacy check

    6.According to read the parameters of the performSQL插入语句

    7.根据业务,Redirect or display to create successful
 

MySQL->Tomact->浏览器->用户

Album list

    1.在浏览器进入list.html

    2.浏览器会发起get请求list.html

    3.TomcatAccording to the corresponding path,Find the corresponding static resources and respond to the content

    4.浏览器解析html内容,发现<script>标签,Will initiate a new request

    5.浏览器发起get请求list.js

    6.TomcatAccording to the corresponding path,To find the corresponding resources and respond to the content

    7.浏览器执行JS中的语句

    8.在jsIn aajax的语句

    9.浏览器发起get请求list.json

    10.Tomcat根据资源路径,找到Servlet对象进行处理

        Servlet->Service->Repository(DAO)的内部处理

        （1）.判断当前用户(Servlet)

        （2）.Perform necessarySQL(具体到每个dao类)

        （3）.组合(在Service中将SQL结果整合)

        （4）.响应(最终ServeltWill combine the data issued)

    11.The browser to continuexhr,onload函数

    12.语句根据list.json返回的结果,修改DOM树结构(Add a new list item)

    13.浏览器根据DOM树,Apply colours to a drawing gives users to see the results