前端架构师成长计划

1. 掘金爬虫 #

通过一个实例来介绍如何编写网络爬虫抓去掘金数据，并存储到MySQL数据库中，以及定时任务爬虫来更新内容

2. 核心步骤 #

发起HTTP请求获取网页内容
使用类似jQuery的语法来操作网页提取需要的数据
把数据保存到数据库中以供查询
建立一个服务器来显示这些数据
可以定时爬取数据
让程序稳定运行
对编码进行转换

3. 核心类库 #

3.1 request #

3.1.1 安装 #

npm install --save request

3.1.2 GET请求 #

var request = require('request');
request('http://www.baidu.com', function (error, response, body) {
  if (!error && response.statusCode == 200) {
    console.log(body);
  }

3.1.3 POST application/json #

const request=require('request');
const options={
    url: 'http://localhost:8080/post',
    method:'POST',
    json: true,
    headers: {
        "Content-Type":"application/json"
    },
    body: {name:"zfpx",age:8}
}
request(options,function (error,response,body) {
    if (!error && response.statusCode == 200) {
        console.log(body);
    } else {
        console.error(error);
    }
});

3.1.4 POST application/x-www-form-urlencoded #

const request=require('request');
const options={
    url: 'http://localhost:8080/form',
    method:'POST',
    json: true,
    form:{name:'zfpx',age:10}
}
request(options,function (error,response,body) {
    if (!error && response.statusCode == 200) {
        console.log(body);
    } else {
        console.error(error);
    }
});

3.1.5 POST multipart/form-data #

const request=require('request');
const fs=require('fs');
var formData = {
    name: 'zfpx',
    avatar:{
      value:  fs.createReadStream('avatar.jpg'),
      options: {
        filename: 'avatar.jpg',
        contentType: 'image/jpeg'
      }
  }
};
request.post({url:'http://localhost:8080/upload', formData}, function (error, response, body) {  
    if (!error&&response.statusCode==200) {
        console.log(body);
    } else {
        console.log(error);
    }
})

3.2 cheerio #

cheerio是一个node的库，可以理解为一个Node.js版本的jquery，使用方式和jquery基本相同。

3.2.1 安装 #

npm install cheerio

3.2.2 load装载DOM #

let str=`
<h2 class="title">Hello world</h2>
`;
const cheerio=require('cheerio');
const $=cheerio.load(str);
$('h2.title').text('hello there!');
$('h2').addClass('welcome');
console.log($.html());

3.2.3 选择器 #

选择器在 Context 范围内搜索，Context又在Root范围内搜索。
root在右，context在左
selector 和context可以是一个字符串表达式，DOM元素，和DOM元素的数组，或者chreeio对象。
root 是通常是HTML 文档字符串。

$(selectior,[context],[root])

let html=`
<ul id="fruits">
  <li class="apple">Apple</li>
  <li class="orange">Orange</li>
  <li class="pear">Pear</li>
</ul>
`;

let cheerio=require('cheerio');
let $=cheerio.load(html);
console.log($('.apple','#fruits').text());

3.2.5 attr修改属性 #

获得和修改属性
在匹配的元素中只能获得第一元素的属性。
如果设置一个属性的值为null，则移除这个属性
你也可以传递一对键值，或者一个函数。
```
attr(name,value)
```

console.log($('ul').attr('id'));
$('.apple').attr('id','favorite').attr('class','favorite');
$('.apple').attr({id:'favorite',class:'favorite'});
console.log($('.favorite').html());
console.log($('ul').html());

3.2.6 removeAttr(name) #

通过name删除属性

$('.favorite').removeAttr('id');

3.2.7 prop()修改状态值 #

$('input[type="checkbox"]').prop('checked')
//=> false

$('input[type="checkbox"]').prop('checked', true).val()
//=> ok

3.2.8 data()自定义属性 #

$('<div data-apple-color="red"></div>').data()
//=> { appleColor: 'red' }

$('<div data-apple-color="red"></div>').data('apple-color')
//=> 'red'

var apple = $('.apple').data('kind', 'mac')
apple.data('kind')
//=> 'mac'

3.2.9 val()赋值 #

$('input[type="text"]').val()
//=> input_text

$('input[type="text"]').val('test').html()
//=> <input type="text" value="test"/>

3.2.10 hasClass( className ) #

检查匹配的元素是否有给出的类名

$('.pear').hasClass('pear')//=> true
$('apple').hasClass('fruit')//=> false
$('li').hasClass('pear')//=> true

3.2.11 addClass(name) #

增加class(es)给所有匹配的elements.也可以传函数。

$('.pear').addClass('fruit').html()//=> <li class="pear fruit">Pear</li>
$('.apple').addClass('fruit red').html()//=> <li class="apple fruit red">Apple</li>

3.2.12 emoveClass([className]) #

从选择的elements里去除一个或多个有空格分开的class。如果className 没有定义，所有的classes将会被去除，也可以传函数

$('.pear').removeClass('pear').html()//=>Pear
$('.apple').addClass('red').removeClass().html()//=>Apple

3.2.13 find(selector) #

获得一个在匹配的元素中由选择器滤过的后代

$('#fruits').find('li').length//=> 3

3.2.14 parent([selector]) #

获得通过选择器筛选匹配的元素的parent集合

$('.orange').parents().length// => 2
$('.orange').parents('#fruits').length// => 1

3.2.15 next()获得第一个本元素之后的同级元素 #

$('.apple').next().hasClass('orange')//=> true
$('.pear').next().html()//=> null

3.2.16 .nextAll() #

获得本元素之后的所有同级元素

$('.apple').nextAll()//=> [<li class="orange">Orange</li>, <li class="pear">Pear</li>]
$('.apple').nextAll().length//=>2

3.2.17 prev() #

获得本元素之前的第一个同级元素

$('.orange').prev().hasClass('apple')//=> true

3.2.18 preAll() #

获得本元素前的所有同级元素

$('.pear').prevAll()//=> [<li class="orange">Orange</li>, <li class="apple">Apple</li>]

3.2.19 slice(start,[end]) #

获得选定范围内的元素数组

$('li').slice(1).eq(0).text()//=> 'Orange'
$('li').slice(1, 2).length//=> 1

3.2.20 siblings(selector) #

获得被选择的同级元素(除去自己)

$('.pear').siblings().length//=> 2
$('.pear').siblings('.orange').length//=> 1
$('.pear').siblings('.pear').length//=> 0

3.2.21 first() #

会选择chreeio对象的第一个元素

('#fruits').children().first().text()//=> Apple

3.2.22 last() #

会选择chreeio对象的最后一个元素

$('#fruits').children().last().text()//=> Pear

3.2.23 eq(i) #

通过索引筛选匹配的元素。使用.eq(-i)就从最后一个元素向前数。

$('li').eq(0).text()//=> Apple
$('li').eq(-1).text()//=> Pear

3.2.24 children(selector) #

获被选择元素的子元素

$('#fruits').children().length//=> 3
$('#fruits').children('.pear').text()//=> Pear

3.2.25 each(function(index,element)) #

迭代一个cheerio对象，为每个匹配元素执行一个函数。要提早跳出循环，返回false.

var fruits = [];

$('li').each(function(i, elem) {
  fruits[i] = $(this).text();
});

fruits.join(', ');
//=> Apple, Orange, Pear

3.2.26 map(function(index,element)) #

迭代一个cheerio对象，为每个匹配元素执行一个函数。Map会返回一个迭代结果的数组。

$('li').map(function(i, el) { 
  return $(this).attr('class');
}).join(', ');
//=> apple, orange, pear

3.2.27 filter(selector) #

迭代一个cheerio对象，滤出匹配选择器或者是传进去的函数的元素。
如果使用函数方法，这个函数在被选择的元素中执行，所以this指向的手势当前元素。

$('li').filter('.orange').attr('class');//=> orange

$('li').filter(function(i, el) { 
    // this === el 
    return $(this).attr('class') === 'orange';
}).attr('class')；


//=> orange

3.2.28 append(content,[content…]) #

在每个元素最后插入一个子元素

$('ul').append('<li class="plum">Plum</li>')
$.html()
//=>
// <li class="apple">Apple</li>
// <li class="orange">Orange</li>
// <li class="pear">Pear</li>
// <li class="plum">Plum</li>//

3.2.29 prepend(content,[content,…]) #

在每个元素最前插入一个子元素

$('ul').prepend('<li class="plum">Plum</li>')
$.html()
//=>
// <li class="plum">Plum</li>
// <li class="apple">Apple</li>
// <li class="orange">Orange</li>
// <li class="pear">Pear</li>

3.2.30 after(content,[content,…]) #

在每个匹配元素之后插入一个元素

$('.apple').after('<li class="plum">Plum</li>')
$.html()
//=>
// <li class="apple">Apple</li>
// <li class="plum">Plum</li>
// <li class="orange">Orange</li>
// <li class="pear">Pear</li>

3.2.31 before(content,[content,…]) #

在每个匹配的元素之前插入一个元素

$('.apple').before('<li class="plum">Plum</li>')
$.html()
//=>
// <li class="plum">Plum</li>
// <li class="apple">Apple</li>
// <li class="orange">Orange</li>
// <li class="pear">Pear</li>

3.2.32 remove( [selector] ) #

从DOM中去除匹配的元素和它们的子元素。选择器用来筛选要删除的元素。

$('.pear').remove()
$.html()//=>

// <li class="apple">Apple</li>
// <li class="orange">Orange</li>

3.2.33 replaceWith( content ) #

替换匹配的的元素

var plum = $('<li class="plum">Plum</li>')
$('.pear').replaceWith(plum)
$.html()
//=>
// <li class="apple">Apple</li>
// <li class="orange">Orange</li>
// <li class="plum">Plum</li>//

3.2.34 empty() #

清空一个元素，移除所有的子元素

$('ul').empty()$.html()

3.2.35 html( [htmlString] ) #

获得元素的HTML字符串。如果htmlString有内容的话，将会替代原来的HTML

$('.orange').html()
//=> Orange
$('#fruits').html('<li class="mango">Mango</li>').html()
//=> <li class="mango">Mango</li>

3.2.36 text( [textString] ) #

获得元素的text内容，包括子元素。如果textString被指定的话，每个元素的text内容都会被替换。

$('.orange').text()//=> Orange
$('ul').text()//=> Apple// Orange// Pear

3.3 debug #

在编写程序的时候，有时候需要输出一些调试信息，以便排查问题。
但是在程序运行过程中又不需要这些信息，为了方便切换而且不需要改代码，可以使用debug模块
```
let debug = require('debug')('app:main');
debug('现在的时间是%s',new Date());
```
Window系统在命令行中执行 SET DEBUG=app:*
Mac系统在命令行中执行 export DEBUG=app:*

3.4 corn #

cron用来周期性的执行某种任务或等待处理某些事件的一个守护进程

符号	含义
星号(*)	代表所有可能的值
逗号(,)	可以用逗号隔开的值指定一个列表范围，例如，“1,2,5,7,8,9”
中杠(-)	可以用整数之间的中杠表示一个整数范围，例如“2-6”表示“2,3,4,5,6”
正斜线(/)	可以用正斜线指定时间的间隔频率，*/10，如果用在minute字段，表示每十分钟执行一次

单位	范围
Seconds	0-59
Minutes	0-59
Hours	0-23
Day	1-31
Months	0-11
Day of Week	0-6

var cronJob = require('cron').CronJob;
var job1 = new cronJob("* * * * * *",function(){
  console.log('每秒');
});
job1.start();

3.5 监听未知错误 #

大部分情况下，异步的IO操作发生的错误无法被try catch捕获，如果没有捕获会导致程序退出
在Node.js中，如果一个抛出的异常没有被try catch捕获，会尝试将错误交给uncaughtException事件处理函数来进行处理，仅当没有注册该事件处理函数时才会导致进程直接退出。

process.on('uncaughtException',function (err) {
    console.error('uncaughtException: %s',erro.stack);
});

3.6 pm2 #

pm2是一个功能强大的进程管理器，通过pm2 start来启动程序, 当该进程异常退出时,pm2会自动尝试重启进程。

npm install pm2 -g
npm2 start 
pm2 stop

3.7 编码(iconv-lite) #

var request = require('request');
var iconv=require('iconv-lite');
let cheerio=require('cheerio');
request({url: 'http://top.baidu.com/buzz?b=26&c=1&fr=topcategory_c1'
, encoding: null},function(err,response,body){
    if(err)
        console.error(err);
    body = iconv.decode(body, 'gbk').toString();
    let $=cheerio.load(body);
    let movies=[];
    $('.keyword .list-title').each((index,item) => {
        let movie=$(item);
        movies.push({
            name:movie.text()
        });
    });
    console.log(movies);
})

3.8 发送邮件 #

nodemailer是一个简单易用的Node.js邮件发送模块

const nodemailer = require('nodemailer');
let transporter = nodemailer.createTransport({
    // host: 'smtp.ethereal.email',
    service: 'qq', // 使用了内置传输发送邮件 查看支持列表：https://nodemailer.com/smtp/well-known/
    port: 465, // SMTP 端口
    secureConnection: true, // 使用了 SSL
    auth: {
        user: '83687401@qq.com',
        // 这里密码不是qq密码，是你设置的smtp授权码
        pass: 'gfndwuvvfpbebjdi',
    }
});

let mailOptions = {
    from: '"83687401" <83687401@qq.com>', // sender address
    to: '83687401@qq.com', // list of receivers
    subject: 'hello', // Subject line
    // 发送text或者html格式
    // text: 'Hello world?', // plain text body
    html: '<h1>Hello world</h1>' // html body
};

// send mail with defined transport object
transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
        return console.log(error);
    }
    console.log('Message sent: %s', info.messageId);
    // Message sent: <04ec7731-cc68-1ef6-303c-61b0f796b78f@qq.com>
});

3.9 HTTP代理工具 #

Windows 平台有 Fiddler，macOS 有 Charles，阿里有AnyProxy
基本原理就是通过在手机客户端设置好代理IP和端口,客户端所有的 HTTP、HTTPS 请求就会经过代理工具

3.9.1 https抓包设置 #

3.9.1.1 Fiddler #

Tools > Fiddler Options > Connections
- Fiddler listens on port 8888
- Allow remote computers to connect
Tools > Fiddler Options > HTTPS > Decrypt HTTPS traffic
- Capture HTTPS CONNECTs
- Decrypt HTTPS traffic

3.9.1.2 Android #

进入手机的 WLAN 设置，选择当前所在局域网的 WiFi 链接，设置代理服务器的 IP 和端口
访问http://192.168.31.236:8888/显示echo页面
下载 FiddlerRoot certificate，下载并安装证书，并验证通过

3.9.1.3 抓取接口 #

过滤 mp.weixin.qq.com 接口
历史消息 https://mp.weixin.qq.com/mp/profile_ext
文章详情 https://mp.weixin.qq.com/mp/getappmsgext

导航菜单