COVID-19全球实时趋势

项目简介

一个展示 COVID-19 全球实时趋势的 web 应用，基于 Vue/Bulma/Echarts 和 Flask 构建。

• 参考: www.worldometers.info/coronavirus…
• 数据源: NovelCOVID/API

- 查看全球

- 查看USA

- 查看无效国家

功能特性

• 查看全球的实时疫情趋势

• 查看特定国家的实时疫情趋势

• 可直接点开 HTML 文件浏览，虽然缺少路由跳转功能

URL路径

• / GET：COVID-19全球实时趋势

• /:country GET：COVID-19国家实时趋势

• /api/valid/:country GET: 判断国家名称/iso2/iso3是否有效

• /xxx.[js|css|ico] GET: 静态文件

设计

前端

前端显示两个主页面: COVID-19全球实时趋势和COVID-19国家实时趋势，两个页面板块设计一致，只是数据上有所区别。

在COVID-19实时趋势页面中，顶行表明标题；基本的数据指标有全球的感染人数、死亡人数、康复人数、活跃人数、每日新增病例、每日新增死亡；图表可视化组件有最近30天的感染人数、死亡人数、康复人数、每日新增病例、每日新增死亡等折线图/条形图。 最后是一个表格，给出了全球所有国家的详细COVID-19信息。可以通过点击国家跳转到相应的国家实时趋势界面。

前端包括html、javascript、css文件以及一个 favicon.ico

• 可视化组件

可视化组件通过百度的 Echarts库绘制，在common.js文件中，通过函数封装，在函数中获取 dom，初始化echart对象，传入基本配置文件，再通过 axios库获取远程的Covid-19 json数据，传入echart实例对象中即可。按照此设计模式，生成相应的可视化组件，最后在html 文件底部，导入 common.js，执行需要的函数。

• 基本数据和全球表格-DOM渲染

数据与DOM的动态绑定是通过Vue框架实现的，在HTML，编写 Vue 元素，在common.js 文件中编写生成Vue实例，内容包括绑定的元素/数据、实例化后执行的回调函数、绑定的方法，Vue对象的实例化也封装到一个函数中，再在html文件底部调用需要执行的函数。

• 样式设计

HTML样式使用简单好用的CSS框架Bulma，来设计前端组件的布局、大小、颜色等。HTML页面顶部是页面大标题和数据最近的更新时间；下面是基本数据（用文字展现），再下面是可视化图表，再之后是全球国家数据表格，页脚是作者和工具声明。

favicon.ico 图标是由 Covid-19的首字符 C 构成。

后端

后端提供路由功能，返回映射的静态文件，包含html/css/javascrpit等；简单国家名称判断服务；以及404错误处理。

后端框架采用Python的Flask，不使用视图模板技术，HTML文件直接以静态文件形式返还给客户端。

路由服务

• / | 根路径，返回COVID-19全球实时趋势，静态文件 index.html;

• /:country | 路径变量 country 可以是国家名称、iso2或iso3，返回COVID-19全球实时趋势，静态文件 country.html;

• /common.js | 返回静态文件 common.js;

• /common.css | 返回静态文件 common.css；

• /favicon.ico | 返回静态文件 favicon.ico;

• /api/valid/:country | 判断路径变量 country 是否是一个有效的国家名称、iso2或iso3；返回一个json数据{“country”:str, “vaild”: Boolean };

• 404错误处理 | 对于所有的404错误，返回主页，index.html。

国家名称判断

首选获取全球所有国家的名称、iso2和iso3数据，数据变换为包含所有数据的一维list[str]。设计一个函数，传入一个 country:str 参数，通过 in 关键字来判断country是否存在与list 中，返回一个bool 对象。RESTful API api/valid/:country 的处理器将会调用这个函数。

---

源码 - GitHub