如何将API返回的JSON格式文章作者数据展示在HTML中

你现在的核心问题是浏览器无法直接运行Node.js后端代码（你HTML里引入的news.route.js是Express路由文件，属于后端代码），而且缺少前端调用API并渲染数据的逻辑。下面给你两种可行的解决方向：

方向一：纯前端调用API渲染（客户端渲染） #

这种方式是前端通过fetch工具调用你的Express接口，拿到数据后动态生成DOM元素插入页面。

步骤1：修正HTML文件 #

移除对后端路由文件的引用，添加用于渲染数据的容器和前端脚本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章作者列表</title>
</head>
<body>
    <h1>文章作者</h1>
    <!-- 用于展示作者的容器 -->
    <div id="authors-container"></div>

    <script>
        // 调用Express接口获取数据并渲染
        async function loadAuthors() {
            try {
                // 假设你的Express服务运行在localhost:3000，接口路径是/news（根据实际路由挂载路径调整）
                const response = await fetch('http://localhost:3000/news');
                const authors = await response.json();
                
                const container = document.getElementById('authors-container');
                // 遍历作者数据，生成DOM元素
                authors.forEach(item => {
                    const authorElement = document.createElement('p');
                    authorElement.textContent = `作者：${item.articleAuthor}`;
                    container.appendChild(authorElement);
                });
            } catch (error) {
                console.error('加载作者数据失败：', error);
            }
        }

        // 页面加载时执行
        window.onload = loadAuthors;
    </script>
</body>
</html>

步骤2：确保Express服务正确挂载路由 #

在主入口文件（比如app.js）里挂载路由：

const express = require('express');
const app = express();
const newsRouter = require('./routes/news.route');

// 挂载路由，这里的/news就是前端调用的接口前缀
app.use('/news', newsRouter);

// 启动服务
app.listen(3000, () => {
    console.log('服务运行在http://localhost:3000');
});

方向二：服务器端渲染（SSR） #

如果需要更好的SEO或者不想让前端单独调用API，可以用EJS模板引擎让后端直接把数据渲染到HTML里。

步骤1：安装EJS模板引擎 #

npm install ejs

步骤2：配置Express使用EJS #

修改主入口文件app.js：

const express = require('express');
const app = express();
const newsRouter = require('./routes/news.route');

// 设置模板引擎为EJS
app.set('view engine', 'ejs');
// 设置模板文件存放目录（默认是views文件夹）
app.set('views', './views');

app.use('/news', newsRouter);

app.listen(3000, () => {
    console.log('服务运行在http://localhost:3000');
});

步骤3：修正并修改路由文件，渲染模板 #

注意：你之前的路由代码里const router = express();是错误的，应该用express.Router()创建路由对象：

const express = require("express");
const router = express.Router();
const { executeSQL } = require("../models/database/db_connect");

router.get("/", async (req, res) => {
  try {
    let data = await executeSQL("SELECT articleAuthor FROM articles");
    // 渲染views目录下的authors.ejs模板，并传入数据
    res.render('authors', { authors: data });
  } catch (error) {
    res.status(500).send('加载数据失败');
  }
});

module.exports = router; 

步骤4：创建EJS模板文件 #

在项目根目录新建views文件夹，里面创建authors.ejs：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章作者列表</title>
</head>
<body>
    <h1>文章作者</h1>
    <div id="authors-container">
        <% authors.forEach(item => { %>
            <p>作者：<%= item.articleAuthor %></p>
        <% }) %>
    </div>
</body>
</html>

额外注意事项 #

1. 跨域问题：如果前端和后端运行在不同端口，需要在Express里配置CORS，安装cors包并启用：

npm install cors

然后在app.js里添加：

const cors = require('cors');
app.use(cors());

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