Vue商城项目（篇1）首页实现

首页展示

步骤1：引用搜索栏组件

 <Search></Search>

import Search from '@/components/Search'
export default {
    name:'index',
    data () {
        return {
            backImg:[], //轮播图照片数组
            navImg:[],   // 导航分类
            loucengImg:[] //楼层
        }
    },
    components: {
        Search
    }
}

步骤2：请求获取轮播图信息

获取分类导航信息

获取楼层信息

    mounted(){
        // 获取轮播图数据
       let promise1= this.axios.get('/home/swiperdata')
       promise1.then((res)=>{
        //    console.log(res)
           this.backImg=res.data.message
       })
        //  请求分类
        let promise2=this.axios.get('/home/catitems')
        promise2.then((res)=>{
            // console.log(res)
            this.navImg=res.data.message
        })
        // 请求楼层数据
        let promise3=this.axios.get('/home/floordata')
        promise3.then((res)=>{
            // console.log(res)
            this.loucengImg=res.data.message
        })   
    }

轮播图实现:element-UI走马灯

        <div class="lunboArea">
          <el-carousel :interval="5000" arrow="always"  height="150px">
            <el-carousel-item v-for="item in backImg" :key="item.goods_id">
                <img class="lunboPic" :src="item.image_src" />
            </el-carousel-item>
            </el-carousel>
        </div>

分类导航实现

        <!-- 导航区域 -->
        <div class="navArea">
            <div class="navItem" v-for="item in navImg" :key="item.name">
                <img  :src="item.image_src" />
            </div>
        </div>

楼层实现

        <!-- 楼层区域 -->
 <div class="loucengArea">
       <div class="loucengItem clearFix" v-for="item in loucengImg" :key="item.index">
         <div class="title">
            <img class="titleImg" :src="item.floor_title.image_src" alt="">
          </div>
         <div class="product" v-for="product in item.product_list" :key="product.index">   
           <img class="productImg" :src="product.image_src" alt="">
         </div>
     </div>
 </div>