Spring Boot调用IMDb API返回null、序列化报错及HTML渲染问题

一、首次调用接口返回字段全为null修复 #

该问题核心原因是IMDb Top250公开API的返回结构并非直接平铺电影列表字段，根节点自带items、errorMessage等外层属性，直接用电影实体类映射时字段匹配失败，就会出现所有属性值为null的情况。

修复时需要按照接口实际返回结构定义映射实体，核心代码示例如下：

// 外层包装类，对应API返回的根结构
public class ImdbResponseWrapper {
    // 对应接口返回的电影列表字段，字段名需和接口返回的key完全一致，可通过@JsonProperty做别名绑定
    private List<ImdbMovie> items;
    private String errorMessage;

    // 必须提供public权限的无参构造
    public ImdbResponseWrapper() {}

    // 补全所有字段的getter、setter方法
    public List<ImdbMovie> getItems() {
        return items;
    }

    public void setItems(List<ImdbMovie> items) {
        this.items = items;
    }

    public String getErrorMessage() {
        return errorMessage;
    }

    public void setErrorMessage(String errorMessage) {
        this.errorMessage = errorMessage;
    }
}

单部电影的ImdbMovie实体类，按照接口返回的rank、title、year、image、imDbRating等字段逐一对应定义，同样需要添加无参构造、getter、setter方法。

RestTemplate调用逻辑同步修改，不要直接映射电影列表类，改为映射包装类：

// 错误写法：直接映射List<ImdbMovie>，字段匹配失败返回全null
// ResponseEntity<List<ImdbMovie>> resp = restTemplate.getForEntity(apiUrl, List.class);
// 正确写法
ImdbResponseWrapper responseBody = restTemplate.getForObject(apiUrl, ImdbResponseWrapper.class);
// 从包装类中取出实际的电影列表数据
List<ImdbMovie> top250Movies = responseBody.getItems();

注意：如果接口返回字段名和Java驼峰命名规则不匹配，可在字段上添加@JsonProperty("接口对应key名")注解做绑定，避免匹配失败。

二、新增ResponseWrapper后触发500、Jackson序列化报错修复 #

报错栈提示找不到ResponseWrapper可用序列化器、空Bean无法序列化，核心排查点共3个：

• 检查Wrapper类及内部嵌套的电影实体类，是否添加了public修饰的getter/setter方法。Jackson默认通过getter方法识别可序列化属性，没有对应访问方法时就会将类判定为空Bean，抛出序列化异常。
• 检查实体类是否提供了public权限的无参构造函数。Jackson反序列化时需要先实例化空对象，再逐字段赋值，缺少无参构造会导致实例化失败。
• 检查类、字段上的Jackson注解，不要给属性或getter方法误加@JsonIgnore注解，该注解会标记属性不参与序列化/反序列化流程。

如果用Lombok简化代码，直接在两个实体类上添加@Data和@NoArgsConstructor注解即可，无需手写getter/setter、构造方法，能解决绝大多数这类序列化报错。

三、接口修复后结合HTML美观展示电影列表方案 #

不要直接在Controller层返回JSON数据，可整合Spring Boot默认支持的Thymeleaf模板引擎渲染HTML页面，实现响应式的电影列表排版，步骤如下：

1. 在pom.xml中引入Thymeleaf依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2. 在src/main/resources/templates目录下新建movieList.html模板文件，采用卡片网格布局做样式适配，示例代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>IMDb Top250 电影榜单</title>
    <style>
        * {margin: 0; padding: 0; box-sizing: border-box;}
        body {background-color: #f5f5f5; padding: 20px;}
        .container {max-width: 1200px; margin: 0 auto;}
        h1 {text-align: center; color: #222; margin-bottom: 30px;}
        .movie-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px;}
        .movie-card {position: relative; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.2s;}
        .movie-card:hover {transform: translateY(-5px);}
        .movie-rank {position: absolute; top:0; left:0; background: #e50914; color: #fff; padding: 4px 8px; border-radius: 0 0 8px 0; font-weight: bold;}
        .movie-poster {width: 100%; height: 320px; object-fit: cover;}
        .movie-info {padding: 12px;}
        .movie-title {font-size: 16px; font-weight: 600; color: #222; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
        .movie-meta {font-size: 14px; color: #666; display: flex; justify-content: space-between; align-items: center;}
        .rating {color: #f5c518; font-weight: bold;}
    </style>
</head>
<body>
    <div class="container">
        <h1>IMDb Top 250 经典电影榜单</h1>
        <div class="movie-grid">
            <!-- 循环渲染后端传入的电影列表 -->
            <div th:each="movie : ${movieList}" class="movie-card">
                <div class="movie-rank" th:text="'TOP ' + ${movie.rank}"></div>
                <img class="movie-poster" th:src="${movie.image}" th:alt="${movie.title}">
                <div class="movie-info">
                    <div class="movie-title" th:text="${movie.title}" th:title="${movie.title}"></div>
                    <div class="movie-meta">
                        <span th:text="${movie.year}"></span>
                        <span class="rating" th:text="'★ ' + ${movie.imDbRating}"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

3. 修改Controller层逻辑，将获取到的电影列表存入Model，跳转至HTML模板，不要直接返回实体对象：

@Controller
public class MovieController {
    // 提前配置并注入RestTemplate实例
    @GetMapping("/top250")
    public String showTop250List(Model model) {
        ImdbResponseWrapper resp = restTemplate.getForObject("替换为实际的IMDb接口请求地址", ImdbResponseWrapper.class);
        model.addAttribute("movieList", resp.getItems());
        // 返回templates目录下的模板文件名，无需加.html后缀
        return "movieList";
    }
}

启动服务后访问对应接口地址，即可看到自适应屏幕尺寸、带海报、排名、评分信息的电影卡片列表，交互和视觉效果都比直接返回JSON更友好。

额外提示：调用IMDb接口时记得按官方要求携带API Key参数，RestTemplate可按需配置请求头、超时时间，避免调用被拦截。

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