task2-nodejs 文件处理cheerio群里有不是本学校的人加入,判断一下

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');

3.启动服务

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请求是返回main.html页面

第二个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;
        }
    }
}

在用了两个readFile()后,就可以得到  A B群的信息,

然后比较下 给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);

});

请求数据,然后拼装..往table前添加标题,table里的tr后面添加列表元素,遍历时判断isin属性,添加不同样式

8.其实可以后端用jade,ejs来也可以.这里简单一点