一、创建index.html、circular.html、square.html、fs.js这四个文件
二、复制粘贴index.html、circular.html、square.html、fs.js这四个文件的源码
index.html源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>我是主页面,编写网址跳转页面</h3>
</body>
</html>
circular.html源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background: green;
border-radius: 50%;
}
</style>
<link rel="stylesheet" type="text/css" href="bb" />
</head>
<body>
<img src="pic" alt="">
<div></div>
</body>
</html>
square.html源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
fs.js源码
var http = require("http"); //通信相关
var fs = require("fs"); //文件相关
// 使用createServer 方法创建服务器
const server = http.createServer(function (req, res) {
// 设置响应头
res.writeHead(200, { "Content-Type": "text/html;charset=utf-8" });
// console.log(req.url);
if (req.url == "/") {
fs.readFile("./index.html", (err, data) => {
if (err) {
return console.error(err);
}
res.end(data);
});
} else if (req.url == "/yuanxing") {
fs.readFile("./circular.html", (err, data) => {
if (err) {
return console.error(err);
}
res.end(data);
});
} else if (req.url == "/fangxing") {
fs.readFile("./square.html", (err, data) => {
res.end(data);
});
} else {
res.end("没有这个页面");
}
});
// 运行服务器, 监听端口号3000
server.listen(3000, "127.0.0.1", () => {
console.log("服务端,已启动,端口号: http://localhost:3000/");
console.log("终端启动命令: node fs.js");
});
三、点开终端输入 node fs.js 命令
运行结果