github: https://github.com/cuifancastle/node-pract/tree/master/task2

demo:無 倒是有個圖,好像我的空間並不多,以後再改吧

題目:群裡有不是本學校的人加入,判斷一下
因為學校的專業群基本都很全,所以我給整的結果就是   A群的人,做個列表:顯示QQ,暱稱,是否在B群
需要爬A群 QQ,暱稱 B群 資訊,並整合起來,順便比較一下 OK

1.大體過程就是

1. 登入QQ空間-->好友-->尋找好友-->QQ群聯絡人-->A群 然後右面就會顯示QQ資訊
QQ號在 樣式.img-txt-item 下.img-wrap下的 
 
a標籤的href屬性的最後幾個字串裡
    比如<a href="http://user.qzone.qq.com/10277534" target="_blank"></a>
    獲取的字串是http://user.qzone.qq.com/10277534
    經過處理後的字串是10277534也就是QQ號了
    暱稱同理
2. 由於qq空間比較複雜,所以手動儲存html檔案...
   通過第一步開啟空間,右鍵審查元素,拷貝iframe裡面的內容到本地,樣子就和
anquan.html  安全群
jiyuan.html  計工學院群
   這裡的類似
3. node app.js啟動伺服器
 
   訪問localhost:3000
          程式碼會讀取本地的main.html並返回,
          main.html會請求bootstrap.css jquery.js 等,後臺通過express的static來管理靜態檔案
main.html裡的js程式碼會請求 /data 請求資料 後臺get('/data')裡處理並返回資料 前臺得到資料後填充頁面
   得到結果

2.require依賴

var express = require('express');
var cheerio = require('cheerio');//nodejs 端的jquery
var fs = require('fs'
 
);
var path = require('path');

var app = express();
app.use(express.static(path.join(__dirname, 'public')));

app.listen(3000);
console.log('3000');

4.處理2個Get請求

app.get('/',function(req,res){
   fs.readFile('./main.html',function(err,buf){

       res.send(buf.toString('utf-8',0,buf.length));
});
});
app.get('/data',function(req,res){//巴拉巴拉

});

第二個get請求是返回爬完,比較完的資料

5.再readFile的回撥函式裡

    a.講buffer資料轉換為字串

b.通過cheerio 找到qq  暱稱資料 並拼裝成一個物件返回

var callback = function(err,buf){
    var data = buf.toString('utf-8',0,buf.length);//讀取的html資料轉換成字串
var $ = cheerio.load(data);
var qun_name = $('.tit-txt').text();//群名字
var qun_peo_qq = $('.img-txt-item .img-wrap a');
var qun_peo_name = $('.img-txt-item .txt-wrap .title a');
var qun = {qun_data:[],qun_name:qun_name};
qun_peo_qq.each(function(item){
        var one= {};
one.qq=qun_peo_qq.eq(item)['0']['attribs'].href.slice(25,this.length); //qq號
one.name = qun_peo_name.eq(item)['0'].children[0].data.replace(/[\r\n]/g,"").replace(/[ ]/g,"");             //qq暱稱    //去掉換行,空格 不會正則搜的
qun.qun_data.push(one);
});
var one = {qq:'724138287',name:'幽幽白雪'}; // 因為是通過我qq訪問的,所以沒有我自己.修補一下
qun.qun_data.push(one);
return qun;
};

qun{

qun_name :'' //群名字

qun_data : [] 陣列,數組裡每個元素是個這樣的物件{qq:'11111',name:'balabala'}

}

總之for迴圈 慢慢新增呀 倒騰倒騰就行了

6.有了這麼個物件就可以實現功能了

// console.log(qun1);//計工學院專業群
// console.log(qun2);//資訊保安群
for(var item in qun2.qun_data)  //遍歷資訊保安群
{
    qun2.qun_data[item].isin=false;
for(var m in qun1.qun_data)
    {
        if(qun2.qun_data[item].qq==qun1.qun_data[m].qq)
        {
            qun2.qun_data[item].isin=true;  //修改為true
break;
}
    }
}

然後比較下 給qun物件的qun_data數組裡每個物件新增一個屬性isin 初始為false 如果A群的QQB群也有,好了,改為true;

7.main.html裡

$.get('/data',function(data){
    console.log(data);
$("table").before(data.qun_name);
for(var i in data.qun_data)
    {
        var str ='';
if(data.qun_data[i].isin==false)
        {
            str+='<tr class=\"danger\">';
}else{
            str+='<tr>';
}
        str+='<td>'+data.qun_data[i].name+'</td><td>'+data.qun_data[i].qq+'</td><td>'+data.qun_data[i].isin+'</td></tr>';
$("table").children(0).append(str);
}
//    $("table").children(0).append(data.qun_name);
});

8.其實可以後端用jade,ejs來也可以.這裡簡單一點