商城项目移动端个人总结

遇到的问题与解决

无法修改vant组件中的颜色

解决：用深度选择器::v-deep

result数组失去响应式

描述：给某个数组设置了rective来实现响应式，但后续又需要给该数组赋值，导致该数组失去响应式不再是proxy代理的对象
解决：使用ref来代替rective
过程：最初想用数组的push方法来代替数组赋值的形式，但是发现其中用到解构赋值又会失去响应式且比较繁琐，最后直接选用ref来设置响应式
收获：在实践中学习理解了响应式原理，总结了失去响应式的几种情况

对于已经生成订单之后回退到上一个界面的bug

解决：每进入生成订单页面判断一下订单中的商品id是否在购物车中，如果没有则证明已经购买过该商品，弹出友好提示，跳到首页

项目部署到服务器上后在地址栏输入地址如/user，页面404

解决:网页上显示的是静态绝对路径，服务器上没有改路径，更改nginx配置后问题解决

删除购物车商品有时能成功显示，有时不成功显示的bug

原因：删除数据请求发送后立即调用了初始化方法来请求新数据，会存在请求新数据的请求跑的快的情况，造成还没有删除成功数据就已经拿到（有点操作系统课的感觉）
解决：最先想到的是加定时器给“手动”让请求新数据“慢”一些（天真），可是这样并不能真正的确保第二个请求是在第一个请求成功之后才开始操作，谁也不能保证两个请求的速度到底是什么情况，因此这种方法并不可行。涉及到一个异步操作，必须第一个请求发送且成功的情况下，才发送第二次请求。
最优解：使用Promise实现异步操作，在第一个请求的成功之后调用.then（）才开始发送第二次请求。（啊完美）
提升：Promise的实操

性能优化

去掉打包文件中的map文件

这些文件主要是帮助我们线上调试代码，查看样式。所以为了避免部署包过大，通常都不生成这些文件。在vue.config.js下配置productionSourceMap: false, // 生产环境是否生成 sourceMap 文件，一般情况不建议打开

gzip打包

gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。
打包优化前：

打包优化后：

由于服务器带宽比较低，因此还是比较慢，但打包后与打包前相比快了将近10s。

提升

git使用，vant组件库的使用 ，apifox的使用 ，数据请求的练习，提高解决问题的能力

不足

• 代码编写方面：其实没有怎么用到TS,Vuex使用的也不充分，代码写的很乱，不忍直视
• 联调之前应该多多自己发现问题，尽早解决，提高效率，保证联调时尽量少出问题或不出问题
• 项目周期太长，下次写项目要有周期意识，作为负责人应该在保证自己不拖后腿的情况下推动组员项目的进展，提高效率，避免逾期

总结

• 前期搭建项目，使用git踩了很多坑，拖慢了进度
• 自己负责的购物车和生成订单模块没有太大技术难点，更多的是逻辑问题和对数组的操作，因此遇到的问题并不是很多，随后开项目总结会，多多“掌握”其他模块的技术难点和亮点
• 下次多多考虑用户需求以及界面的友好性
• 在代码编写上，团队协作上，处理问题的能力上都有了很大的进步，是一次很有提升又略带不成熟的项目开发经历