Java服务端获取的Hacker News数据如何传递到React前端展示

首先明确回答你的核心疑问：是的，需要让React端向Java服务端发起GET请求来获取数据，这是前后端分离架构下的标准交互方式，完整实现步骤如下：

第一步：改造Java程序为HTTP接口服务 #

你当前的Java程序仅能本地运行处理数据，需要先封装为可接收HTTP请求的Web服务，推荐用Spring Boot快速实现：

• 引入Spring Web依赖，Maven项目可直接在pom.xml中添加对应依赖坐标
• 新建Controller控制层类，对外暴露GET接口，接口内部直接调用你已经完成的Hacker News数据解析逻辑，返回解析后的结构化JSON数据
• 配置跨域支持：在Controller类上添加@CrossOrigin(origins = "http://localhost:3000")注解，适配React本地开发环境默认3000端口的跨域请求需求

最简Controller代码参考：

@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "http://localhost:3000")
public class HackerNewsController {
    // 注入你已实现的数据处理业务类
    @Autowired
    private HackerNewsService hackerNewsService;

    @GetMapping("/hacker-news")
    public List<HackerNewsItem> getList() {
        // 调用已完成的解析逻辑返回数据
        return hackerNewsService.getParsedData();
    }
}

启动Java服务后，直接在浏览器访问http://localhost:8080/api/hacker-news，如果能正常看到返回的JSON数据，说明后端接口配置完成。

第二步：React侧发起请求获取数据 #

不需要额外复杂配置，直接在React组件中编写请求逻辑即可，推荐用函数组件+useEffect钩子实现：

• 可以直接用浏览器原生fetch API发起请求，也可以安装axios库简化请求处理逻辑
• 在组件挂载时触发GET请求，请求地址为Java后端的接口地址，拿到返回数据后存入useState状态变量，再渲染到页面中

最简React组件代码参考：

import { useState, useEffect } from 'react';

function NewsList() {
  const [news, setNews] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 向Java后端发起GET请求
    fetch('http://localhost:8080/api/hacker-news')
      .then(res => res.json())
      .then(data => {
        setNews(data);
        setLoading(false);
      })
      .catch(err => console.error('请求失败：', err));
  }, []);

  if (loading) return <div>加载中...</div>;

  return (
    <div className="news-container">
      <h2>Hacker News 内容列表</h2>
      <ul>
        {news.map(item => (
          <li key={item.id}>
            <h3>{item.title}</h3>
            <p>作者：{item.by} | 评分：{item.score}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default NewsList;

常见问题排查 #

• 若请求报跨域错误，优先检查Java后端的跨域配置是否正确，生产环境可通过Nginx反向代理统一前后端端口彻底避免跨域问题
• 若拿不到返回数据，先直接在浏览器访问Java接口地址，确认接口本身可正常返回数据后，再排查React侧的请求地址是否写错
• 项目上线部署时，将React代码中的请求地址替换为服务端的公网域名或IP对应的接口地址即可

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