教你三步爬取前端優質文章
前言
hello，小夥伴們，我是你們的pubdreamcc，本篇博文出至於我的GitHub倉庫node學習教程資料，歡迎小夥伴們點贊和star，你們的點贊是我持續更新的動力。
GitHub倉庫地址：node學習教程
好了，廢話不多說，今天我們來玩一個有意思的 demo ：
先來看以下效果：
伺服器會每10分鐘更新相關內容，好了，開始今天的練習了~
用到的技術
expresssuperagent（服務端傳送請求模組）art-template官方API第一步
找介面
先來看看首頁獲取前端文章的後端介面 API 在哪裡。
開啟官網，(F12) 開啟開發者模式檢視network 選項，咱們可以看到獲取文章介面的api如下：
開啟開發者模式，我們很輕鬆的找到獲取文章的介面，這就好辦了，說實話前端開發，只要有了介面，那就等於有了一切，我們可以盡情的 coding 了~
第二步
建立伺服器檔案 app.js ，通過superagent 模組傳送請求獲取文章資料。
app.js 是我們服務端程式碼，這裡通過服務端傳送請求獲取爬蟲所要的資料儲存下來。
// 定義一個函式，用來獲取首頁前端文章資訊function getInfo () { // 利用superagent 模組傳送請求，獲取前20篇文章。注意請求頭的設定和POST請求體資料（請求引數） superagent.post('https://web-api..im/query').send(params).set('X-Agent', 'Juejin/Web').end((err, res) => { if (err) { return console.log(err) } // 儲存所有文章資訊 const array1 = JSON.parse(res.text).data.articleFeed.items.edges const num = JSON.parse(res.text).data.articleFeed.items.pageInfo.endCursor // 篩選出點贊數大於 50 的文章 result = array1.filter(item => { return item.node.likeCount > 50 }) params.variables.after = num.toString() // 再次傳送請求獲取另外的20篇文章 superagent.post('https://web-api..im/query').send(params).set('X-Agent', 'Juejin/Web').end((err, res) => { if (err) { return console.log(err) } const array2 = JSON.parse(res.text).data.articleFeed.items.edges const result2 = array2.filter(item => { return item.node.likeCount > 50 }) result2.forEach(item => { result.push(item) }) }) })}// 呼叫一次獲取資料getInfo()// 設定定時器，規定10分鐘更新一此資料setInterval(() => { getInfo()}, 10*1000*60)複製程式碼這裡要注意介面那邊需要設定請求頭的 X-Agent 屬性，一定要在 superagent 傳送 post 請求時候帶上，否則會出錯，另外就是固定的請求引數 params，這個可以仿照官網來寫。
第三步
模板引擎渲染資料，傳送結果到瀏覽器渲染
這一步需要藉助模板引擎渲染 HTML 頁面，把從第二步拿到的結果渲染到頁面中，最終返回給瀏覽器渲染。
app.js 程式碼：
// 監聽路由app.get('/', (req, res, next) => { res.render('index.html', { result })})// 繫結埠，啟動服務app.listen(3000, () => { console.log('running...')})複製程式碼
模板 index.html 程式碼 ：