背景
正值春节，新冠病毒现状猖狂，每天宅在家里学习(睡了一上午还有一下午)也不忘关注疫情数据，所有人都在担心今天又有多少人成为了生化武器...为了防止这种情况的再次发生，我决定做个邮件推送的小工具...
在线订阅平台 → https://pages.ouorz.com/covid19
那，也就开始了。
技术栈
之前一直想着学 Node.js 来着，却一直懒癌产生完全无动力，加之寒假期间整天游戏导致智力和开发能力直线下降(完全就是懒好吧)现在慌得一批，以防把以前学的技术知识全部忘完，赶快给自己找点活做... 这次选择 Node.js 也是因为看到一篇 Node.js Express.js 构建网站应用 的教程才尝试着入门。在服务器上部署其实以前一直是我不想学 Node.js 的原因，我一直以为不光要在本地折腾一波环境配置还得在生产服务器上配置杂七杂八的一大堆东西(当时应该是联想到 Webpack 的配置坑才被劝退的)...本次的尝试最先的动机也是抛开了部署，抱着自己做给自己玩的心态继续阅读教程。
文中提到了 MongoDB，不同于 Mysql 关系型数据库，Mongo 是一个非关系型数据库(NoSQL)，是「文档」导向的。结构大概为: 数据库(Database) => 集合(Collection) => 文档(Document)。反正也要学新技术，再拓宽一个技术栈也不是问题。而且在 Node.js 中操作 Mysql 数据库也是需要像在 PHP 中一样在代码里直接写 SQL 语句，一股廉价感(真不要脸)，而使用 MongoDB 则可以通过 MongoDB 的依赖包优雅地进行增查删改...
写到一半又决定，一鼓作气前端也使用之前一直想学着用的 Vue-Cli 脚手架吧。之前看不懂 Vue-Cli 的目录结构，现在耐心理了一理思路总算是看懂了...
所以全部拓宽的技术栈就是：
- Node.js
- Vue-Cli 4
- MongoDB
全部使用到的技术栈是：
- 前端 Vue.js
- 后端 Node.js (可能还有点 PHP)
代码
不得不说 Vue-Cli 是真的好用呢，特别是对于这种单页应用，再结合 GUI 界面，酥爽的开发体验。
- 前端 → https://github.com/HelipengTony/virus_notificator_vue
- 后端 → https://github.com/HelipengTony/virus_notificator_node
数据获取自丁香园·丁香医生(https://ncov.dxy.cn/ncovh5/view/pneumonia)，该网站将疫情 JSON 数据输出在了页面里，所以直接利用 PHP 采集库 QueryList 采集该页面数据...小项目就不要纠结那么多啦 (个屁嘞)。需要注意的是去掉了首尾的一些多余字符，规则如下：
<?php
// 引入 Composer 自动加载
require '../vendor/autoload.php';
// 使用依赖
use QLQueryList;
// 采集与规则
$html = file_get_contents('https://ncov.dxy.cn/ncovh5/view/pneumonia');
$data = QueryList::html($html)->rules([
'name' => ['#getAreaStat','text']
])->query()->getData();
$fetchData = $data->all();
// 处理数据
$fetchData[0] = substr($fetchData[0]['name'],27,strlen($fetchData[0]['name']) - 38);
// 得到 JSON 数据
$dataArray = json_decode($fetchData[0],'UTF-8');
?>↑ PHP 代码
UI 框架使用了早就想试试的不清楚是不是来自 ZEIT 官方的 Vue UI 框架 @zeit-ui/vue (zeit-vue.now.sh)，目前这个 UI 框架应该还不完善，功能还不够齐全并且我在使用中遇到了很多样式故障等，只用于 Side Project (那不就是全部项目了吗)就无所谓了啦
