新闻详情页

新闻详情

学习目标

• 设置前端实现新闻详情页

操作步骤

步骤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,选全部替换

运行测试， 在详情页面已经能正常显示作者名字了。