关于 实时监控 项目的一次 记录与总结

关于本次项目的总结

一、得与失

1.存在的 问题：

1. JS基础知识严重不足:时间格式化处理完全不熟悉，后端需要的格式无法正常处理并且传参
2. 项目开发时，对于业务功能，业务逻辑的预判失误，导致开发延期，对于业务逻辑的不熟悉
3. 关于一些JS常规数据处理不熟悉，数组，对象一些常用的排序、遍历、分类、字符串截取
4. 对于接口数据的处理上，不能优雅地展示出对应数据，而是只关心 后端给我啥就展示啥，不思考数据结构本身的关联性，从而导致[5]
5. 在postman模拟请求时，应该用不同的参数尽可能地多次测试，拿回来的数据做好备份，并且搞懂为什么要这样——传参和给数据，或者说怎样传参和给数据才合理
6. 和后端联调时，应该提前主动沟通 数据的相关事宜，不然他的接口出完了以后，前端只能按照他的思维模式来对接，但是明明有些东西后端处理了，前端就是比较容易处理些，比如本次项目的 “时间段问题”

2.解决的 办法：

【1】【3】
在项目开发时是刚需技能，所以只能多写文章，多总结
【2】
在开始做之前，把业务逻辑理清楚，产品不管再怎么让你自由发挥，你都不要信，还有不能凭自己想当然的去做，这样绝壁要重来
【4】【5】【6】
这都是关于和后端联调的事宜，不可厚非，有经验的后端往往业务上面都非常精通了，所以不用多说，只能去请教，随便争取前端主动性

3.得到锻炼的 能力：

抗压能力——在短时间内，最大努力地处理bug，遇到业务卡点，能尽快想出解决办法：
比如“同一接口下，请求的每条数据包含两种维度的数据，但是要在同一个vue页面里面展示出来”————想到用 v-if + 双 table 实现

项目整体性认识 设计组件，页面设计合理性
在最开始拿到产品的原型时，说实话，有些业务自己没跑通，然后就开始一通瞎做，
最合理的做法就应该是缠着产品给你讲业务，理解页面对于功能点的体现，在动手做之前多思考

二、整体项目 设计架构及功能实现

1、前端页面架构设计(如图所示)：

双tab切换 —— 每个tab页 就是一个 index.vue 充当父组件 红框全为子组件 ，方便复用

子组件页面：

详情页：

2、部分功能实现点

1. el-tab 切换 和 上面 统计 的 双向联动
2. JS时间戳获取当前时间 并处理时间格式 ，多格式转换， 传参到后端
3. JS 实现 无序list 的top3的排名
4. datetimepicker的组件封装及使用
5. echarts图表 与 el-table 之间的联动 互相点击传参 实现对应时间点/地市之间的详情展示
6. 关于前端自己做分页和后端做分页的差别

3、项目卡点

1. 关于后端给的数据非常不适合展示需要的数据格式的处理——“时间段问题”
2. JS获取当前时间的 前15分钟 然后取它最接近 的以5为刻度的时间点

分割线2021-08-10 17:22======