content
Five, the design of the database
4. Delete a certain music information
5. Delete the selected music information
6. Query music (including finding specified/fuzzy matching music)
8. Query favorite music (including finding specified/fuzzy matching music)
7. Detailed explanation of code and some modules
1. MySQL database connection idea and part of the code
2. Create a project to pay attention to the problem
8. Complete code and resources
I. Introduction
This project is the most basic JavaWeb development project. It is based on servlet+maven+css+JavaScript+html+Mysql. It is friendly to beginners who are new to JavaWeb development. If you are very familiar with Mysql and servlet, then for you It should be easier to say. In the future, I will update the spring-based JavaWeb project in this column, and I hope readers can follow me to learn Web development together. The project is relatively basic, and I don’t like to spray lightly!
2. Core functions
1. Login, register
2. Upload music
3. Delete a certain music message
4. Delete the selected music information
5. Query music (including finding specified/fuzzy matching music)
6. Add music to "Like List".
7. Query favorite music (including finding specified/fuzzy matching music)
8. Use HTML templates to simply design MV and other pages
3. Important knowledge points
1. Simple web server design ability
2. Java to operate MySQL database
3. Database Design
4. Use of json
5. Strengthen the understanding of the HTTP protocol
6. Use of Servlet
7. Use of Java Collections
8. Simple use of front-end knowledge such as: HTML+CSS+JS
Fourth, the project structure
Five, the design of the database
music
| id | title | signer | time | url | userid |
lovermusic
| id | user_id | music_id |
user
| id | username | pssword | age | grnder | enamel |
6. Server API Design
1. About Json
Json is a common data format organization. Originated from JavaScript, it is a key-value pair style data format. In Java, we can use the ObjectMapper class in the Jackson library to complete the parsing and construction of Json.
2. Login
请求： POST /loginServlet data：{username,password}
Response: {msg: true}
3. Upload music
Request 1: Upload music to the server directory POST /upload
Request 2: Synchronously insert music information into the database POST /uploadsucess
4. Delete a certain music information
请求： POST /deleteServlet data: {"id": id}
Response: {msg: true}
5. Delete the selected music information
Request: POST /deleteSelMusicServlet data:{"id":id}
Response: {msg: true}
6. Query music (including finding specified/fuzzy matching music)
： ： POST / findLoveMusic data: {musicName: musicName}
7. Add music to "Like List"
Request: POST /loveMusicServlet data: {"id": obj}
Response: {msg: true}
8. Query favorite music (including finding specified/fuzzy matching music)
： ： POST / findLoveMusic data: {musicName: musicName}
9. Remove a favorite music
请求： POST /removeLoveServlet data: {"id": obj}
10. MV playback page
7. Detailed explanation of code and some modules
1. MySQL database connection idea and part of the code
My idea is the professional version, so it comes with this Database. If some readers are in the community version, they can download a plug-in to connect to the database so that we can view the data transformation directly in the idea. As for how to download plug-ins and connect to the database to search online, I won't go into details here.
Before deploying to the server (how to deploy the servlet to the server, please find out by yourself), we will test the code locally. The password here should be the local code. When we deploy the war package to the server, pay attention to Whether the database password on your server is set, if it is not set, it needs to be changed to empty. If there is a password set, it needs to be changed to the password on the server. My server has not set a password, so I did not write my local MySQL password here when I made the war package. .
2. Create a project to pay attention to the problem
1) When creating, try to use standard maven to build the project. The webapp is in the main directory and has a blue dot. If your own project does not have a blue dot, 404 will not appear in your static resource access. How to add a small blue dot to search by yourself.
2) The problem of configuring the context path of smart tomcat, I am the professional version of the idea, the configuration context path interface is as follows, the community version downloads the plugin and goes into the configuration is the same. Pay attention to the url we visit. If it is /, then we only need to write the HTML file when setting the jump in HTML, because I want to deploy it to the server later. I use /onlineMusic here because it is deployed on the server. Different from local deployment, the context path in the url accessed by the server is the name of the war, and my war package is called onlineMusic.
3) The problem of the path of uploading files, the picture below is the code I want to upload to the server, because there is a step for uploading files in this project, my path on the server must be music in the webapp directory, if it is local, it needs to be Change it to your music local directory, otherwise the code path uploaded by the server will not be found.
4) Regarding the front-end code, most of the students may be the same as me. If you are engaged in back-end development, you may just understand and write some simple HTML code for the front-end. I recommend some template websites here for your reference. free download.
To make a website, go to Fankejian (fkw.com)https://ajz.fkw.com/pro11.html?_ta=150&kw=145
Amaze UI Template Center
8. Complete code and resources
I uploaded the complete code resources to my warehouse project. If you want to download and practice, you can find it