我的第一个vue-pos项目总结:
跟着网上的免费教程技术胖写的,用到的主要是vue-cli、element-ui、axios(接口不通),项目非常简单。初始化样式要写到index.html中,在app.vue主界面中注册个组件,来画左边的功能菜单组件,组件是自己画出来的,router-view可以自己包裹个div对div进行布局。在router中配置根目录匹配的路由,来画右边的功能部分。路由模板已经匹配好了,直接在相应的组件中进行布局。布局要用到element-ui提供的标签。el-row表示行,el-col表示列,:span=”24”表示将一行平均分成24等分,分为7+14的布局,7的部分放一个tabs标签页,写三个tab-pane(窗格)每一个tab-pane放一个table(表格),表格放四个table-column(列),只需要将table属性绑定:data=”对象数组”,下面的column就可以绑定props直接显示data中的数据。
然后进行最右侧的布局。上面进行普通布局即可,下面写一个tabs(标签页),写诺干个tab-pane(窗格)用于放类别。在每个tab-pane中放ul和几个li放商品。数据都是渲染出来的。在data中声明一个数组,用于接收数组对象。在钩子函数created中用axios请求服务器端的数据。axios.get(url地址).then(function(){}).catch(function(){})
将请求回来的数据赋给data中的数组即可用。
下面开始写业务逻辑,鼠标点击最右侧的商品,自动添加到购物车中。给li绑定点击事件,都是在遍历的时候添加的。点击的时候传入对应的li里的数据对象,在methods中遍历购物车中的所有数据,判断购物车中是否已经存在这个数据对象中的商品id,如果存在,找出这个对象,用arr.filter(function(){})过滤出来,并把count加一。如果不存在,则创建一个购物车的的对象的形式,count设为1,push进去。
在操作中设置增加和删除:@click="addOrderList(scope.row)"(element提供的写法),删除:将不是商品id的对象过滤出来重新赋给一个数组。
汇总数量和价格,将这个方法独立定义出来,因为每次增加和删除都会调用。先将总数量和总价格清零,然后遍历整个数组,将所有的count加到一起。将count*price加总到总价上。
清空:将购物车的数组清零,将总数量和总价格清零。