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

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

0.介绍

项目截图

以下为具体的开发过程

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

A:技术储备

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

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 界面

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

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%

联系方式
广告
网站统计

累计发布:210 篇

总点赞量:1304

累计运行:5 年 122 天

建站日期:2018-10-25