Todo list - read submit form page
project structure
static HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>待办列表</title>
</head>
<body>
<h1>待办列表</h1>
<form method="post" action="/">
<p><input type="text" name="item" /></p>
<p><input type="submit" value="添加" /></p>
</form>
<ul><li>%</li></ul>
</body>
</html>
- First write a static page, and the page code needs to be specified as meta charset="UTF-8", otherwise Chinese characters will be displayed as garbled characters.
- Use % to replace the dynamically added to-do items, save the code to index.html
- Open the page with a browser, as shown in the figure below
NodeJS Web Services
const http = require('http')
const hostname = '127.0.0.1'
const port = 3000
const server = http.createServer((req, res) => {
res.statusCode = 200
res.setHeader('Content-Type', 'text/plain')
res.end('Hello World\n')
})
server.listen(port, hostname, () => {
console.log(`Server running at http://${
hostname}:${
port}/`)
})
- Save the code to the file server.js
- run node server.js
F:\Github\Nodejs>node server.js
Server running at http://127.0.0.1:3000/
- The browser accesses http://127.0.0.1:3000/, and the following page is displayed, indicating that the service has started successfully
load static page
How to load template page in server?
F:\Github\Nodejs>node
Welcome to Node.js v18.12.1.
Type ".help" for more information.
> require('fs').readFile('server.js', (err, data) => {
console.log(data);})
undefined
> <Buffer 63 6f 6e 73 74 20 68 74 74 70 20 3d 20 72 65 71 75 69 72 65 28 27 68 74 74 70 27 29 0d 0a 0d 0a 63 6f 6e 73 74 20 68 6f 73 74 6e 61 6d 65 20 3d 20 27 ... 289 more bytes>
Modify server.js to add the logic of loading static pages, the code is as follows
const http = require('http');
const fs = require('fs');
const hostname = '127.0.0.1';
const port = 3000;
function send404(response) {
response.writeHead(404, {
'Content-Type': 'text/plain'});
response.write('Error 404: resource not found.');
response.end();
}
function readFile(response, filePath) {
fs.readFile(filePath, (err, data) => {
if (err) {
return send404(response);
}
var html = data.toString();
html = html.replace('%', [1,2,3].join('</li><li>'));
response.writeHead(200, {
'Content-Type': 'text/html'});
response.end(html);
});
}
const server = http.createServer((request, response) => {
var absPath = './' + 'public/index.html';
readFile(response, absPath);
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${
hostname}:${
port}/`)
})
code logic
- Browser access http://127.0.0.1:3000/, enter and execute readFile
- Use the fs module to read static resource files, and return 404 if the reading fails. If the read is successful, replace % of the todo list with 1 2 3
renderings
Execute node server.js
F:\Github\Nodejs\todolist>node server.js
Server running at http://127.0.0.1:3000/
The % of the static page is replaced by the list 1 2 3