diff --git a/management/src/views/HomeView.vue b/management/src/views/HomeView.vue index a02c8b0e..ef61dd58 100644 --- a/management/src/views/HomeView.vue +++ b/management/src/views/HomeView.vue @@ -1,354 +1,11 @@ \ No newline at end of file diff --git a/management/src/views/resource/ResourceView.vue b/management/src/views/resource/ResourceView.vue index 8f6151b1..8eb4bf9e 100644 --- a/management/src/views/resource/ResourceView.vue +++ b/management/src/views/resource/ResourceView.vue @@ -153,7 +153,7 @@ const stripHtml = (html: string) => { const fetchData = async () => { loading.value = true; try { - const reqData: ListArticleReq = { page: currentPage.value, size: pageSize.value,topic:"资源案例" }; + const reqData: ListArticleReq = { page: currentPage.value, size: pageSize.value,topic:"案例资源" }; const response = await fetch(`${API_BASE_URL}/articles/getarticle`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, diff --git a/server/config/config.yaml b/server/config/config.yaml index b0c7fc1c..35c07dc6 100644 --- a/server/config/config.yaml +++ b/server/config/config.yaml @@ -1,6 +1,6 @@ server: port: 8080 - allowed_origins: ["http://localhost:5173"] + allowed_origins: ["*"] oss: endpoint: "https://oss-cn-shenzhen.aliyuncs.com" diff --git a/web/src/views/HomeView.vue b/web/src/views/HomeView.vue index 40f60cb7..b93875b7 100644 --- a/web/src/views/HomeView.vue +++ b/web/src/views/HomeView.vue @@ -26,9 +26,7 @@ @@ -100,11 +98,62 @@ + +
+
+

案例资源 Resource

+ More +
+ +
+ + 案例资源图片 +
+

{{ resource.title }}

+

{{ resource.desc }}

+ + 详情 + +
+ +
+
+ +
+
+

社区服务 Community

+ More +
+ +
+ + 社区服务图片 +
+

{{ service.title }}

+

{{ service.desc }}

+ + 详情 + +
+ +
+
+// --- Data Structures --- +interface NewsItem { + imageUrl: string; + title: string; + desc: string; +} +interface Article { + id: number; + title: string; + cover: string; + excerpt: string; +} + +// **修改点1: 为每个版块创建独立的响应式数组** +const newsList = ref([]); +const resourceList = ref([]); +const communityList = ref([]); + +// --- Utility Function --- +/** + * @description 将HTML字符串转换为纯文本 + * @param htmlStr HTML字符串 + * @returns 纯文本字符串 + */ +function stripHtml(htmlStr: string): string { + if (!htmlStr) return ''; + const doc = new DOMParser().parseFromString(htmlStr, 'text/html'); + return doc.body.textContent || ""; +} + +// **修改点2: 创建一个通用的、可复用的 fetch 函数** +/** + * @description 根据主题从后端获取文章列表 + * @param topic 文章主题 (e.g., "新闻", "案例资源") + * @returns 处理过的文章列表 + */ +const fetchArticlesByTopic = async (topic: string): Promise => { + try { + const response = await fetch('http://localhost:8080/api/articles/getarticle', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + page: 1, + size: 3, // 只请求需要的前3条数据 + topic: topic + }) + }); + + if (!response.ok) { + throw new Error(`HTTP error for topic ${topic}! status: ${response.status}`); + } + + const data = await response.json(); + + if (data && Array.isArray(data.Article_list)) { + const articles: Article[] = data.Article_list; + + return articles.map(article => { + const plainTextDesc = stripHtml(article.excerpt); + const truncatedDesc = plainTextDesc.length > 100 + ? plainTextDesc.substring(0, 100) + '...' + : plainTextDesc; + + return { + imageUrl: article.cover, + title: article.title, + desc: truncatedDesc, + }; + }); + } else { + console.error(`API response for topic ${topic} is not in the expected format:`, data); + return []; // 返回空数组以防错误 + } + } catch (error) { + console.error(`Failed to fetch articles for topic ${topic}:`, error); + return []; // 发生错误时返回空数组 + } +}; + +// **修改点3: 在组件挂载时，并行获取所有版块的数据** +onMounted(async () => { + // 使用 Promise.all 来同时触发所有API请求，提高加载效率 + const [newsData, resourceData, communityData] = await Promise.all([ + fetchArticlesByTopic('新闻'), + fetchArticlesByTopic('案例资源'), + fetchArticlesByTopic('社区服务') + ]); + + // 将获取到的数据赋值给对应的列表 + newsList.value = newsData; + resourceList.value = resourceData; + communityList.value = communityData; +}); + + \ No newline at end of file