新闻详情

任务清单
前端实现新闻详情页（根据路由参数id调用 /news/{id}）。
操作步骤
步骤1：创建新闻详情页

<!-- src/views/Detail.vue -->
<template>
  <div class="detail-container">
    <el-card v-loading="loading">
      <template v-if="news">
        <h2>{{ news.title }}</h2>
        <div class="info">
          <span>作者：{{ news.authorName || '匿名' }}</span>
          <span>发布时间：{{ news.publishTime }}</span>
          <span>浏览量：{{ news.viewCount }}</span>
        </div>
        <div class="content">{{ news.content }}</div>
        <div class="actions">
          <el-button @click="$router.back()">返回首页</el-button>
          <el-button type="primary" @click="goToEdit" v-if="isOwner">编辑</el-button>
          <el-button type="danger" @click="handleDelete" v-if="isOwner">删除</el-button>
        </div>
      </template>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getNewsDetail, deleteNews } from '../api/news'
import { useUserStore } from '../stores/user'
import { ElMessage, ElMessageBox } from 'element-plus'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
const news = ref(null)
const loading = ref(false)

const isOwner = computed(() => {
  return news.value && userStore.username && news.value.authorName === userStore.username
})

const loadDetail = async () => {
  loading.value = true
  try {
    const res = await getNewsDetail(route.params.id)
    if (res.code === 200) {
      news.value = res.data
    } else {
      ElMessage.error(res.message)
    }
  } finally {
    loading.value = false
  }
}

const goToEdit = () => {
  router.push(`/edit/${news.value.id}`)
}

const handleDelete = async () => {
  try {
    await ElMessageBox.confirm('确定删除该新闻吗？', '提示', { type: 'warning' })
    const res = await deleteNews(news.value.id)
    if (res.code === 200) {
      ElMessage.success('删除成功')
      router.push('/home')
    } else {
      ElMessage.error(res.message)
    }
  } catch {}
}

onMounted(loadDetail)
</script>

<style scoped>
.detail-container { max-width: 800px; margin: 40px auto; }
.info { color: #909399; font-size: 14px; margin: 16px 0; }
.info span { margin-right: 20px; }
.content { font-size: 16px; line-height: 1.8; margin: 20px 0; }
.actions { margin-top: 20px; }
</style>

在详情页面不能正确显示作者名字，下面是此BUG的修改
步骤2：后端代码修改
News中新增如下代码
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);
         User user = userService.getById(news.getUserId());
         news.setUserName(user.getUsername());
         return Result.success(news);
     } else {
         return Result.error("新闻不存在");
     }
 }

步骤3：前端修改
前端打开Detail.vue，快捷键ctrl +h，把authorName替换为username,选全部替换
运行测试， 在详情页面已经能正常显示作者名字了。