VUE(SPA)项目中使用SEO-为搜索引擎爬虫提供服务
在上一篇文章(VUE(SPA)项目中使用SEO-流程及原理分析)提到过,想要搜索引擎的爬虫过来可以爬取到你网站的内容需要用到
node.js、Nginx、PhantomJS
那么这篇文章将会详细的说一下它们的使用方法。(此处放一张图，帮大家回顾一下整个流程)
利用Nginx就是用来区分这次请求是来自爬虫、还是用户，如果是用户就直接返回给页面就好了。
这里 node.js 是做了个启动PhantomJS的作用，具体代码如下：
// server.js
// ExpressJS调用方式
var express = require('express');
var app = express();
var path = process.cwd();
// 引入NodeJS的子进程模块
var child_process = require('child_process');
app.get('*', function(req, res){
// 完整URL
var url = req.protocol + '://'+ req.hostname + req.originalUrl;
// 预渲染后的页面字符串容器
var content = '';
// 开启一个phantomjs子进程
var phantom = child_process.spawn('phantomjs', [path + '/spider.js', url]);
// 设置stdout字符编码
phantom.stdout.setEncoding('utf8');
// 监听phantomjs的stdout，并拼接起来
phantom.stdout.on('data', function(data){
content += data.toString();
});
// 监听子进程退出事件
phantom.on('exit', function(code){
switch (code){
case 1:
console.log('加载失败');
res.send('加载失败');
break;
case 2:
console.log('加载超时: '+ url);
res.send(content);
break;
default:
console.log('加载页面: '+ url);
res.send(content);
break;
}
});
});
app.listen(3000, function () {
console.log('Spider app listening on port 3000!');
console.log(path + '/spider.js')
});
利用这个node服务就可以调用到PhantomJS啦，PhantomJS的代码如下：
/*global phantom*/
"use strict";
// 单个资源等待时间，避免资源加载后还需要加载其他资源
var resourceWait = 500;
var resourceWaitTimer;
// 最大等待时间
var maxWait = 5000;
var maxWaitTimer;
// 资源计数
var resourceCount = 0;
// PhantomJS WebPage模块
var page = require('webpage').create();
// NodeJS 系统模块
var system = require('system');
// 从CLI中获取第二个参数为目标URL
var url = system.args[1];
// 设置PhantomJS视窗大小
page.viewportSize = {
width: 1280,
height: 1014
};
// 获取镜像
var capture = function(errCode){
// 外部通过stdout获取页面内容
console.log(page.content);
// 清除计时器
clearTimeout(maxWaitTimer);
// 任务完成，正常退出
phantom.exit(errCode);
};
// 资源请求并计数
page.onResourceRequested = function(req){
resourceCount++;
clearTimeout(resourceWaitTimer);
};
// 资源加载完毕
page.onResourceReceived = function (res) {
// chunk模式的HTTP回包，会多次触发resourceReceived事件，需要判断资源是否已经end
if (res.stage !== 'end'){
return;
}
resourceCount--;
if (resourceCount === 0){
// 当页面中全部资源都加载完毕后，截取当前渲染出来的html
// 由于onResourceReceived在资源加载完毕就立即被调用了，我们需要给一些时间让JS跑解析任务
// 这里默认预留500毫秒
resourceWaitTimer = setTimeout(capture, resourceWait);
}
};
// 资源加载超时
page.onResourceTimeout = function(req){
resouceCount--;
};
// 资源加载失败
page.onResourceError = function(err){
resourceCount--;
};
// 打开页面
page.open(url, function (status) {
if (status !== 'success') {
phantom.exit(1);
} else {
// 当改页面的初始html返回成功后，开启定时器
// 当到达最大时间（默认5秒）的时候，截取那一时刻渲染出来的html
maxWaitTimer = setTimeout(function(){
capture(2);
}, maxWait);
}
});
这里面注释写的比较详细，可以看到这个文件实际上就是模拟一个浏览器窗口，从而获取到页面内容，这样爬虫来了，我们就把这个文件获取到的页面内容甩给它就行了。
接下来进入测试阶段，先测试下PhantomJS是否OK
$ phantomjs spider.js 'http://www.baidu.com'
如果见到在命令行里出现了一推html，那恭喜你，你已经征服PhantomJS啦。
一切都准备就绪之后，需要整体测试一次，可以用Postman这个工具发起测试
如果看到了你的内容，那么恭喜你，你已经征服它们啦。
