Vue 一个有点小复杂的电商项目(带数据库)

这几天做了一个小项目，目的是为了巩固自己所学习的知识，毕竟实践出真知。只有把你所学习的知识点用到项目上才知道你自己到底学没学会。刚开始学Vue的时候安装各种插件都感觉到各种崩溃，更别提后面所学习的各种指令，还有vuex、axios、.....，配置路由也是各种心酸。那段时间真的有点小烦躁，

但是当你进入这个状态，不断的去做练习做项目的时候你会发现这些东西也就那么一回事，对于VUEX更多的还是用于实现一种数据共享，axios则是为了获取数据。刚开始是会碰到很多坑，这是必然的。当你坑踩得多了，你就知道怎么去避免，怎么去跨过这个坑。废话说到,下面是我所做的项目链接 http://47.105.126.251/zhangbin/#/login 这里最好还是用谷歌、火狐打开，不然可能会没反应，有一部分的不足望谅解。

这个项目中用到了路由拦截、数据获取、本地储存，数据库我用的是mysql 服务器用的是 XAMPP

只有你登录了才可以点击其他的路由，不让他会一直在登录的页面。账号是：123，密码：123。

购物车下面的结算我是仿造某个电商网做的，当点击勾选之后，再点结算后才当前勾选到的数据上传到数据库，在订单状态这个页面在渲染出来。总金额运用到了computer这个计算属性，进行一个数据的时时更新。下面是截图。

这是没勾选到的状态：

这是勾选到的状态：

当我点击当前的+或-的按钮是，数据会进行一个更新。

难点部分就是需要判断全选这个按钮有没有勾选到，或是单个复选框有没有勾选到，只有当勾选到才可以进行一个结算功能和多个删除的功能。

结算、多个删除这些功能你需要进行一个数组查重，因为我这里上传数据是有id，需要通过判断两个数组是否有相同的id来对被选到和没被选到的id进行操作。

男装、女装、零食这些商品分类只需要通过get方法获取到sid，把当前对应的sid的数据赋值到数组在进行渲染就可以了。需要注意的当你用post方法向数据库提交数据的时候最好用params转一下，下图所示：

var params = new URLSearchParams();
    params.append("username", obj.username)
    params.append("password", obj.password)

第一个参数是你自定义的name,第二个是你需要post的对象。