egg学习笔记第五天：实现一个小小的‘爬虫’系统

时间 2020-04-10

原文原文链接

今天咱们来抓取第三方数据，作一个新闻列表和详情展现，接口url以下：javascript

http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1

http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=123

第一步：终端键入下方代码新建一个新的工程名为eggdemophp

egg-init eggdemo --type=simple

第二步：在config>config.default.js中配置baseUrlhtml

config.baseUrl = "http://www.phonegap100.com/";

第三步：在router.js中配置一条路由规则：当用户访问/时，加载newsList controller下的getNewsList方法。html5

第四步：新建newsList controller，并写入getNewsList方法。java

第五步：咱们的思路是，访问/时获取新闻列表数据，渲染新闻列表页面。首先咱们获取数据，在service层作：新建app>service文件夹，新建news.js，初始化egg service模板，用this.ctx.curl(url)的方式配合async await获取数据，打印datareact

而且在newsList controller中调用：nginx

访问/时，会在控制台打印出获取到的数据，咱们只须要data字段的值，可是data字段的值时Buffer类型，咱们咋把它转成咱们想展现的东西呢？？程序员

{
  data: <Buffer 3c 21 44 4f 43 54 59 50 45 20 68 74 6d 6c 20 50 55 42 4c 49 43 20 22 2d 2f 2f 57 33 43 2f 2f 44 54 44 20 58 48 54 4d 4c 20 31 2e 30 20 54 72 61 6e 73 ... 1829 more bytes>,
  status: 404,
  headers: {
    server: 'nginx/1.0.12',
    date: 'Thu, 09 Apr 2020 14:07:33 GMT',
    'content-type': 'text/html',
    connection: 'keep-alive',
    vary: 'Accept-Encoding',
    'set-cookie': [
      'yunsuo_session_verify=5cc61ffcd2d91807a5f6331216b49205; expires=Sun, 12-Apr-20 22:07:33 GMT; path=/; HttpOnly',
      'yunsuo_session_verify=5cc61ffcd2d91807a5f6331216b49205; expires=Sun, 12-Apr-20 22:07:33 GMT; path=/; HttpOnly',
      'yunsuo_session_verify=5cc61ffcd2d91807a5f6331216b49205; expires=Sun, 12-Apr-20 22:07:33 GMT; path=/; HttpOnly'
    ],
    'last-modified': 'Sun, 16 Feb 2014 09:23:06 GMT',
    etag: '"120006-757-4f282962c5280"',
    'accept-ranges': 'bytes',
    'content-length': '1879'
  },
  res: {
    status: 404,
    statusCode: 404,
    statusMessage: 'Not Found',
    headers: {
      server: 'nginx/1.0.12',
      date: 'Thu, 09 Apr 2020 14:07:33 GMT',
      'content-type': 'text/html',
      connection: 'keep-alive',
      vary: 'Accept-Encoding',
      'set-cookie': [Array],
      'last-modified': 'Sun, 16 Feb 2014 09:23:06 GMT',
      etag: '"120006-757-4f282962c5280"',
      'accept-ranges': 'bytes',
      'content-length': '1879'
    },
    size: 1879,
    aborted: false,
    rt: 141,
    keepAliveSocket: false,
    data: <Buffer 3c 21 44 4f 43 54 59 50 45 20 68 74 6d 6c 20 50 55 42 4c 49 43 20 22 2d 2f 2f 57 33 43 2f 2f 44 54 44 20 58 48 54 4d 4c 20 31 2e 30 20 54 72 61 6e 73 ... 1829 more bytes>,
    requestUrls: [ 'http://www.phonegap100.com/a=getPortalList&catid=20&page=1' ],
    timing: null,
    remoteAddress: '122.114.57.173',
    remotePort: 80,
    socketHandledRequests: 1,
    socketHandledResponses: 1
  }
}

可使用JSON.parse将buffer转化得：npm

{
  result: [
    {
      aid: '499',
      catid: '20',
      username: 'admin',
      title: '【国内首家】微信小程序视频教程免费下载',
      pic: 'portal/201610/13/211832yvlbybpl3rologrr.jpg',
      dateline: '1476364740'
    },
    {
      aid: '498',
      catid: '20',
      username: 'admin',
      title: 'ionic域资源共享 CORS 详解',
      pic: '',
      dateline: '1472952906'
    },
    {
      aid: '497',
      catid: '20',
      username: 'admin',
      title: '移动端触摸滑动js插件_html5手机端轮播插件',
      pic: 'portal/201606/28/211604ullzo5arr4iurnum.jpg',
      dateline: '1467119820'
    },
    {
      aid: '496',
      catid: '20',
      username: 'admin',
      title: '将来程序员会被机器人取代吗？',
      pic: 'portal/201606/02/221818eafffffm4srfdf4s.jpg',
      dateline: '1464874140'
    },
    {
      aid: '495',
      catid: '20',
      username: 'admin',
      title: '锤子安全锤_锤子真的出了个“锤子”：车充＋安全锤',
      pic: 'portal/201605/20/213752f6i56f1e0hbfzhkb.jpg',
      dateline: '1463751505'
    },
    {
      aid: '494',
      catid: '20',
      username: 'admin',
      title: 'html5能作什么_html5能作哪些开发？',
      pic: '',
      dateline: '1463664540'
    },
    {
      aid: '493',
      catid: '20',
      username: 'admin',
      title: '平安口袋银行App采用-Cordova混合开发',
      pic: '',
      dateline: '1463294580'
    },
    {
      aid: '492',
      catid: '20',
      username: 'admin',
      title: 'JavaScript Emoji 表情库_js 相似于qq微信的表情库',
      pic: 'portal/201604/25/084907r2e3im3dvd1q3f7z.jpg',
      dateline: '1461545392'
    },
    {
      aid: '491',
      catid: '20',
      username: 'admin',
      title: 'cordova热更新插件-不发布应用市场动态更新APP源码',
      pic: 'portal/201604/12/152638zaxz5xz3t58bfts2.png',
      dateline: '1460446140'
    },
    {
      aid: '490',
      catid: '20',
      username: 'admin',
      title: '央行新规！支付宝、微信用户别忘作这件事',
      pic: 'portal/201603/29/144942tcnnenueefagukfk.jpg',
      dateline: '1459234206'
    },
    {
      aid: '471',
      catid: '20',
      username: 'admin',
      title: 'HTML5 移动app开发框架该如何选择',
      pic: 'portal/201511/15/163112q4kz6k2rgcgpi1tc.jpg',
      dateline: '1457771160'
    },
    {
      aid: '488',
      catid: '20',
      username: 'admin',
      title: '纯CSS3动画按钮效果,可用于移动wap app开发',
      pic: 'portal/201603/09/202742r1kngyt17na7n1nk.jpg',
      dateline: '1457526780'
    },
    {
      aid: '487',
      catid: '20',
      username: 'admin',
      title: '京东天天亏上亿_不会抄袭、剽窃?必将死在互联网下一站的起点上! ...',
      pic: 'portal/201603/02/155825h28zxs2vsxjccv4c.jpg',
      dateline: '1456905746'
    },
    {
      aid: '486',
      catid: '20',
      username: 'admin',
      title: 'ionic react-native和native开发移动app那个好',
      pic: 'portal/201602/25/193433dtzfvlzl1oavhljy.jpg',
      dateline: '1456398960'
    },
    {
      aid: '484',
      catid: '20',
      username: 'admin',
      title: '这12行代码分分钟让你电脑崩溃手机重启',
      pic: '',
      dateline: '1453426595'
    },
    {
      aid: '483',
      catid: '20',
      username: 'admin',
      title: '罗振宇罗永浩雷军们的演讲 你喜欢哪个',
      pic: '',
      dateline: '1452226800'
    },
    {
      aid: '482',
      catid: '20',
      username: 'admin',
      title: 'ionic-native-transitions让你的Ionic应用比原生还快',
      pic: 'portal/201601/07/135529z4r7gwglv4rw8l74.jpeg',
      dateline: '1452145500'
    },
    {
      aid: '481',
      catid: '20',
      username: 'admin',
      title: 'ionic 1.2.4 发布，最好的html5移动app开发框架',
      pic: 'portal/201601/05/132107h9bllr7li74zoh49.jpg',
      dateline: '1451971293'
    },
    {
      aid: '480',
      catid: '20',
      username: 'admin',
      title: 'phonegap发布应用到appstore',
      pic: 'portal/201601/05/122115yhh22i77sqn2ijc6.jpg',
      dateline: '1451967910'
    },
    {
      aid: '479',
      catid: '20',
      username: 'admin',
      title: 'HTML5仿苹果应用的动画',
      pic: 'portal/201601/04/220252ycyddectvivr55pq.png',
      dateline: '1451916189'
    }
  ]
}

咱们能够将这段数据的result属性对应的值作一个返回：小程序

在news controller里面打印一下返回结果，而后访问执行，可知数据已经拿到：

接下来，新建一个新闻模板 app>view>news.html，而后用渲染函数将数据传入，并配置好模板引擎，次日的文章中有配置ejs模板引擎的步骤，在模板中写入以下代码循环newsList

访问可得：

到此，新闻列表页数据就渲染出来了，可是咱们发现时间显示有些问题，通常时间戳都是13位的，这个事件返回的咋是10位呢？因此咱们须要写一个事件格式化函数，这个格式化函数写到哪里呢？egg为咱们提供了一种扩展模式：

框架提供了多种扩展点扩展自身的功能：

Application
Context
Request
Response
Helper
在开发中，咱们既可使用已有的扩展 API 来方便开发，也能够对以上对象进行自定义扩展，进一步增强框架的功能。

咱们这里的场景用到了Helper，咱们先安装一个日期格式化依赖：

cnpm i silly-datetime --save

安装完成以后在extend文件夹下新建helper.js，键入如下内容，而后导出：

而后在模板中以下调用：

刷新页面可得：时间格式化完成。

接下来还有一个详情页，首先view下新建一个详情页面newsDetail.html，点击a连接访问/newsDetail，在router.js中配置路由访问规则，执行news controller中的getNewsDetail方法，写一个service专门获取新闻详情数据返回，而后渲染newsDeatil.html页面并传入获取数据渲染，基本与上面的步骤相似。

router:

controller:

service:

view:

可点击列表页渲染详情页将html格式的字符作解析：

唉呀妈呀，写笔记好累，溜了溜了。。。。おやすみなさい（晚安！！！）