背景

正值春节，新冠病毒现状猖狂，每天宅在家里学习(睡了一上午还有一下午)也不忘关注疫情数据，所有人都在担心今天又有多少人成为了生化武器...为了防止这种情况的再次发生，我决定做个邮件推送的小工具...

在线订阅平台 → 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 QL\QueryList;

// 采集与规则
$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 (~~那不就是全部项目了吗~~)就无所谓了啦 🙂

Icon 使用了一位国人设计师 dalao 的 Remix Icon (remixicon.com)，目前这个图标库还不支持按需引入，所以打包会很占大小，应该换用 CDN 使用就好。

数据库使用了 MongoDB (www.mongodb.org.cn)，项目中使用的是基础 MongoDB 库实现的增查删改，但之后还是会换用更方面快捷的 Mongoose 之类的库。

邮件发送使用了 NodeMailer (www.npmjs.com/package/nod…) 和阿里云 邮件推送 (https://www.aliyun.com/product/directmail)(免费额度真香嘿)。使用了 SMTP 来发送邮件，所以没有用到阿里云给的 SDK。

定时推送任务使用了 Node-Schedule (www.npmjs.com/package/nod…)，写起来到是很方便的呢，就是不知道后台常驻的性能了：

// 引入依赖
const schedule = require('node-schedule');

// 安排任务 每<秒> 每<分> 每<时> 每<天> 每<月> 每<年>
schedule.scheduleJob('30 * * * * *', function () {
    // 执行任务   
    mailFunc();
});

↑ Node.js 代码

RSS 生成使用了 Feed (www.npmjs.com/package/fee…)，支持生成 Atom 1.0、RSS 2.0、JSON Feed 1.0，需要注意的是需要按照文档填完订阅配置信息，包括贡献者之类的才能正常被客户端订阅。

我最终是将前端后端都部署在了 Nginx 的服务器上，搜了搜技术社区推荐到了使用 Pm2 (www.npmjs.com/package/pm2) 来执行 Node.js 文件并且后台进程守护。文档中还提到还支持操作简单的多进程负载均衡，可能之后在其他用户数量大的项目上会折腾上吧...

后记

这样一来前后端就都能用同一种语言写啦，真是奇妙的体验呢...

JavaScript 也真是神奇的语言呢...

使用 Node.js 与 Vue.js 建立新型冠状病毒疫情数据邮件与 RSS 订阅平台

Subscribe

Comments