摘要：項目初始化創(chuàng)建一個文件，快捷創(chuàng)建非常簡單。基本使用方法具體的請自行點擊連接查看喲頁面數(shù)據(jù)解析是一個的庫，可以理解為一個版本的，用來從網(wǎng)頁中以取數(shù)據(jù)，使用方式和基本相同。執(zhí)行數(shù)組中每個值的函數(shù)，包含四個參數(shù)作為第一次調(diào)用的第一個參數(shù)。

創(chuàng)建一個package.json文件，webstorm快捷創(chuàng)建package.json非常簡單。
使用 npm init 快速創(chuàng)建。

需要下載的的模塊

superagent 頁面數(shù)據(jù)下載

cheerio 頁面數(shù)據(jù)解析

這是2個npm包，我們先下載：

npm install superagent cheerio --save

需要引入的模塊

fs

path

const cheerio = require("cheerio");
const agent = require("superagent");
const path = require("path");
const fs = require("fs");

我們希望以隊列的形式逐個對這些地址進行訪問，獲取HTML代碼，以便后續(xù)處理：

const urls = [{
    page:1,
    url:"https://www.imooc.com/course/list?c=fe&page=1"
},{
    page:2,
    url:"https://www.imooc.com/course/list?c=fe&page=2"
},{
    page:3,
    url:"https://www.imooc.com/course/list?c=fe&page=3"
}];

慕課網(wǎng)課程列表：

對此我們定義如下的數(shù)據(jù)結(jié)構(gòu)：

 [
     {
      page: 1,
      data: [
          {
             title:"", // 課程標題
             imgurl:"", // 課程圖片
             level:"", // 等級
             studynum:0, // 學(xué)習(xí)人數(shù)
             description:"xxxx" // 課程描述
        }
        ...... // 每一個頁面有多條課程信息
      ]  
    }
    ...... // 一共有多個頁面
 ]

superagent是nodejs里一個非常方便的客戶端請求代碼模塊，superagent是一個輕量級的，漸進式的ajax API，可讀性好，學(xué)習(xí)曲線低，內(nèi)部依賴nodejs原生的請求API,適用于nodejs環(huán)境下。

基本使用方法:
具體的請自行點擊連接查看喲...

request
    .get("/login")
    .end(function(err, res){
        // code
    });

cheerio是一個node的庫，可以理解為一個Node.js版本的jquery，用來從網(wǎng)頁中以 css selector取數(shù)據(jù)，使用方式和jquery基本相同。

需要先loading一個需要加載html文檔，后面就可以jQuery一樣使用操作頁面了。

基本使用方法:
具體的請自行點擊連接查看喲...

const cheerio = require("cheerio");
const $ = cheerio.load("
...
");
$("#fruits").addClass("newClass");

這才是本篇文章的重頭戲...

我們需要使用數(shù)組的一個方法 reduce()

arr.reduce([callback, initialValue])

有不太懂這個方法的可以查看我寫的筆記：https://segmentfault.com/n/13...

reduce() 方法接收一個函數(shù)作為累加器（accumulator），數(shù)組中的每個值（從左到右）開始縮減，最終為一個值。

callback （執(zhí)行數(shù)組中每個值的函數(shù)，包含四個參數(shù)）
initialValue （作為第一次調(diào)用 callback 的第一個參數(shù)。）

還有一個是Promise實現(xiàn)異步處理

有不太懂這個方法的可以查看我寫的筆記：https://segmentfault.com/n/13...

具體是使用Promise的這個方法：
Promise.resolve()
這個方法返回一個fulfilled的Promise實例，或者原始的Promise實例。

代碼實現(xiàn)：

// 實現(xiàn)隊列 
// 本質(zhì)： 對.then()方法實現(xiàn)累加 
let curPromise = urls.reduce((promise,curl) => {

    return promise.then(() => {
        return new Promise(resolve => {
            // 網(wǎng)絡(luò)獲取當前地址的網(wǎng)頁內(nèi)容
            requestGet(curl,() => {
                resolve(); 
            });
        });
    });

},Promise.resolve());

代碼實現(xiàn)：

// 寫入數(shù)據(jù)
curPromise.then(()=>{
    fs.writeFile("result.json", JSON.stringify(result), function (err) {
        if(err) throw new Error("appendFile failed...");
        console.log("數(shù)據(jù)寫入success...");
    });    
});

// 項目依賴
const cheerio = require("cheerio");
const agent = require("superagent");
const path = require("path");
const fs = require("fs");

// 地址數(shù)據(jù)
const urls = [{ 
    page:1,
    url:"https://www.imooc.com/course/list?c=fe&page=1"
},{
    page:2,
    url:"https://www.imooc.com/course/list?c=fe&page=2"
},{
    page:3,
    url:"https://www.imooc.com/course/list?c=fe&page=3"
}];

// 最終的數(shù)據(jù)
let result = [];


// 數(shù)據(jù)結(jié)構(gòu)
/**
 * [
 *     {
 *         page: 1,
 *         data: [
 *                {title:xx,imgurl:xx...},
 *                ......
 *               ]
 *     }
 *     ......    
 * ]
 */


// 發(fā)起get請求
function requestGet(urlObj,callback){

    agent.get(urlObj.url)
     .end((err,res) => {
         if(err) throw new Error(err);

         // 分析頁面
         let pageJson = analysis(res.text);

         // 拼接數(shù)據(jù)
         result.push({
             page:urlObj.page,
             data:pageJson
         });

         console.log(`寫入第${urlObj.page}頁的數(shù)據(jù)...`);

         // 執(zhí)行回調(diào)
         callback();
     
     });
}


// 對網(wǎng)頁分析
function analysis(data){

    let page = [];
    let $ = cheerio.load(data);
    let courseArr = $(".course-list").find(".course-card-container");
    courseArr.each((index,element) => {
        let _this = $(element);
        // 組裝數(shù)據(jù)
        page.push({
            title:_this.find(".course-card-name").text(),
            imgurl:path.join("http:",_this.find(".course-card-top img").attr("src")),
            level:_this.find(".course-card-info span:first-child").text(),
            // level:_this.find(".icon-set_sns").parent().prev().text(),
            studynum:_this.find(".icon-set_sns").parent().text(),
            description:_this.find(".course-card-desc").text()
        });
    });
    return page;
}


// 實現(xiàn)隊列 
// 本質(zhì)： 對.then()方法實現(xiàn)累加 
let curPromise = urls.reduce((promise,curl) => {

    return promise.then(() => {
        return new Promise(resolve => {
            // 具體的內(nèi)容
            requestGet(curl,() => {
                resolve(); 
            });
        });
    });

},Promise.resolve());

// 寫入數(shù)據(jù)
curPromise.then(()=>{
    fs.writeFile("result.json", JSON.stringify(result), function (err) {
        if(err) throw new Error("appendFile failed...");
        console.log("數(shù)據(jù)寫入success...");
    });    
});

node app.js

可以看到終端有次序的輸出了以下內(nèi)容：

當打開生成的 result.json 文件，其結(jié)構(gòu)也符合我們的預(yù)期：

至此，這篇文章也就結(jié)束啦，如果您有好的想法請留言喲。

持續(xù)學(xué)習(xí)中...