Expansion of the preface: In the previous stage of learning front-end literacy, the author wrote a simple and easy-to-read confession wall project. The specific front-end code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Confession wall</title>
<style>
/* * Wildcard selector, selects all elements on the page */
* {
/* Eliminate the browser's default style. */
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 600px;
margin: 20px auto;
}
h1 {
text-align: center;
}
p {
text-align: center;
color: #666;
margin: 20px 0;
}
.row {
/* Enable flexible layout */
display: flex;
height: 40px;
/* Center horizontally */
justify-content: center;
/* Center vertically */
align-items: center;
}
.row span {
width: 80px;
}
.row input {
width: 200px;
height: 30px;
}
.row button {
width: 280px;
height: 30px;
color: white;
background-color: orange;
/* Remove borders */
border: none;
border-radius: 5px;
}
/* There is feedback when clicking */
.row button:active {
background-color: gray;
}
</style>
</head>
<body>
<div class="container">
<h1>Confession wall</h1>
<p>After entering the content, click Submit, and the information will be displayed in the form below.</p>
<div class="row">
<span>Who: </span>
<input type="text">
</div>
<div class="row">
<span>To whom: </span>
<input type="text">
</div>
<div class="row">
<span>Says: </span>
<input type="text">
</div>
<div class="row">
<button id="submit">Submit</button>
</div>
<div class="row">
<button id="revert">Revoke</button>
</div>
<!-- <div class="row">
xxx says xxxx to xx
</div> -->
</div>
<script>
// Implement the submission operation. Click the submit button to submit the content entered by the user to the page for display.
//When clicked, get the text content in the three input boxes
//Create a new div.row and construct the content into this div.
let containerDiv = document.querySelector('.container');
let inputs = document.querySelectorAll('input');
let button = document.querySelector('#submit');
button.onclick = function() {
// 1. Get the contents of the three input boxes
let from = inputs[0].value;
let to = inputs[1].value;
let msg = inputs[2].value;
if (from == '' || to == '' || msg == '') {
return;
}
// 2. Construct a new div
let rowDiv = document.createElement('div');
rowDiv.className = 'row message';
rowDiv.innerHTML = from + ' to ' + to + ' says: ' + msg;
containerDiv.appendChild(rowDiv);
// 3. Clear the previous input box content
for (let input of inputs) {
input.value = '';
}
}
let revertButton = document.querySelector('#revert');
revertButton.onclick = function() {
//Delete the last message.
//Select all rows, find the last row, and delete it
let rows = document.querySelectorAll('.message');
if (rows == null || rows.length == 0) {
return;
}
containerDiv.removeChild(rows[rows.length - 1]);
}
</script>
</body>
</html>
The page that runs is:
Of course, there are quite a few problems with the confession wall project run by this front-end!
- If you refresh the page/close the page and reopen it, the previously entered message will be gone!
- If data is entered on one machine, the second machine cannot see it (the data is in the local browser and is not stored in the corresponding database/cloud server!
So, we have the following ideas:
Let the server store the data submitted by the user and save it by the server
When a new browser opens the page, get data from the server
Here, the server can be used to “archive” and “read files”
Based on the above ideas, design the program:
When writing a Web program, you must consider how the front and back ends interact? ? Agree on the data format for front-end and back-end interaction (design the front-end and back-end interaction interface)
- What does the request look like? ?
- What was the response like? ?
- When does the browser send this request? ?
- In what format does the browser parse it? ?
- ………………
- ………………
Then, we must have the following agreement:
Convention: Format of front-end and back-end interaction data:
There are many ways to agree here, and the specific settings are all different.
However, there are no fixed mandatory requirements for the agreement here
Just make sure you can implement the necessary code
The purpose here is to ensure that the front-end code and back-end code can be aligned!
Which link involves front-end and back-end interaction? ?
- Click Submit: The browser sends the confession information to the server here
- The page loads and the browser obtains the confession information from the server
Of course, there are only so many ideas. As for other codes, I won’t cover them here! !
Classic interview questions:
Cookies and Sessions
Several issues surrounding cookies:
- What is a cookie? ?
The mechanism provided by the browser to persistently store data
- Where do cookies come from? ?
Cookie returned from the server to the browser
In the server code, the programmer decides what kind of information to save to the client.
- Where do cookies go? ?
The cookie will be sent to the server with the header of the request when the browser subsequently accesses the server.
- Why go to all this trouble? ?
The server does not only provide services to one client, but also handles multiple clients at the same time. At this time, the server can identify who the current client is through the value of the cookie? ? At what stage are the current client services provided? ? (The client uses cookies to report its home address)
- Where are cookies stored? ?
Stored on the hard drive of the host where the browser (client) is located
The browser will store them separately according to the domain name.
Cookie has the most typical application (Cookie has many uses): identifying the user’s identity information:
Pay attention to understanding the relationship and difference between Cookie and Session:
the difference:
- Cookie is the storage mechanism of the client, and Session is the storage mechanism of the server.
- Cookies can store various key-value pairs (and others)
- Session is specifically used to protect users’ identity information.
- Cookies are part of the HTTP protocol
- Session can have nothing to do with HTTP (TCP, websocket…session can also be used)