oh~MyBlog

Project Description

The project is not small, just meet it!

This blog project is a simple blog system based on the basic knowledge of JAVA web. The main functions include user login and basic operations of adding, deleting, checking and modifying articles.

Use technology

Maven: Manage dependent packaged projects
Mysql: Store business data
HTML: Make front-end login page
Servlet: Back- end service resources complete related business
Jackson: Complete the serialization and deserialization of Java objects and Json string data agreed upon between the front and back ends based on the Jackson framework
Tomcat: server for web project deployment
Filter: unified session management for all logins

Business realization

The article management operations of this system are all based on the premise of user login.

Implementation process

Insert picture description here

Ready to work

Design database tables

Since this system is relatively simple and only involves users and articles, only two tables are designed: user table and article table
Insert picture description here

Convention front and back json response format

Insert picture description here

The data carriers of the request and response of these interfaces such as articleAdd/articleUpdate/articleDelete/articleList are all in JSON format, so the front and back ends are agreed in advance, and the interaction between the two parties will be much easier.

Filter

Before the client's request is distributed by the server to the specific servlet service, it needs to be filtered (Filter linearly manages multiple filters), and the requests will be filtered one by one.

Insert picture description here
Configure the filter for user unified session management to match all request paths (/*)

  • Each time an http request matches the filter path, the doFilter() of the filter will be executed first
  • If it is executed later, it is to call filterChain.doFilter(request,response)
  • Otherwise handle the response by yourself

Server resources

/login does not need to verify the Session, all others must be verified. If it fails, it returns 401, and the response content is customized

Front-end resources

/jsp/Verify session, if session is empty, redirect to login page
/js/,/static/,/view/ No verification required

Template technology

For repetitive things, let the interfaces handle them in a unified way, and leave the rest to subclasses to rewrite and implement themselves.
Here the parent class implements the doGet and doPost methods, and the subclass only needs to rewrite the process method according to its own business logic.
Realize code reuse.
Insert picture description here

Business Process

User is not logged in

Page information is realized through the above-mentioned filter unified session management! The access path here is "blog/", the filter judges that the user session is empty, and the access path does not start with "/jsp", it is known that the user has not logged in.
Insert picture description here
The user is not logged in, the judgment logic in the Filter:
Insert picture description here
enter the url, the user visits the login page, the
Insert picture description here
user enters the user information and clicks "login"

During the implementation of the login page, js was introduced into the HTML. When the user clicks to log in, the front end will initiate two js requests, the other one is an Ajax request. The "form submission" event is bound through Ajax. When the user submits and the login page is loaded, it will automatically carry the front-end data to initiate a request.
Ajax serializes the requested form data into json format, and executes the corresponding content according to the data analysis. The request service path of Ajax is "/login", and the server finds the corresponding servlet service to process the business according to the service path.

Insert picture description here
What happened after the user clicked submit?

When the user clicks submit, the server finds the LoginServlet service according to the request service path in the Ajax request, parses the user information here, and connects to the database through the JDBC operation to verify that the user information is correct.

Insert picture description here
If the user name and password match the database information, the front-end json response information is returned. In js, it is judged whether it is successful according to the json information, and success will jump to the user's article list interface, indicating that the user login is successful.
Insert picture description here
Successfully logged in!
Insert picture description here

From the user's point of view, I thought it was just a simple page jump. In fact, the front and back ends had multiple interactions. Otherwise, just the user clicks to log in, how can I get the user's personal article list?

Get a list of articles

front end

When the user clicks to log in, the front end initiates an articleList service request.
Insert picture description here
According to the json data of the back end response, the user's article list information is displayed.
Insert picture description here
The back-end
server receives the request and goes to the servlet service corresponding to "articleLis" to obtain user information from the session.
Insert picture description here
Connect to the database through JDBC to complete the query of the user's personal article list.
Insert picture description here
After the database operation is successful, the server will return json response information to the front end.
Insert picture description here
After the user logged in successfully, the background also quietly did one thing:

Kind of session! Save user information, which is equivalent to a pass!

Insert picture description here

Then you can add, delete, modify and check the articles under the user name!

Publish a new article

Click "Publish New Article" to open a new window, displaying the article details page for users to edit the content of the article.

Front end
When the user clicks "Publish a new article", the interface jumps to the article details page "jsp/articleDetail.jsp" and sets the type to add.
Insert picture description here
Details page request information
Insert picture description here
According to the type information, after the user clicks submit, a service request for articleAdd is initiated.
Insert picture description here
According to the json information returned by the server, determine whether the addition is successful, and feedback to the user.

The back-end
server obtains user information from the session under the corresponding service resources, obtains the complete request data from the request body through the input stream, and deserializes the json data into an article object. Enter ArticleDAO.insert(), and complete the article record insertion operation of the database through JDBC.
Insert picture description here
After the database record is successfully inserted, the server edits the response information according to the agreed json information format of the front and back ends, serializes it into json format, and returns it to the front end.
Insert picture description here

modify articles

Select the article that needs to be modified and click Modify, and a new window will open to jump to the article details page.

Only one article can be selected for modification, and the modification is bound to the button click event. After the click event is triggered, it will jump to jsp/articleDetail.jsp and add the setting type to "update".
Insert picture description here
The modification is based on the content of the original article, first request the "articleDetail" service resource.
Insert picture description here
After the user clicks submit, according to the type information, a post request is initiated to request the "articleUpdate" service resource.
Insert picture description here
Insert picture description here
According to the json information returned by the backend, determine whether the article has been updated successfully, and give feedback to the user. ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
Insert picture description here
The back-end
server first parses the article ID according to the received "articleDetail" service request, finds the article information in the database through JBDC, and returns it to the front-end to display the content information of the article.

After the user clicks submit, the server receives the request of the "articleUpdate" service, deserializes the request data in json format into an article class object, and then completes the update operation of the database record through JDBC. After the database is updated successfully, the json response information is returned to the front end to inform that it has been updated.

Delete article

The user selects the article that needs to be deleted, and clicks delete. A prompt box will pop up to ask the user whether to confirm the deletion.

Insert picture description here
After the front-end
user clicks to confirm, it initiates an articleDelete service resource request.
Insert picture description here
According to the back-end json response information, determine whether the deletion is successful. After the back end is successfully deleted, the front end can delete the article display.
Insert picture description here
The back-end
server finds the corresponding service resource "articleDelete", parses the request to obtain the article ID, and completes the deletion of the article record in the database through JDBC operations.
Insert picture description here


Guess you like

Origin blog.csdn.net/qq_44977025/article/details/115119429