Teach you take three steps to climb Nuggets front-end high-quality article

Foreword

hello, little friends, I am your pubdreamcc, this post out as for my GitHub repository node学习教程资料, welcome thumbs and little friends star, your point is my praise continually updated power.

GitHub repository address: the Node tutorials

Well, ado, today we play an interesting demo:

Node achieve reptiles crawl Nuggets point is greater than the praise 50of high-quality front-end articles

First look at the following effects:

Server updates content every 10 minutes, well, start practicing today ~

Use of technology

express
superagent(The server sends a request module)
art-template
Nuggets officialAPI

first step

Find Interface

Let's look at the Nuggets Home Get front-end interface to back-end of the article APIwhere it is.

Nuggets opened the official website, (F12)open the developer mode to view the networkoptions, you can see for articles api interface as follows:

Open developer mode, we found the interface very easy to get the Nuggets article, this easy to handle, to be honest front-end development, as long as with the interface, it is equivalent to having everything we could enjoy codinga ~

The second step

Create a file server app.js, by superagentacquiring the article data module sends a request.

app.js We is server-side code, where the server by sending a request to obtain the data stored in the crawler down.

// 定义一个函数，用来获取掘金首页前端文章信息
function getInfo () {
  // 利用superagent 模块发送请求，获取前20篇文章。注意请求头的设置和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()
    // 再次发送请求获取另外的20篇文章
    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)
复制代码

Here we note that there Nuggets interfaces need to set the request header X-Agentattributes, be sure to superagentsend a postrequest to bring the time, otherwise it will go wrong, the other is a fixed request parameters params, this can be modeled Nuggets official website to write.

third step

Template rendering engine data, send the results to the browser rendering

This step requires the aid of a template engine to render HTMLa page, to get the results from the second step to render the page, ultimately returned to the browser rendering.

app.js Code:

// 监听路由
app.get('/', (req, res, next) => {
  res.render('index.html', {
    result
  })
})

// 绑定端口，启动服务
app.listen(3000, () => {
  console.log('running...')
})
复制代码

Template index.htmlCode:

<!-- 借助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>
复制代码

Written on the back

If you need to source projects can correspond in the GitHub repository node学习demo案例folder to find, thank you!