疫情发生至今，本站已出过三个版本的实时疫情图。第一二版主要基于 flask+pyechart（特点是开发速度快，缺点是 UI 比较简陋）；第三版用的 js 代码+flask，效果稍微好一些。最近学习 vue 有几天了，为了及时巩固已学习的内容，所以用 vue 重构了一下该项目。
0.介绍
项目截图
以下为具体的开发过程
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%
