資訊專欄INFORMATION COLUMN
摘要：上一篇文章手把手教你如何用構建技術文章聚合平臺一介紹了如何使用搭建的運行環境，并且將與集成，對掘金進行技術文章的抓取，最后可以查看抓取結果。本篇文章將繼續講解如何利用編寫一個精簡的聚合平臺，將抓取好的文章內容展示出來。
上一篇文章《手把手教你如何用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中。
