聚米升后台管理系统 (vue3 + ts + pinia + axios)
技术实现:
1、采用 Promise.all() 实现多级多选 select 框下拉数据回显问题,减少代码量
2、封装上传文件模块,并对大文件进行分片上传,断点续传
3、处理api 调试、处理全局数据管理、处理不同测试环境项目打包
4、封装路由鉴权,通过判断权限和类目展示不同的菜单
5、首屏优化:出现加载时间长,对用户体验不佳,使用webpack-bundle-analyzer对包进行分析,并进行了如下
的加载优化:
6、由于数据过大(5000+)同时业务需要一页展示,导致页面卡顿问题,利用虚拟滚动解决卡顿问题
奶山羊数据可视化 (vue2 + Echarts + vuex + axios)
技术实现:
1、Echarts可视化图表展示,以图表形式对数据进行展示,强化数据分析与直观性,并使用 wesocket 技术实时
获取后台信息,做到动态刷新图表信息的功能。
2、大屏适配是需要将原有的px单位弃用,改用计算出的rem为单位,将整个计算公式封装成为公共函数,在各组
件中可以更方便的使用,为整个开发进度提高了效率。
3、在大屏布局中采用了Grid布局,对于样式的编写代码减少了很多,提高了代码的简洁度和后期维护的效
率。
4、自定义图表: 根据UI设计图对Echarts图表进行修改和二次封装,只需要传入固定模版的数据即可渲染成所需
要的图表,并可自定义颜色(例如柱状图、雷达图、折线图等)。
5、DataV大数据的渲染: 通过多家第三方提供数据,进行数据筛选、切割和重新组装,运用到不同大屏显示,
实现大屏切换模块时不同组件的数据渲染
东街e睦邻小程序 (axios + vant2 +腾讯云IM)
技术实现:
1、使用wxjsdk,实现支付,分享给朋友
2、封装图片上传组件并实现压缩图片大小
3、使用腾讯云IM完成聊天室搭建
4、自定义底部样式,适配iphoneX以上机型底部小黑条的安全区域
5、性能优化:将首页的小图标用iconfont替换,减少图片请求次数,使得首页的加载速度提升25%
4、使用 input 组件的 cursor-spacing 属性解决项目中输入框被键盘遮挡问题
6、小程序首页打开速度比较慢,使用分包技术大幅优化项目容积,整项目使用组件化模式