TAGS：                                                                                                                                                                          

从零玩转Node.js：手把手教你搭建HTTP服务器，新手也能写出高逼格后端！

首页 编程分享 PHP丨JAVA丨OTHER 正文

然我 转载 编程分享 2025-07-05 22:15:39

简介 想不想自己写一个后端服务器，让别人通过 http://localhost:1234 访问你开发的网页？其实没那么难！今天从零开始，用 Node.js 手把手教你搭建一个能处理 HTML、CSS、JS

想不想自己写一个后端服务器，让别人通过 http://localhost:1234 访问你开发的网页？其实没那么难！今天从零开始，用 Node.js 手把手教你搭建一个能处理 HTML、CSS、JS 的 HTTP 服务器，全程带代码实操

为什么选 Node.js？后端入门的 “最佳跳板”

提到后端开发，你可能会想到 Java、Python，但对前端开发者来说，Node.js 才是最友好的选择—— 因为它能用你熟悉的 JavaScript 写后端！

Node.js 的优势：

  • 语言统一：前端（浏览器）和后端（服务器）都用 JS，不用切换编程语言；
  • 上手简单：语法和前端 JS 几乎一样，学过 JS 就能快速入门；
  • 生态强大：有大量现成的模块（比如处理 HTTP、文件的工具），不用重复造轮子。

今天我们就用 Node.js 的内置模块，从零搭建一个能响应网页请求的服务器。

动手实操：3 步搭建你的第一个 HTTP 服务器

步骤 1：准备工作

  1. 安装 Node.js：去Node.js 官网下载安装
  2. 验证安装：打开命令行，输入 node -v

3. 新建项目文件夹：比如 my-node-server，在里面新建 server.js（服务器代码文件）。

步骤 2：写一行代码，启动最简易服务器

打开 server.js，输入以下代码：

// 1. 导入Node.js内置的http模块（处理HTTP请求的工具）
const http = require('http');

// 2. 创建服务器：定义“收到请求后该做什么”
const server = http.createServer((req, res) => {
  // req：请求对象（包含浏览器的请求信息，比如访问的地址）
  // res：响应对象（用于给浏览器返回内容）
  res.end('Hello Node.js Server! 这是我的第一个后端服务器～');
});

// 3. 启动服务器，监听1234端口
server.listen(1234, () => {
  console.log('服务器启动成功！访问地址：http://localhost:1234');
});

恭喜！你已经成功搭建了一个能工作的 HTTP 服务器～

升级服务器：让它能返回 HTML 网页

刚才的服务器只能返回文字，太简单了。接下来让它能返回 HTML 文件，就像真正的网站一样。

步骤 1：准备 HTML 文件

在 my-node-server 里新建 public 文件夹，再在 public 里新建 index.html：

<!-- public/index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>我的Node.js服务器</title>
</head>
<body>
  <h1>🎉 这是服务器返回的HTML页面！</h1>
  <p>通过Node.js搭建的HTTP服务器成功运行～</p>
</body>
</html>

步骤 2：修改服务器代码，返回 HTML

更新 server.js：

const http = require('http');
// 导入Node.js内置的文件系统模块（用于读取HTML文件）
const fs = require('fs');
// 导入路径处理模块（解决不同系统的路径格式问题）
const path = require('path');

const server = http.createServer((req, res) => {
  // 判断请求：如果是访问首页（GET方法 + 路径为/）
  if (req.method === 'GET' && req.url === '/') {
    // 读取public文件夹下的index.html
    const htmlPath = path.join(__dirname, 'public', 'index.html');
    
    // 用fs模块读取文件
    fs.readFile(htmlPath, (err, content) => {
      if (err) {
        // 如果读取失败（比如文件不存在），返回服务器错误
        res.writeHead(500); // 500是HTTP状态码，表示服务器出错
        res.end('服务器错误：找不到网页文件');
        return;
      }
      
      // 读取成功，返回HTML内容
      res.writeHead(200, { 
        'Content-Type': 'text/html' // 告诉浏览器：这是HTML文件
      });
      res.end(content); // content就是index.html的内容
    });
  } else {
    // 访问其他路径，返回404（找不到资源）
    res.writeHead(404);
    res.end('404 Not Found：找不到你要的页面～');
  }
});

server.listen(1234, () => {
  console.log('服务器启动成功！访问地址：http://localhost:1234');
});

测试效果：

重启服务器（命令行按 Ctrl+C 停止，再运行 node server.js）

如果觉得每次重启过于麻烦，可以试试nodemon，自动监听文件变更并重启服务，实时生效修改。

npm install -g nodemon

# 监听文件
nodemon server.js

🚀 总结：nodemon 是 Node.js 开发效率的“加速器”，合理配置可覆盖 90% 的热重载需求

再升级：让服务器支持 CSS 和 JS

一个完整的网页需要 HTML、CSS、JS 配合，我们让服务器能返回这些文件：

步骤 1：准备 CSS 和 JS 文件

在 public 文件夹里新建：

  • style.css（样式文件）：

    body {
  background: #f0f0f0;
  text-align: center;
  padding: 50px;
  font-size: 20px;
}
h1 {
  color: #333;
}

  • script.js（脚本文件）：

    alert('恭喜！JS文件也成功加载啦～');

步骤 2：修改 HTML，引入 CSS 和 JS

更新 public/index.html：

<!DOCTYPE html>
<html>
<head>
  <title>我的Node.js服务器</title>
  <link rel="stylesheet" href="/style.css"> <!-- 引入CSS -->
</head>
<body>
  <h1>🎉 这是服务器返回的HTML页面！</h1>
  <p>通过Node.js搭建的HTTP服务器成功运行～</p>
  <script src="/script.js"></script> <!-- 引入JS -->
</body>
</html>

步骤 3：修改服务器代码，支持 CSS 和 JS

更新 server.js，添加处理 CSS 和 JS 的逻辑：


  // 处理CSS文件
  else if (req.method === 'GET' && req.url === '/style.css') {
    const cssPath = path.join(__dirname, 'public', 'style.css');
    fs.readFile(cssPath, (err, content) => {
      if (err) { res.writeHead(500); res.end('服务器错误'); return; }
      res.writeHead(200, { 'Content-Type': 'text/css' }); // 告诉浏览器这是CSS
      res.end(content);
    });
  }

  // 处理JS文件
  else if (req.method === 'GET' && req.url === '/script.js') {
    const jsPath = path.join(__dirname, 'public', 'script.js');
    fs.readFile(jsPath, (err, content) => {
      if (err) { res.writeHead(500); res.end('服务器错误'); return; }
      res.writeHead(200, { 'Content-Type': 'text/javascript' }); // 告诉浏览器这是JS
      res.end(content);
    });
  }

  // 其他路径返回404
  else {
    res.writeHead(404);
    res.end('404 Not Found');
  }
});

测试效果：

重启服务器后访问 http://localhost:1234，会看到：

一个支持 HTML+CSS+JS 的完整服务器就搭建好啦！

关键知识点：服务器代码里的 “黑话” 解析

1. require('http')：Node.js 的 “工具箱”

  • http 是 Node.js 内置的模块（相当于别人写好的工具），能帮我们快速创建 HTTP 服务器，不用自己从零实现网络通信逻辑；
  • 类似的还有 fs（文件系统，操作文件）、path（处理路径），这些都是 Node.js 给我们的 “现成工具”。

2. createServer：定义服务器的 “工作流程”

  • http.createServer((req, res) => { ... }) 里的回调函数，是服务器的 “核心逻辑”：

    • req（request）：包含浏览器的请求信息，比如 req.url 是访问的路径（/ 或 /style.css），req.method 是请求方法（通常是 GET）；
    • res（response）：用于给浏览器返回内容，res.end('内容') 是发送内容的最简单方式。

3. res.writeHead(状态码, { ... })：告诉浏览器 “内容类型”

  • 状态码：3 位数字，代表请求处理结果。比如 200 是 “成功”，404 是 “找不到资源”，500 是 “服务器出错”；
  • Content-Type：告诉浏览器返回的是什么类型的内容，比如 text/html 是 HTML，text/css 是 CSS，浏览器会根据这个来正确解析内容（否则可能乱码）。

转载链接：https://juejin.cn/post/7522547529633611803


Tags：

6 0 0 0


本篇评论 —— 揽流光，涤眉霜，清露烈酒一口话苍茫。


    声明：参照站内规则，不文明言论将会删除，谢谢合作。


      最新评论




ABOUT ME

Blogger：袅袅牧童 | Arkin

Ido：PHP攻城狮

WeChat：nnmutong

Email：nnmutong@icloud.com

点击排行

最新评论

猜您喜欢

标签云

友情链接