-->

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

2020-04-09 22:40发布

站内文章 / 后端开发
87 0 0

今天我们来抓取第三方数据，做一个新闻列表和详情展示，接口url如下：

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

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

egg-init eggdemo --type=simple

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

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

 

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

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

 

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

并且在newsList controller中调用：

访问/时，会在控制台打印出获取到的数据，我们只需要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转化得：

{
  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格式的字符做解析：

 

 

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

标签：
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~