尧图网页设计 
Node.js 实战使用原生 HTTP 模块构建一个多页面信息站点Basic Informational Site【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum本教程是本仓库 nodeJS/introduction_to_nodeJS 课程模块中的第一个 Node.js 实战项目仅使用 Node 内置的http、fs、path模块从零搭建一个包含index、about、contact-me与404四个页面的基础信息网站并根据 URL 路由返回对应 HTML 文件。读完本文你将掌握如何用http.createServer创建服务器、用fs.readFile读取静态文件、手动实现简单的 URL 路由与 404 兜底逻辑并在此基础上完成端口配置、错误处理与调试为后续 Express 框架学习打下扎实的原生 Node基础。一、项目背景为什么先做原生 Node服务器在学习 Express 等框架之前先亲手用原生 Node 写一个 HTTP 服务器能让你真正理解框架背后发生了什么。正如 getting_started.md 所强调的本课程要求掌握的核心能力包括使用 HTTP 模块搭建基础 Web 服务器、使用文件系统fs模块读写文件、使用 URL 模块解析地址。本项目正是把这些知识点串联起来的第一个实战练习。从 introduction_what_is_nodeJS.md 可以回顾 Node 的本质它是一个异步事件驱动的 JavaScript 运行时。这意味着当服务器收到请求时它并不会按顺序排队处理而是通过回调函数响应特定事件如网络请求。原课程给出的最简服务器示例正是这种思想的体现http.createServer(function (req, res) { res.writeHead(200, {Content-Type: text/html}); res.end(Hello World!); }).listen(8080);这段代码的含义是每当收到一次网络请求就执行这个回调函数。本项目要做的就是把这个Hello World式的回调扩展成一个能够根据请求 URL 返回不同页面文件的完整服务器。二、项目需求分析四个页面与路由映射根据 project_basic_informational_site.md 的定义本项目需要构建一个非常基础的信息站点包含 4 个页面。课程同时指出页面内容本身并不重要不需要花大量时间填充内容或美化样式——核心考察点是 Node 服务器逻辑本身。请求 URL应返回的页面文件语义http://localhost:8080/index.html站点首页http://localhost:8080/aboutabout.html关于页面http://localhost:8080/contact-mecontact-me.html联系页面以上之外的任意路径404.html页面未找到这是一个典型的静态站点 手动路由场景服务器不渲染任何动态内容只负责根据路径找到对应文件并返回。虽然简单但它包含了 Web 服务器最核心的三件事监听请求、解析路径、返回响应含错误响应。三、搭建项目目录结构首先创建一个项目目录并在其中创建 4 个 HTML 文件mkdir basic-informational-site cd basic-informational-site touch index.html about.html contact-me.html 404.html目录结构如下basic-informational-site/ ├── 404.html ├── about.html ├── contact-me.html ├── index.html └── index.js # 稍后创建的服务器入口文件每个 HTML 文件只需包含最基础的页面骨架即可例如index.html!DOCTYPE html html langen head meta charsetUTF-8 titleHome/title /head body h1Home/h1 /body /html提示可以顺手在三个正常页面之间加上互相跳转的链接例如首页里放一个指向/about的a标签这样在浏览器中验证路由时会更直观。四、核心实现用原生 Node 编写服务器index.js接下来是项目的重头戏创建服务器入口文件index.js编写根据 URL 提供正确页面的代码。下面按步骤拆解实现。4.1 引入内置模块Node 的三个内置模块足以完成本任务http创建 HTTP 服务器、处理请求与响应fs从磁盘读取 HTML 文件内容对应 getting_started.md 中强调的读取文件能力path安全地拼接文件路径避免手动拼字符串带来的平台兼容问题。const http require(http); const fs require(fs); const path require(path);4.2 定义路由与文件映射用一个对象维护URL → 文件名的映射是这段代码最直观、最易维护的写法const server http.createServer((req, res) { let filePath; // 根据请求路径决定返回哪个文件 switch (req.url) { case /: filePath index.html; break; case /about: filePath about.html; break; case /contact-me: filePath contact-me.html; break; default: filePath 404.html; break; } // ... });4.3 读取文件并返回响应拿到目标文件名后用fs.readFile读取该文件。由于文件读取是异步操作必须通过回调函数处理结果读取成功则返回 200 与文件内容读取失败例如文件缺失则返回 404 或 500。fs.readFile(path.join(__dirname, filePath), utf8, (err, data) { if (err) { // 文件读取失败向客户端返回 500 或 404 res.writeHead(500, { Content-Type: text/plain }); res.end(Internal Server Error); return; } res.writeHead(200, { Content-Type: text/html }); res.end(data); });这里有两个值得注意的细节__dirname指向index.js所在的目录用它作为基准拼接文件路径可以保证无论从哪个目录启动node index.js都能正确定位 HTML 文件res.writeHeadres.end的组合writeHead写入状态码与响应头这里声明内容类型为text/html浏览器才会按 HTML 渲染end结束响应并发送正文。4.4 监听端口最后让服务器监听 8080 端口——这正是 project_basic_informational_site.md 要求的访问地址server.listen(8080, () { console.log(Server running at http://localhost:8080/); });4.5 完整代码将以上片段合并得到完整的index.jsconst http require(http); const fs require(fs); const path require(path); const server http.createServer((req, res) { let filePath; switch (req.url) { case /: filePath index.html; break; case /about: filePath about.html; break; case /contact-me: filePath contact-me.html; break; default: filePath 404.html; break; } fs.readFile(path.join(__dirname, filePath), utf8, (err, data) { if (err) { res.writeHead(500, { Content-Type: text/plain }); res.end(Internal Server Error); return; } res.writeHead(200, { Content-Type: text/html }); res.end(data); }); }); server.listen(8080, () { console.log(Server running at http://localhost:8080/); });这段代码完整覆盖了课程要求的行为localhost:8080返回index.html/about返回about.html/contact-me返回contact-me.html其余任何路径一律返回404.html。五、运行与验证在项目目录下执行node index.js然后在浏览器中逐一访问以下地址进行验证访问地址预期结果http://localhost:8080/看到首页内容http://localhost:8080/about看到关于页面http://localhost:8080/contact-me看到联系页面http://localhost:8080/anything-else看到 404 页面也可以使用curl在终端验证响应头与状态码curl -i http://localhost:8080/about curl -i http://localhost:8080/nonexistent其中第二条命令返回的 HTTP 状态码应为200因为 404 页面作为正常文件被返回了。若希望语义更严谨可以在default分支同时把状态码设置为 404例如将读取成功的分支改为按变量写入状态码——这是本项目一个很好的进阶点。六、进阶扩展让代码更健壮、更贴近真实项目原文档给出的只是最小实现下面的扩展可以让你在实战中走得更远也与本课程模块的后续章节相呼应。6.1 用环境变量配置端口将端口硬编码为 8080 在真实项目中并不理想——开发、测试、生产环境往往需要不同的端口。参考 environment_variables.md 的做法可以通过process.env读取端口并提供默认值const PORT process.env.PORT || 8080; server.listen(PORT, () { console.log(Server running at http://localhost:${PORT}/); });运行时即可通过命令行临时指定端口PORT3000 node index.js注意环境变量的值永远是字符串若后续需要把PORT当作数字使用如参与运算记得先转换类型。6.2 更严格的 404 状态码当用户访问不存在的路径时让响应携带真正的404 Not Found状态码语义更准确。可以将目标文件与状态码一起放入路由表const routes { /: { file: index.html, status: 200 }, /about: { file: about.html, status: 200 }, /contact-me: { file: contact-me.html, status: 200 }, };命中路由表则按对应状态码返回未命中则返回404.html且状态码为 404。6.3 在 VS Code 中调试 Node 服务器服务器逻辑出现问题时可以在 VS Code 中直接调试。正如 debugging_node.md 所介绍的VS Code 内置了 Node 调试器在index.js中点击行号左侧设置断点例如fs.readFile回调内部按下F5选择 Node.js 环境启动调试在浏览器访问http://localhost:8080/程序会在断点处暂停你可以在变量面板中检查req.url、filePath等关键变量的实际值。调试时注意服务器进程是持续运行的改动index.js后需要重启node index.js才能生效部分 Node 版本支持--watch参数实现文件变更自动重启。七、知识检查与自查清单完成项目后不妨用以下问题检验自己是否真正掌握http.createServer的回调函数在什么时机被调用回调参数req和res分别代表什么req.url能拿到什么路径与查询字符串是否混在一起fs.readFile为什么是异步的如果改成fs.readFileSync会有什么影响为什么要用path.join(__dirname, filePath)而不是直接拼接字符串当用户访问一个不存在的路径时服务器返回的是200 404 页面内容还是真正的 404 状态码两者的差别是什么如何在不修改源码的前提下更换监听端口将以上问题与 getting_started.md 的 HTTP 模块、fs 模块、URL 类知识点对照复习然后就可以带着对原生 Node 服务器的完整认知进入本模块后续的 project_basic_informational_site.md 验收环节或继续学习 Express 等更高层框架了。【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Node.js 实战：使用原生 HTTP 模块构建一个多页面信息站点（Basic Informational Site）
Node.js 实战使用原生 HTTP 模块构建一个多页面信息站点Basic Informational Site【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum本教程是本仓库 nodeJS/introduction_to_nodeJS 课程模块中的第一个 Node.js 实战项目仅使用 Node 内置的http、fs、path模块从零搭建一个包含index、about、contact-me与404四个页面的基础信息网站并根据 URL 路由返回对应 HTML 文件。读完本文你将掌握如何用http.createServer创建服务器、用fs.readFile读取静态文件、手动实现简单的 URL 路由与 404 兜底逻辑并在此基础上完成端口配置、错误处理与调试为后续 Express 框架学习打下扎实的原生 Node基础。一、项目背景为什么先做原生 Node服务器在学习 Express 等框架之前先亲手用原生 Node 写一个 HTTP 服务器能让你真正理解框架背后发生了什么。正如 getting_started.md 所强调的本课程要求掌握的核心能力包括使用 HTTP 模块搭建基础 Web 服务器、使用文件系统fs模块读写文件、使用 URL 模块解析地址。本项目正是把这些知识点串联起来的第一个实战练习。从 introduction_what_is_nodeJS.md 可以回顾 Node 的本质它是一个异步事件驱动的 JavaScript 运行时。这意味着当服务器收到请求时它并不会按顺序排队处理而是通过回调函数响应特定事件如网络请求。原课程给出的最简服务器示例正是这种思想的体现http.createServer(function (req, res) { res.writeHead(200, {Content-Type: text/html}); res.end(Hello World!); }).listen(8080);这段代码的含义是每当收到一次网络请求就执行这个回调函数。本项目要做的就是把这个Hello World式的回调扩展成一个能够根据请求 URL 返回不同页面文件的完整服务器。二、项目需求分析四个页面与路由映射根据 project_basic_informational_site.md 的定义本项目需要构建一个非常基础的信息站点包含 4 个页面。课程同时指出页面内容本身并不重要不需要花大量时间填充内容或美化样式——核心考察点是 Node 服务器逻辑本身。请求 URL应返回的页面文件语义http://localhost:8080/index.html站点首页http://localhost:8080/aboutabout.html关于页面http://localhost:8080/contact-mecontact-me.html联系页面以上之外的任意路径404.html页面未找到这是一个典型的静态站点 手动路由场景服务器不渲染任何动态内容只负责根据路径找到对应文件并返回。虽然简单但它包含了 Web 服务器最核心的三件事监听请求、解析路径、返回响应含错误响应。三、搭建项目目录结构首先创建一个项目目录并在其中创建 4 个 HTML 文件mkdir basic-informational-site cd basic-informational-site touch index.html about.html contact-me.html 404.html目录结构如下basic-informational-site/ ├── 404.html ├── about.html ├── contact-me.html ├── index.html └── index.js # 稍后创建的服务器入口文件每个 HTML 文件只需包含最基础的页面骨架即可例如index.html!DOCTYPE html html langen head meta charsetUTF-8 titleHome/title /head body h1Home/h1 /body /html提示可以顺手在三个正常页面之间加上互相跳转的链接例如首页里放一个指向/about的a标签这样在浏览器中验证路由时会更直观。四、核心实现用原生 Node 编写服务器index.js接下来是项目的重头戏创建服务器入口文件index.js编写根据 URL 提供正确页面的代码。下面按步骤拆解实现。4.1 引入内置模块Node 的三个内置模块足以完成本任务http创建 HTTP 服务器、处理请求与响应fs从磁盘读取 HTML 文件内容对应 getting_started.md 中强调的读取文件能力path安全地拼接文件路径避免手动拼字符串带来的平台兼容问题。const http require(http); const fs require(fs); const path require(path);4.2 定义路由与文件映射用一个对象维护URL → 文件名的映射是这段代码最直观、最易维护的写法const server http.createServer((req, res) { let filePath; // 根据请求路径决定返回哪个文件 switch (req.url) { case /: filePath index.html; break; case /about: filePath about.html; break; case /contact-me: filePath contact-me.html; break; default: filePath 404.html; break; } // ... });4.3 读取文件并返回响应拿到目标文件名后用fs.readFile读取该文件。由于文件读取是异步操作必须通过回调函数处理结果读取成功则返回 200 与文件内容读取失败例如文件缺失则返回 404 或 500。fs.readFile(path.join(__dirname, filePath), utf8, (err, data) { if (err) { // 文件读取失败向客户端返回 500 或 404 res.writeHead(500, { Content-Type: text/plain }); res.end(Internal Server Error); return; } res.writeHead(200, { Content-Type: text/html }); res.end(data); });这里有两个值得注意的细节__dirname指向index.js所在的目录用它作为基准拼接文件路径可以保证无论从哪个目录启动node index.js都能正确定位 HTML 文件res.writeHeadres.end的组合writeHead写入状态码与响应头这里声明内容类型为text/html浏览器才会按 HTML 渲染end结束响应并发送正文。4.4 监听端口最后让服务器监听 8080 端口——这正是 project_basic_informational_site.md 要求的访问地址server.listen(8080, () { console.log(Server running at http://localhost:8080/); });4.5 完整代码将以上片段合并得到完整的index.jsconst http require(http); const fs require(fs); const path require(path); const server http.createServer((req, res) { let filePath; switch (req.url) { case /: filePath index.html; break; case /about: filePath about.html; break; case /contact-me: filePath contact-me.html; break; default: filePath 404.html; break; } fs.readFile(path.join(__dirname, filePath), utf8, (err, data) { if (err) { res.writeHead(500, { Content-Type: text/plain }); res.end(Internal Server Error); return; } res.writeHead(200, { Content-Type: text/html }); res.end(data); }); }); server.listen(8080, () { console.log(Server running at http://localhost:8080/); });这段代码完整覆盖了课程要求的行为localhost:8080返回index.html/about返回about.html/contact-me返回contact-me.html其余任何路径一律返回404.html。五、运行与验证在项目目录下执行node index.js然后在浏览器中逐一访问以下地址进行验证访问地址预期结果http://localhost:8080/看到首页内容http://localhost:8080/about看到关于页面http://localhost:8080/contact-me看到联系页面http://localhost:8080/anything-else看到 404 页面也可以使用curl在终端验证响应头与状态码curl -i http://localhost:8080/about curl -i http://localhost:8080/nonexistent其中第二条命令返回的 HTTP 状态码应为200因为 404 页面作为正常文件被返回了。若希望语义更严谨可以在default分支同时把状态码设置为 404例如将读取成功的分支改为按变量写入状态码——这是本项目一个很好的进阶点。六、进阶扩展让代码更健壮、更贴近真实项目原文档给出的只是最小实现下面的扩展可以让你在实战中走得更远也与本课程模块的后续章节相呼应。6.1 用环境变量配置端口将端口硬编码为 8080 在真实项目中并不理想——开发、测试、生产环境往往需要不同的端口。参考 environment_variables.md 的做法可以通过process.env读取端口并提供默认值const PORT process.env.PORT || 8080; server.listen(PORT, () { console.log(Server running at http://localhost:${PORT}/); });运行时即可通过命令行临时指定端口PORT3000 node index.js注意环境变量的值永远是字符串若后续需要把PORT当作数字使用如参与运算记得先转换类型。6.2 更严格的 404 状态码当用户访问不存在的路径时让响应携带真正的404 Not Found状态码语义更准确。可以将目标文件与状态码一起放入路由表const routes { /: { file: index.html, status: 200 }, /about: { file: about.html, status: 200 }, /contact-me: { file: contact-me.html, status: 200 }, };命中路由表则按对应状态码返回未命中则返回404.html且状态码为 404。6.3 在 VS Code 中调试 Node 服务器服务器逻辑出现问题时可以在 VS Code 中直接调试。正如 debugging_node.md 所介绍的VS Code 内置了 Node 调试器在index.js中点击行号左侧设置断点例如fs.readFile回调内部按下F5选择 Node.js 环境启动调试在浏览器访问http://localhost:8080/程序会在断点处暂停你可以在变量面板中检查req.url、filePath等关键变量的实际值。调试时注意服务器进程是持续运行的改动index.js后需要重启node index.js才能生效部分 Node 版本支持--watch参数实现文件变更自动重启。七、知识检查与自查清单完成项目后不妨用以下问题检验自己是否真正掌握http.createServer的回调函数在什么时机被调用回调参数req和res分别代表什么req.url能拿到什么路径与查询字符串是否混在一起fs.readFile为什么是异步的如果改成fs.readFileSync会有什么影响为什么要用path.join(__dirname, filePath)而不是直接拼接字符串当用户访问一个不存在的路径时服务器返回的是200 404 页面内容还是真正的 404 状态码两者的差别是什么如何在不修改源码的前提下更换监听端口将以上问题与 getting_started.md 的 HTTP 模块、fs 模块、URL 类知识点对照复习然后就可以带着对原生 Node 服务器的完整认知进入本模块后续的 project_basic_informational_site.md 验收环节或继续学习 Express 等更高层框架了。【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考