商城项目商品列表页的渲染实现(含动图)

有了v-for循环，渲染商品列表简直不要太方便了，以前写一个商品列表页要一天，现在只需要几分钟，除了模拟数据会耗一点时间。这里可以了解下Mock模拟数据，它可使前端工程师独立于后端进行开发，在前端可以先行自己测试，之后再与后端对接联调，可以节省不少的时间。

所谓孰能生巧，vue构建项目联系的多了以后也可随意的封装组件，抽离组件。用起来得心应手。
实现效果动图如下：

商品列表页的实现步骤如下：

1.新建商品列表组件

新建商品列表组件goodsList.vue文件，在首页点击查看商品时，跳转到商品列表。这里使用router-link，绑定跳转后的路径为商品列表页的路径/goods。如下：
index.vue文件：

2.商品列表组件的实现

1. 导入头部和尾部组件
   商品列表页与首页共用header部分和footer部分，因为header部分和footer部分我是单独的组件，所以这里只需要引入header部分和footer部分的组件即可。如下：
   
   声明组件
   
   使用组件
   

2. 中间部分商品列表的实现
   商品列表部分布局由nav导航部分和一些商品图标和商品信息简单构成，还可以根据需要实现更为复杂的需求。

   2.1 没有采用mock数据模拟，所以直接定义了一个数据列表，通过v-for循环从列表中读取数据，进而渲染到页面。定义的数据列表如下：

   return {
   	count: 0,
   	goodsList: [
   	    {
   	        src: require('../assets/goods/mi6.jpg'),
   	        		productName: '小米6',
   	        		productId: 10001,
   	        		prodcutPrice: 1998,
   	    },
   	    {
   	     	src: require('../assets/goods/miS2.jpg'),
   	        		productName: '红米S2',
   	        		productId: 10002,
   	        		prodcutPrice: 996,
   	    },
   	    {
   	      	src: require('../assets/goods/mi6x.jpg'),
   	        		productName: '小米6x',
   	        		productId: 10001,
   	        		prodcutPrice: 1998,
   	    },
   	    {
   	      	src: require('../assets/goods/mi8SE.jpg'),
   	        		productName: '小米8SE',
   	        		productId: 10001,
   	        		prodcutPrice: 2558,
   	    },
   	    {
   	      	src: require('../assets/goods/jiadian1.jpg'),
   	        		productName: '家庭电视',
   	        		productId: 10001,
   	        		prodcutPrice: 6126,
   	    },
   	    {
   	        src: require('../assets/goods/pingheng.jpg'),
   	        		productName: '平衡车',
   	        		productId: 10001,
   	        		prodcutPrice: 2500,
   	    },
   	    {
   	        src: require('../assets/goods/note.jpg'),
   	        		productName: '笔记本',
   	        		productId: 10001,
   	        		prodcutPrice: 5679,
   	    },
   	    {
   	      	src: require('../assets/goods/zipai.jpg'),
   	        		productName: '自拍杆',
   	        		productId: 10001,
   	        		prodcutPrice: 129,
   	    }
   	  ]
   	}
   },
   

   2.2 商品列表页数据渲染实现代码如下：

   <div class="goods">
        	<nav class="nav-goods">
          	<a href="/" class="home">Home/</a>
          	<span>Goods</span>
          	<!-- 购物车 -->
          	<div class="cart">
          		<router-link :to="{path: '/carts'}">
          			<img src="../assets/sider-shopcar.png">
          			<i>购物车({{count}})</i>
          		</router-link>
          	</div>
   	 	</nav>
      	<div class="goodsinfo">
      		<ul>
      			<!-- 渲染商品列表数据 -->
      			<li v-for="item in goodsList">
      				<!-- 商品图片渲染 -->
      				<div class="pic">
                     	<a href="#"><img :src="item.src" alt=""></a>
                   </div>
                   <!-- 渲染商品名称价格等描述 -->
                   <div class="goodsDesc">
                   	<div class="goodsname">{{item.productName}}</div>
                   	<div class="goodsprice">{{item.prodcutPrice}}</div>
                   	<div class="cartBtn">
                   		<span>加入购物车</span>
                   	</div>
                   </div>
      			</li>
      		</ul>
      	</div>
   </div>
   

   实现的效果如下：
   

每天进步一点点、充实一点点、加油！！！