Express.js新手求助：GET请求数据直接显示在浏览器，如何改为预览？

你现在的代码是标准的API接口实现，返回的是纯JSON数据：

• 当你设置Content-Type: application/json并调用res.json(obj)时，浏览器识别到这是JSON格式的响应，就会默认展示格式化后的JSON文本，这是正常行为。

如果想要实现“预览形式”（也就是把数据渲染成美观的页面），有两种常用方案：

方案1：后端直接返回HTML预览页面 #

直接在接口里返回包含数据的HTML内容，让浏览器渲染成页面：

app.use(cors())
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));

app.get('/getProducts', (req,res) => {
  const obj = {
    data: 'jojo'
  };
  // 返回嵌入数据的HTML页面
  res.send(`
    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="UTF-8">
        <title>产品预览</title>
        <style>
          body { padding: 20px; font-family: Arial, sans-serif; }
          .preview-box { border: 1px solid #eee; padding: 15px; border-radius: 8px; }
        </style>
      </head>
      <body>
        <h1>产品数据预览</h1>
        <div class="preview-box">
          <p>数据内容：<strong>${obj.data}</strong></p>
        </div>
      </body>
    </html>
  `);
});

方案2：前端页面请求数据并渲染 #

后端依旧保留JSON接口（供前端调用），单独写一个前端页面来请求数据并展示：

第一步：配置Express静态文件目录 #

让Express可以访问前端静态页面：

app.use(cors())
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
// 添加静态文件目录，假设前端文件放在public文件夹下
app.use(express.static('public'));

// 保留原有的JSON接口
app.get('/getProducts', (req,res) => {
  const obj = {
    data: 'jojo'
  };
  res.json(obj);
});

第二步：创建前端预览页面 #

在项目根目录新建public文件夹，里面创建index.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>产品预览</title>
  <style>
    body { padding: 20px; font-family: Arial, sans-serif; }
    .preview-box { border: 1px solid #eee; padding: 15px; border-radius: 8px; margin-top: 20px; }
  </style>
</head>
<body>
  <h1>产品数据预览</h1>
  <div class="preview-box" id="data-box">加载中...</div>

  <script>
    // 请求后端接口获取数据
    fetch('/getProducts')
      .then(response => response.json())
      .then(data => {
        document.getElementById('data-box').innerHTML = `<p>数据内容：<strong>${data.data}</strong></p>`;
      })
      .catch(err => {
        document.getElementById('data-box').innerHTML = `<p style="color: red;">加载失败：${err.message}</p>`;
      });
  </script>
</body>
</html>

启动服务后访问http://localhost:端口号/index.html，就能看到渲染好的预览页面了。

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