从AWS服务器后端获取txt数据并在前端HTML展示的技术求助

核心逻辑 #

浏览器里的前端HTML没有权限直接访问服务器本地文件，必须通过一个后端服务来读取txt文件、执行计算，再把结果返回给前端页面展示。

1. 用Node.js搭建后端服务 #

既然你熟悉fs模块，用Node.js做后端最直接：

• 在服务器上创建项目文件夹，初始化项目：

  mkdir data-display-service && cd data-display-service
  npm init -y
  

• 安装轻量Web框架express：

  npm install express
  

• 创建server.js文件，实现文件读取、计算和接口返回：

  const express = require('express');
  const fs = require('fs');
  const path = require('path');
  
  const app = express();
  const PORT = 3000;
  
  // 托管前端HTML文件，把你的HTML放到项目下的public文件夹里
  app.use(express.static('public'));
  
  // 提供数据计算接口
  app.get('/get-result', (req, res) => {
    const txtFilePath = path.join(__dirname, 'your-data.txt'); // 替换成你的txt文件实际路径
  
    fs.readFile(txtFilePath, 'utf8', (err, rawData) => {
      if (err) {
        console.error('读取文件失败:', err);
        return res.status(500).json({ error: '数据读取失败' });
      }
  
      // 这里替换成你的实际计算逻辑
      const calculatedResult = calculate(rawData);
      res.json({ result: calculatedResult });
    });
  });
  
  // 示例计算函数：假设txt每行是一个数字，求和
  function calculate(rawData) {
    const numbers = rawData.trim().split('\n').map(Number).filter(n => !isNaN(n));
    return numbers.reduce((sum, num) => sum + num, 0);
  }
  
  app.listen(PORT, () => {
    console.log(`服务运行在端口 ${PORT}`);
  });
  

• 创建public文件夹，放入你的HTML页面，添加JS定时请求接口更新数据：

  <!DOCTYPE html>
  <html>
  <head>
    <title>实时计算结果</title>
  </head>
  <body>
    <h2>最新计算结果：<span id="result">加载中...</span></h2>
    <script>
      // 定时请求后端接口，5秒更新一次
      function updateResult() {
        fetch('/get-result')
          .then(res => res.json())
          .then(data => {
            document.getElementById('result').textContent = data.result;
          })
          .catch(() => {
            document.getElementById('result').textContent = '获取失败';
          });
      }
  
      updateResult();
      setInterval(updateResult, 5000);
    </script>
  </body>
  </html>
  

2. 用systemctl托管服务 #

让服务后台运行、开机自启：

• 创建systemd服务文件：

  sudo nano /etc/systemd/system/data-display.service
  

• 写入以下内容（替换占位符为你的实际信息）：

  [Unit]
  Description=Data Calculation Display Service
  After=network.target
  
  [Service]
  User=ec2-user # 替换成你的服务器用户名，比如ubuntu
  WorkingDirectory=/home/ec2-user/data-display-service # 替换成你的项目文件夹路径
  ExecStart=/usr/bin/node server.js # 用`which node`查看你的node路径
  Restart=always
  RestartSec=10
  
  [Install]
  WantedBy=multi-user.target
  

• 配置并启动服务：

  sudo systemctl daemon-reload
  sudo systemctl start data-display.service
  sudo systemctl enable data-display.service
  

• 查看服务状态：

  sudo systemctl status data-display.service
  

3. 访问页面 #

在AWS安全组里开放3000端口的入站规则，然后通过http://你的服务器公网IP:3000访问页面即可。

注意事项 #

• 确保txt文件权限允许Node.js进程读取，可执行chmod 644 your-data.txt调整权限
• 如果想用80默认端口，可修改server.js的PORT为80，或用Nginx反向代理（新手优先用3000端口）
• 根据你的实际需求修改calculate函数里的计算逻辑

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