Express中如何通过GET请求调用API获取服务端数据实现用户交易流水查询

第一步：后端新增交易历史接口 #

你当前的代码里app.get("/*")是通配符路由，会匹配所有GET请求，所以新增的业务接口必须放在这个通配符路由前面，否则会被拦截无法触发。

1. 先安装接口请求工具，用来调用你已掌握的支付API：

npm install axios

2. 修改server.js，添加交易历史查询接口，参考代码如下：

const express = require("express");
const path = require("path" );
const bodyParser = require("body-parser");
// 引入刚安装的axios
const axios = require("axios");

const app = express();

app.use(bodyParser.json());
app.use("/static",express.static(path.resolve(__dirname, "frontend", "static")));

// 新增交易历史接口，必须放在通配符路由前面
app.get("/api/transaction-history", async (req, res) => {
  try {
    // 此处替换为你已掌握的支付API参数
    const payApiRes = await axios({
      method: "你已知的支付API请求METHOD",
      url: "你已知的支付API完整URL",
      headers: {
        // 按需添加支付API要求的鉴权信息、请求头等
      },
      params: {
        // 按需添加请求参数，比如用户ID、查询时间范围等
      }
    });
    // 按交易时间排序，时间早的在前、晚的在后，保证最新交易排在数组末尾
    const sortedList = payApiRes.data.sort((a, b) => {
      // 此处的timestamp替换为你接口返回的交易时间字段名
      return new Date(a.timestamp) - new Date(b.timestamp);
    });
    // 返回处理好的数据给前端
    res.json({
      success: true,
      data: sortedList
    });
  } catch (err) {
    console.error("查询交易历史出错：", err);
    res.status(500).json({
      success: false,
      msg: "查询失败"
    })
  }
});

app.get("/*", (req,res)=>{
    res.sendFile(path.resolve(__dirname,"frontend","index.html"));
});

app.listen(3001, ()=> console.log("Server Running..."));

如果你的交易数据存储在自有数据库中，把请求第三方支付API的逻辑替换为数据库查询逻辑即可，排序规则不变。

第二步：前端调用接口渲染列表 #

在你的前端index.html中添加列表容器，再写JS调用刚才写的后端接口渲染数据，参考代码如下：

<!-- 列表容器 -->
<div id="transaction-list"></div>

<script>
async function renderList() {
  try {
    const res = await fetch("/api/transaction-history");
    const result = await res.json();
    if (result.success) {
      const container = document.getElementById("transaction-list");
      // 直接遍历排序好的数组，旧交易在前、新交易在后，渲染后最新的自然在列表底部
      result.data.forEach(item => {
        const listItem = document.createElement("div");
        listItem.style.padding = "10px";
        listItem.style.borderBottom = "1px solid #eee";
        // 替换为你要展示的交易详情字段，比如交易号、金额、状态等
        listItem.innerHTML = `
          <p>交易时间：${new Date(item.timestamp).toLocaleString()}</p>
          <p>交易金额：¥${item.amount}</p>
          <p>交易状态：${item.status}</p>
        `;
        container.appendChild(listItem);
      })
    }
  } catch (err) {
    console.error("加载交易列表失败：", err);
  }
}
// 页面加载完成后自动调用
window.onload = renderList;
</script>

第三步：功能测试 #

• 重启express服务：执行node server.js
• 访问http://localhost:3001查看列表是否正常渲染，核对最新交易是否在列表底部
• 如果接口报错，先查看服务端控制台日志，核对支付API的请求参数、请求头是否符合规则

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