今天下午终于把毕业设计做到了会员消费结账的功能上了，既紧张又激动啊，因为对我这么个前端小白还是有一些难度的。到晚上凌晨终于实现了部分功能（没错只是部分功能，还没结束），那给我激动的啊，充满了成就感。所以就想马上给记录下来。
一、首先，介绍一下哦。在会员消费结账的页面中，第一部分是会员的信息，通过输入会员手机号码，展示会员信息（暂且还没有实现充值功能，没有余额）。
第二部分则是我要介绍的重头戏（嘿嘿，只是在我看来）。输入商品的ID来获取商品的数据，并渲染到页面中。
二、我的商品有两种，就是上图中的类别（宠物猫和宠物猫用品），分别存储在数据库不同的表中。通过输入框前边的下拉菜单选择商品类别，并与date()中的数据进行双向绑定，根据不同的类别，通过if-else连接相应的接口（没有对接口进行封装，太懒了，哈哈哈哈），获取数值，并push到要渲染到页面的数组中。
三、获取到数据并渲染到页面后，有了些想法（问题），宠物猫是一个单独的生命，它是独一无二的，所以，每个宠物猫的ID仅对应一只宠物猫。那么，我再次输入该商品ID，不应该重复出现，而是弹出一个提示，并且不再push到数组中。
四、对于宠物用品而言，是可以重复添加的。但是，每次输入重复的商品ID，都会将响应的数据再次push到要渲染的数组中，这样就造成数据的重复出现。然后呢，我就将数据添加了一个数量和小计的属性，当宠物用品数据重复出现时，就进行累加，当宠物数据重复出现，就弹出已存在的提示。
五、那么我是怎么实现呢，在宠物猫这，我首先想到的便是遍历匹配，如果匹配到，那就提示响应的信息，没有就将数据push到要渲染的数组中。很明显这样是不对的，如果一个数组有多个数据，多个不同的商品ID，那么不匹配就会出现好多次，并多次push重复数据。
六、所以就不考虑遍历了，直接在if判断语句中通过数组自带的includes/indexOf/find等属性，进行查询，但是问题又出现了，要渲染的数组是一个对象数组，没办法直接查询（也可能是我不会，手动doge），我想到的一个办法就是再创建一个专门用来存放ID的ID数组，当响应数据首次push的时候，同时，ID数组也push接受到的id数据。然后通过includes查看该ID数组是否存在当前查询的商品ID，如果存在就提示，不存在就push，到这里只操作宠物猫的数据就没问题了。
七、于是，我将宠物猫的操作也搬到宠物用品上来了，同样创建一个ID数组，不同的是遇见重复数据，将商品数量+1，并计算“小计”，两个商品单独用着都没问题，一起用就出现问题了，因为在商品这里，遇见重复数据，数量+1，需要更改数组中的数据，这就要使用indexOf来索引渲染的数组下标，在分开的ID数组中并不能索引到与要渲染的数组对应的下标，所以在这里就将两个数组合二为一了，这样就能索引到相对应的下标了。
八、接下来就是更改数据，我首先想到的是删除这个数组，再将这个数组push到要渲染的数组中（这个思路是怎么蹦出来的，我还就用了，走歪了啊），这样的话，ID数组就要和要渲染的数组同步操作了，要splice一起splice，要push一起push，并且在页面渲染的列表还会上下变动，感觉很不合适。
九、这才想到，更改数组对应的下标的值就OK了，但是，问题又又又来了，直接通过下标的方式来修改数组，会出现数组不能被侦听到的情况，绑定的数据改变了，但是，页面没有渲染相应的数量和小计数据。
十、最后查了查资料，使用vue.js提供的$set()方法，才使数组被侦听到。
啊啊啊，终于结束了，明天继续加油！文中可能有些说的不清楚的地方，请见谅啊！（新手小白，doge）
今天首次在掘金上写一些记录，希望能得到掘金上老哥的一些指点。
