1、打开web服务器
代码实现:
// 代码结构
// 导入 http 模块
const http = require("http")
const server = http.createServer((req,res)=>{
// 代码
})
server.listen(3000,()=>{
// 代码
})
具体实现:
const http = require("http")
const server = http.createServer((req,res)=>{
// 1.状态码 (1) 200 成功 (2) 404 没找到页面 (3) 500 服务器错误
// 2.中文编码 charset 字符集
res.writeHead(200,{"Content-type":"text/html;charset=utf-8"})
// write() 可以有0个或多个
res.write("<b>我是300端口服务器显示内容</b>")
// end() 有且只有一个
res.end("你好")
})
// 端口号可以自己取,我的3000被占用了,就用300吧
server.listen(300,()=>{
// 成功开启服务器,控制台打印 ok
console.log("ok")
})
运行结果:
2、渲染不同页面
前提:渲染两个页面,分别创建 demo.html 和 user.html
(1)
// demo.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>
<h2>标题</h2>
<ul>
<li>one</li>
<li>two</li>
</ul>
<div>
<img src="./images/01.webp" alt="">
</div>
</body>
</html>
(2)
// user.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>
我是 user页面
</body>
</html>
代码实现:
const http = require("http")
const fs = require("fs")
const server = http.createServer((req,res)=>{
if(req.url=="/"){ // 路由: /根路由
fs.readFile("./demo.html","utf-8",(err,data)=>{
res.end(data)
})
}else if(req.url=="/user"){ // /user 对应用户页面
fs.readFile("./user.html","utf-8",(err,data)=>{
res.end(data)
})
}
else{
// 我的图片存在images文件夹下,图片命名为01.webp
// 加载 public 资源 req.url: 都是从根目录开始的 /images/01.webp
fs.readFile("./public"+req.url,(err,data)=>{
res.end(data)
})
}
})
server.listen(1000,()=>{
console.log("ok")
})
运行结果: