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

原创已于 2022-11-17 08:06:05 修改 · 434 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2022-11-16 23:44:18 首次发布

NodeJS 专栏收录该内容

13 篇文章

订阅专栏

本文展示了如何使用Node.js创建一个简单的待办列表Web服务。首先，创建了一个静态HTML页面，用于输入待办事项。接着，通过Node.js搭建了一个Web服务器，监听3000端口并返回'Hello World'。最后，更新了服务器逻辑，使其能够读取并返回静态HTML页面，同时将页面中的%替换为待办事项列表。服务启动后，浏览器访问127.0.0.1:3000，可以看到静态页面加载成功，%被替换为123。

项目结构

在这里插入图片描述

静态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>

首先编写静态页面，页面编码需要指定为 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}/`)
})

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

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

浏览器访问 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
> <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>

修改 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('</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}/`)
})

代码逻辑

浏览器访问 http://127.0.0.1:3000/，进入执行 readFile
使用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 3