完成首页封面

web/src/views/HomeContent.vue

@@ -6,36 +6,21 @@
       height="400px"
       autoplay
       arrow="always"
+      v-if="carouselImages.length > 0"
     >
-      <el-carousel-item>
+      <!-- 动态循环生成轮播项 -->
+      <el-carousel-item v-for="(item, index) in carouselImages" :key="item.id || index">
         <div class="carousel-item">
-          <img src="https://picsum.photos/1920/400?random=1" alt="健康生活研究" class="carousel-img">
+          <!-- 绑定接口返回的图片URL -->
+          <img :src="item.image_url" :alt="item.alt || `轮播图${index+1}`" class="carousel-img">
           <div class="carousel-caption">
-            <h3>健康生活环境设计研究成果展</h3>
-            <p>探索健康设计新路径，引领人居环境创新</p>
-          </div>
-        </div>
-      </el-carousel-item>
-      <el-carousel-item>
-        <div class="carousel-item">
-          <img src="https://picsum.photos/1920/400?random=2" alt="学术研讨会" class="carousel-img">
-          <div class="carousel-caption">
-            <h3>2025健康设计国际学术研讨会</h3>
-            <p>汇聚全球专家智慧，共话健康人居未来</p>
-          </div>
-        </div>
-      </el-carousel-item>
-      <el-carousel-item>
-        <div class="carousel-item">
-          <img src="https://picsum.photos/1920/400?random=3" alt="社区服务案例" class="carousel-img">
-          <div class="carousel-caption">
-            <h3>社区健康服务创新实践</h3>
-            <p>以设计赋能社区，提升居民生活品质</p>
+            <!-- 标题和描述可后续扩展为接口返回字段，当前先用默认值 -->
+            <h3>{{ item.title || defaultTitles[index] }}</h3>
+            <p>{{ item.desc || defaultDescs[index] }}</p>
           </div>
         </div>
       </el-carousel-item>
     </el-carousel>
-
     <!-- 新闻动态 -->
     <div class="news-section">
       <div class="section-header">
@@ -120,6 +105,7 @@
 import { ref, onMounted } from 'vue';
 import { ElCarousel, ElCarouselItem, ElLink, ElCard, ElButton, ElIcon } from 'element-plus';
 import { ArrowRight } from '@element-plus/icons-vue';
+import axios from 'axios';
 
 // 数据结构
 interface NewsItem {
@@ -188,6 +174,60 @@ onMounted(async () => {
   resourceList.value = resourceData;
   communityList.value = communityData;
 });
+
+const defaultTitles = [
+  '健康生活环境设计研究成果展',
+  '2025健康设计国际学术研讨会',
+  '社区健康服务创新实践'
+];
+const defaultDescs = [
+  '探索健康设计新路径，引领人居环境创新',
+  '汇聚全球专家智慧，共话健康人居未来',
+  '以设计赋能社区，提升居民生活品质'
+];
+
+
+interface CarouselImage {
+  id?: number; // 可选，数据库返回的ID
+  image_url: string; // 图片URL（必选）
+  sort?: number; // 可选，排序字段
+  // 其他可选字段（如title、desc等）
+  title?: string;
+  desc?: string;
+  alt?: string;
+}
+
+// 2. 显式指定泛型类型为 CarouselImage[]
+const carouselImages = ref<CarouselImage[]>([]);
+onMounted(async () => {
+  try {
+    // 发送 POST 请求，JSON 体传参
+    const response = await axios.post(
+      'http://localhost:8080/api/page-image/get',
+      { page: 'home' } // JSON 格式传递 page 参数
+    );
+    console.log("首页图片查询成功",response.data.images);
+    // 检查响应是否成功
+    if (response.data.message === '查询成功') {
+
+
+      // 按 sort 排序（处理可能的 undefined）
+      carouselImages.value = response.data.images
+
+      console.log("赋值后:",carouselImages.value);
+    }
+  } catch (error) {
+    console.error('查询失败：', error);
+    // 兜底数据
+    carouselImages.value = [
+      { image_url: 'https://picsum.photos/1920/400?random=1' },
+      { image_url: 'https://picsum.photos/1920/400?random=2' },
+      { image_url: 'https://picsum.photos/1920/400?random=3' }
+    ];
+  }
+});
+
+
 </script>
 
 <style scoped>