如何用Node.js+Express向客户端发送数据并同时提供HTML页面？

嘿，我来帮你搞定这个问题！首先得说明为啥你原来的代码行不通：在Express里，一旦你调用了res.send()或者res.sendFile()，HTTP响应就已经完成并结束了，所以你第二个res.sendFile()根本不会被执行，这就是为啥你的客户端既没拿到字符串数据，也没正确加载HTML页面的原因。

下面给你三种实用的解决方案，你可以根据自己的场景选：

方案1：直接把数据嵌入HTML（适合简单场景） #

这个思路是先读取你的HTML文件，把要传递的数据替换到HTML里的占位符，再把修改后的HTML发送给客户端。

服务器端代码 #

const fs = require('fs');
app.get('/home', function (req, res) {
  // 你要传递的数据
  const serverData = "String with info I want in HTML";
  
  // 读取HTML文件
  fs.readFile(__dirname + '/home.html', 'utf8', (err, htmlContent) => {
    if (err) {
      return res.status(500).send('加载页面出错啦');
    }
    // 替换HTML里的占位符
    const finalHtml = htmlContent.replace('{{SERVER_DATA}}', serverData);
    // 发送修改后的HTML
    res.send(finalHtml);
  });
});

客户端HTML（home.html） #

<!DOCTYPE html>
<html>
<body>
  <!-- 可以直接在页面显示数据 -->
  <p>服务器传来的数据：{{SERVER_DATA}}</p>

  <script>
    // 也可以在JS里使用数据
    const receivedData = "{{SERVER_DATA}}";
    alert(receivedData);
  </script>
</body>
</html>

方案2：使用模板引擎（适合动态内容多的项目） #

如果你的页面需要频繁渲染动态数据，用模板引擎会更方便，比如EJS就是个轻量好用的选择。

步骤1：安装并配置EJS #

先安装依赖：

npm install ejs

然后在你的Express服务器里配置模板引擎：

app.set('view engine', 'ejs');
// 告诉Express视图文件存放在views文件夹下（你可以自己调整路径）
app.set('views', __dirname + '/views');

步骤2：修改HTML为EJS模板 #

把你的home.html改名为home.ejs，放在views文件夹里，然后这样写：

<!DOCTYPE html>
<html>
<body>
  <p>服务器传来的数据：<%= serverData %></p>

  <script>
    const receivedData = '<%= serverData %>';
    alert(receivedData);
  </script>
</body>
</html>

步骤3：服务器端渲染模板并发送 #

app.get('/home', function (req, res) {
  const serverData = "String with info I want in HTML";
  // 渲染模板并传递数据
  res.render('home', { serverData: serverData });
});

方案3：分开页面路由和API路由（适合前后端分离场景） #

如果想把页面和数据完全分开，你可以开两个路由：一个返回HTML页面，另一个专门返回数据，客户端加载页面后再通过AJAX请求获取数据。

服务器端代码 #

// 路由1：返回HTML页面
app.get('/home', function (req, res) {
  res.sendFile(__dirname + '/home.html');
});

// 路由2：专门返回数据的API
app.get('/api/home-data', function (req, res) {
  res.send("String with info I want in HTML");
});

客户端HTML（修正你的XHR代码） #

你原来的XHR代码没打开请求也没发送，所以拿不到数据，修改后：

<!DOCTYPE html>
<html>
<body>
  <script>
    const xhttp = new XMLHttpRequest();
    // 监听请求状态变化
    xhttp.onreadystatechange = function() {
      // 当请求完成且成功时
      if (this.readyState === 4 && this.status === 200) {
        alert(this.responseText); // 现在能拿到服务器的数据啦
      }
    };
    // 打开请求，指定API地址
    xhttp.open("GET", "/api/home-data", true);
    // 发送请求
    xhttp.send();
  </script>
</body>
</html>

你可以根据自己的项目需求选其中一种方案，新手的话先从方案1或者方案3开始试，更容易理解~

内容的提问来源于stack exchange，提问作者Kevin