NodeJs实战-待办列表(1)-读取提交表单页面

待办列表-读取提交表单页面

项目结构
静态HTML页面
NodeJS Web服务
加载静态页面
- 代码逻辑
- 效果图

项目结构

在这里插入图片描述

静态HTML页面

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

首先编写静态页面，页面编码需要指定为 meta charset=“UTF-8”，不然中文会显示乱码。
使用%来替换之后动态添加的待办事项，代码保存至 index.html
用浏览器打开该页面，显示如下图所示

NodeJS Web服务

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}/`)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

代码保存到文件 server.js
运行 node server.js

F:\Github\Nodejs>node server.js
Server running at http://127.0.0.1:3000/
1
2

浏览器访问 http://127.0.0.1:3000/，显示如下页面，表明服务启动成功了

加载静态页面

如何在服务器中加载模板页面？

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
> ... 289 more bytes>
1
2
3
4
5
6

修改 server.js，增加加载静态页面的逻辑，代码如下

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('

')); 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}/`) })
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
代码逻辑
1. 浏览器访问 http://127.0.0.1:3000/，进入执行 readFile
2. 使用fs模块读取静态资源文件，如果读取失败，返回404。如果读取成功，将待办列表的 % 替换成 1 2 3
效果图

执行 node server.js
```
F:\Github\Nodejs\todolist>node server.js
Server running at http://127.0.0.1:3000/
1
2
```
静态页面的%被替换成了列表1 2 3

NodeJs实战-待办列表(1)-读取提交表单页面

待办列表-读取提交表单页面

项目结构

静态HTML页面

NodeJS Web服务

加载静态页面

代码逻辑

效果图