## 写在前面
自从用邮箱注册了很多账号后,便会收到诸如以下类似的邮件,刚开始还以为是一张图片,后来仔细一看不是图片呀,好像还是HTML呀,于是好奇宝宝我Google一下,查阅多篇资料后总结出怎么用前端知识和Node做一个这样的“邮件网页”。
![image](http://blogpic.vince.xin/CF951178-3DFD-43D6-9A68-9DBD2706C98B.png)
## 确认主题
知道怎么实现功能后,思考着我该写什么主题呢,用一个HTML模板随便给小伙伴们发个邮件炫个技?不行,作为一个很cool的程序员怎么能这么low呢,最近天气变化幅度大,温度捉摸不定,女朋友总是抱怨穿少了又冷穿多了又热,嗨呀,要不我就写个每天定时给宝宝发送天气预报的邮件,另外想起宝宝喜欢看ONE·一个这个APP上的每日更新,要不发天气预报的同时,再附赠一个“ONE的每日订阅”?机智又浪漫,开始搬砖~
## 剧透
本来是想最后放效果图的,怕你们看到一半就没兴趣了,就在前面剧透一下我最后做出来的效果图吧~
![image](http://blogpic.vince.xin/2C971663-4C02-4CDD-8E13-1C71B8170EB4.png)
## 待解决的问题
**1. 如何获取天气预报和ONE上的data?**
答:获取data有两种方法,第一种方法是获取天气预报和ONE的API,第二种是用node爬虫获取天气预报和ONE网页的信息。后来找了下,发现ONE并没有API接口,为了让两者统一,于是决定使用node上的一个插件叫`cheerio`,配合`superagent`能够很方便地爬取网页上的信息。
**2. 如何做出HTML的这种邮件?**
答:之前学过一段时间的express这个框架,接触到模版引擎这个概念,传入data便可获得html文件,再结合node的fs模块,获取到这个html文件,便可以结合node的邮件插件发送HTML邮件啦!
**3. 如何用node发送邮件?**
感谢无私的开源开发者,开发了一款发送邮件的Node插件`nodemailer`,兼容主流的Email厂商,只需要配置好邮箱账号和smtp授权码,便可以用你的邮箱账号在node脚本上发文件,很cool有没有~
**4. 如何做到每日定时发送?**
其实可以通过各种hack的方式写这么一个定时任务,但是既然node社区有这个定时的轮子,那我们直接用就好了,`node-schedule`是一个有着各种配置的定时任务发生器,可以定时每个月、每个礼拜、每天具体什么时候执行什么任务,这正符合每天早晨定时给宝宝发送邮件的需求。
**一切准备就绪,开始做一次浪漫的程序员**
## 编写代码
### 网页爬虫
这里我们使用到`superagent`和`cheerio`组合来实现爬虫:
- 分析网页DOM结构,如下图所示:
![image](http://blogpic.vince.xin/B7509558-D988-4818-8969-77FE5028882A.png)
- 用superagent来获取指定网页的所有DOM:
``` javascript
superagent.get(URL).end(function(err,res){
//
}
```
- 用cheerio来筛选superagent获取到的DOM,取出需要的DOM
``` javascript
imgUrl:$(todayOne).find('.fp-one-imagen').attr('src'),
type:$(todayOne).find('.fp-one-imagen-footer').text().replace(/(^\s*)|(\s*$)/g, ""),
text:$(todayOne).find('.fp-one-cita').text().replace(/(^\s*)|(\s*$)/g, "")
```
**以下就是爬取ONE的代码,天气预报网页也是一个道理:**
``` javascript
const superagent = require('superagent'); //发送网络请求获取DOM
const cheerio = require('cheerio'); //能够像Jquery一样方便获取DOM节点
const OneUrl = "http://wufazhuce.com/"; //ONE的web版网站
superagent.get(OneUrl).end(function(err,res){
if(err){
console.log(err);
}
let $ = cheerio.load(res.text);
let selectItem=$('#carousel-one .carousel-inner .item');
let todayOne=selectItem[0]; //获取轮播图第一个页面,也就是当天更新的内容
let todayOneData={ //保存到一个json中
imgUrl:$(todayOne).find('.fp-one-imagen').attr('src'),
type:$(todayOne).find('.fp-one-imagen-footer').text().replace(/(^\s*)|(\s*$)/g, ""),
text:$(todayOne).find('.fp-one-cita').text().replace(/(^\s*)|(\s*$)/g, "")
};
console.log(todayOneData);
})
```
### EJS模版引擎生成HTML
通过爬虫获取到了数据,那么我们就能够通过将date输入到EJS渲染出HTML,我们在目录下创建js脚本和ejs模版文件:
- app.js
``` javascript
const ejs = require('ejs'); //ejs模版引擎
const fs = require('fs'); //文件读写
const path = require('path'); //路径配置
//传给EJS的数据
let data={
title:'nice to meet you~'
}
//将目录下的mail.ejs获取到,得到一个模版
const template = ejs.compile(fs.readFileSync(path.resolve(__dirname, 'mail.ejs'), 'utf8'));
//将数据传入模版中,生成HTML
const html = template(data);
console.log(html)
```
- mail.ejs
``` javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>
<%= title %>
</h1>
</body>
</html>
```
### 用Node发送邮件
这里我们可以发送纯text也可以发送html,注意的是邮箱密码不是你登录邮箱的密码,而是smtp授权码,什么是smtp授权码呢?就是你的邮箱账号可以使用这个smtp授权码在别的地方发邮件,一般smtp授权码在邮箱官网的设置中可以看的到,设置如下注释。
``` javascript
const nodemailer = require('nodemailer'); //发送邮件的node插件
let transporter = nodemailer.createTransport({
service: '126', // 发送者的邮箱厂商,支持列表:https://nodemailer.com/smtp/well-known/
port: 465, // SMTP 端口
secureConnection: true, // SSL安全链接
auth: { //发送者的账户密码
user: '账户@126.com', //账户
pass: 'smtp授权码', //smtp授权码,到邮箱设置下获取
}
});
let mailOptions = {
from: '"发送者昵称" <地址@126.com>', // 发送者昵称和地址
to: 'like@vince.studio', // 接收者的邮箱地址
subject: '一封暖暖的小邮件', // 邮件主题
text: 'test mail', //邮件的text
// html: html //也可以用html发送
};
//发送邮件
transporter.sendMail(mailOptions, (error, info) => {
if (error) {
return console.log(error);
}
console.log('邮件发送成功 ID:', info.messageId);
});
```
### Node定时执行任务
这里我们用到了`node-schedule`来定时执行任务,示例如下:
``` javascript
var schedule = require("node-schedule");
//1. 确定的时间执行
var date = new Date(2017,12,10,15,50,0);
schedule.scheduleJob(date, function(){
console.log("执行任务");
});
//2. 秒为单位执行
//比如:每5秒执行一次
var rule1 = new schedule.RecurrenceRule();
var times1 = [1,6,11,16,21,26,31,36,41,46,51,56];
rule1.second = times1;
schedule.scheduleJob(rule1, function(){
console.log("执行任务");
});
//3.以分为单位执行
//比如:每5分种执行一次
var rule2 = new schedule.RecurrenceRule();
var times2 = [1,6,11,16,21,26,31,36,41,46,51,56];
rule2.minute = times2;
schedule.scheduleJob(rule2, function(){
console.log("执行任务");
});
//4.以天单位执行
//比如:每天6点30分执行
var rule = new schedule.RecurrenceRule();
rule.dayOfWeek = [0, new schedule.Range(1, 6)];
rule.hour = 6;
rule.minute =30;
var j = schedule.scheduleJob(rule, function(){
console.log("执行任务");
getData();
});
```
## 思路与步骤
当所有的问题都解决后,便是开始结合代码成一段完整的程序,思路很�
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
用Node写一个爬虫脚本每天定时给女朋友发一封暖心邮件项目资源.zip (39个子文件)
用Node写一个爬虫脚本每天定时给女朋友发一封暖心邮件项目资源
main.js 6KB
demo
node-schedule-demo
app.js 1KB
ejsdemo
app.js 450B
mail.ejs 311B
nodeMailDemo
app.js 978B
cheerio-superagent
cheerio-superagent.js 753B
.git
index 1017B
HEAD 23B
refs
heads
master 41B
tags
remotes
origin
HEAD 32B
objects
pack
pack-2a21b2f60c283ea3c635a317d3c52a0f07e11ee9.idx 2KB
pack-2a21b2f60c283ea3c635a317d3c52a0f07e11ee9.rev 236B
pack-2a21b2f60c283ea3c635a317d3c52a0f07e11ee9.pack 21KB
info
description 73B
packed-refs 114B
info
exclude 240B
logs
HEAD 193B
refs
heads
master 193B
remotes
origin
HEAD 193B
hooks
post-update.sample 189B
sendemail-validate.sample 2KB
prepare-commit-msg.sample 1KB
commit-msg.sample 896B
pre-receive.sample 544B
update.sample 4KB
pre-commit.sample 2KB
pre-rebase.sample 5KB
applypatch-msg.sample 478B
fsmonitor-watchman.sample 5KB
push-to-checkout.sample 3KB
pre-applypatch.sample 424B
pre-push.sample 1KB
pre-merge-commit.sample 416B
config 305B
package.json 385B
sample.txt 89B
README.md 12KB
email.ejs 4KB
test1
testupdate.txt 20B
共 39 条
- 1
资源评论
学习开源项目成就精彩人生
- 粉丝: 1093
- 资源: 1641
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 时间序列-黄金-30分钟数据
- UML类图中的泛型与模板类表示
- (源码)基于Arduino的CosplayWings控制系统.zip
- 数据集-目标检测系列- 游艇 检测数据集 yacht >> DataBall
- 时间序列-黄金-15分钟数据
- (源码)基于C语言DiskSim框架的WLAFTL磨损均衡算法模拟系统.zip
- 数据集-目标检测系列- 儿童单车、平衡车、三轮车 检测数据集 kid-bicycle >> DataBall
- (源码)基于WinUI3的照相管理系统.zip
- (源码)基于Java和MySQL的学生成绩管理系统.zip
- trekcolors R 包为科幻迷和数据分析爱好者提供了独特的 Star Trek 和 LCARS 调色板
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功