前言:一个用vue综合构建的多页面的单页应用,纯前端,无请求数据交互,旨在练习vue的架构模式,进阶应用一般问题的经典解法,如监控,路由传值、监控检验、vuex状态写法、路由设计、数据结构的条理性及可维护性、内置交互对象的属性,综合完成应用完整的购物流程。整站包含多个页面,商品列表页、商品详情页、购物车操作页面、订单配置页面、支付页面、个人信息页面(包含订单汇总和地址管理),整体下来虽然没有涉及到比较复杂的逻辑层代码或更为规范的vuex管理,但还是踩了不少坑,尤其是开始默认开启了eslint代码风格检查的时候,其实是地址的增删改部分


页面预览

商品列表页

商品列表页

商品详情页

商品详情页

购物车操作页面

购物车操作页面

订单配置页面

订单配置页面

支付页面

支付页面

个人信息页

个人信息页

几个小技巧(坑)

this.$store.commit(‘name’,data): 仅有data一个参数,故两个以上参数以对象形式传递,为什么说它坑,因为你不这样做它丫的居然也不提示报错

传值: 小组件传值不要随便开路由,要保证路由的合理平级,另外要分辨什么页面需要开子路由、分割子导航组件

关于删除列表指定多向: 也不能算坑吧,如果工作量大的时候容易思维定式的从头删到尾,但这样肯定是不行的,而应该倒序删除,这样可以避免长度变化带来的影响

关于key :一般情况下,vue在渲染完成后,如果数据发生变化,只会重新渲染数据,不会重新渲染整个元素,但是有时候我们需要元素被重新渲染,此时就需要使用key关键字,使用v-bind绑定key关键字,可以实现在数据发生变化时候重新渲染整个元素。注:同一父级元素下所有子元素如果都要在数据变化后重新渲染元素,则需要被绑定的key。所以在本项目中,商品列表是一组件,每个商品都是小组件,在父组件中必须绑定key值

给router-link及组件注册事件:在vue-router2中要使用router-link写入路由,在浏览器渲染的时候会默认把router-link渲染成a。有时候需要为router-link注册事件,对于一般的html元素,直接@click=”eventFun”即可,但是对于router-link,像普通html元素那样注册事件后并不管用,需要添加.native才会成功注册。组件也是一样:

1
2
<component v-on:click.native="doTheThing"></component>
<router-link v-on:click.native="doTheThing"></router-link>

不同路由视图之间有的务必加name

新增地址部分: 组件内先声明好相关状态量,添加函数完成表单的逻辑层验证,对要得到的目标值进行深度监控,同时调取相应的函数完成实时验证

TODOS

相关组件合并: 这里为了方便把新增地址和修改地址的组件分开了,是完全作为一个组件使用的

数据本地化: 本项目旨在调试,刷新后数据归零

没能在刚完成时写下总结,导致慢慢的以前的觉得坑的需要注意的都没什么了,留一个方向:组件之间操作的设置元素动画
(做那个购物车动画的时候没弄明白浏览器为什么不认我的transform,无奈.jpg)

源码及演示

案例源码传送门

在线演示demo

(注:请使用谷歌浏览器,样式是扒下来的,css代码及其臃肿,一些改动也是在Chrome下调试完成的)