走进Vue时代进阶篇(01):重构电商购物车模块
前言
从这篇文章开始,我准备给大家分享一些关于Vue.js这门框架的技巧性系列文章,正好我们公司项目中也用到了Vue。所以,教是最好的学。进阶篇比较适合于二三线城市,还在小厂打拼的童鞋们。欢迎你们跟着闰土大叔走进MVVM时代。
首先,需要声明一点,本篇文章不会从基础开始讲起,因为Vue官方文档已经讲得很清楚了,我就不再赘述了。所以,之前对Vue这门框架不太熟悉的童鞋可以先去官网上看看基础知识,比如Vue的模板语法、计算属性、条件渲染、列表渲染、事件处理、表单输入绑定以及Class与Style绑定等。进阶篇我会侧重讲点官网入门指南没讲到的、偏技巧性的东西。
那么接下来,搬好小板凳,正文从这开始~
在开始写购物车的业务代码前,我们需要对需求进行分析,这样有助于我们理清业务逻辑。首先,购物车需要展示一个已加入购物车的商品列表,包含商品的名称、单价、购买数量和操作等信息,还需要实时显示购买的总价。其中购买数量可以增加或减少,每类商品还可以从购物车中移除。最终实现的效果如下图所示:
在明确需求之后,我们就可以开始动手敲代码了。基础篇都会以直接引入Vue.js文件为例。先在index.html中引入Vue.js,然后创建一个根元素来挂载Vue实例,在data选项内写入我们需要的数据列表,里面包含了商品名称、单价、购买数量。这里需要说明一下,在实际业务中,这个列表是通过Ajax从服务端动态获取的,这里只做示例:
var app = new Vue({ el:'#app', data:{ list:[ { id:1, name:'iphone X', price:8388, count:1 }, { id:2, name:'apple watch3', price:2888, count:1 }, { id:3, name:'MackBook Pro', price:12488, count:1 } ] } })
数据构建好之后,我们便可以在index.html中展示列表了,毫无疑问的是,肯定会用到v-for指令。为了考虑到用户体验,我们在这里需要做一点小小的优化。因为每个商品都是可以从购物车删除的,所以当列表为空时,在页面显示一个“购物车为空”的提示会更加友好,我们可以通过判断数组list的长度来实现该功能:
<div id="app" v-clock> <template v-if="list.length"> <table class="shopCar"> <thead> <tr> <th></th> <th>商品名称</th> <th>商品单价</th> <th>购买数量</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(item, index) in list"> <td>{{ index+1 }}</td> <td>{{ item.name }}</td> <td>{{ item.price }}</td> <td> <button @click="handleReduce(index)" :disabled="item.count === 1">-</button> {{ item.count }} <button @click="handleAdd(index)">+</button> </td> <td> <button @click="handleRemove(index)">移除</button> </td> </tr> </tbody> </table> <h3>总价:¥ {{ totalPrice }}</h3> </template> <div v-else>购物车为空</div> </div>
相信眼尖的同学会发现一个比较陌生的指令v-cloak,它究竟是干嘛的?官网指南里也没提到啊...
这里抖一个小包袱,议题叫做解决Vue初始化慢导致页面闪动的最佳实践。你可能会发现,当网速较慢、Vue.js文件还没加载完时,在页面上会显示 {{ 插值 }} 的字样,知道Vue创建实例、编译模板时,DOM才会被替换,所以这个过程屏幕是有闪动的。于是,v-cloak指令应运而生,你只需要在根元素上添加上这个指令,然后在CSS中添加上一句:
[v-cloak]{ display:none; }
就可以完美的解决这个问题了。但需要注意的是,v-cloak对于简单的项目很实用,但是在具有webpack工程化的项目里,项目的HTML结构只有一个空的div元素,剩余的内容都是由路由去挂载不同组件完成的,所以不再需要v-cloak。
让我们接着说回购物车的事情。总价totalPrice是依赖于商品列表而动态变化的,所以我们要考虑用计算属性来实现,顺便将结果转化为带有“千位分隔符”的数字。
computed:{ totalPrice: function(){ var total = 0; for(var i=0;i<this.list.length;i++){ var item = this.list[i]; total += item.price * item.count; } return total.toString().replace(/\B(?=(\d{3})+$)/g,','); } }
这段代码的难点在于千位分隔符的转换(每隔三位数加进一个逗号),各位童鞋可以查阅正则匹配的相关内容后尝试了解replace()的正则含义。
最后就剩下商品列表的渲染和相关的几个操作了。先是用v-for指令把数组list循环出来。商品序号、名称、单价、数量都是直接使用插值来完成的,在第4列的两个按钮<button>用于增减购买数量,分别绑定了两个方法handleReduce和handleAdd,参数都是当前商品在数组list 中的索引。button中使用了v-bind和v-on两个指令(这里用的都是语法糖写法)。
什么是语法糖呢?
语法糖就是指在不影响功能的情况下,添加了某种方法实现同样的效果。
让我们接着说回button绑定的动态属性disabled,每件商品购买数量最少是1件,所以当count为1时,不允许再继续减少,所以这里给<button>动态绑定了disabled特性来禁用按钮。
最后就是在methods选项内添加3个方法:
methods:{ handleReduce: function(index){ if(this.list[index].count === 1) return; this.list[index].count--; }, handleAdd: function(index){ this.list[index].count++; }, handleRemove: function(index){ this.list.splice(index, 1); } }
这3个方法都是直接对数组list的操作,没有太复杂的逻辑。需要说明的是,虽然在button上已经绑定了disabled特性,但是在handleReduce方法内又判断了一遍。这是因为在某些时候,可能不一定会用button标签,也可能是div、span等,给它们增加disabled是没有任何作用的,所以为了安全起见,在业务逻辑中再判断一次,避免因修改HTML模板后出现bug。
后记
这大概就是一次用Vue重构电商项目中的购物车模块的所有实现过程。这可能是你们学习Vue.js框架的一小步,却是我当Vue讲师梦想迈出的一大步。
童鞋们,你们知道,我得努力了,梦想才会照进现实
你起早努力的日子,那些你熬夜努力的时光
那些你太累觉得再也站不起来 却依然支撑自己起身的夜晚
那才是梦想的力量
重要的不是结果,是过程
如果你们认识到了这一点,你们会发现
也许梦想不会成真,但更好的会到来。
走进Vue时代进阶篇(01):重构电商购物车模块的更多相关文章
- web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 ☝☝☝
web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 学习 ...
- web前端Vue+Django rest framework 框架 生鲜电商项目实战✍✍✍
web前端Vue+Django rest framework 框架 生鲜电商项目实战 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频 ...
- 引爆潮流技术 Vue+Django REST framework打造生鲜电商项目
引爆潮流技术Vue+Django REST framework打造生鲜电商项目 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受, ...
- Laravel 获取当前 Guard 分析 —源自电商购物车的实际需求
iBrand 产品中关于购物车的需求比较复杂,我们基于 overture/laravel-shopping-cart 扩展出了更加符合电商需求的购物车包,之前有文章进行过简单的介绍: Laravel ...
- 【Redis】Hash常见应用场景 - 电商购物车
电商购物车 以用户id为key 商品id为field 商品数量为value 购物车操作 [key(用户id),field(商品id),value(数量)] 添加商品 -> hset cart: ...
- vue Router——进阶篇
vue Router--基础篇 1.导航守卫 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的 ...
- JAVAEE——宜立方商城01:电商行业的背景、商城系统架构、后台工程搭建、SSM框架整合
1. 学习计划 第一天: 1.电商行业的背景. 2.宜立方商城的系统架构 a) 功能介绍 b) 架构讲解 3.工程搭建-后台工程 a) 使用maven搭建工程 b) 使用maven的tomcat插件启 ...
- Vue+Django REST framework打造生鲜电商项目
1-1 课程导学 2-1 Pycharm的安装和简单使用 2-2 MySQL和Navicat的安装和使用 2-3 Windows和Linux下安装Python2和Python3 2-4 虚拟环境的安装 ...
- Java进阶专题(十三) 从电商系统角度研究多线程(上)
前言 本章节主要分享下,多线程并发在电商系统下的应用.主要从以下几个方面深入:线程相关的基础理论和工具.多线程程序下的性能调优和电商场景下多线程的使用. 多线程J·U·C 线程池 概念 回顾线程创 ...
随机推荐
- select控件自动触发change事件
这里接上面的二级联动.背景:当页面跳转到修改页面时,需要首先绑定学院和专业.这就需要在页面加载时触发select的change事件,具体用trigger函数进行实现.代码如下. $("#xs ...
- 制造测试数据的程序及对拍程序概述(Like CyaRon)
作为一名OIer,比赛时,对拍是必须的 不对拍,有时可以悔恨终身 首先,对拍的程序 一个是要交的程序 另一个可以是暴力.搜索等,可以比较慢,但是必须正确 下面是C++版对拍程序(C++ & c ...
- Sagit.Framework For IOS 开发框架入门开发教程1:框架下载与环境配置
背景: 前天开源了框架:开源:Sagit.Framework For IOS 开发框架 所以注定要追补一套开发教程了,所以尽量抽空了!!! 步骤 1:下载框架源码 GitHub:https://git ...
- .NET Core快速入门教程 1、开篇:说说.NET Core的那些事儿
一..NET Core的诞生 聊 .NET Core,就不得不说他的爸爸 .NET.当年Java刚刚兴起,如火如荼,微软也非常推崇Java,当时Windows平台的Java虚拟机就是微软按照JVM标准 ...
- vue2入门之vue-cli
vue-cli vue在web前端可谓是大放异彩,尤其在国内与angular.react有三足鼎立之势.很多人想入门vue2而又苦于不知从何下手.因为vue2是以组件化开发的,最好要搭配webpack ...
- java web学习笔记 jstl
(尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/53311722 冷血之心的博客) 一.JSTL标签介绍 1.什么是 ...
- poj Minimum( CutStoer Wagner算法)
Minimum Cut 题目: 给出一张图.要求你删除最小割权和图. 算法分析: //////////////////// 转载 --- ylfdrib ///////////////// ...
- Android实战简易教程-第三十四枪(基于ViewPager和FragmentPagerAdapter实现滑动通用Tab)
上一段时间写过一篇文章<基于ViewPager实现微信页面切换效果> 里面实现了相似微信Tab的页面.可是这样的实现方法有个问题.就是以后全部的代码逻辑都必须在MainActivity中实 ...
- 模拟教室网络(跨VLAN,跨网段通讯)
要求: 1,跨VLAN,三个教室在不同的VLAN中,翻番至网络风暴 2,三个VLAN在三个不同的网段 3,设置访问控制列表,组织每个网段的前八个IP不可访问服务器 4,其他IP均可访问外网的服务器 操 ...
- ajax接受json响应
一.显示页面(ajax_xml.html) body部分 <!-- 支持多选的列表框 --> <select name="first" id="firs ...