NodeJS入门：常用模块汇总之http模块(1)，学前端程序开发

接收html文件、json数据的demo

---

文件解释：

• index.html：主页面

• about.html："关于我们"页面

• index.js：服务器配置和响应设置

代码：

index.html

欢迎来到我的主页

about.html：

欢迎来到关于我们的页面

简单功能测试

index.js：

• 创建服务器对象、设置端口、服务器响应后返回一个html标签，让页面显示"good morning"

// 引入需要的模块

const path = require(“path”);

const http = require(“http”);

const fs = require(“fs”);

// 创建变量存储服务器对象

const server = http.createServer((req,res)=>{

console.log(req.url);

// 结束响应，返回响应的数据

res.end(“

good morning

”)

})

// 定义监听端口

// 如果环境变量中有定义端口，则使用环境变量中的端口，如果没有，就使用9999端口

const port = process.env.PROT || 9999;

// 监听

server.listen(port,()=>{

console.log(服务器的${port}端口正在运行...)

})

运行效果：

项目启动，控制台打印"服务器的9999端口正在运行…"

在浏览器打开localhost:9999，页面显示

good morning

============

加载html文件

简单的功能测试完毕，现在加入"加载index.html"的响应：

// 加载index页面

if (req.url === ‘/’){

fs.readFile(path.join(__dirname,“public”,“index.html”),(err,data)=>{

if (err) throw err;

res.writeHead(200, {‘Content-Type’:“text/html”})

res.end(data);

})

}

效果：

浏览器访问localhost:9999，加载index.html页面，显示如下：

接着是about.html页面的加载：

// 加载about页面

if (req.url === ‘/about’){

fs.readFile(path.join(__dirname,“public”,“about.html”),(err,data)=>{

if (err) throw err;

res.writeHead(200, {‘Content-Type’:“text/html”})

res.end(data);

})

}

效果：

浏览器访问localhost:9999/about，加载about.html页面，显示如下：

加载json数据

然后是json数据的读取：

if (req.url = “/api/user”) {

const data = [

{

name: “ccy”,

age: 25

},

{

name: “ccy1”,

age: 25

}

];

res.writeHead(200, { ‘Content-Type’: “application/json” })

res.end(JSON.stringify(data));

}

效果：

浏览器访问localhost:9999/api/user，加载该json数据，显示为：

index.js完整代码：

// 引入需要的模块

const path = require(“path”);

const http = require(“http”);

const fs = require(“fs”);

// 创建变量存储服务器对象

const server = http.createServer((req,res)=>{

// 加载index页面

if (req.url === ‘/’){

fs.readFile(path.join(__dirname,“public”,“index.html”),(err,data)=>{

if (err) throw err;

res.writeHead(200, {‘Content-Type’:“text/html”})

res.end(data);

})

}

// 加载about页面

if (req.url === ‘/about’){

fs.readFile(path.join(__dirname,“public”,“about.html”),(err,data)=>{

if (err) throw err;

res.writeHead(200, {‘Content-Type’:“text/html”})

res.end(data);

})

}

// 加载json数据

if (req.url = “/api/user”) {

const data = [

{

name: “ccy”,

age: 25

},

{

name: “ccy1”,

age: 25

}

];

res.writeHead(200, { ‘Content-Type’: “application/json” })

res.end(JSON.stringify(data));

}

})

// 定义监听端口

// 如果环境变量中有定义端口，则使用环境变量中的端口，如果没有，就使用9999端口

const port = process.env.PROT || 9999;

// 监听

server.listen(port,()=>{

console.log(服务器的${port}端口正在运行...)

})

根据文件后缀名加载

---

如果文件找不到，就显示404，因此我们加一个404的html：

404.html

404 NOT FOUND

在前一个例子的基础上加上文件后缀名的判断，此处用switch来做判断

不同类型的文件对应的content-type都不同，此处仅列举几个类型，如：

| 文件类型 | content-type |

| — | — |

| ‘.js’ | text/javascript |

| ‘.css’ | text/css |

| ‘.json’ | application/json |

| ‘.png’ | image/png |

| ‘.jpg’ | image/jpg |
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！

资料领取方式：点击这里前往免费获取

2196624854)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-tzG8Js1G-1712196624854)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！

资料领取方式：点击这里前往免费获取