從segmentfault爬數據到 用koa2，vue全家桶，mongodb開發一個segmentfault

前言

線上環境小包總

技術棧

• 服務器： node、koa2
• 客戶端： vue、vuex、vue-router、Element-UI
• 數據庫： redis、mongodb
• 打包： webpack

網站模塊

1. 爬蟲模塊：用於爬取一些我看的上的文章，主要採用request，cheerio模塊對數據的爬取和處理，

   同時須要注意處理爬取圖片的處理

2. 文章模塊：展現爬取的文章數據，並進行分類處理和展現
3. 登陸註冊模塊： 支持用戶的登陸註冊，接入第三方登陸接口，註冊採用nodemailer模塊進行郵箱驗證
4. 留言模塊： 讓用戶在本網站留下本身的足記
5. 統計模塊： 統計網站訪問量等數據

爬蟲模塊

segmentfault的文章不用登陸就能查看，全部可用訪問url就能取到文章的內容，惟一須要的注意的是請求的圖片連接要作特殊的處理，最開始原本我是用的盜鏈的形式，後面過了一段時間segmentfault不容許盜鏈了，沒辦法只能從本身網站加載了。

在segmentfault中圖片的src中帶有?,&符號這中特殊的符號(應該是圖片服務器的緣由)，而且也沒有圖片的後綴
<img data-src="/img/bVTrwb?w=598&h=122" src="/img/bVTrwb?w=598&h=122" style="cursor: pointer; display: inline;">
、因此我在爬取圖片的時候就須要處理特殊符號，和加後綴

let imgError = false, imgPath = (imgSavePath + src).replace(/\?|\&/g, '_');
//替換特殊符號
let writeFile = fs.createWriteStream(imgPath), extname;
    request(_src || (addr + src), {timeout: 60000}).on('response', function(response){
        if(response.statusCode.toString().indexOf('4') == 0){
            self.remove();
            imgError = true;
            resolve2();
            return;
        }
        extname = path.extname(response.request.path);
        //在響應頭中獲取文件後綴                                
        if(!extname && response.headers['content-type'].indexOf('image') != -1){
            extname = '.' + response.headers['content-type'].split('/')[1];
            if(extname.indexOf('svg') != -1){
                extname = '.svg';
            }
        }
        let imgSrc = _src ?  src : src + extname;
        self.attr('src', imgSrc);
    }).on('error', function(err){
        writeLog('請求圖片失敗： '+ (_src||src)+ ' 來至url： '+ url, true);
        self.remove();
        imgError = true;
        reject2();
    }).pipe(writeFile);
    writeFile.on('finish', function(){
        if(imgError){
            return ;
        }    
        if(extname){
            let imgPath = (imgSavePath + src).replace(/\?|\&/g, '_');
            //添加後綴
            if(fs.existsSync(imgPath)){
                try{
                    if(src.indexOf('.') != -1){
                        resolve2('自帶後綴： '+ src);
                        return;
                    }
                    fs.renameSync(imgPath, imgPath + extname);
                    writeLog('修改圖片： ' + imgPath + extname);                            
                }catch(e){
                    writeLog('修圖圖片失敗緣由： .'+ src + extname + '\n' + e, true);
                }
                resolve2(imgPath + extname);
            }else {
                writeLog('圖片不存在： .'+ src+ ' 來至url： '+ url, true);
                reject2(url);
            }
        }
    });

文章中的代碼樣式，須要本身用highlight模塊去添加。
而後就是把文章的關鍵信息，如文件的url，時間，做者，保存到數據庫，把文章的真正的html保存爲一個文件，而後根據url去加載本地的html。

注意

• 網站中用的全部技術能夠交流學習
• 不要以線上環境運行，由於源碼中沒有包含https相關文件
• config.js中的github，qq受權登錄須要本身配置
• mongodb帳號密碼只有讀取權限

QQ交流羣

13324022五、 193572405