校园生活项目开发总结

项目应用技术

• 前后端技术选型： 前端UI层：Vant4 移动端UI组件库+Vue3+Vite构建工具。
• 后端业务层：SpringBoot2.6.3+MyBatisPlus3.3。 持久化层：MySQL关系型数据库5.7+MongoDB4.4.8+Redis7。
• 部署：Docker容器化部署Redis、MySQL、MongoDB。
• 通信：前后端通信WebSocket。
• 第三方：阿里云对象存储OSS、阿里云短信服务、IP归属地接口

项目安排

以天数来划分每天该完成的内容,我的任务:

1. 二手闲置发布页面
2. 论坛帖子发布页面
3. 失物招领发布页面
4. 帮我取、帮我送发布页面
5. 帮我买、帮我做发布页面
6. 个人中心

       可以看见我的任务就是就是开发前端内容,页面上等,这也是因为我们项目做过更改,一开始不是做这一项目,后面交换更改项目的时候,进度已经落后许多,我们组长就以各组员擅长的内容安排工作,这样有利于推进项目的进度,但这也有不好的地方,每个组员之间对完成整个项目的概念就会缺乏,不过好在顺利完成了项目,组员们之间配合很好.

问题解决

        解决这个问题的办法,就是自己要抽时间去学习,可以以观看视频的形式等,去对完成一整个项目的步骤等加强概念,熟悉模式,可以找一个完成项目视频去跟练.

项目遇到的问题

我的前端页面模块遇到的问题：

        底部安全区的问题,iPhone X 等机型底部存在底部指示条，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。

        Vant 中部分组件提供了safe-area-inset-bottom属性，设置该属性后，即可在对应的机型上开启适配

        v-for的使用,v-for使用in关键字进行集合数组的遍历,我们app项目的home首页就使用了两次,将要遍历的集合数组对象封装起来,使用时直接调用即可。

        最后觉得轮播图达不到我们想要的效果,就给它设计样式实现该效果,把内容封装起来,以卡片的样子,通过v-for遍历出来。

 

        横向滚动框的实现,一开始想使用vant组件实现该效果,问题并没有该效果的展示也没有该效果类似的设计案例,就使用了轮播图,去遍历已有代买代办订单的内容,使用轮播图出现了一个问题:现象是轮播组件swipe渲染的宽度为0。     

        由于渲染的很多数据都是接口获取的,因此通过控制字段是否开始渲染,字段是从接口异步获取到的，而van-swipe却会在vue的mounted阶段就开始渲染，导致此时轮播图获取到的宽度为0.原因就是字段还没获取到就渲染了van-swipe,导致vant组件中的js计算出来的宽度是0,解决方案就是通过控制字段来同步控制vant组件的渲染即可。

总结

        VantUI是有赞团队开发的一款针对于小程序及手机端的一款移动端框架,使用时非常方便,但问题也不少,重要的一个点就是记住:好好读文档 好好读文档 好好读文档,重要的事情说三遍在进行页面的设计时,通常是使用一个组件进行设计,其实可以多个组件组合使用的,我们项目的评论模块就是结合了其他组件,像横向滚动框,也是在vant里面无法实现其效果的,最后回归样式上给它实现了该功能,内容通过封装再调用。

        项目虽然做完了，但是我们仍然保持一颗学习的心，从中我们体会到团队协作的重要性，每一个人都是一个顶梁柱，不可或缺。我们从中学到了很多，理论要结合实践，很多东西只有自己做了才能体会到.