1. Home-整體結構搭建和分類實現

1.1 頁面結構

分類實現

2. Home-banner輪播圖功能實現

輪播圖實現

在HomeBanner.vue中寫出輪播圖的結構

在apis目錄下新建home.js

HomeBanner.vue 補充script中的代碼，下面直接給出完整代碼

<script setup>
import { getBannerAPI } from '@/apis/home'
import { onMounted, ref } from 'vue'const bannerList = ref([])const getBanner = async () => {const res = await getBannerAPI()console.log(res)bannerList.value = res.result
}onMounted(() => getBanner())</script><template><div class="home-banner"><el-carousel height="500px"><el-carousel-item v-for="item in bannerList" :key="item.id"><img :src="item.imgUrl" alt=""></el-carousel-item></el-carousel></div>
</template><style scoped lang='scss'>
.home-banner {width: 1240px;height: 500px;position: absolute;left: 0;top: 0;z-index: 98;img {width: 100%;height: 500px;}
}
</style>

import { getBannerAPI } from '@/apis/home'
import { onMounted, ref } from 'vue'

• 引入輪播圖數據的 API 方法 getBannerAPI。
• ref 用來創建響應式數據。
• onMounted 是生命周期鉤子，在組件掛載后執行。

---

const bannerList = ref([])

• 定義一個響應式的數組，用來存放輪播圖數據。

---

const getBanner = async () => {const res = await getBannerAPI()console.log(res)bannerList.value = res.result
}

• 異步函數 getBanner() 負責調用后端 API 獲取數據。
• res.result 是輪播圖的數據數組，賦值給 bannerList。
• console.log(res) 是調試信息，方便開發者查看返回的數據。

Day03 02todo