1
package com.example.demo.dto;
2

3
import com.example.demo.entity.Article;
4
import lombok.Data;
5
import lombok.NoArgsConstructor; // 确保有无参构造函数，方便JSON反序列化
6
import lombok.AllArgsConstructor; // 如果你希望有一个包含所有字段的构造函数
7

8
import java.time.LocalDateTime;
9

10
/**
11
 * 文章详情DTO，包含作者用户名
12
 */
13
@Data // 自动生成 Getter, Setter, toString, equals, hashCode 方法
14
@NoArgsConstructor // 自动生成无参构造函数
15
@AllArgsConstructor // 自动生成全参构造函数 (包括 authorUsername)
16
public class ArticleDetailDto {
17
    private Integer id;
18
    private String title;
19
    private String content;
20
    private Integer userId;
21
    private String authorUsername; // 作者用户名
22
    private LocalDateTime createTime;
23
    private LocalDateTime updateTime;
24
    private Integer viewCount;
25
    private Integer status;
26

27
    public ArticleDetailDto(Article article, String authorUsername) {
28
        this.id = article.getId();
29
        this.title = article.getTitle();
30
        this.content = article.getContent();
31
        this.userId = article.getUserId();
32
        this.createTime = article.getCreateTime();
33
        this.updateTime = article.getUpdateTime();
34
        this.viewCount = article.getViewCount();
35
        this.status = article.getStatus();
36
        this.authorUsername = authorUsername; // 设置作者用户名
37
    }
38
}

1
/**
2
 * 根据文章ID获取文章详情
3
 * @param articleId 文章ID
4
 * @return 包含文章详情的 Optional<Article> 对象，如果找不到则为 Optional.empty()
5
 */
6
Optional<ArticleDetailDto> getArticleById(Integer articleId);

1
@Autowired
2
private UserMapper userMapper;
3

4
@Override
5
public Optional<ArticleDetailDto> getArticleById(Integer articleId) {
6
    Optional<Article> optionalArticle = Optional.ofNullable(baseMapper.selectById(articleId));
7
    if (optionalArticle.isPresent()) {
8
        int userId = optionalArticle.get().getUserId();
9
        String username = userMapper.selectById(userId).getUsername();
10
        ArticleDetailDto articleDetailDto = new ArticleDetailDto(optionalArticle.get(), username);
11
        return Optional.of(articleDetailDto);
12
    }
13
    return Optional.empty();
14
}

1
/**
2
 * 根据文章ID获取文章详情
3
 * @param id 文章ID，通过路径变量传入
4
 * @return SaResult 包含文章详情或错误信息
5
 */
6
@GetMapping("/{id}") // 定义一个 GET 接口，路径中包含文章ID
7
public SaResult getArticleDetail(@PathVariable("id") Integer id) {
8
    Optional<ArticleDetailDto> articleOptional = articleService.getArticleById(id);
9

10
    if (articleOptional.isPresent()) {
11
        return SaResult.ok("文章详情获取成功").setData(articleOptional.get());
12
    } else {
13
        return SaResult.error("未找到指定ID的文章");
14
    }
15
}

1
/**
2
 * 根据文章ID获取文章详情
3
 * @param id 文章ID
4
 * @returns Promise<Article> 文章详情
5
 */
6
export const getArticleDetail = (id: number): Promise<Article> => {
7
    return api.get(`/article/${id}`); // 调用后端接口
8
};

1
{
2
    path: '/article/:id', // **新增路由：文章详情页，:id 是动态参数**
3
    name: 'articleDetail',
4
    component: () => import('@/views/ArticleDetail.vue'),
5
    props: true, // 允许组件通过 props 接收路由参数
6
},

1
export interface Article {
2
    id: number
3
    title: string
4
    content: string
5
    userId: number
6
    createTime: string | Date
7
    updateTime?: string | Date  // 可选
8
    status?: 0 | 1  // 0: 草稿, 1: 已发布
9
    viewCount?: number
10
    authorUsername?: string
11
}

1
<template>
2
  <div class="article-detail-container">
3
    <el-card class="article-card" v-loading="loading">
4
      <template #header>
5
        <div class="card-header">
6
          <h2>{{ article?.title }}</h2>
7
          <el-text class="mx-1" type="info" v-if="article?.authorUsername">作者: {{ article?.authorUsername }}</el-text>
8
        </div>
9
      </template>
10
      <div class="article-content" v-html="formattedContent"></div>
11
      <el-divider />
12
      <div class="article-meta">
13
        <el-text class="mx-1" type="info" v-if="article?.createTime">发布时间: {{ formatDateTime(article?.createTime) }}</el-text>
14
        <el-text class="mx-1" type="info" v-if="article?.updateTime">更新时间: {{ formatDateTime(article?.updateTime) }}</el-text>
15
      </div>
16
    </el-card>
17

18
    <el-empty v-if="!article && !loading && !error" description="文章不存在或已删除"></el-empty>
19
    <div v-if="error" class="error-message">
20
      <el-alert :title="error" type="error" show-icon />
21
    </div>
22
  </div>
23
</template>
24

25
<script setup lang="ts">
26
import { ref, onMounted, computed } from 'vue'
27
import { useRoute } from 'vue-router'
28
import { getArticleDetail } from '@/api/Api'
29
import type { Article } from '@/interface/Article'
30
import { ElCard, ElText, ElDivider, ElEmpty, ElAlert, ElMessage } from 'element-plus'
31

32
const route = useRoute()
33
const articleId = ref<number | null>(null)
34

35
const article = ref<Article | null>(null)
36
const loading = ref(true)
37
const error = ref<string | null>(null)
38

39
const formatDateTime = (dateString: string | Date | undefined) => {
40
  if (!dateString) return ''
41
  const date = new Date(dateString)
42
  return date.toLocaleString()
43
}
44

45
const formattedContent = computed(() => {
46
  if (article.value?.content) { // 使用可选链操作符确保 article.value 不是 null
47
    return article.value.content.replace(/\\n/g, '<br>')
48
  }
49
  return ''
50
})
51

52
const fetchArticleDetail = async () => {
53
  loading.value = true
54
  error.value = null // 在每次请求前清除之前的错误
55

56
  try {
57
    const id = Number(route.params.id)
58
    if (isNaN(id) || id <= 0) {
59
      error.value = '无效的文章ID'
60
      loading.value = false
61
      return
62
    }
63
    articleId.value = id
64

65
    const res = await getArticleDetail(id)
66
    article.value = res
67

68
  } catch (err: any) {
69
    console.error('获取文章详情失败:', err)
70
    // 修复 2: 确保 error.value 是一个字符串，如果 err.msg 不存在，提供一个默认值
71
    error.value = err.msg ? String(err.msg) : '获取文章详情失败，请稍后再试。'
72
    ElMessage.error(error.value) // ElMessage.error 期望一个 string
73
    article.value = null // 请求失败时，清空文章数据
74
  } finally {
75
    loading.value = false
76
  }
77
}
78

79
onMounted(() => {
80
  fetchArticleDetail()
81
})
82
</script>
83

84
<style scoped>
85
.article-detail-container {
86
  max-width: 800px;
87
  margin: 20px auto;
88
  padding: 20px;
89
  background-color: #f9f9f9;
90
  border-radius: 8px;
91
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
92
}
93

94
.article-card {
95
  width: 100%;
96
}
97

98
.card-header {
99
  display: flex;
100
  justify-content: space-between;
101
  align-items: center;
102
  margin-bottom: 10px;
103
}
104

105
.card-header h2 {
106
  margin: 0;
107
  font-size: 2em;
108
  color: #333;
109
}
110

111
.article-content {
112
  font-size: 1.1em;
113
  line-height: 1.8;
114
  color: #555;
115
  white-space: pre-wrap;
116
}
117

118
.article-meta {
119
  display: flex;
120
  justify-content: flex-end;
121
  gap: 15px;
122
  margin-top: 20px;
123
  font-size: 0.9em;
124
  color: #888;
125
}
126

127
.error-message {
128
    margin-top: 20px;
129
    text-align: center;
130
}
131
</style>