Egg.js《小小爬虫系统》抓取Api接口数据实现一个新闻系统

1.抓取的接口

/**
 * 抓取的接口
 * 新闻列表接口:http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1
 * 新闻详情接口:http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=123
 */

2.配置公共的api

config/config.default.js

// 配置公共的api
config.api = 'http://www.phonegap100.com/';

3.创建 news service

app/service/news.js

/**
 * 抓取的接口
 * 新闻列表接口:http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1
 * 新闻详情接口:http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=123
 */
'use strict';

const Service = require('egg').Service;

class NewsService extends Service {
  async getNewsList() {
    /**
     * 通过抓取接口返回数据
     * curl的方法可以获取远程的数据
     */
    let api = this.config.api + 'appapi.php?a=getPortalList&catid=20&page=1';
    let response = await this.ctx.curl(api);
    // console.log(response.data); // 返回的是Buffer
    let data = JSON.parse(response.data); // 把Buffer类型转换成对象
    // console.log(data);

    return data.result;
  }

  // 获取新闻详情
  async getNewsContent(aid) {
    let api = this.config.api + 'appapi.php?a=getPortalArticle&aid=' + aid;
    let response = await this.ctx.curl(api);
    let data = JSON.parse(response.data);

    return data.result;
  }
}

module.exports = NewsService;

4.创建 news view

app/view/news.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻列表页</title>
</head>
<body>
    <h2>新闻列表数据</h2>
    <ul>
        <%for(var i=0;i<list.length;i++){%>
        <li>
            <a href="/newscontent?aid=<%=list[i].aid%>"><%=list[i].title%></a>
        </li>
        <%}%>
    </ul>
</body>
</html>

app/view/newscontent.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻详情页</title>
    <!-- 引入静态资源 -->
    <link rel="stylesheet" href="/public/css/basic.css" />
</head>
<body>
    <!-- <h2>新闻详情数据</h2> -->
    <div class="content">
        <h2><%=list.title%></h2>

        <div>
            <%-list.content%>
        </div>
    </div>
</body>
</html>

5.创建 news controller

'use strict';

const Controller = require('egg').Controller;

class NewsController extends Controller {

  // 新闻列表页
  async index() {
    // 获取数据显示到新闻页面
    let list = await this.service.news.getNewsList();
    // this.ctx.body = list;
    await this.ctx.render('news', {
      list
    })
  }

  // 新闻详情页
  async content() {
    // 获取get传值
    let aid = this.ctx.query.aid;
    // console.log('---aid---',aid);
    let list = await this.service.news.getNewsContent(aid);
    // console.log('---list---',list);
    await this.ctx.render('newscontent', {
      list: list[0]
    });
  }
}

module.exports = NewsController;

6.效果图

http://127.0.0.1:7001/news

http://127.0.0.1:7001/newscontent?aid=491

原文地址:https://www.cnblogs.com/crazycode2/p/12435979.html