初次写vue商城项目的一些流程及反思

前言

     前段时间在负责某商城的前端，因为页面简单流程不复杂，遂大胆采用了vue框架来写该项目前端。之前有写过两个微信小程序所以上手vue难度也不算很高，毕竟思路是相通的只是某些写法不同罢了。但毕竟是在正式项目中第一次用vue，算是对自己这段时间学习的成果的检验，下面先介绍所采用的技术栈。

技术栈

    首先用vue官方脚手架vue-cli搭建了项目，本来考虑ios端点击延迟问题引入fastclick（但是引入了反而报错是怎么回事？？），一些基本的小组件采用vue项目中比较常用elementUI，使用vue-router控制页面路由，考虑到该项目比较小没有采用vueX来缓存页面信息，而是直接用localstorage来缓存一些比较常用的的信息（如用户信息），在与后台接口对接时使用了axios，该框架采用了ES6的promise语法，运用过程中也加深了我对promise的理解，最后用webpack打包来进行真机测试。

项目内容及踩过的坑

    由于项目比较简单主要介绍功能及踩的坑，实现过程不多说。

首页及购物车

                     

 

    首页总共就包括一个搜索框及商品列表，首先我将公用的底部导航栏进行封装，方便后面使用，将页面头部，搜索框，列表项分别拆分成三个组件。然后！！第一个坑来了，由于这么做了，在后期与后台对接搜索接口时，搜索框的内容死活不能传给列表项，导致本来几分钟就能完成的功能整整花了一个多小时。大概原因是：由于我是通过$emit先把搜索框的内容传给父组件，再由父组件props给列表项，父组件接收到值了但是传不过去，我理解为由于搜索框一开始内容为空，所以父组件在mounted时把空值传给列表项了，但是实时修改的项没有传过去，由于时间有限没有去深究原因，最后将搜索框及列表项放在同一个组件，并给搜索框加了一个搜索按钮，在点击搜索按钮时再进行传值将问题解决了。

    然后在点击购物车按钮时将当前项缓存，如果点击同一个商品数量加一，点击的最新项加到数组最前面，此处又是一个大坑。主要是给数组去重，由于学习了ES6，觉得Set甚是好用，一开始确实是去重成功了，但是仅仅限于数组为空时，但我总不能每次给数组加东西的时候都先给清空吧？那我之前的数据怎么办？于是坑来了，在没有缓存时去重没有问题，但是每次加入购物车时我会先获取缓存中购物车的数据，再进行添加，然后用Set就死活去不了重了，后面我试过不下五种不同的去重方法，都一一失败了。我理解为在没有缓存时，购物车数组里面的每一项是一个JSON，所以去重成功，但是我从缓存加载出的数组里面每一项已经不是一个JSON了，而是一个JSON对象，两个对象是不同的，所以自然无法去重。解决方案：利用js中的累计器reduce来判断数组的id，如果没有相同的id则再添加到数组，第一次用这个属性，短短几行但觉得甚是神奇。

this.listArray = this.listArray.reduce((preVal, curVal) => { //  利用累计器判断对象id去重
    if (hash[curVal.id]) {

    } else {
       hash[curVal.id] = true && preVal.push(curVal)
    }
       // hash[curVal.id] ? '' : hash[curVal.id] = true && preVal.push(curVal)
    return preVal
    }, [])
    console.log(this.listArray)

    购物车没有首页那么心累，有一些小坑但不至于毫无头绪，主要实现了购物车总金额的动态计算，全选，左滑删除功能（录屏的时候忘记录进去了）。

登陆注册及个人中心

               

    注册界面用了element的一个组件来验证密码是否相同，其他类似下拉框手风琴选项卡效果都是直接用的element组件没什么好说的，然后来介绍最后一个坑吧。坑出在联系我们这一栏，本来我是想在点击这一栏的时候弹出电话让用户直接拨打，可是真机测试的时候发现电话在页面加载的时候就会弹出，不太清楚原因，最后给电话这一栏弄了个新页面得以解决。这样这个简单的商城也就算完成了，其实这种简单的项目个人还是推荐用传统的方式开发，这次虽说是拿来练手但是也付出了代价（加班），不过能用自己一直想用的技术栈也就算值了，附上github地址

反思

    经过这个项目已经踩过的几个坑，深深意识到自己的js掌握得还是不够扎实，vue有了一定基础但是还需要多去了解一些原理。其实遇到的都是很基础性的问题，但由于基础不够扎实在刚遇到时不能准确定位出问题导致白白浪费时间，期间情绪也不佳，所以这段时间我决定先暂时不去学习所谓的新技术，继续巩固自己js基础，短时间内准备先看完《你不知道的javascript》，有时间再考虑其他更高深的书籍。毕竟树根扎得越深，才能长得越大。