如何在 HTML 页面中显示 Node.js 后端获取的数组数据-js教程-PHP中文网

如何在 HTML 页面中显示 Node.js 后端获取的数组数据

本文讲解如何通过 Express 提供 API 接口，将 Node.js 中爬取并处理的数组数据安全、正确地传递到前端 HTML 页面并渲染在标签中，避免前后端脚本混用导致的运行错误。

本文讲解如何通过 express 提供 api 接口，将 node.js 中爬取并处理的数组数据安全、正确地传递到前端 html 页面并渲染在 `

` 标签中，避免前后端脚本混用导致的运行错误。

在 Node.js 服务端（如使用 Express）中直接操作浏览器 DOM 是不可行的——index.js 是运行在服务器环境的 Node.js 脚本，而 <script src="index.js"></script> 会尝试在浏览器中执行它，这必然失败（Node.js API 如 require, axios 等在浏览器中不存在）。因此，必须采用「前后端分离」的标准模式：后端提供数据接口，前端通过 HTTP 请求获取并渲染数据。

✅ 正确实现步骤

1. 修改后端：创建 RESTful API 接口

在 index.js 中，移除直接调用 axios(url) 的顶层逻辑（它会在服务启动时立即执行，且无法响应用户请求），改为定义一个 Express 路由（如 /getArray），仅在收到 HTTP GET 请求时执行爬取与返回：

const axios = require('axios');
const cheerio = require('cheerio');
const express = require('express');

const app = express();
const PORT = 8080;
const url = 'MY URL GOES HERE'; // 替换为真实目标 URL

// 静态文件托管：让 Express 服务 index.html
app.use(express.static('.')); // 或指定路径如 './public'

// ✅ 关键：定义数据接口
app.get('/getArray', async (req, res) => {
  try {
    const response = await axios.get(url);
    const $ = cheerio.load(response.data);
    const textArray = [];

    $('.CLASSNAME').each((i, elem) => {
      textArray.push({ myTextArray: $(elem).text().trim() });
    });

    console.log('✅ 爬取完成，共', textArray.length, '项');
    res.json(textArray); // 直接返回 JSON，无需 JSON.stringify —— res.json() 自动处理
  } catch (err) {
    console.error('❌ 爬取失败:', err.message);
    res.status(500).json({ error: '数据获取失败' });
  }
});

app.listen(PORT, () => {
  console.log(`✅ 服务已启动：http://localhost:${PORT}`);
});

? 注意：

dmap-jsapi-skill
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

使用 async/await 替代 .then() 提升可读性与错误捕获能力；

res.json() 比 res.send(JSON.stringify(...)) 更规范，自动设置 Content-Type: application/json；

添加 try/catch 全面处理网络或解析异常；

express.static('.') 可直接服务当前目录下的 index.html（无需 app.use('/', ...) 多余配置）。

2. 修改前端：用 Axios 发起请求并更新 DOM

在 index.html 中，删除 <script src="index.js"></script>（这是根本性错误），改用浏览器兼容的 Axios CDN，并通过 fetch 或 Axios 发起跨域请求（确保后端允许，开发阶段可暂不设 CORS，因同源 localhost:8080 访问自身）：



  <meta charset="UTF-8"><title>爬取结果展示</title><h1 class="headline">这是爬取的文本列表</h1>
  <p class="array">加载中...</p>

  <!-- 浏览器版 Axios -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>
    // ✅ 前端发起请求（注意端口需与后端一致）
    axios
      .get('http://localhost:8080/getArray') // 显式指定完整 URL
      .then((response) => {
        const data = response.data;
        const pElement = document.querySelector('.array');

        if (Array.isArray(data) && data.length > 0) {
          // 将数组内容格式化为易读字符串（示例：每项换行）
          const displayText = data
            .map((item, i) => `${i + 1}. ${item.myTextArray}`)
            .join('<br>');
          pElement.innerHTML = displayText;
        } else {
          pElement.textContent = '暂无数据';
        }
      })
      .catch((error) => {
        console.error('⚠️ 前端请求失败:', error);
        document.querySelector('.array').textContent = 
          `加载失败：${error.response?.statusText || error.message}`;
      });
  </script>

⚠️ 关键注意事项：

端口必须匹配：若后端 app.listen(8080)，前端请求地址必须是 http://localhost:8080/getArray；

禁止跨域调试陷阱：若 HTML 通过 file:// 协议双击打开，浏览器会拦截请求（CORS）。务必通过 http://localhost:8080 访问页面；

安全性提醒：生产环境需配置 CORS（cors 中间件），并避免暴露敏感爬取逻辑；

性能优化：真实项目中应添加加载状态、错误重试、防重复请求等机制。