HOME页面

一、相关文件夹的创建

1、API文件的创建

在src/apis下创建homeAPI.js文件，需要时传入获取-人气推荐 - 柴柴老师的项目接口接口

2、HOME文件夹的创建

创建src/views/Home，src/views/Home/components，src/views/Home/index.vue

components用于存放组件

index.vue用于导出组件

二、HomeBanner内容

1、API的创建

在home.js中

export function getBannerAPI(){
    return httpInstantce({
        url:'/home/banner'
    })
} 

 这里要导入另外一个文件

import httpInstantce from "@/utils/http"

此文件专门发送http请求来获得的数据

/ 下载axios
// npm install --save axios

// 导入axios
import axios from "axios";
// import { response } from "express";

// 创建axios实例
const httpInstantce = axios.create({
  // 设置基本URL,作为所有请求的前提
  baseURL: "https://pcapi-xiaotuxian-front-devtest.itheima.net",
  // 设置请求超时时间，单位为ms
  timeout: 5000,
});

// 添加请求拦截器
// 请求发送失败时的错误处理
// 添加响应拦截器
// 请求发送失败时的错误处理
// 导出Axios实例，以便在整个项目中使用

2、Banner组件的创建

<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.data.result
    console.log(BannerList.value);
    
}
//onMounted钩子函数
onMounted(() => {
    getBanner();
})

</script>

<template>
  <div class="home-banner">
    <el-carousel height="500px">

//渲染数组数据
      <el-carousel-item v-for="item in BannerList" :key="item">
        <img :src="item.imgUrl" alt="">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>


//样式
<style>
</style>

3、组建的引用

在index.vue文件中一标签的形式引入

<template>
<div>
  <div> 

//以标签的形式引入   HomeBanner标签
    <HomeBanner></HomeBanner>
  </div>

</div>
</template>

<script setup>
//导入组件
import HomeBanner from './components/HomeBanner.vue';

</script>

<style>
//样式
</style>

4、打开该文件的集成终端运行项目

npm run dev

三、HomeHot和HomeNew页面

Hot页面和New页面相似，就以Hot页面为例

1、API的创建

在 src/apis/home.js 中

//创建getHotAPI
export function getHotAPI(){

    return httpInstantce({

        url:'/home/new'

    })

}

2、HomeHot组件的创建

在 src/views/Home/components 中创建HomeHot.vue文件

<template>
  <div>

//标题标签
  <home-panel :title="'热门推荐'" :subTitle="'买一送一'">
    <ul class="goods-list">

//v-for渲染数组
      <li v-for="item in Hotlist" :key="item.id">
        <router-link to="/">

//图片的渲染
          <img :src="item.picture" alt="">

//差值语法传入数据
          <p class="name">{{ item.name }}</p>
          <p class="price">{{ item.price }}</p>
        </router-link>
      </li>
    </ul>
  </home-panel>
  </div>
</template>

<script setup>

//相关组件的引入
import HomePanel from '../components/HomePanel.vue';
import { getHotAPI } from '@/apis/home';
import { onMounted } from 'vue';
import { ref } from 'vue';

//创建数组，存放商品数据
const Hotlist = ref([]);

//创建一个函数用来调用getHotAPI函数发送请求并打印数据
const getHot =() => {
  getHotAPI().then(res => {
    console.log(res);
    Hotlist.value = res.data.result;
  })

}

//onMounted钩子函数
onMounted(() => {
  getHot();
})
</script>

<style>
//样式
</style>

3、组件的引用

在src/Home/index.vue

<template>
<div>
  <div> 

//以标签的形式引入   HomeBanner标签
    <HomeBanner></HomeBanner>
  </div>

//以标签的形式引入  HomeHot标签 HomeNew标签
<HomeHot></HomeHot>
<HomeNew></HomeNew>

</div>
</template>

<script setup>
//导入组件
import HomeBanner from './components/HomeBanner.vue';
import HomeNew from './components/HomeNew.vue';
import HomeHot from './components/HomeHot.vue';
</script>

<style>
//样式
</style>

4、打开该文件的集成终端运行项目

四、HomeProduct页面和Goodsitem组件

1、API的创建

export function getgoodsAPI(){

    return httpInstantce({

        url:'/home/goods'

    })
}

2、HomeProduct组件的创建

<template>
    <div class="home-product">

//拿到数组中的数据并渲染数组
        <HomePanel :title="item.name"  v-for="item in goodsProduct" :key="item.id"/>
        <div class="box">
                <RouterLink class="cover" to="/">
//图片
                    <img :src="item.picture"/>
                    <strong class="label">

                        <span>{{ item.name }}馆</span>
                        <span>{{ item.salenInfo }}</span>
                    </strong>
                </RouterLink>
                <ul class="goods-list">
                    <li v-for="i in item.goods" :key="i.id">

//goodsitem标签
                        <goods-item :i="i"></goods-item>

                    </li>
                </ul>
            </div>
    </div>

</template>

<script setup>

//相关组建的导入
import { getgoodsAPI } from '@/apis/home';
import { onMounted } from 'vue';
import { ref } from 'vue';
import HomePanel from './HomePanel.vue';
import GoodsItem from './GoodsItem.vue';

//创建数组以便存储数据
const goodsProduct = ref([]);

//创建一个函数用来调用getgoodsAPI发送请求并将数组的数据打印
const getgoods = (() => {
    getgoodsAPI().then(res => {
        console.log(res);
        goodsProduct.value = res.data.result;
        console.log(goodsProduct);

    })
})

//onMounted钩子函数
onMounted(() => {
    getgoods();
})

</script>

<style>
//样式
</style>

3、Goodsitem组件的创建

<template>
  <div>
    <RouterLink to="/" class="goods-item">

      <img :src="i.picture" alt="">
      <p class="name ellipsis">{{ i.item }}</p>
      <p class="desc ellipsis">{{ i.desc }}</p>
      <p class="price">&yen;{{ i.price }}</p>

    </RouterLink>
  </div>
</template>

<script setup>

defineProps({
  i: {
    type: Object,
    default:{}
  }
})
</script>

<style>
//样式
</style>

4、组建的引用

<template>
<div>
  <div> 

//以标签的形式引入   HomeBanner标签
    <HomeBanner></HomeBanner>
  </div>

//以标签的形式引入  HomeHot标签 HomeNew标签 HomeProduct标签
<HomeHot></HomeHot>
<HomeNew></HomeNew>

 <HomeProduct></HomeProduct>

</div>
</template>

<script setup>
//导入组件
import HomeBanner from './components/HomeBanner.vue';
import HomeNew from './components/HomeNew.vue';
import HomeHot from './components/HomeHot.vue';
import HomeProduct from './components/HomeProduct.vue';
</script>

<style>
//样式
</style>

Goodsitem组件专门用于商品信息的展示，将原先较长的代码缩减，以便日后检查方便