1
package com.example.demo.entity;
2

3
import com.baomidou.mybatisplus.annotation.IdType;
4
import com.baomidou.mybatisplus.annotation.TableId;
5
import lombok.Data;
6
import java.time.LocalDateTime;
7

8
@Data
9
public class Article {
10
    @TableId(type = IdType.AUTO)
11
    private Integer id;
12
    private String title;
13
    private String content;
14
    private Integer userId;
15
    private LocalDateTime createTime; // 创建时间
16
    private LocalDateTime updateTime; // 更新时间
17
    private Integer status;         // 状态：1-发布，0-草稿
18
    private Integer viewCount;      //
19
}

1
package com.example.demo.mapper;
2

3
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
4
import com.example.demo.entity.Article;
5

6
public interface ArticleMapper extends BaseMapper<Article> {
7

8
}

1
package com.example.demo.controller;
2

3
import cn.dev33.satoken.util.SaResult;
4
import com.baomidou.mybatisplus.core.metadata.IPage;
5
import com.example.demo.entity.Article;
6
import com.example.demo.service.ArticleService;
7
import com.example.demo.dto.ArticleQueryParams;
8
import org.springframework.beans.factory.annotation.Autowired;
9
import org.springframework.web.bind.annotation.GetMapping;
10
import org.springframework.web.bind.annotation.RequestMapping;
11
import org.springframework.web.bind.annotation.RestController;
12

13
/**
14
 * 文章相关的API接口
15
 */
16
@RestController
17
@RequestMapping("/article")
18
public class ArticleController {
19

20
    @Autowired
21
    private ArticleService articleService;
22

23
    /**
24
     * 获取所有已发布的公共文章列表 (分页)。
25
     * 所有人都可以访问此接口，无需登录校验。
26
     *
27
     * @param queryParams 查询参数，只包含分页信息（页码和每页大小）。
28
     * @return 统一响应体，包含文章列表的分页数据。
29
     */
30
    @GetMapping("/list")
31
    public SaResult getArticleList(ArticleQueryParams queryParams) {
32
        IPage<Article> pageResult = articleService.getArticlesByPage(queryParams);
33
        return SaResult.ok("获取文章列表成功").setData(pageResult);
34
    }
35
}

1
export interface Article {
2
    id: number
3
    title: string
4
    content: string
5
    userId: number
6
    author: string  // 可选字段，因为可能是后查询的
7
    createTime: string | Date
8
    updateTime?: string | Date  // 可选
9
    status?: 0 | 1  // 0: 草稿, 1: 已发布
10
    viewCount?: number
11
}
12

13
export interface IPage<T> {
14
    records: T[];
15
    total: number;
16
    size: number;
17
    current: number;
18
    pages: number;
19
}
20

21
export interface ArticleQueryParams {
22
    current?: number; // 当前页码
23
    size?: number;    // 每页大小
24
    // **移除：不再包含 keyword, userId, status**
25
}

1
/**
2
 * 获取文章列表（分页），只返回所有已发布的公共文章。
3
 * @param params 查询参数 (页码, 每页大小)
4
 * @returns Promise<IPage<Article>>
5
 */
6
export function getArticleList(params: ArticleQueryParams): Promise<IPage<Article>> {
7
    return api.get<Result<IPage<Article>>, IPage<Article>>('/article/list', {
8
       params
9
    });
10
}

1
<template>
2
  <div class="article-container">
3
    <h1>文章列表</h1>
4

5
    <el-pagination
6
      v-model:current-page="queryParams.current"  v-model:page-size="queryParams.size"      :page-sizes="[5, 10, 20]"                  :small="false"
7
      :background="true"
8
      layout="total, sizes, prev, pager, next, jumper"
9
      :total="totalArticles"                     @size-change="handleSizeChange"
10
      @current-change="handleCurrentChange"
11
    />
12

13
    <div v-for="art in articles" :key="art.id">
14
      <el-card class="art-card" @click="goToArticleDetail(art.id)"> <template #header>
15
          <div class="card-header">
16
            <span>{{ art.title }}</span>
17
          </div>
18
        </template>
19
        <p class="text item">{{ truncateContent(art.content) }}</p>
20
        <template #footer>{{ formatTime(art.createTime) }}</template>
21
      </el-card>
22
      <el-divider />
23
    </div>
24

25
    <el-empty v-if="articles.length === 0 && !loading" description="暂无文章"></el-empty>
26
    <el-skeleton :rows="5" animated v-if="loading" />
27

28
    <el-pagination
29
      v-model:current-page="queryParams.current"
30
      v-model:page-size="queryParams.size"
31
      :page-sizes="[5, 10, 20]"
32
      :small="false"
33
      :background="true"
34
      layout="total, sizes, prev, pager, next, jumper"
35
      :total="totalArticles"
36
      @size-change="handleSizeChange"
37
      @current-change="handleCurrentChange"
38
    />
39
  </div>
40
</template>
41

42
<script lang="ts" setup>
43
import { ref, onMounted } from 'vue'; // 移除 computed，因为不再需要前端切片
44
import { useRouter } from 'vue-router'; // 用于跳转详情页
45
import { ElMessage, ElSkeleton, ElEmpty } from 'element-plus'; // 导入 Element Plus 组件
46
import { getArticleList } from '@/api/Api'; // **修改点：导入 getArticleList，而不是 getAllArticle**
47
import type { Article, ArticleQueryParams, IPage } from '@/interface/Article'; // 导入接口
48
import dayjs from 'dayjs'; // 用于格式化时间
49

50
const router = useRouter(); // 获取路由实例
51

52
const articles = ref<Article[]>([]); // **现在只存储当前页的文章**
53
const totalArticles = ref(0);      // **存储后端返回的总文章数**
54
const loading = ref(false);        // 加载状态
55

56
// **修改点：queryParams 包含分页参数**
57
const queryParams = ref<ArticleQueryParams>({
58
  current: 1, // 初始页码
59
  size: 10,   // 初始每页大小
60
  // 后续若要添加搜索，可在 ArticleQueryParams 中添加 keyword 等字段
61
});
62

63
// --- 核心方法：从后端获取文章列表 ---
64
const fetchArticles = async () => {
65
  loading.value = true; // 开始加载
66
  try {
67
    // 调用后端接口，传递当前页码和每页大小
68
    const response: IPage<Article> = await getArticleList(queryParams.value);
69

70
    // **修改点：直接将后端返回的当前页数据赋值给 articles**
71
    articles.value = response.records;
72
    // **修改点：将后端返回的总数赋值给 totalArticles**
73
    totalArticles.value = response.total;
74

75
    // 确保分页器和 queryParams 状态同步（通常后端返回的 current 和 size 会和请求的一致）
76
    queryParams.value.current = response.current;
77
    queryParams.value.size = response.size;
78

79
  } catch (error: any) {
80
    console.error('获取文章列表失败:', error);
81
    ElMessage.error(error.message || '获取文章列表失败！');
82
    articles.value = []; // 清空列表
83
    totalArticles.value = 0; // 总数清零
84
  } finally {
85
    loading.value = false; // 结束加载
86
  }
87
};
88

89
// 截断内容，用于文章摘要显示
90
const truncateContent = (content: string, maxLength = 40) => {
91
  if (!content) return '';
92
  return content.length > maxLength
93
    ? content.slice(0, maxLength) + '...'
94
    : content;
95
};
96

97
// 时间格式化函数
98
const formatTime = (time: string | Date) => {
99
  if (!time) return '未知时间';
100
  return dayjs(time).format('YYYY-MM-DD HH:mm'); // 推荐使用 dayjs 进行更专业的日期格式化
101
};
102

103
// --- 分页事件处理函数 ---
104

105
// 当每页显示数量改变时
106
const handleSizeChange = (newSize: number) => {
107
  if (newSize > 20) { // 限制最大每页 20 条
108
    newSize = 20;
109
  }
110
  queryParams.value.size = newSize;
111
  queryParams.value.current = 1; // **每页大小改变后，重置到第一页**
112
  fetchArticles(); // 重新发起请求获取新数据
113
};
114

115
// 当当前页码改变时
116
const handleCurrentChange = (newPage: number) => {
117
  queryParams.value.current = newPage;
118
  fetchArticles(); // 重新发起请求获取新数据
119
};
120

121
// 跳转到文章详情页（假设你将来的详情页路由是 /article/:id）
122
const goToArticleDetail = (id: number) => {
123
  router.push(`/article/${id}`);
124
};
125

126
// 组件挂载时，首次加载文章数据
127
onMounted(() => {
128
  fetchArticles();
129
});
130
</script>
131

132
<style scoped>
133
.article-container {
134
    padding: 20px;
135
    max-width: 800px;
136
    margin: 0 auto;
137
    text-align: center;
138
}
139

140
h1 {
141
    margin-bottom: 20px;
142
    color: #333;
143
}
144

145
.art-card {
146
    max-width: 800px;
147
    margin: 24px auto;
148
}
149
</style>