《课次37：新闻详情》学习笔记

一、任务清单

1. 前端实现新闻详情页：根据路由参数 id 调用 /news/{id} 接口获取新闻详情并展示。
2. 修复作者名字显示 BUG：详情页无法正确显示作者名，需要后端返回作者信息，前端相应调整字段名。

二、操作步骤

步骤1：创建新闻详情页（前端）

在 views 文件夹下新建 Detail.vue 文件，页面结构大致如下：

<template>
  <div>
    <h2>{{ news.title }}</h2>
    <p>作者：{{ news.authorName || '匿名' }} 发布时间：{{ news.publishTime }} 浏览量：{{ news.viewCount }}</p>
    <p>{{ news.content }}</p>
    <div>
      <button>返回首页</button>
      <button>编辑</button>
      <button>删除</button>
    </div>
  </div>
</template>

步骤2：修复作者名字显示 BUG（后端）

在 News 实体类中新增 userName 字段：

// 在 News 实体类中添加
private String userName;

修改 NewsController 中的 getNewsDetail 方法：

@GetMapping("/{id}")
public Result<News> getNewsDetail(@PathVariable Integer id) {
    News news = newsService.getById(id);
    if (news != null) {
        // 增加浏览量
        news.setViewCount(news.getViewCount() + 1);
        newsService.updateById(news);
        // 查询发布者用户名并设置到 news 对象中
        User user = userService.getById(news.getUserId());
        news.setUserName(user.getUsername());
        return Result.success(news);
    } else {
        return Result.error("新闻不存在");
    }
}

说明：news 表中只有 user_id，没有作者名字字段。为了在详情页展示作者名，需要通过 user_id 查询 user 表获取 username，然后设置到 news 对象的 userName 字段中返回给前端。

步骤3：前端修改字段名

打开前端 Detail.vue 文件，按快捷键 Ctrl + H（全局替换），将 authorName 全部替换为 username。

三、BUG修复总结

Bug	问题表现	根本原因	修复方案
作者名无法显示	详情页作者显示为“匿名”或空白	news 表中只有 user_id，没有作者名字，后端未补充该信息	后端通过 user_id 查询 user 表获取 username 并设置到返回对象中；前端将字段名从 authorName 改为 username

四、笔记总结

步骤	核心内容
Detail.vue	新建新闻详情页面，展示标题、作者、发布时间、浏览量、正文等内容
后端 News 实体	新增 userName 字段，用于存放作者用户名
后端 Controller	getNewsDetail 方法中增加查询作者名的逻辑，通过 userService.getById(userId) 获取用户名
前端字段替换	将 authorName 全部替换为 username，与后端返回的字段名保持一致

本课次完成了新闻详情页的前端实现，并修复了作者名字无法正常显示的 BUG。核心思路是：后端在返回新闻详情时，通过 user_id 关联查询 user 表，将作者名填充到返回对象中，前端再做相应的字段名适配。