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

不念不忘少年蓝@ 2022-01-29 02:47 232阅读 0赞

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

所谓孰能生巧，vue构建项目联系的多了以后也可随意的封装组件，抽离组件。用起来得心应手。  
实现效果动图如下：  
![在这里插入图片描述][20190520201207618.gif]

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

## 1.新建商品列表组件 ##

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

## 2.商品列表组件的实现 ##

1.  导入头部和尾部组件  
    商品列表页与首页共用header部分和footer部分，因为header部分和footer部分我是单独的组件，所以这里只需要引入header部分和footer部分的组件即可。如下：  
    ![在这里插入图片描述][20190520195740506.png]  
    声明组件  
    ![在这里插入图片描述][20190520195755274.png]  
    使用组件  
    ![在这里插入图片描述][20190520195847629.png]
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>
    
    实现的效果如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]  
    本项目源码：[vue商城项目源码][vue]

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

[20190520201207618.gif]: /images/20220129/cbc2b838c5f742f6b57e9972e4468e22.png
[20190520195127194.png]: /images/20220129/239d75ca53004363b25c1444d73bb023.png
[20190520195740506.png]: /images/20220129/a16008ee472a4e319f8a4c84065c6263.png
[20190520195755274.png]: /images/20220129/441924a71c7440fbacff0673e1e43dff.png
[20190520195847629.png]: /images/20220129/60c6eeb2ae4845089a022cc43d75ea18.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]: /images/20220129/8b759d62747148fea227ad1fc2403a1e.png
[vue]: https://github.com/wnn0809/frontProjects