Approximate process

First we need to implement the front-end page. We need to have a page that we can see with the naked eye.
We need to master the syntax of JS, 1 because we need to bind events through JS (for example, we can send data to the server by clicking a button, or obtain resources from the server) 2 we send requests to the server through ajax requests 3 through JS By modifying the DOM tree , we can modify our page
Learn JSON (content-type) response format (serial number and deserialization)

HTML

We submit data to our server through the form form and submit it to the dynamic resource of our /save-message.do. In JS, we select the submit button and bind it to the event.
Our table is where we display data. If we want to change the style of the front end, we can do it by changing the DOM tree of this table.

By changing the DOM structure of tbody, we change the content of the page. Here we must pay attention to the data patterns of the front-end and back-end being consistent.

Submit using form tag

In our address bar enter /message-list.html
1 The browser loads the /meaasge-list.html document resource
2<scripts src="/messgae-list.js><scripts> was found during the browser parsing process
3 The browser obtains the script resource of GET/message-list.js
4 Start executing the JS code to obtain the information of the list, by calling the dynamic resource of /message-list.json (because there are three pieces of information in the initialized list, these three pieces of information will be returned first)
5. After the response, continue the JS code, drive the event of xhr's load, add the data to the HTML, the DOM tree is modified, and the page content changes.
6 Our submission is through the form. Click the submit button, and the resources of post/save-message.do will be posted, and the input from the front end will be
7. The information is saved in the container of the list. Because redirection is used, /message-list.htm will be accessed and the above steps of obtaining information (1-5) will be repeated, so the entered information will be displayed in our in the front-end form

1 adopts the form form. For post-processing of the form , it is recommended to redirect, so that the browser will automatically redirect to the specified resource.
2 Use ajax + request body: in the form of JSON, for post-processing of ajax, it is recommended to return JSON to facilitate JS post-processing. JS reads the user's input, initiates a request to submit the content, and continues to modify the page or reload the page based on the results.