教你三步爬取掘金優質前端文章

前言

hello，小夥伴們，我是大家的pubdreamcc，本篇博文出至於個人GitHub倉庫node學習教程資料，歡迎小夥伴們點贊和star，大家的點贊是我持續更新的動力。

GitHub倉庫地址：node學習教程

好了，廢話很少說，今天咱們來玩一個有意思的 demo ：

Node實現爬蟲抓取掘金點贊大於 50 的優質前端文章

先來看如下效果：

服務器會每10分鐘更新相關內容，好了，開始今天的練習了~

用到的技術

• express

• superagent（服務端發送請求模塊）

• art-template

• 掘金官方API

第一步

找接口

先來看看掘金首頁獲取前端文章的後端接口 API 在哪裏。

打開掘金官網，(F12) 打開開發者模式查看network 選項，我們能夠看到獲取文章接口的api以下：

打開開發者模式，咱們很輕鬆的找到掘金獲取文章的接口，這就好辦了，說實話前端開發，只要有了接口，那就等於有了一切，咱們能夠盡情的 coding 了~

第二步

建立服務器文件 app.js ，經過superagent 模塊發送請求獲取文章數據。

app.js 是咱們服務端代碼，這裏經過服務端發送請求獲取爬蟲所要的數據保存下來。

// 定義一個函數，用來獲取掘金首頁前端文章信息
function getInfo () {
  // 利用superagent 模塊發送請求，注意請求頭的設置和POST請求體數據（請求參數）
  superagent.post('https://web-api.juejin.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()
    superagent.post('https://web-api.juejin.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 代碼 ：

<!-- 藉助bootstrap樣式，注意模板語法的使用 -->
<ul class="list-group">
  {{each result}}
  <li class="list-group-item">
    <a href="{{$value.node.originalUrl}}" target="_blank">{{$value.node.title}}</a>
    <img data-v-7bf5f1fe="" src="https://b-gold-cdn.xitu.io/v3/static/img/zan.e9d7698.svg">
    <span>{{$value.node.likeCount}}</span>
  </li>
  {{/each}}
</ul>

寫在後面

若是你須要項目的源碼能夠在GitHub對應倉庫的 node學習demo案例 文件夾下查找。