疫情发生至今，本站已出过三个版本的实时疫情图。第一二版主要基于flask+pyechart（特点是开发速度快，缺点是UI比较简陋）；第三版用的js代码+flask，效果稍微好一些。最近学习vue有几天了，为了及时巩固已学习的内容，所以用vue重构了一下该项目。
0.介绍
演示地址： http://ncov.baiyue.one
项目截图
以下为具体的开发过程
1.步骤1：使用Xmind汇总技术储备、疫情基本参数、需求参数等
A：技术储备
主要由UI/UX设计、前端、后端组成，其中最最重要的是UI/UX设计，只要设计好了UI，前端和后端基本就是无脑操作；但是一旦反过来，最后再去设计UI那就非常扯淡了。Adobe XD是目前为止最好用的UI设计工具，本实例的初稿UI设计图如下：
B.现有数据定义汇总
这块是后续统计命名的基础，也是所有概念设计的初衷。我想对于可视化分析而言，有必要单独的拿出来明确下所有定义，这样后面实践也好拿捏。否则的话，实践的时候就会被这些基本定义或概念所阻挠。
本实例初稿定义基本在导图里显示。
C.需求分析
这块是根据定义，然后组合各种可能的数据图形、可展示的参数等等。此处组合非常多，每种组合标注图表类型，比如line、bar 、pie 、area 等等。
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界面
为啥要设计这东西？因为思维导图仅仅理清了总的技术路线，并不能达成最终需求。而这里设计的才是最终需求展示的，也是后续是否无脑写代码的关键，设计的越清晰，对前后端写代码越有帮助，如果很含糊，那么后续写代码就会非常徘徊。
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表，都有非常方便的转换方法。
5.步骤5： 重新调试前端VUE，完成前后端数据接口的对接
这部分就是最终代码了。前端使用axiox调用后端，后端设施cros，基本就搞定了。接下来就是局部稍微优化、移动端响应式适配问题了，这部分调试无关痛痒，后期可以不急不慢的展开。
总结
本项目是近期学习vue之后，首次前后端一起开发的，说实话，vue的出现，让前端代码复用变得非常方便，这与vue的设计初衷有关；vue的数据驱动，这点正好对应python中最最常用的数据类型操作，所以理解上非常容易。在没有学习vue之前，我觉得docker是实时响应编辑的唯一途经，而有了vue之后，前端设计这块被各个组件复用掉了，基本就是只要你写过一次，后面类似的可直接copy过去。而以前的html代码书写的东西，基本无复用的可能。目前本站已基本熟悉vue，后期要是能够搞定用户登陆注册，那基本可以完整的开发一套前端展示和后端管理界面了。
最后，再说说使用vue最大的感受：自动用了vue，翻看无数UI或现成web页面，从逆推思路出发，几乎找不出不能模仿的页面了。组件化开发，只要大致位置相似，复用性100%
