摘要：上一篇文章手把手教你如何用构建技术文章聚合平台一介绍了如何使用搭建的运行环境，并且将与集成，对掘金进行技术文章的抓取，最后可以查看抓取结果。本篇文章将继续讲解如何利用编写一个精简的聚合平台，将抓取好的文章内容展示出来。
上一篇文章《手把手教你如何用Crawlab构建技术文章聚合平台(一)》介绍了如何使用搭建Crawlab的运行环境，并且将Puppeteer与Crawlab集成，对掘金、SegmentFault、CSDN进行技术文章的抓取，最后可以查看抓取结果。本篇文章将继续讲解如何利用Flask＋Vue编写一个精简的聚合平台，将抓取好的文章内容展示出来。
文章内容爬虫首先，我们需要对爬虫部分做点小小的补充。上篇文章中我们只编写了抓取文章URL的爬虫，我们还需要抓取文章内容，因此还需要将这部分爬虫编写了。上次爬虫的结果collection全部更改为results，文章的内容将以content字段保存在数据库中。
经分析知道每个技术网站的文章页都有一个固定标签，将该标签下的HTML全部抓取下来就OK了。具体代码分析就不展开了，这里贴出具体代码。
const puppeteer = require("puppeteer");
const MongoClient = require("mongodb").MongoClient;
(async () => {
// browser
const browser = await (puppeteer.launch({
headless: true
}));
// page
const page = await browser.newPage();
// open database connection
const client = await MongoClient.connect("mongodb://192.168.99.100:27017");
let db = await client.db("crawlab_test");
const colName = process.env.CRAWLAB_COLLECTION || "results";
const col = db.collection(colName);
const col_src = db.collection("results");
const results = await col_src.find({content: {$exists: false}}).toArray();
for (let i = 0; i < results.length; i++) {
let item = results[i];
// define article anchor
let anchor;
if (item.source === "juejin") {
anchor = ".article-content";
} else if (item.source === "segmentfault") {
anchor = ".article";
} else if (item.source === "csdn") {
anchor = "#content_views";
} else {
continue;
}
console.log(`anchor: ${anchor}`);
// navigate to the article
try {
await page.goto(item.url, {waitUntil: "domcontentloaded"});
await page.waitFor(2000);
} catch (e) {
console.error(e);
continue;
}
// scrape article content
item.content = await page.$eval(anchor, el => el.innerHTML);
// save to database
await col.save(item);
console.log(`saved item: ${JSON.stringify(item)}`)
}
// close mongodb
client.close();
// close browser
browser.close();
})();
然后将该爬虫按照前一篇文章的步骤部署运行爬虫，就可以采集到详细的文章内容了。
文章内容爬虫的代码已经更新到Github了。
接下来，我们可以开始对这些文章做文章了。
前后端分离目前的技术发展来看，前后端分离已经是主流：一来前端技术越来越复杂，要求模块化、工程化；二来前后端分离可以让前后端团队分工协作，更加高效地开发应用。由于本文的聚合平台是一个轻量级应用，后端接口编写我们用Python的轻量级Web应用框架Flask，前端我们用近年来大红大紫的上手容易的Vue。
FlaskFlask被称为Micro Framework，可见其轻量级，几行代码便可以编写一个Web应用。它靠Extensions插件来扩展其特定功能，例如登录验证、RESTful、数据模型等等。这个小节中我们将搭建一个REST风格的后台API应用。
安装首先安装相关的依赖。
pip install flask flask_restful flask_cors pymongo基本应用
安装完成后我们可以新建一个app.py文件，输入如下代码
from flask import Flask
from flask_cors import CORS
from flask_restful import Api
# 生成Flask App实例
app = Flask(__name__)
# 生成API实例
api = Api(app)
# 支持CORS跨域
CORS(app, supports_credentials=True)
if __name__ == "__main__":
app.run()
命令行中输入python app.py就可以运行这个基础的Flask应用了。
编写API接下来，我们需要编写获取文章的接口。首先我们简单分析一下需求。
这个Flask应用要实现的功能为：
从数据库中获取抓取到的文章，将文章ID、标题、摘要、抓取时间返回给前端做文章列表使用；
对给定文章ID，从数据库返回相应文章内容给前端做详情页使用。
因此，我们需要实现上述两个API。下面开始编写接口。
列表接口在app.py中添加如下代码，作为列表接口。
class ListApi(Resource):
def get(self):
# 查询
items = col.find({"content": {"$exists": True}}).sort("_id", DESCENDING).limit(40)
data = []
for item in items:
# 将pymongo object转化为python object
_item = json.loads(json_util.dumps(item))
data.append({
"_id": _item["_id"]["$oid"],
"title": _item["title"],
"source": _item["source"],
"ts": item["_id"].generation_time.strftime("%Y-%m-%d %H:%M:%S")
})
return data
详情接口
同样的，在app.py中输入如下代码。
class DetailApi(Resource):
def get(self, id):
item = col.find_one({"_id": ObjectId(id)})
# 将pymongo object转化为python object
_item = json.loads(json_util.dumps(item))
return {
"_id": _item["_id"]["$oid"],
"title": _item["title"],
"source": _item["source"],
"ts": item["_id"].generation_time.strftime("%Y-%m-%d %H:%M:%S"),
"content": _item["content"]
}
映射接口
编写完接口，我们需要将它们映射到对应到URL中。
