购物车-前后端分离版

前言

        看了很多网上关于购物车的内容，感觉没一个可以用的。现在用到购物车的场景太多了，各种APP，小程序，网站都有。

        先说一下前后端分离问题。

        在前后端不分离的应用模式中，前端页面看到的效果都是由后端控制，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的耦合度很高。这种应用模式比较适合纯网页应用，但是当后端对接App时，App可能并不需要后端返回一个HTML网页，而仅仅是数据本身，所以后端原本返回网页的接口不再适用于前端App应用，为了对接App后端还需再开发一套接口。

       在前后端分离的应用模式中，后端仅返回前端所需的数据，不再渲染HTML页面，不再控制前端的效果。至于前端用户看到什么效果，从后端请求的数据如何加载到前端中，都由前端自己决定，网页有网页的处理方式，App有App的处理方式，但无论哪种前端，所需的数据基本相同，后端仅需开发一套逻辑对外提供数据即可。

思路

        购物车与前端的交互，完全是JSON交互。在做购物车这个功能之前，先用 Fiddler 4(不会用自己百度) 抓包工具看下现在大厂的应用是怎么做的

小米商城	购物车的商品信息计算在前端，比如点击了购物车里面的数量  +  和  -  都是不调用后端接口，直接客户端计算了购物车的商品价格。
京东商城	完全依赖后端返回的数据，每一次 +  和  -  都是后端计算，并且将整个购物车计算结果返回。
淘宝	淘宝我没仔细看，不过比较有意思的是淘宝在商品加入购物车的页面居然不显示购物车商品的总数。

        我最赞成京东商城的做法，完全依赖后端计算，因为京东的店铺系统是最复杂的，有自己的店，也有第三方旗舰店，也有跨店满减以及PLUS会员价格不一样等等，这些规则，显然不能前端来计算，甚至购物车里面十几个商品中每一个商品是否被选中都影响到计算总价的。

        你可能会说，你的业务可能不会像京东那么复杂，可以前端直接根据商品数量计算价格，考虑后续，比如你们系统后续不会做促销，梯度价格(买1个还是3个价格可能不一样哦)等。甚至你们公司现在只卖自己的商品，后续别的商家跟你们合作，在你们的网站上卖，不就是第三方旗舰店吗？这个时候需要可以变得分组，就是商家分组，每个商家会有不同的包邮费呢。

        综上，数据完全依赖后端，前端只做好展示的架构就OK啦。

前端交互数据设计

        在接口设计之前，先要看一下基本购物车的整体数据结构。

 {
    "money": 3400,                               //购物车总价
    "selMoney": 3400,                            //选中商品总价                                                                                      
    &