黑马程序员前端 Vue3 小兔鲜电商项目——（四）Home 页面布局

Home 页面组件结构

组件结构拆分

按照结构新增五个组件：左侧分类、Banner、新鲜好物、人气推荐、产品列表。在 src/views/Home/components 路径下依次创建 HomeCategory.vue、HomeBanner.vue、HomeNew.vue、HomeHot.vue、HomeProduct.vue：

Home 模块中引入组件

在 Home 的 index.vue 模块入口组件中引入各个组件并渲染：

分类实现

模板代码

在 HomeCategory.vue 文件中添加以下代码：

渲染数据

后端接口返回的 JSON 数据格式如下：

获取数据并进行遍历输出：

banner 轮播图实现

模板代码

封装接口

创建 src/apis/home.js 文件，编写方法用于获取 Banner 图的 API：

/**
 * @description: 获取banner图
 */
import http from '@/utils/http'
export function getBannerAPI() {
    return http({
        url: 'home/banner'
    })
}

渲染数据

获取数据并进行遍历输出：

面板组件封装

在页面中显示的【新鲜好物】和【人气推荐】两个模块是一样的分布，代码也相同，只是显示的数据不同，因此可以抽取公共部分进行复用。

核心思路：把可复用的结构只写一次，把可能发生变化的部分抽象成组件参数(popS/插槽)。抽象可变的部分：

• 主标题和副标题是纯文本，可以抽象成 props 传入
• 主体内容是复杂的模版，抽象成插槽传入

创建公共组件复用

在 src/views/Home/components 路径下创建 HomePanel.vue 文件，代码如下：

抽取主题和副主题

因为主标题和副标题是纯文本，可以抽象成 props 传入，代码如下：

<script setup>
//定义 Props，主标题和副标题
defineProps({
    title: {
        type: String
    },
    subTitle: {
        type: String
    }
})
</script>

在主代码中使用参数：

  

    
    

      {{title}}{{ subTitle }}
    
  
  
  

新鲜好物实现

模版代码

在 src/views/Home/components 路径下有之前创建好的 HomeNew.vue 文件，添加以下代码：

封装接口

在 src/apis/home.js 文件中，编写方法用于获取 【新鲜好物】 的 API：

/**
 * @description: 获取新鲜好物
 * @param {*}
 * @return {*}
 */
export function findNewAPI(){
    return http({
        url: '/home/new'
    })
}

渲染数据

获取数据并进行遍历输出：

人气推荐实现

模板代码

在 src/views/Home/components 路径下有之前创建好的 HomeHot.vue 文件，添加以下代码：

封装接口

在 src/apis/home.js 文件中，编写方法用于获取 【人气推荐】 的 API：

/**
 * @description: 获取人气推荐
 * @param {*}
 * @return {*}
 */
export function findHotAPI(){
    return http({
        url:'/home/hot'
    })
}

渲染数据

获取数据并进行遍历输出：

懒加载指令实现

main.js 入口文件通常只做一些初始化的事情，不应该包含太多的逻辑代码，可以通过插件的方法把懒加载指令封装为插件，main.js 入口文件只需要负责注册插件即可。

封装全局指令

在 src/directives/ 目录下创建 index.js 文件，在其中自定义指令 v-img-lazy，实现当图片进入视口区域时，才对其进行加载：

// 定义懒加载插件
import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
  install (app) {
    // 懒加载指令逻辑
    app.directive('img-lazy', {
      mounted (el, binding) {
        // el: 指令绑定的那个元素 img
        // binding: binding.value  指令等于号后面绑定的表达式的值  图片url
        console.log(el, binding.value)
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            console.log(isIntersecting)
            if (isIntersecting) {
              // 进入视口区域
              el.src = binding.value
              stop()
            }
          },
        )
      }
    })
  }
}

注册全局指令

在 main.js 中自定义指令注册为全局指令：

// 全局指令注册
import { directivePlugin } from '@/directives'
app.use(directivePlugin)

图片懒加载

在 HomeHot.vue 和 HomeNew.vue 文件的代码上使用自定义的懒加载指令进行修改。修改之后如下：

这样当图片进入视口区域后，才会将图片的地址赋给 img 的 src 属性。

Product 产品列表实现

因为商品列表页面也是有很多模块代码可以复用，只是数据不同，因此我们依然可以继续使用封装好的面板组件。

模板代码

在之前创建好的 HomeProduct.vue 文件中添加如下代码：

封装接口

在 src/apis/home.js 文件中，封装获取商品列表信息的接口：

/**
 * @description: 获取所有商品模块
 * @param {*}
 * @return {*}
 */
export function getGoodsAPI() {
    return http({
        url: '/home/goods'
    })
}

渲染数据

获取数据并进行遍历输出：

图片懒加载

使用 v-img-lazy 懒加载指令替换 img 标签的原始 src：

<img v-img-lazy="cate.picture" />


<img v-img-lazy="goods.picture" alt="" />

GoodsItem组件封装

在小兔鲜项目的很多个业务模块中都需要用到同样的商品展示模块，没必要重复定义，封装起来，方便复用。

原代码：

  

    
      
      
{{ good.name }}
      
{{ good.desc }}
      
¥{{ good.price }}
    
  

修改之后的代码：

封装组件

创建 src\views\Home\components\GoodsItem.vue 文件，抽取可复用的代码，并将商品信息抽象成 props 参数传入：

使用组件

修改 src\views\Home\components\HomeProduct.vue 中商品信息的代码：