###1、項目描述
引言:在電影天堂下電視劇的下夥伴有木有發現,它沒有提供批量下載功能,美劇英劇還好,10集左右,我就多點幾下吧,但是咱們國產局呢,少則三十集,多則四五十級。下載那叫一個痛苦,一個個點(應該有其餘什麼妙招,可是咱們發現,知道的話告訴我一下唄).....不過,想一想迅雷不是提供批量下載嗎?通過分析,發現迅雷批量下載只需將下載連接分行錄入到下載框便可實現批量下載。
**功能:**在網頁中錄入想看電視劇連接,在該頁分行打印出下載連接地址,拷貝連接,迅雷粘貼下載.....css
###2、項目截圖
html
###3、相關github開源工具 感謝開源:前端
字符編碼轉換: https://github.com/magicdawn/superagent-charset
相似於jquery操做dom元素工具: https://github.com/cheeriojs/cheerio
配合node.js http請求:https://github.com/visionmedia/superagent
前臺:bootstrap+jquerynode
###4、關鍵代碼 5.一、分行抓取每集下載連接:
jquery
根據github上 cheerio API 文檔。經過.each咱們能夠定位到咱們想要的信息。這裏咱們能夠看到每集下載連接就在** tbody >td> a**標籤的href中,咱們必須確保該連接下的href都是視頻連接(第一次想直接經過td> a定位,可是抓取了無關的html連接。)git
/*express後臺上代碼*/ //爬電視劇前臺頁面 app.get('/tv_name',function (req, res, next) { res.render("index",{title:"express"}); }); //處理請求 app.post('/getTvs',function (req, res, next) { var url=req.body.url; superagent.get(url) .charset('gb2312') //這裏設置編碼 .end(function (err, sres) { if (err) { return next(err); } var $ = cheerio.load(sres.text); var items = ""; $('tbody td a').each(function (index, element) { var $element = $(element); items=items+$element.attr('href')+"<br/>" }); res.send(items); }); });
//這裏我想用html頁面,壓根就不想用ejs或者jade模板引擎。因此須要在app.js中修改模板引擎配置。 app.set('views', path.join(__dirname, 'views')); app.engine('.html', require('ejs').__express); app.set('view engine', 'html');
/*HTML前臺*/ //網頁,boottrap直接用cdn加速,無需下載文件、 <head> <meta charset="UTF-8"> <title>電影天堂電視劇下載</title> <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="row" style="margin-top: 50px"> <div class="col-md-3"></div> <div class="col-md-6"> <h3 style="margin-bottom: 30px">電影天堂電視劇批量下載</h3> <div class="alert alert-warning" role="alert"><strong>提示!</strong> 連接生成後,複製到迅雷便可...</div> <input type="text" class="form-control" id="tv_link" placeholder="請輸入電視劇網頁連接"></br> <button type="button" class="btn btn-primary" onclick="getData()">點擊查詢</button> <!-- 爲 地址列表 準備一個具有大小(寬高)的 DOM --> <div class="jumbotron" id="main" style="margin-top: 20px"> </div> </div> <div class="col-md-3"></div> </div> </div> <script> function getData(){ var url = $("#tv_link").val(); //獲取 $.post("/getTvs",{url:url},function(result){ $("#main").html(result); }); } </script> </body> </html>
前端錄入點數據連接,發送post請求,後端解析請求爬取所需數據發送前臺,前臺經過拼接html將其展現出來。github
###6、遇到的問題: 一、cheerio 注意數據解析定位問題。
二、superagent-charset 電影天堂網頁編碼是gb2312,若是設置編碼會出現亂碼。(這裏恰好看到就前一兩天的博客,裏面有關於亂碼的介紹:http://www.jb51.net/article/97738.htm)web
###6、最後相關網址分享: 直接導入到webstrom運行。訪問http://localhost:3000/tv_name 便可;
項目源碼: https://github.com/dpc761218914/reptileTVsexpress