如何将SQLite3行数据传入HTML页面？Node.js路由疑问

兄弟，问题核心在于res.sendFile只是静态返回HTML文件，它没有能力把后端的数据库数据注入到页面里。要实现数据传递，你需要补充以下几个关键步骤：

方法一：使用模板引擎（推荐，适合服务端渲染场景） #

这是最直接的方案，通过模板引擎把数据和HTML模板结合后再返回给浏览器。

1. 安装并配置模板引擎 #

选一个简单易上手的，比如EJS（也可以用Pug、Handlebars，原理类似）：

• 先安装依赖：

  npm install ejs
  

• 在你的Node.js代码里配置Express的视图引擎：

  const express = require('express');
  const path = require('path');
  const app = express();
  
  // 设置视图引擎为EJS
  app.set('view engine', 'ejs');
  // 设置模板文件存放的目录（默认是views文件夹，这里显式指定更清晰）
  app.set('views', path.join(__dirname, 'views'));
  

2. 把静态HTML改成模板文件 #

把原来的test.html重命名为test.ejs，放到刚才配置的views文件夹里。然后在需要展示数据的地方，用EJS的模板语法插入数据：
比如你从SQLite拿到了一个用户列表数组userList，就可以在EJS里循环渲染：

<!DOCTYPE html>
<html>
<head>
  <title>SQLite数据展示</title>
</head>
<body>
  <h1>用户列表</h1>
  <ul>
    <!-- 循环遍历后端传过来的data数组 -->
    <% data.forEach(item => { %>
      <li>ID: <%= item.id %>，姓名: <%= item.name %></li>
    <% }) %>
  </ul>
</body>
</html>

3. 查询SQLite数据并渲染模板 #

在路由里先查询SQLite的数据，再用res.render把数据传给模板：

const sqlite3 = require('sqlite3').verbose();

// 连接SQLite数据库
const db = new sqlite3.Database('./your-db-name.db');

app.get('/', (req, res) => {
  // 查询数据
  db.all('SELECT * FROM your-table-name', (err, rows) => {
    if (err) {
      throw err;
    }
    // 把查询到的rows数据传给test.ejs模板
    res.render('test', { data: rows });
  });
});

方法二：前端AJAX请求数据（适合前后端分离场景） #

如果不想用模板引擎，也可以让前端主动请求接口拿数据，再动态渲染页面：

1. 后端新增一个接口返回JSON数据 #

app.get('/api/data', (req, res) => {
  db.all('SELECT * FROM your-table-name', (err, rows) => {
    if (err) {
      res.status(500).json({ error: err.message });
      return;
    }
    res.json(rows);
  });
});

2. 前端HTML里用JS请求数据并渲染 #

修改test.html，添加JS代码：

<!DOCTYPE html>
<html>
<head>
  <title>SQLite数据展示</title>
</head>
<body>
  <h1>用户列表</h1>
  <ul id="data-list"></ul>

  <script>
    // 后端接口地址
    fetch('/api/data')
      .then(response => response.json())
      .then(data => {
        const list = document.getElementById('data-list');
        // 循环生成列表项
        data.forEach(item => {
          const li = document.createElement('li');
          li.textContent = `ID: ${item.id}，姓名: ${item.name}`;
          list.appendChild(li);
        });
      })
      .catch(err => console.error('请求数据失败:', err));
  </script>
</body>
</html>

然后还是用res.sendFile返回这个HTML文件就行，前端会自己去请求数据并渲染。

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