Vue基础教程（203）网上购物商城开发实战之系统功能模块设计与实现中的首页信息展示模块：Vue实战 | 剁手商城首页这样搞，代码比购物车还满！

最新推荐文章于 2025-11-24 03:44:17 发布

原创最新推荐文章于 2025-11-24 03:44:17 发布 · 263 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

Vue基础教程专栏收录该内容

219 篇文章

订阅专栏

一、为啥首页模块总让前端又爱又恨？

作为一名Vue开发者，每次接到“做个商城首页”的需求，心情都像坐过山车——既兴奋于能打造产品的门面，又头疼于随之而来的复杂逻辑。首页嘛，既要颜值在线，又要性能扛打，还得方便后期迭代。这不，产品经理刚扔来新需求：“用户一进来就得看到商品推荐、轮播图、分类导航……对了，明天上线哈。”（微笑脸）

别慌！其实只要掌握Vue的核心特性，再配合合理的模块设计，首页开发也能变得优雅高效。今天，我们就以“剁手商城”为例，彻底搞懂首页信息展示模块的实现套路。

二、首页模块设计：先理清思路再写代码

在敲代码前，咱们得先当好“建筑师”，把首页拆解成几个关键部分：

轮播图组件：吸引用户眼球的C位担当
商品分类导航：让用户快速找到目标区域
商品推荐列表：首页的核心内容展示区
头部搜索栏：用户的购物导航仪
底部信息区：品牌信任感的建立者

这样的组件化设计，不仅让代码更清晰，还能实现并行开发——你和队友再也不用为代码冲突发愁了！

三、手把手实现：从零搭建首页模块

3.1 环境准备：搭建Vue项目脚手架

如果你还没创建项目，用Vue CLI快速初始化一个：

vue create shopping-mall
cd shopping-mall
npm run serve

3.2 核心代码实现

首页组件 - Home.vue

<template>
  <div class="home">
    <!-- 搜索栏 -->
    <Header @search="handleSearch"/>
    
    <!-- 轮播图 -->
    <Carousel :banners="bannerList"/>
    
    <!-- 分类导航 -->
    <CategoryNav :categories="categoryList"/>
    
    <!-- 商品推荐 -->
    <ProductList :products="productList" :loading="loading"/>
  </div>
</template>
<script>
import { getHomeData } from '@/api/home'
import Header from './components/Header'
import Carousel from './components/Carousel'
import CategoryNav from './components/CategoryNav'
import ProductList from './components/ProductList'

export default {
  name: 'Home',
  components: {
    Header,
    Carousel,
    CategoryNav,
    ProductList
  },
  data() {
    return {
      bannerList: [],     // 轮播图数据
      categoryList: [],   // 分类数据
      productList: [],    // 商品数据
      loading: false
    }
  },
  async created() {
    await this.loadHomeData()
  },
  methods: {
    async loadHomeData() {
      this.loading = true
      try {
        const { banners, categories, products } = await getHomeData()
        this.bannerList = banners
        this.categoryList = categories
        this.productList = products
      } catch (error) {
        console.error('首页数据加载失败:', error)
        this.$toast.error('数据加载失败，请刷新重试')
      } finally {
        this.loading = false
      }
    },
    
    handleSearch(keyword) {
      // 搜索逻辑
      this.$router.push(`/search?keyword=${keyword}`)
    }
  }
}
</script>

轮播图组件 - Carousel.vue

<template>
  <div class="carousel">
    <div class="banner-wrapper" @touchstart="onTouchStart" @touchend="onTouchEnd">
      <div class="banner-list" :style="listStyle">
        <div 
          v-for="(banner, index) in banners" 
          :key="banner.id"
          class="banner-item"
        >
          <img :src="banner.image" :alt="banner.title">
        </div>
      </div>
    </div>
    
    <!-- 指示器 -->
    <div class="indicators">
      <span 
        v-for="i in banners.length" 
        :key="i"
        :class="['indicator', { active: currentIndex === i-1 }]"
      ></span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    banners: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      currentIndex: 0,
      timer: null,
      startX: 0
    }
  },
  computed: {
    listStyle() {
      return {
        transform: `translateX(-${this.currentIndex * 100}%)`,
        transition: 'transform 0.3s ease'
      }
    }
  },
  mounted() {
    this.startAutoPlay()
  },
  beforeDestroy() {
    this.stopAutoPlay()
  },
  methods: {
    startAutoPlay() {
      this.timer = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.banners.length
      }, 3000)
    },
    
    stopAutoPlay() {
      if (this.timer) {
        clearInterval(this.timer)
      }
    },
    
    onTouchStart(e) {
      this.stopAutoPlay()
      this.startX = e.touches[0].clientX
    },
    
    onTouchEnd(e) {
      const endX = e.changedTouches[0].clientX
      const diff = endX - this.startX
      
      if (Math.abs(diff) > 50) {
        if (diff > 0) {
          // 向左滑动
          this.currentIndex = Math.max(0, this.currentIndex - 1)
        } else {
          // 向右滑动
          this.currentIndex = Math.min(this.banners.length - 1, this.currentIndex + 1)
        }
      }
      
      this.startAutoPlay()
    }
  }
}
</script>
<style scoped>
.carousel {
  position: relative;
  overflow: hidden;
  height: 200px;
}

.banner-list {
  display: flex;
  height: 100%;
}

.banner-item {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
}

.banner-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}

.indicator.active {
  background: #fff;
}
</style>

商品列表组件 - ProductList.vue

<template>
  <div class="product-list">
    <div class="section-title">热门推荐</div>
    
    <div v-if="loading" class="loading">商品加载中...</div>
    
    <div v-else class="products">
      <div 
        v-for="product in products" 
        :key="product.id"
        class="product-card"
        @click="goDetail(product.id)"
      >
        <div class="product-image">
          <img :src="product.image" :alt="product.name">
          <div v-if="product.stock === 0" class="sold-out">已售罄</div>
        </div>
        
        <div class="product-info">
          <h3 class="product-name">{{ product.name }}</h3>
          <p class="product-desc">{{ product.description }}</p>
          <div class="product-bottom">
            <span class="price">¥{{ product.price }}</span>
            <span class="sales">已售{{ product.sales }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    products: {
      type: Array,
      default: () => []
    },
    loading: Boolean
  },
  methods: {
    goDetail(productId) {
      this.$router.push(`/product/${productId}`)
    }
  }
}
</script>
<style scoped>
.product-list {
  padding: 15px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}

.products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.product-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.product-card:hover {
  transform: translateY(-2px);
}

.product-image {
  position: relative;
  height: 150px;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sold-out {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-info {
  padding: 10px;
}

.product-name {
  font-size: 14px;
  margin: 0 0 5px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-desc {
  font-size: 12px;
  color: #666;
  margin: 0 0 8px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  color: #ff5000;
  font-weight: bold;
  font-size: 16px;
}

.sales {
  font-size: 12px;
  color: #999;
}
</style>

3.3 数据模拟 - API接口

// api/home.js
// 模拟首页数据
export const getHomeData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        banners: [
          {
            id: 1,
            image: 'https://via.placeholder.com/750x200/FF6B6B/FFFFFF?text=双十一大促',
            title: '双十一大促',
            link: '/activity/1'
          },
          {
            id: 2, 
            image: 'https://via.placeholder.com/750x200/4ECDC4/FFFFFF?text=新品上市',
            title: '新品上市',
            link: '/activity/2'
          }
        ],
        categories: [
          { id: 1, name: '手机数码', icon: '📱' },
          { id: 2, name: '电脑办公', icon: '💻' },
          { id: 3, name: '家用电器', icon: '🏠' },
          { id: 4, name: '食品生鲜', icon: '🍎' }
        ],
        products: [
          {
            id: 1,
            name: '无线蓝牙耳机',
            description: '高音质降噪，续航时间长',
            price: 299,
            image: 'https://via.placeholder.com/200x200/FFE66D/000000?text=耳机',
            sales: 1234,
            stock: 50
          },
          {
            id: 2,
            name: '智能手机',
            description: '全面屏设计，拍照更清晰',
            price: 3999,
            image: 'https://via.placeholder.com/200x200/6A0572/FFFFFF?text=手机', 
            sales: 567,
            stock: 0
          }
        ]
      })
    }, 500)
  })
}

四、避坑指南：那些年我们踩过的首页坑

4.1 图片懒加载：别让图片拖慢首屏速度

首页图片多？必须上懒加载！

<template>
  <img v-lazy="imageUrl" alt="商品图片">
</template>
<script>
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'error.png',
  loading: 'loading.gif',
  attempt: 1
})
</script>

4.2 数据缓存：用户不是来等你加载的

// utils/cache.js
export const cacheHomeData = (data) => {
  const cacheData = {
    data,
    timestamp: Date.now()
  }
  localStorage.setItem('home_cache', JSON.stringify(cacheData))
}

export const getCachedHomeData = () => {
  const cache = localStorage.getItem('home_cache')
  if (!cache) return null
  
  const { data, timestamp } = JSON.parse(cache)
  // 缓存5分钟
  if (Date.now() - timestamp < 5 * 60 * 1000) {
    return data
  }
  return null
}

4.3 错误边界：优雅降级提升用户体验

<template>
  <div v-if="error" class="error-page">
    <img src="@/assets/error.png" alt="出错啦">
    <p>页面加载失败</p>
    <button @click="retry">重新加载</button>
  </div>
  <Home v-else />
</template>