项目概述
在本篇文章中，我将分享我最近完成的小米商城移动端全栈项目的开发经验。这个项目不仅让我深入了解了全栈开发流程，还让我在实践中解决了各种技术挑战。项目的基本要求包括完成NestJS后端服务搭建、数据库导入、接口开发、动态数据渲染等。进阶要求则涉及到接口鉴权、动态数据渲染优化等。
第一天：后端服务搭建与接口开发
目标任务：完成NestJS项目创建，搭建后端服务，导入SQL数据，以及完成“我的”接口。
实际完成：除了完成既定目标，还额外完成了首页轮播图接口和项目接口鉴权。
遇到的问题及解决方案：
页面跳转问题：通过window.location.href实现页面跳转，解决了布局问题。登录状态保持：使用localStorage保存登录成功后的token，用户名及用户头像等信息，实现了登录状态的保持。登录失败提示：通过固定定位和显示隐藏实现了弹窗提示。轮播图功能不稳定：将swiper代码放入异步图片渲染的下方，解决了轮播图功能不稳定的问题。第二天：前端页面开发
目标任务：完成首页动态数据渲染和分类页面静态渲染。
实际完成：完成了首页动态数据渲染，并额外完成了米圈页面静态渲染。
遇到的问题及解决方案：
楼层导航布局：通过设置body的宽度和高度，以及overflow隐藏，解决了楼层导航的布局问题。楼层导航弹性效果：使用scrollTop获取当前页面滚动条向下滚动的距离，实现了楼层导航的弹性效果。第三、四天：页面静态渲染与功能实现
目标任务：完成购物车页面静态渲染。
实际完成：完成了购物车页面静态渲染，并解决了购物车功能实现中的多个问题。
遇到的问题及解决方案：
左右中间对齐布局：使用justify-content: space-evenly;实现了左右中间对齐的布局。购物车商品数量控制：通过Math.max(1, parseInt(input.value, 10) + 1);确保了购物车商品数量的最小值为一。购物车商品删除事件绑定：使用location.reload()主动触发刷新页面事件，解决了删除后事件绑定问题。购物车总价计算：在后端创建用户购物车表，通过后端数据库进行购物车的操作，提高了计算的准确性。第五天：动态数据渲染与优化
目标任务：完成分类页面和米圈页面的动态数据渲染。
实际完成：完成了分类页面和米圈页面的动态数据渲染，并进行了其他优化。
遇到的问题及解决方案：
动态渲染元素事件绑定：给最大的盒子或父元素添加监听事件，并判断点击元素的类名来实现效果，解决了动态渲染元素事件绑定问题。总结
通过这个小米商城移动端全栈项目的开发，我不仅提升了自己的技术能力，还学会了如何在实际开发中解决问题。这个项目涵盖了从后端服务搭建到前端页面开发，再到动态数据渲染和接口鉴权等多个方面，是一次全面的技术实践。