qingfeng/MyfronyProject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(分类系统): 实现分类属性功能并重构文章列表

Browse Source 
重构文章分类系统，新增分类属性服务及相关API接口
修改文章列表页面以支持按属性筛选文章
调整路由和样式以适配新功能
This commit is contained in:
qingfeng1121
2025-10-18 10:28:49 +08:00
parent 266310dea3
commit 02d17d7260
13 changed files with 648 additions and 433 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/axios/api.js
View File

@@ -1,88 +0,0 @@
import axios from 'axios'
// 创建axios实例
const service = axios.create({
baseURL: 'http://localhost:8080/api', // api的base_url
timeout: 3000, // 请求超时时间
headers: {
'Content-Type': 'application/json'
}
// withCredentials: true, // 跨域请求时是否需要使用凭证
})
// 请求拦截器 - 添加认证token
service.interceptors.request.use(
config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
},
error => {
return Promise.reject(error)
}
)
// 响应拦截器 - 统一处理响应
service.interceptors.response.use(
response => {
// 检查响应是否成功
if (response.data && response.data.success) {
return response.data
} else {
// 处理业务错误
return Promise.reject(new Error(response.data?.message || '请求失败'))
}
},
error => {
// 处理HTTP错误
console.error('API请求错误:', error)
// 可以在这里添加全局错误处理，如显示错误提示
return Promise.reject(error)
}
)
// 文章相关API
export const articleAPI = {
// 获取所有文章
getAllArticles: () => service.get('/articles'),
// 获取单篇文章
getArticleById: (id) => service.get(`/articles/${id}`),
// 根据分类获取文章
getArticlesByCategory: (categoryId) => service.get(`/articles/category/${categoryId}`),
// 获取热门文章
getPopularArticles: () => service.get('/articles/popular'),
// 创建文章
createArticle: (articleData) => service.post('/articles', articleData),
// 更新文章
updateArticle: (id, articleData) => service.put(`/articles/${id}`, articleData),
// 删除文章
deleteArticle: (id) => service.delete(`/articles/${id}`)
}
// 留言相关API
export const messageAPI = {
// 获取所有留言
getAllMessages: () => service.get('/messages'),
// 获取单条留言
getMessageById: (id) => service.get(`/messages/${id}`),
// 根据文章ID获取留言
getMessagesByArticleId: (articleId) => service.get(`/messages/article/${articleId}`),
// 获取根留言
getRootMessages: () => service.get('/messages/root'),
// 根据父留言ID获取回复
getRepliesByParentId: (parentId) => service.get(`/messages/parent/${parentId}`),
// 根据昵称搜索留言
searchMessagesByNickname: (nickname) => service.get(`/messages/search?nickname=${nickname}`),
// 获取文章评论数量
getMessageCountByArticleId: (articleId) => service.get(`/messages/count/${articleId}`),
// 创建留言
saveMessage: (messageData) => service.post('/messages', messageData),
// 删除留言
deleteMessage: (id) => service.delete(`/messages/${id}`)
}
export default service

2
src/router/Router.js
View File

@@ -1,6 +1,6 @@
import { createWebHistory, createRouter } from 'vue-router'
// 导入视图组件
import ArticleList from '../views/aericle.vue'
import ArticleList from '../views/aericlelist.vue'
import HomePage from '../views/home.vue'
import NonsensePage from '../views/nonsense.vue'
import MessageBoardPage from '../views/messageboard.vue'

36
src/services/articleService.js
View File

@@ -23,6 +23,15 @@ class ArticleService {
return apiService.get(`/articles/${id}`)
}
/**
* 根据属性ID获取文章列表
* @param {number} attributeId - 属性ID
* @returns {Promise}
*/
getArticlesByAttributeId(attributeId) {
return apiService.get(`/articles/attribute/${attributeId}`)
}
/**
* 根据标题查询文章列表
* @param {string} title - 文章标题
@@ -77,6 +86,33 @@ class ArticleService {
incrementArticleViews(id) {
return apiService.post(`/articles/${id}/views`)
}
/**
* 根据分类ID获取文章（兼容旧接口）
* @param {number} categoryId - 分类ID
* @returns {Promise}
*/
getArticlesByCategory(categoryId) {
return apiService.get(`/articles/category/${categoryId}`)
}
/**
* 根据属性ID获取文章
* @param {number} attributeId - 属性ID
* @returns {Promise}
*/
getArticlesByAttribute(attributeId) {
return apiService.get(`/articles/attribute/${attributeId}`)
}
/**
* 根据属性ID获取最新文章
* @param {number} attributeId - 属性ID
* @returns {Promise}
*/
getLatestArticlesByAttribute(attributeId) {
return apiService.get(`/articles/attribute/${attributeId}/latest`)
}
}
// 导出文章服务实例

66
src/services/categoryAttributeService.js Normal file
View File

@@ -0,0 +1,66 @@
// 分类属性相关API服务
import apiService from './apiService'
/**
* 分类属性服务类
*/
class CategoryAttributeService {
/**
* 根据ID获取分类属性
* @param {number} id - 属性ID
* @returns {Promise}
*/
getAttributeById(id) {
return apiService.get(`/category-attributes/${id}`)
}
/**
* 根据分类ID获取属性列表
* @param {number} categoryId - 分类ID
* @returns {Promise}
*/
getAttributesByCategory(categoryId) {
return apiService.get(`/category-attributes/category/${categoryId}`)
}
/**
* 创建分类属性
* @param {Object} attributeData - 属性数据
* @returns {Promise}
*/
createAttribute(attributeData) {
return apiService.post('/category-attributes', attributeData)
}
/**
* 更新分类属性
* @param {number} id - 属性ID
* @param {Object} attributeData - 属性数据
* @returns {Promise}
*/
updateAttribute(id, attributeData) {
return apiService.put(`/category-attributes/${id}`, attributeData)
}
/**
* 删除分类属性
* @param {number} id - 属性ID
* @returns {Promise}
*/
deleteAttribute(id) {
return apiService.delete(`/category-attributes/${id}`)
}
/**
* 检查分类下是否存在指定名称的属性
* @param {number} categoryId - 分类ID
* @param {string} attributeName - 属性名称
* @returns {Promise}
*/
checkAttributeExists(categoryId, attributeName) {
return apiService.get(`/category-attributes/check-exists?categoryId=${categoryId}&attributeName=${encodeURIComponent(attributeName)}`)
}
}
// 导出分类属性服务实例
export default new CategoryAttributeService()

54
src/services/categoryService.js Normal file
View File

@@ -0,0 +1,54 @@
import apiService from './apiService'
/**
* 分类服务
*/
class CategoryService {
/**
* 获取所有分类
* @returns {Promise}
*/
getAllCategories() {
return apiService.get('/categories')
}
/**
* 获取指定分类
* @param {number} id - 分类ID
* @returns {Promise}
*/
getCategory(id) {
return apiService.get(`/categories/${id}`)
}
/**
* 创建新分类
* @param {Object} categoryData - 分类数据
* @returns {Promise}
*/
createCategory(categoryData) {
return apiService.post('/categories', categoryData)
}
/**
* 更新分类
* @param {number} id - 分类ID
* @param {Object} categoryData - 分类数据
* @returns {Promise}
*/
updateCategory(id, categoryData) {
return apiService.put(`/categories/${id}`, categoryData)
}
/**
* 删除分类
* @param {number} id - 分类ID
* @returns {Promise}
*/
deleteCategory(id) {
return apiService.delete(`/categories/${id}`)
}
}
// 导出分类服务实例
export default new CategoryService()

11
src/services/index.js
View File

@@ -1,8 +1,17 @@
// 导出所有服务
import articleService from './articleService'
import messageService from './messageService'
import categoryAttributeService from './categoryAttributeService'
import categoryService from './categoryService'
export {
articleService,
messageService
messageService,
categoryAttributeService,
categoryService
}

8
src/styles/MainLayout.css
View File

@@ -22,7 +22,7 @@
/* 内容区宽度和外边距 */
--content-width: 80%;
/* 主内容区宽度 */
--content-margin: 0 5%;
--content-margin: 0 5% 0 5%;
/* 主内容区左右外边距 */
/* 左侧状态栏宽度 */
@@ -30,7 +30,7 @@
/* 左侧模块宽度 */
/* 疯言疯语标题区样式 */
--nonsense-title-width: 76.5%;
--nonsense-title-width: 77.1%;
/* 疯言疯语标题区宽度 */
--nonsense-title-padding: 20px;
/* 疯言疯语标题区内边距 */
@@ -40,7 +40,7 @@
/* 疯言疯语标题区下边距 */
--nonsense-titleconst-padding: 1.5rem;
/* 疯言疯语标题内容区内边距 */
--nonsenset-margin-top: 130px;
--nonsenset-margin-top: 150px;
/* 疯言疯语内容区顶部外边距 */
/* 分页背景色 */
@@ -62,7 +62,7 @@
/* 导航栏阴影 */
/* 字体颜色和菜单样式 */
--font-color-title: #32325d;
--font-color-title: #AF7AC5;
/* 标题字体颜色 */
--font-size-menu: 20px;
/* 菜单字体大小 */

309
src/views/aericle.vue
View File

@@ -1,309 +0,0 @@
<template>
<div id="allstyle">
<div class="header">
<h1>文章目录</h1>
</div>
<!-- 加载状态 -->
<div v-if="loading" class="loading-container">
<el-skeleton :count="5" />
</div>
<!-- 错误状态 -->
<div v-else-if="error" class="error-container">
<el-alert :title="error" type="error" show-icon />
<el-button type="primary" @click="fetchCategories">重新加载</el-button>
</div>
<!-- 分类列表 -->
<div v-else-if="categories.length > 0" class="post_content">
<div v-for="categoryGroup in categories" :key="categoryGroup.name" class="category-group">
<div class="category-header">
<h2>{{ categoryGroup.name }}</h2>
<span class="badge badge-primary">共{{ getCategorySum(categoryGroup.categories) }}篇</span>
</div>
<ul class="pcont_ul">
<li class="pcont_li" v-for="category in categoryGroup.categories" :key="category.typeid">
<button class="btn" @click="handleCategoryClick(category.typeid)">
<kbd>{{ category.content }}</kbd>
</button>
<span class="category-count">({{ category.sum }})</span>
</li>
</ul>
</div>
</div>
<!-- 空状态 -->
<div v-else class="empty-container">
<el-empty description="暂无分类" />
</div>
</div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'
import { articleService } from '@/services'
import { ElMessage } from 'element-plus'
import type { Category } from '@/types'
const router = useRouter()
// 响应式状态
const categories = ref<any[]>([])
const loading = ref(false)
const error = ref('')
/**
* 获取文章分类列表
*/
const fetchCategories = async () => {
try {
loading.value = true
error.value = ''
// 获取所有文章数据，然后从中提取分类信息
const res = await articleService.getAllArticles()
if (res.data && res.data.length > 0) {
// 假设数据结构是嵌套的分类组
categories.value = res.data
} else {
categories.value = []
}
console.log('获取分类列表成功:', categories.value)
} catch (err) {
error.value = '获取分类列表失败，请稍后重试'
console.error('获取分类列表失败:', err)
ElMessage.error(error.value)
} finally {
loading.value = false
console.log('分类列表加载完成')
}
}
/**
* 处理分类点击事件
* @param {string} typeid - 分类ID
*/
const handleCategoryClick = (typeid: string) => {
router.push({
path: '/home/aericletype',
query: {
type: typeid
}
})
}
/**
* 计算分类组中的文章总数
* @param {Array} categoryItems - 分类项数组
* @returns {number} 文章总数
*/
const getCategorySum = (categoryItems: any[]): number => {
if (!categoryItems || !Array.isArray(categoryItems)) {
return 0
}
return categoryItems.reduce((total, item) => {
return total + (item.sum || 0)
}, 0)
}
/**
* 组件挂载时获取分类列表
*/
onMounted(() => {
fetchCategories()
})
</script>
<style scoped>
.header {
text-align: center;
padding: 20px;
margin-bottom: 20px;
}
.header h1 {
color: #2c3e50;
font-size: 1.8rem;
}
.post_content {
padding: 20px;
}
.category-group {
background-color: rgba(255, 255, 255, 0.9);
border-radius: 12px;
padding: 20px;
margin-bottom: 24px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.category-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 2px solid #ecf0f1;
}
.category-header h2 {
color: #34495e;
font-size: 1.4rem;
margin: 0;
}
.pcont_ul {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 15px;
margin-top: 20px;
}
.pcont_li {
display: flex;
align-items: center;
padding: 10px 15px;
border-radius: 12px;
background-color: rgba(245, 247, 250, 0.7);
transition: transform 0.3s ease;
gap: 10px;
}
.pcont_li:hover {
transform: translateY(-2px);
background-color: rgba(236, 240, 241, 0.9);
}
.btn {
position: relative;
text-decoration: none;
color: #34495e;
padding: 10px 15px;
border-radius: 8px;
transition: all 0.3s ease;
display: inline-block;
z-index: 1;
overflow: hidden;
border: none;
background: transparent;
cursor: pointer;
font-size: 1rem;
}
/* 透明方块效果 */
.btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 8px;
z-index: -1;
transition: all 0.3s ease;
transform: scale(0.95);
opacity: 0.8;
background: rgba(255, 255, 255, 0.5);
}
/* 悬浮效果 */
.btn:hover::before {
transform: scale(1.1);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
background: rgba(145, 196, 238, 0.85);
}
.category-count {
color: #7f8c8d;
font-size: 0.9rem;
}
/* 标签样式 */
.badge {
text-transform: uppercase;
}
.badge-primary {
color: #2643e9;
background-color: rgba(203, 210, 246, .5);
}
.badge {
font-size: 66%;
font-weight: 600;
line-height: 1;
display: inline-block;
padding: .35rem .375rem;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
text-align: center;
vertical-align: baseline;
white-space: nowrap;
border-radius: .25rem;
}
/* 加载状态 */
.loading-container {
padding: 40px 20px;
text-align: center;
}
/* 错误状态 */
.error-container {
text-align: center;
padding: 40px 20px;
}
.error-container .el-button {
margin-top: 16px;
}
/* 空状态 */
.empty-container {
text-align: center;
padding: 60px 20px;
}
/* 响应式设计 */
@media (max-width: 768px) {
.header {
padding: 15px;
}
.header h1 {
font-size: 1.5rem;
}
.post_content {
padding: 15px;
}
.category-group {
padding: 15px;
margin-bottom: 15px;
}
.category-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.pcont_ul {
grid-template-columns: 1fr;
gap: 10px;
}
.category-header h2 {
font-size: 1.2rem;
}
}
</style>

422
src/views/aericlelist.vue Normal file
View File

@@ -0,0 +1,422 @@
<template>
<div id="allstyle">
<div class="header">
<h3>文章目录</h3>
</div>
<!-- 加载状态 -->
<div v-if="loading" class="loading-container">
<el-skeleton :count="5" />
</div>
<!-- 错误状态 -->
<div v-else-if="error" class="error-container">
<el-alert :title="error" type="error" show-icon />
<el-button type="primary" @click="fetchCategories">重新加载</el-button>
</div>
<!-- 分类列表 -->
<div v-else-if="categories.length > 0" class="post_content" id="category-list">
<p><strong></strong></p>
<div class="alert alert-primary"><strong><span class="alert-inner--text">文章分类如下，点击跳转</span></strong></div>
<div v-for="categoryGroup in categories" :key="categoryGroup.typeid"
class="category-group">
<div v-if="categoryGroup.attributes.length > 0">
<h2 id="header-id-1">{{ categoryGroup.typename }}</h2>
<span class="badge badge-primary">共 {{ categoryGroup.attributes.length }} 篇</span>
<ul class="wp-block-list">
<li v-for="category in categoryGroup.attributes" :key="category.typeid">
<a class="btn" @click="handleCategoryClick(category.categoryid)"><kbd>{{ category.attributename
}}</kbd></a>
&nbsp;— —({{ category.articles.length }})
</li>
</ul>
</div>
</div>
</div>
<!-- 空状态 -->
<div v-else class="empty-container">
<el-empty description="暂无分类" />
</div>
</div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'
// 由于模块 '@/services' 没有导出的成员 'CategoryService'，请确认正确的导出名称后修改此处
// 以下代码仅作示例，实际需根据 '@/services' 模块的真实导出调整
import { ElMessage } from 'element-plus'
import { categoryService, categoryAttributeService, articleService } from '@/services'
const router = useRouter()
// 响应式状态
const categories = ref<any[]>([])
const loading = ref(false)
const error = ref('')
/**
* 获取文章分类列表
*/
const fetchCategories = async () => {
try {
loading.value = true;
error.value = '';
const res = await categoryService.getAllCategories();
if (res.data && res.data.length > 0) {
// 创建处理后的分类数组
const processedCategories = res.data.map(item => ({
...item,
attributes: [] // 使用更清晰的命名
}));
// 并行处理所有分类
await Promise.all(
processedCategories.map(async (category) => {
try {
if (await categoryAttributeService.checkAttributeExists(category.typeid, category.typename || '')) {
// 获取分类的所有属性
const attributesRes = await categoryAttributeService.getAttributeById(category.typeid);
// 存储属性数据
if (attributesRes.data) {
category.attributes = Array.isArray(attributesRes.data) ? attributesRes.data : [attributesRes.data];
}
}
} catch (err) {
// console.error(`处理分类失败 (分类ID: ${category.typeid}):`, err);
}
})
);
await getCategoryAttributes(processedCategories);
console.log('获取分类列表成功:', categories.value);
} else {
categories.value = [];
}
} catch (err) {
error.value = '获取分类列表失败，请稍后重试';
console.error('获取分类列表失败:', err);
ElMessage.error(error.value);
} finally {
loading.value = false;
console.log('分类列表加载完成');
}
};
// 处理所有分类及其属性的文章数据
const getCategoryAttributes = async (processedCategories: any[]) => {
// 遍历所有分类
for (const category of processedCategories) {
if (category && category.attributes && category.attributes.length > 0) {
console.log(`处理分类: ${category.typename || '未命名分类'}`);
// 并行获取每个属性下的文章
await Promise.all(
category.attributes.map(async (attribute) => {
try {
// 使用正确的方法名获取属性下的文章，优先使用typeid
const idToUse = attribute.typeid || attribute.categoryid;
const articlesRes = await articleService.getArticlesByAttribute(idToUse);
// 处理文章数据
attribute.articles = articlesRes.data && Array.isArray(articlesRes.data) ?
articlesRes.data : [];
} catch (err) {
console.error(`获取属性文章失败 (属性ID: ${attribute.typeid || attribute.categoryid}):`, err);
attribute.articles = [];
}
})
);
}
}
// 更新分类列表
categories.value = processedCategories;
console.log('所有分类属性文章数据处理完成');
}
/**
* 处理分类点击事件
* 注意：现在实际上使用的是属性ID而不是分类ID
* @param {string | number} attributeId - 属性ID
*/
const handleCategoryClick = (attributeId: string | number) => {
router.push({
path: '/home/aericletype',
query: {
attributeId: String(attributeId)
}
})
}
/**
* 计算分类组中的文章总数
* @param {Array} categoryItems - 分类项数组
* @returns {number} 文章总数
*/
const getCategorySum = (categoryItems: any[]): number => {
if (!categoryItems || !Array.isArray(categoryItems)) {
return 0
}
return categoryItems.reduce((total, item) => {
return total + (item.sum || 0)
}, 0)
}
/**
* 组件挂载时获取分类列表
*/
onMounted(() => {
fetchCategories()
})
</script>
<style scoped>
.header {
text-align: center;
padding: 20px;
margin-bottom: 20px;
}
.header h1 {
color: #2c3e50;
font-size: 1.8rem;
}
.post_content {
padding: 15px;
}
.category-group ul li {
display: flex;
align-items: center;
padding: 5px 0;
}
.category-group ul li .btn::before {
background-color: rgba(0, 0, 0, 0);
}
.category-group ul li .btn:hover {
background-color: rgb(245, 247, 250, 0.7);
border-bottom: #4b64f0 2px solid;
}
.alert:not(.alert-secondary) {
color: #fff;
}
.alert {
font-size: .875rem;
padding: 1rem 1.5rem;
border: 0;
border-radius: .25rem;
}
.alert-primary {
color: #fff;
border-color: #7889e8;
background-color: #7889e8;
}
.btn kbd {
color: #fff;
font-size: 14px;
padding: 4px 8px;
border-radius: 4px;
background-color: #2c3e50;
}
.alert {
position: relative;
margin-bottom: 1rem;
padding: 1rem 1.5rem;
border: .0625rem solid transparent;
border-radius: .25rem;
}
.category-group {
text-align: left;
border-radius: 12px;
padding: 20px;
margin-bottom: 24px;
}
.badge {
padding: .25em .4em;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25rem;
margin: 10px 6px;
}
.category-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 2px solid #ecf0f1;
}
.category-header h2 {
color: #34495e;
font-size: 1.4rem;
margin: 0;
}
.pcont_ul {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 15px;
margin-top: 20px;
}
.pcont_li {
display: flex;
align-items: center;
padding: 10px 15px;
border-radius: 12px;
background-color: rgba(245, 247, 250, 0.7);
transition: transform 0.3s ease;
gap: 10px;
}
.pcont_li:hover {
transform: translateY(-2px);
background-color: rgba(236, 240, 241, 0.9);
}
.btn {
position: relative;
text-decoration: none;
color: #34495e;
padding: 10px 15px;
border-radius: 8px;
transition: all 0.3s ease;
display: inline-block;
z-index: 1;
overflow: hidden;
border: none;
background: transparent;
cursor: pointer;
font-size: 1rem;
}
/* 透明方块效果 */
.btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 8px;
z-index: -1;
transition: all 0.3s ease;
transform: scale(0.95);
opacity: 0.8;
background: rgba(255, 255, 255, 0.5);
}
/* 悬浮效果 */
.btn:hover::before {
transform: scale(1.1);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
background: rgba(145, 196, 238, 0.85);
}
.category-count {
color: #7f8c8d;
font-size: 0.9rem;
}
/* 标签样式 */
.badge {
text-transform: uppercase;
}
.badge-primary {
color: #2643e9;
background-color: rgba(203, 210, 246, .5);
}
.badge {
font-size: 66%;
font-weight: 600;
line-height: 1;
display: inline-block;
padding: .35rem .375rem;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
text-align: center;
vertical-align: baseline;
white-space: nowrap;
border-radius: .25rem;
}
/* 加载状态 */
.loading-container {
padding: 40px 20px;
text-align: center;
}
/* 错误状态 */
.error-container {
text-align: center;
padding: 40px 20px;
}
.error-container .el-button {
margin-top: 16px;
}
/* 空状态 */
.empty-container {
text-align: center;
padding: 60px 20px;
}
/* 响应式设计 */
@media (max-width: 768px) {
.header {
padding: 15px;
}
.header h1 {
font-size: 1.5rem;
}
.post_content {
padding: 15px;
}
.category-group {
padding: 15px;
margin-bottom: 15px;
}
.category-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.pcont_ul {
grid-template-columns: 1fr;
gap: 10px;
}
.category-header h2 {
font-size: 1.2rem;
}
}
</style>

15
src/views/articlecontents.vue
View File

@@ -141,10 +141,10 @@ const fetchArticleDetail = async () => {
// 不阻止主流程
}
// 获取相关文章（同分类下的其他文章）
// 获取相关文章（同属性下的其他文章）
if (article.value.categoryId) {
try {
const relatedRes = await articleService.createArticle(article.value.categoryId)
const relatedRes = await articleService.getArticlesByCategory(article.value.categoryId)
// 过滤掉当前文章，并取前5篇作为相关文章
relatedArticles.value = relatedRes.data
? relatedRes.data.filter((item: Article) => item.id !== article.value?.id).slice(0, 5)
@@ -154,6 +154,17 @@ const fetchArticleDetail = async () => {
// 不阻止主流程
}
}
// 兼容旧的categoryId
else if (article.value.categoryId) {
try {
const relatedRes = await articleService.getArticlesByCategory(article.value.categoryId)
relatedArticles.value = relatedRes.data
? relatedRes.data.filter((item: Article) => item.id !== article.value?.id).slice(0, 5)
: []
} catch (err) {
console.error('获取相关文章失败:', err)
}
}
} else {
throw new Error('文章不存在或已被删除')
}

10
src/views/commentDemo.vue
View File

@@ -8,14 +8,11 @@
<div v-else-if="commentTree.length === 0" class="empty">暂无留言</div>
<div v-else class="comment-list">
<!-- 递归渲染留言树 -->
<CommentItem
v-for="comment in commentTree"
:key="comment.id"
:comment="comment"
/>
<CommentItem v-for="comment in commentTree" :key="comment.id" :comment="comment" />
</div>
</div>
</div>
</template>
<script setup>
@@ -188,7 +185,8 @@ h1 {
padding: 20px;
}
.loading, .empty {
.loading,
.empty {
text-align: center;
padding: 40px;
color: #666;

36
src/views/home.vue
View File

@@ -61,17 +61,33 @@ const fetchArticles = async () => {
try {
loading.value = true
let res = {} // 使用let而不是const
// 使用route对象获取参数，而不是检查pathname
if (route.params.type ) {
console.log('根据type获取文章列表成功')
res = await articleService.getAllArticlesByType(route.params.type)
} else if (route.params.title) {
res = await articleService.getAllArticlesByTitle(route.params.title)
console.log('根据title获取文章列表成功')
} else {
res = await articleService.getAllArticles()
console.log('获取所有文章列表成功')
// 检查URL参数
const query = route.query
const params = route.params
// 优先使用attributeId参数（新接口）
if (query.attributeId) {
console.log('根据属性ID获取文章列表')
res = await articleService.getArticlesByAttribute(query.attributeId)
}
// 兼容旧的type参数
else if (params.type) {
console.log('根据类型ID获取文章列表（兼容模式）')
res = await articleService.getArticlesByCategory(params.type)
}
// 搜索标题
else if (params.title || query.title) {
const title = params.title || query.title
console.log('根据标题获取文章列表')
res = await articleService.getArticlesByTitle(title)
}
// 获取所有文章
else {
res = await articleService.getAllArticles()
console.log('获取所有文章列表')
}
datas.value = res.data || []
console.log('获取文章列表成功:', datas.value)
} catch (error) {

2
src/views/messageboard.vue
View File

@@ -3,7 +3,7 @@
<div class="message-board">
<!-- 留言内容区 -->
<div class="message-list">
<h3>留言板</h3>
<h3 class="title">留言板</h3>
<!-- 加载状态 -->
<div v-if="loading" class="loading-container">
<el-skeleton :count="5" />