网页设置目标:
-
顶部导航栏(实现方式:html + css)
-
导航栏固定和多端适配
-
对github数据包的自动解析与部署(实现方式:
py/c++js::JSON) -
表格显示(实现方式:jQuery dataTable)
-
表格可伸缩(实现方式:jQuery dataTable)
-
表格分组展示(实现方式:jQuery dataTable)
-
表格分组可折叠(实现方式:jQuery dataTable)
-
图表展示(实现方式:echarts.js + map-viz)
-
按省份的区域图像展示渲染(实现方式:echarts.js)
-
特色地域人口流动(实现方式:百度地图api)
-
用户评论模块(弹幕型)(实现方式:目前的想法是ajax + php + mysql)
-
导航栏对于浏览窗口大小的自适应(实现方式:html + css)
-
图表大小对于浏览窗口大小的自适应(实现方式:JavaScript + css)
-
老师要求:数据云存储(要求实现方式:node.js)
-
老师要求:爬虫(要求实现方式:jsDOM)
-
自己独立制作的内容:
- 导航栏的设计与编写,不借助任何框架实现导航栏固定、二级菜单、手机端尽可能适配等功能
- 主界面的搭建,不借助任何框架实现
- 在datatables的支持下,实现了疫情地市数据的表格展示。
- 在echarts的支持下,实现了最新疫情数据在地图上的可视化。
- 在echarts的支持下,实现了历史疫情数据的图表可视化。
- 以上插件库的支持下,尽可能的实现了比较可观的交互能力。
- 使用python实时获取接口数据信息,并部署在云服务器,使用阿里云CDN加速。
-
自己制作的亮点
- 尽可能的贴合手机端用户的需求,取得了一定成果。
- 通过了链接参数处理对全部省市的数据都实现了可视化,超过基本要求的5个省份。
- 探索了datatables和echarts的进阶用法,并学习了许多组件,让交互性提高。
- 实现了数据的自动更新,使得服务稳定并时刻处于最新状态。
- 将数据进行清洗,过滤,得到了对自己比较有用的部分。
-
下面是整个project的不足部分:
- 导航栏在手机模式缺少折叠导航栏的按钮——以自己能力很难实现。
- 热力图、人口流动图表缺失,可视化程度不高——由于时间原因,未能把这两种图表展示出来
- 未能实现echarts内全国地图点击切换省份地图的功能
- 缺少新闻消息模块,版面设置缺乏合理性——在最初构想时规划没到位
- 闲置的搜索框——最初设计导航栏时想在搜索框内搜索省市进行跳转,后来在有datatables的搜索功能后被闲置
- 未实现datatables对列信息的链接跳转渲染,未实现其分组的折叠功能,些许遗憾。
- 由于未使用nodejs对数据进行操作,我对数据处理的过程在前端,在服务器与浏览器的传输中造成浪费。