1. Project Introduction

To access the BuaiTingshu system, users can select the corresponding album to play the content according to their own preferences; if they want to record and upload their own audio, they need to register and log in in the creation center to create an exclusive album.

2. Preparations

1, the creation of the library table

2. Types of backend objects (classes):

1. The object that mainly represents the process

1. servlet object: object of processing process, dynamic resource, responsible for processing HTTP input and output
2. service object: when the data comes from multiple tables and needs to be assembled in the code, put it in the service
3. dao object/repository object: A single table directly accesses the Database related operations, and directly uses SQL to add, delete, modify, and query the Database.

2. Objects that mainly represent data

1. data_object (DO): describe the data taken from the Database
2. view_object (VO): describe the displayed data (usually serialized by JSON)

Three or four parts

1. User management (register, log in, log out)

Front-end: Use the form form to submit the user name and password filled in by the user, which are static resources.

<form method="post" action="/studio/user/register.do">
        <input type="text" name="username">
        <input type="password" name="password">
        <button>register</button>
   <!-- <button>Log in</button> -->
</form>

Back-end: registration steps, multi-class cooperation is completed

1. The UsersDO class (processing the users table in the database) object sets the attribute name corresponding to the database (easy to operate).
2. Register a new user in the UserServlet class to obtain information from the front end and call UesrSerice to insert user information. Redirect to the home page after inserting registration information. Login is to obtain information from the front end and call UesrSerice to check whether the user name and password entered by the user are correct.
3. Registering a new user in the UesrService class calls the method in UserRepo to add the user information obtained from the form to the database to realize data integration. The login will call UserRepo from the user information obtained from the form to query whether the username and password exist in the database and correspond one by one.
4. The UserRepo class is responsible for adding and searching the database user table directly using SQL.

insert into users(username,password) values (?,?) // register
select uid, username, password from users where username = ? // Log in

5. The UserVO class is displayed externally, ready to transmit data to the front end, so does not record the password.

Exit: It can be used after logging in. Use the QuitServlet class to operate. Use the session.removeAttribute method under this class to destroy the session associated with the user and redirect to the login interface.

2. Audio management

a. Audio upload

Front-end: This function can only be used after logging in, and verification is processed on the back-end

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

Backend: To receive form data with enctype==multiparty/form-data, it must be decorated with @MultipartConfig

1. In the TrackServlet class, verify whether the user is logged in. If after logging in, the information uploaded by the user is obtained from the front end and handed over to TrackService for processing.
2. In the TrackService class, the obtained information is inserted into the database together with the uid in the existing UserVo using the insert method of TrackRepo.
3. SQL is used in the UserRepo class to add, delete, check, and modify the database table tracks. Because it is an upload, it is an increase operation.

insert into tracks (uid, title, type, content) values (?, ?, ?, ?)

b. Audio list

Front-end: Load JS through the list.html file (initiate an ajax request, render the html file), and display the final list information.

<div class="who"></div>
    <table>
        <thead>
            <tr>
                <th>#tid</th>
                <th>title</th>
                <th>Links to albums</th>
            </tr>
        </thead>
        <!-- tbody All elements under the JS add it dynamically -->
        <tbody></tbody>
    </table>
    <div class="pagination">
        <a href="/studio/track/list.html?page=1">The first page</a>
        <!-- Depend on js Fill in according to the results in the response page = Several -->
        <a href="/studio/track/list.html?page=" class="prevPage">previous page</a>
        <span>per page <span class="countPerPage"></span> indivual</span>
        <span>the first <span class="currentPage"></span> Page</span>
        <span>common <span class="totalPage"></span> Page</span>
        <a href="/studio/track/list.html?page=" class="nextPage">next page</a>
        <a href="/studio/track/list.html?page=" class="lastPage">the last page</a>
</div>
<script src="./js/list.js"></script>

rear end:

1. Two VO classes are required for front-end display
2. Verify whether to log in in TrackServlet class t, and add ObjectMapper class to convert JSON, and hand over the obtained data to TrackService class for processing.
3. In the TrackService class, the method of the TrackRepo class is called to perform the query operation, and the matching is performed by the uid of the login at this time.
4. SQL is used in the TrackRepo class to add, delete, check, and modify the database, which is a query operation.

List pagination

1. In list.js, write a function to process the previous page and the next page and create a VO class about Page (the information displayed by the html file).
2. The page information is read in TrackServlet and handed over to TrackService for processing.
3. The TrackService defines the maximum number of pieces of information per page. Use TrackRepo to query the total number of data and calculate how many pages there are.
4. SQL is used in the TrackRepo class to add, delete, search and modify the database.

select count(*) from tracks where uid = ?;

Citations

The RelationRepo class obtains the data in the relations table and performs the query according to the tid of the audio currently being queried.

select tid, count(*) as ref_count from relations where tid in (%s) group by tid order by tid;

c. Audio recording

Front-end: use html and js to cooperate with each other, html uses the audio tag to start recording, js uses navigator.mediaDevices to use the microphone to record and save it to the back-end and save it in the database.

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

Backend: The RecordServlet class determines whether the user is logged in. After logging in, the recorded audio data is saved to the database.

d. Audio playback

Front-end: The main body is an audio tag, but to play music, the database needs to provide the URL of the audio data, and a unified data interface is also required to realize it.

<audio src="./Sing the motherland.mp3"></audio>
<button class="playPause">play</button>

rear end:
1. Respond according to the tid of the audio that the user wants to play. The response is not text, but binary, without resp GetWriter () uses resp GetOutputStream(), move data from content(InputStream) to os(OutputStream), Use a bucket (byte[]) to move a little bit until the data is moved

select type, content from tracks where tid = ?

2. Set up a unified data interface to unify the data of album table albums, audio table track, and relation table relations.

select aid, username, title, cover from albums a join users u on a.uid = u.uid where aid = ?;//album list
select tid from relations where aid = ?;//Relational tables
select tid, title from tracks where tid in (%s) order by tid desc;//audio meter

3. Album management

a. Create an album

Front-end: It can be used after the user is logged in, and the form is submitted using the form

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

Back-end: Verify whether the user is logged in in CreateServlet. After the login is completed, the user submits it to CreateRepo to perform the SQL table insertion operation.

insert into albums (uid, title, cover, state) values (?, ?, ?, ?);

b. Album list

Front-end: html and js are used together to display the album list page.

Back-end: The ListServlet class verifies whether the user is logged in. After the login is complete, the ListRepo class queries the uid of the current user in the database to find the corresponding information and give it to the front-end for display.

select aid, title, cover, state from albums where uid = ? order by aid desc;

c. Album release and offline

Front-end: js performs different operations according to different states.

if (a.state === 'Published') {
     anchor = `<a href="/studio/album/withdraw.do?aid=${a.aid}">offline</a>`
   } else {
       anchor = `<a href="/studio/album/publish.do?aid=${a.aid}">release</a>`
}

rear end:

1. If the status is released, click the a tag on the front end to jump to the unpublished state, and WithdrawServlet will perform the offline operation to change the status of the album in the database to unpublished.
2. If the status is unpublished, click the a tag on the front end to jump to the published status, and PublishServlet will perform the online operation to change the status of the album in the database to published.

4. Relationship Management (Audio: Relationship Between Albums)

Front-end: The html file and js file work together. After clicking bind, you can select the audio you want to bind.
rear end:
1. Query the audio list of the currently logged-in user in CandidateJsonServlet, and then give it to the front end for display.

select tid, title from tracks where uid = ? and tid not in (select tid from relations where aid = ?) order by tid desc;

2. In AddServlet, insert the tid of the audio that the user chooses to bind and the aid of the album into the relations table.

insert into relations (aid, tid) values %s;

V. Summary

1. Development environment: IDEA is used for code writing, Tomcat is used as web server, MySQL is used for data storage, and Maven is used for project management.
2. Overall framework: The whole project is based on the HTTP protocol. The front-end uses HTML+JS+CSS for the overall layout of the page, and the back-end adopts a hierarchical structure, which is divided into Service layer, Servlet layer, Repo layer, and Dao layer design, which is easy to classify. design.
3. Core functions of the project:
(1) User registration, login, and logout.
(2) Upload, record and play audio.
(3) Album creation, album and audio binding, album release and offline.