翻頁高手

我們讓爬蟲透過Bing的關鍵字搜尋來取得資料，然後讓爬蟲一直往下一頁移動，把每頁的網站連結記錄下，最後再一一進入每個網站，檢查這個網站的圖片數量以及關鍵字數量，最後整理成json資料回傳到前端頁面，我們就可以客製自己的搜尋引擎，我將它命名為「My Bing』搜尋引擎。

系統流程

1. 使用者從Vuejs製作的前端搜尋頁面輸入關鍵字以及要搜尋的頁數，然後按下enter鍵，這筆資料會以ajax的形式送到後端的Nodejs伺服器
2. Nodejs的程式拿到使用者所輸入的關鍵字丟到Bing搜尋引擎去搜尋，並逐頁將查到的網址記錄下來
3. 依序拜訪剛剛記錄下來的網址，然後將每個網站的 圖片數量、關鍵字數量、文字顏色、背景顏色等資訊解析出來，最後打包成json回傳到前端
4. 其端的Vuejs頁面自動將回傳資訊更新到頁面上

HTML 程式

    <div id="app" class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <h1 style="text-align:center"><img src="/images/mybing.png" alt=""></h1>
                <hr>
                <input v-on:keyup.13="search" :disabled="searching" type="text" class="form-control" v-model="keyword" placeholder="輸入搜尋關鍵字"
                />
                <br>
                <select class="form-control" v-model="pages" :disabled="searching">
                    <option value = '1'>1 page</option>
                    <option value = '5' >5 pages</option>
                    <option value = '10'>10 pages</option>
                    <option value = '25'>25 pages</option>
                    <option value = '50'>50 pages</option>
                </select>
                <hr>
                <div v-show="searching" class="alert alert-warning" role="alert">
                    <img height="20px" src="images/loader.gif" alt=""> <strong> 搜尋中 </strong> 小爬蟲正在努力的爬，我們稍微等牠一下吧！
                </div>
                <table class="table">
                    <thead>
                        <tr>
                            <th>網址</th>
                            <th>爬蟲結果</th>
                            <th>網站圖片數量</th>
                            <th>keyword count</th>
                            <th>colors</th>
                            <th>bgcolors</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="web in websites">
                            <td> <a :href="web.url" target="_blank"> </a></td>
                            <td>
                                <span v-if='web.status=="success"' class="glyphicon glyphicon-ok" ari a-hidden="true"></span>
                                <span v-if='web.status=="fail"' class="glyphicon glyphicon-ban-circle" aria-hidden="true"></span></td>
                            <td> </td>
                            <td> </td>
                            <td><div v-for="color in web.colors" :style="{ color: color}"> </div></td>
                            <td><div v-for="bgcolor in web.bgcolors" :style="{ background: bgcolor}"> </div></td>
                        </tr>
                    </tbody>
                </table>

            </div>
        </div>
    </div>


    <script>

    </script>

Nodejs程式

開頭要引用並且設置什麼呢? 好好思考一下並且補上

var express = require('express'),
  app = express(),

function crawlBing(keyword, pages, crawlCallback) {

  bingSearchUrl = '用keyword搭配網址組出搜尋結果的網址';

  //在Bing搜尋引擎中逐頁取得每頁的網址，pages代表要搜尋幾頁
  getAllUrls(bingSearchUrl, [], 1, pages, function (webUrls)  {

     //webUrls就是所有的網頁網址

     async.map(webUrls, function (url, callback) {

       //TODO: 把webUrls中的每個網址取出，並且分析裡面的內容
       //怎麼分析？當然是用cheerio跟request
       //把要放的結果丟進callback()

     },function (err, results) {
        //所有網站分析都已完成
        console.log("search is finished")
        crawlCallback(results);
      });

  });

}

//在Bing搜尋引擎中逐頁取得每頁的網址，pagesToGo代表要搜尋幾頁
function getAllUrls(bingSearchUrl, webUrls, page, pagesToGo, cb) {

  console.log("getting bing search engine page " + page);

  request(bingSearchUrl, function (err, res, body) {

      if (!err && res.statusCode === 200) {
        webUrls = webUrls || [];

        //TODO: 取得頁面上的網址，存入webUrls

        //TODO: 取得「下一頁」連結並存到nextPage

        if (TODO: 這個網頁有下一頁 且 pagesToGo>1) {
          //TODO: 還有下一頁，繼續往下頁搜尋
          getAllUrls(下一頁連結, webUrls, page + 1, pagesToGo - 1, function (links) { cb(links); });
        } else {
          //已經到底了，搜尋結束
          cb(webUrls);
        }
      }
  });
}

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/views/bing.html');
});

app.get('/search', function (req, res) {
    //使用Bing來搜尋keyword，並且限定搜尋pages頁，
    crawlBing(req.query.keyword, req.query.pages || 1, function (data) {
    res.send(data);
  });
});