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

唉呀媽呀，寫筆記好累，溜了溜了。。。。おやすみなさい（晚安！！！）