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