动态网站

新建 index.html 内容如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
<form action="./info.html" method="post">
    <input type="text" name="userName">
    <input type="submit" value="查询">
</form>
</body>
</html>

然后紧接着新建 info.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户个人资料</title>
</head>
<body>
<ul>
    <li>姓名: !!!name!!!</li>
    <li>性别: !!!gender!!!</li>
    <li>年龄: !!!age!!!</li>
</ul>
</body>
</html>

然后新建 index.js

let http = require("http");
let path = require("path");
let fs = require("fs");
let url = require("url");
let queryString = require("querystring");

let persons = {
    "lisi": {
        name: "lisi",
        gender: "male",
        age: "33"
    },
    "zhangsan": {
        name: "zhangsan",
        gender: "female",
        age: "18"
    }
};

// 1.创建一个服务器实例对象
let server = http.createServer();

// 2.注册请求监听
server.on("request", function (req, res) {
    if (req.url.startsWith("/index") && req.method.toLowerCase() === "get") {
        let obj = url.parse(req.url);
        let filePath = path.join(__dirname, obj.pathname);
        fs.readFile(filePath, "utf8", function (err, content) {
            if (err) {
                res.writeHead(404, {
                    "Content-Type": "text/plain; charset=utf-8"
                });
                res.end("Page Not Found");
            }
            res.writeHead(200, {
                "Content-Type": "text/html; charset=utf-8"
            });
            res.end(content);
        });
    } else if (req.url.startsWith("/info") && req.method.toLowerCase() === "post") {
        let params = "";
        req.on("data", function (chunk) {
            params += chunk;
        });
        req.on("end", function () {
            let obj = queryString.parse(params);
            let per = persons[obj.userName];
            let filePath = path.join(__dirname, req.url);
            fs.readFile(filePath, "utf8", function (err, content) {
                if (err) {
                    res.writeHead(404, {
                        "Content-Type": "text/plain; charset=utf-8"
                    });
                    res.end("Page Not Found");
                }
                content = content.replace("!!!name!!!", per.name);
                content = content.replace("!!!gender!!!", per.gender);
                content = content.replace("!!!age!!!", per.age);
                res.end(content);
            });
        });
    }
});

// 3.指定监听的端口
server.listen(3000);

启动项目访问方式如下图所示