• 欢迎访问佰阅部落
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

VUE+FLASK+Adobe XD重构COVID19疫情图:思路笔记

数据可视化 佰阅 3年前 (2020-04-27) 2504次浏览 0个评论

疫情发生至今,本站已出过三个版本的实时疫情图。第一二版主要基于flask+pyechart(特点是开发速度快,缺点是UI比较简陋);第三版用的js代码+flask,效果稍微好一些。最近学习vue有几天了,为了及时巩固已学习的内容,所以用vue重构了一下该项目。

0.介绍

演示地址: http://ncov.baiyue.one

项目截图

VUE+FLASK+Adobe XD重构COVID19疫情图:思路笔记

以下为具体的开发过程

1.步骤1:使用Xmind汇总技术储备、疫情基本参数、需求参数等

VUE+FLASK+Adobe XD重构COVID19疫情图:思路笔记

A:技术储备

主要由UI/UX设计、前端、后端组成,其中最最重要的是UI/UX设计,只要设计好了UI,前端和后端基本就是无脑操作;但是一旦反过来,最后再去设计UI那就非常扯淡了。Adobe XD是目前为止最好用的UI设计工具,本实例的初稿UI设计图如下:

VUE+FLASK+Adobe XD重构COVID19疫情图:思路笔记

B.现有数据定义汇总

这块是后续统计命名的基础,也是所有概念设计的初衷。我想对于可视化分析而言,有必要单独的拿出来明确下所有定义,这样后面实践也好拿捏。否则的话,实践的时候就会被这些基本定义或概念所阻挠。

本实例初稿定义基本在导图里显示。

C.需求分析

这块是根据定义,然后组合各种可能的数据图形、可展示的参数等等。此处组合非常多,每种组合标注图表类型,比如linebarpiearea 等等。

D.实际代码架构思路设计

导图里只列举了VUE前端的思路设计,基本就是盖房子模型的套路,从头到脚设计,此处不在乎UI,只在乎页面需要实际展示的内容文本,至于内容最终如何展现,这是UI/UX设计时要做的。

后端使用的python,由于前几个版本的开发,新需求对我而言已非常熟悉,主要设计内容为mysql表结构设计、数据爬取、数据查询,最后就是docker打包一下,用docker-compose.yml启动初始化环境就行。定时任务使用linux系统自带的crontab完成。实际上后端代码花2小时就可以搞定。

我设计的表结构如下:

# info0
infect  //num
confirm
heal
dead
updatetime //str

# info1
x: date []
y: add_confirm []

# info2
x: date []
y: infect [] ; heal [] ; dead []

# info3
x: date []
y: heal_rate []; dead_rate []

# info4
top10_country [] ; confirm []

# info5
countryname[] ; confirm [] ; heal [];dead []; infect []; add_confirm [] 

2.步骤2:使用Adobe XD 设计完整的UI界面

为啥要设计这东西?因为思维导图仅仅理清了总的技术路线,并不能达成最终需求。而这里设计的才是最终需求展示的,也是后续是否无脑写代码的关键,设计的越清晰,对前后端写代码越有帮助,如果很含糊,那么后续写代码就会非常徘徊。

VUE+FLASK+Adobe XD重构COVID19疫情图:思路笔记

3.步骤3: 使用Vs code工具,编写VUE前端代码

vue里使用pug语法写html非常迅速,后期查找维护也非常容易;使用stylus替代css样式,效用同上。这部分的代码,主要依据XD设计图写出web页面代码来,主要是样式。完成之后,加上模拟的数据图表。至此完成此步骤。

其中图表单独成一个组件,就可以重复调用,这就是vue的强大之处,写好一次组件,就可以复用了,比如本示例中就调用了4次图表组件,每次仅需传递一个对象就行。

<template>
  <div>
    <nocvheader></nocvheader>
    <sesstionA></sesstionA>
    <sesstionB :info="info0"></sesstionB>
    <sesstionC :info="info1" id="GlobleTrends"></sesstionC>
    <!-- 全球趋势 -->
    <sesstionC :info="info2"></sesstionC>
    <!-- 治愈率、死亡率 -->
    <sesstionC :info="info3" id="curerate"></sesstionC>
    <!-- top10 -->
    <sesstionC :info="info4" id="top10"></sesstionC>
    <!-- 前10国家数据 -->
    <!-- <sesstionD :info="info5.data" :toplist="info4.option.xAxis.data"></sesstionD> -->
    <sesstionE></sesstionE>
  </div>
</template>

实际上包括标题、首页左侧文本、右侧图片也是复用了我之前写的代码,直接拿来用,替换下里面的图文就行。

4.步骤4: 根据前端需求,编写python后端代码

在众多编程语言中,php早已淡出热度榜,在功能要求与速度上,主流的趋势是功能性远胜于速度追求,机器码实际上执行效率远比我们想象的快,而功能追求才是考验人脑智慧结晶的试金石,python终将伴随我们很久很久,或许为了好几代人的必备技能。

至于为啥要用mysql存储?因为方便、通用。方便是因为docker容器化部署,线上线上秒级部署;通用,是因为不论在线的web接口对接,还是本地导出转换成excel表,都有非常方便的转换方法。

VUE+FLASK+Adobe XD重构COVID19疫情图:思路笔记

5.步骤5: 重新调试前端VUE,完成前后端数据接口的对接

这部分就是最终代码了。前端使用axiox调用后端,后端设施cros,基本就搞定了。接下来就是局部稍微优化、移动端响应式适配问题了,这部分调试无关痛痒,后期可以不急不慢的展开。

 

总结

本项目是近期学习vue之后,首次前后端一起开发的,说实话,vue的出现,让前端代码复用变得非常方便,这与vue的设计初衷有关;vue的数据驱动,这点正好对应python中最最常用的数据类型操作,所以理解上非常容易。在没有学习vue之前,我觉得docker是实时响应编辑的唯一途经,而有了vue之后,前端设计这块被各个组件复用掉了,基本就是只要你写过一次,后面类似的可直接copy过去。而以前的html代码书写的东西,基本无复用的可能。目前本站已基本熟悉vue,后期要是能够搞定用户登陆注册,那基本可以完整的开发一套前端展示和后端管理界面了。

 

最后,再说说使用vue最大的感受:自动用了vue,翻看无数UI或现成web页面,从逆推思路出发,几乎找不出不能模仿的页面了。组件化开发,只要大致位置相似,复用性100%

 


佰阅部落 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:VUE+FLASK+Adobe XD重构COVID19疫情图:思路笔记
喜欢 (3)

您必须 登录 才能发表评论!