基于TypeScript/Node從0到1搭建一款爬蟲(chóng)工具

前言

今天，我們將使用TS這門(mén)語(yǔ)言搭建一款爬蟲(chóng)工具。目標(biāo)網(wǎng)址是什么呢？我們?nèi)ド暇W(wǎng)一搜，經(jīng)過(guò)幾番排查之后，我們選定了這一個(gè)網(wǎng)站。

??https://www.hanju.run/ ??

一個(gè)視頻網(wǎng)站，我們的目的主要是爬取這個(gè)網(wǎng)站上視頻的播放鏈接。下面，我們就開(kāi)始進(jìn)行第一步。

第一步

俗話(huà)說(shuō)，萬(wàn)事開(kāi)頭難。不過(guò)對(duì)于這個(gè)項(xiàng)目而言，恰恰相反。你需要做以下幾個(gè)事情：

我們需要?jiǎng)?chuàng)建一個(gè)項(xiàng)目文件夾
鍵入命令，初始化項(xiàng)目

npm init -y

局部安裝typescript

npm install typescript -D

接著鍵入命令，生成ts配置文件

tsc --init

局部安裝ts-node，用于命令行輸出命令

npm install -D ts-node

在項(xiàng)目文件夾中創(chuàng)建一個(gè)src文件夾

然后我們?cè)趕rc文件夾中創(chuàng)建一個(gè)crawler.ts文件。

在package.json文件中修改快捷啟動(dòng)命令

"scripts": {
    "dev-t": "ts-node ./src/crawler.ts"
  }

第二步

接下來(lái)，我們將進(jìn)行實(shí)戰(zhàn)操作，也就是上文中crawler.ts文件是我們的主戰(zhàn)場(chǎng)。

我們首先需要引用的這幾個(gè)依賴(lài)，分別是

import superagent from "superagent";
import cheerio from "cheerio";
import fs from "fs";
import path from "path";

所以，我們會(huì)這樣安裝依賴(lài)：

superagent作用是獲取遠(yuǎn)程網(wǎng)址html的內(nèi)容。

npm install superagent

cheerio作用是可以通過(guò)jQ語(yǔ)法獲取頁(yè)面節(jié)點(diǎn)的內(nèi)容。

npm install cheerio

剩余兩個(gè)依賴(lài)fs，path。它們是node內(nèi)置依賴(lài)，直接引入即可。

我們完成了安裝依賴(lài)，但是會(huì)發(fā)現(xiàn)你安裝的依賴(lài)上會(huì)有紅色報(bào)錯(cuò)。原因是這樣的，superagent和cheerio內(nèi)部都是用JS寫(xiě)的，并不是TS寫(xiě)的，而我們現(xiàn)在的環(huán)境是TS。所以我們需要翻譯一下，我們將這種翻譯文件又稱(chēng)類(lèi)型定義文件（以.d.ts為后綴）。我們可以使用以下命令安裝類(lèi)型定義文件。

npm install -D @types/superagent

npm install -D @types/cheerio

接下來(lái)，我們就認(rèn)認(rèn)真真看源碼了。

安裝完兩個(gè)依賴(lài)后，我們需要?jiǎng)?chuàng)建一個(gè)Crawler類(lèi)，并且將其實(shí)例化。

import superagent from "superagent";
    import cheerio from "cheerio";
    import fs from "fs";
    import path from "path";
    class Crawler {  
      constructor() {    
      }
    }
    const crawler = new Crawler();

我們確定下要爬取的網(wǎng)址，然后賦給一個(gè)私有變量。最后我們會(huì)封裝一個(gè)getRawHtml方法來(lái)獲取對(duì)應(yīng)網(wǎng)址的內(nèi)容。

getRawHtml方法中我們使用了async/await關(guān)鍵字，主要用于異步獲取頁(yè)面內(nèi)容，然后返回值。

import superagent from "superagent";
    import cheerio from "cheerio";
    import fs from "fs";
    import path from "path";
    class Crawler {  
      private url = "https://www.hanju.run/play/39221-4-0.html";  
      async getRawHtml() {    
        const result = await superagent.get(this.url);    
        return result.text;
      }  
      async initSpiderProcess() {  
        const html = await this.getRawHtml();  
      }
      constructor() { 
        this.initSpiderProcess();  
     }
    }
    const crawler = new Crawler();

使用cheerio依賴(lài)內(nèi)置的方法獲取對(duì)應(yīng)的節(jié)點(diǎn)內(nèi)容。

我們通過(guò)getRawHtml方法異步獲取網(wǎng)頁(yè)的內(nèi)容，然后我們傳給getJsonInfo這個(gè)方法，注意是string類(lèi)型。我們這里通過(guò)cheerio.load(html)這條語(yǔ)句處理，就可以通過(guò)jQ語(yǔ)法來(lái)獲取對(duì)應(yīng)的節(jié)點(diǎn)內(nèi)容。我們獲取到了網(wǎng)頁(yè)中視頻的標(biāo)題以及鏈接，通過(guò)鍵值對(duì)的方式添加到一個(gè)對(duì)象中。注：我們?cè)谶@里定義了一個(gè)接口，定義鍵值對(duì)的類(lèi)型。

import superagent from "superagent";
     import cheerio from "cheerio";
     import fs from "fs";
     import path from "path";
     interface Info {  
       name: string;  
       url: string;
     }
     class Crawler {  
       private url = "https://www.hanju.run/play/39221-4-0.html";  
       getJsonInfo(html: string) {    
         const $ = cheerio.load(html);  
         const info: Info[] = [];  
         const scpt: string = String($(".play>script:nth-child(1)").html());    
         const url = unescape(      
           scpt.split(";")[3].split("(")[1].split(")")[0].replace(/\"/g, "")  
         );    
         const name: string = String($("title").html());  
         info.push({  
           name,    
           url,  
         });  
         const result = {    
           time: new Date().getTime(),      
           data: info,    
         };    
         return result;  
      }  
      async getRawHtml() {  
        const result = await superagent.get(this.url);
        return result.text;  
      }  
      async initSpiderProcess() {  
          const html = await this.getRawHtml();    
        const info = this.getJsonInfo(html);  
      }  
        constructor() {  
          this.initSpiderProcess();  
       }
     }
     const crawler = new Crawler();

我們首先要在項(xiàng)目根目錄下創(chuàng)建一個(gè)data文件夾。然后我們將獲取的內(nèi)容我們存入文件夾內(nèi)的url.json文件（文件自動(dòng)生成）中。

我們將其封裝成getJsonContent方法，在這里我們使用了path.resolve來(lái)獲取文件的路徑。fs.readFileSync來(lái)讀取文件內(nèi)容，fs.writeFileSync來(lái)將內(nèi)容寫(xiě)入文件。注：我們分別定義了兩個(gè)接口objJson與InfoResult。

import superagent from "superagent";
import cheerio from "cheerio";
import fs from "fs";
import path from "path";
interface objJson {  
  [propName: number]: Info[];
}
interface Info {  
  name: string;  
  url: string;
}
interface InfoResult {  
  time: number;  
  data: Info[];
}
class Crawler {  
  private url = "https://www.hanju.run/play/39221-4-0.html";  
  getJsonInfo(html: string) {  
    const $ = cheerio.load(html);    
    const info: Info[] = [];    
    const scpt: string = String($(".play>script:nth-child(1)").html());  
    const url = unescape(      
      scpt.split(";")[3].split("(")[1].split(")")[0].replace(/\"/g, "")  
    );  
    const name: string = String($("title").html());    
    info.push({    
      name,    
      url,    
    });    
    const result = {    
      time: new Date().getTime(),    
      data: info,    
    };  
    return result;  
}  
async getRawHtml() {  
  const result = await superagent.get(this.url); 
  return result.text;  
}  
getJsonContent(info: InfoResult) {    
  const filePath = path.resolve(__dirname, "../data/url.json"); 
  let fileContent: objJson = {};  
  if (fs.existsSync(filePath)) {  
    fileContent = JSON.parse(fs.readFileSync(filePath, "utf-8"));    
  }    
  fileContent[info.time] = info.data;  
  fs.writeFileSync(filePath, JSON.stringify(fileContent));  
}  
  async initSpiderProcess() {  
    const html = await this.getRawHtml();  
    const info = this.getJsonInfo(html);  
    this.getJsonContent(info);  
  }  
  constructor() {
    this.initSpiderProcess();  
  }
}
const crawler = new Crawler();

運(yùn)行命令

npm run dev-t

查看生成文件的效果

{
      "1610738046569": [    
        {    
          "name": "《復(fù)仇者聯(lián)盟4：終局之戰(zhàn)》HD1080P中字m3u8在線(xiàn)觀看-韓劇網(wǎng)",    

          "url": "https://wuxian.xueyou-kuyun.com/20190728/16820_302c7858/index.m3u8"  
         }  
       ],  
       "1610738872042": [  
         {    
           "name": "《鋼鐵俠2》HD高清m3u8在線(xiàn)觀看-韓劇網(wǎng)",    
           "url": "https://www.yxlmbbs.com:65/20190920/54uIR9hI/index.m3u8"    
         }  
       ],  
       "1610739069969": [  
         {    
         "name": "《鋼鐵俠2》中英特效m3u8在線(xiàn)觀看-韓劇網(wǎng)",

         "url": "https://tv.youkutv.cc/2019/11/12/mjkHyHycfh0LyS4r/playlist.m3u8"  
       }  
     ]
     }

準(zhǔn)結(jié)語(yǔ)

到這里真的結(jié)束了嗎？

不！

真的沒(méi)有結(jié)束。

我們會(huì)看到上面一坨代碼，真的很臭~(yú)

我們將分別使用組合模式與單例模式將其優(yōu)化。

優(yōu)化一：組合模式

組合模式（Composite Pattern），又叫部分整體模式，是用于把一組相似的對(duì)象當(dāng)作一個(gè)單一的對(duì)象。組合模式依據(jù)樹(shù)形結(jié)構(gòu)來(lái)組合對(duì)象，用來(lái)表示部分以及整體層次。這種類(lèi)型的設(shè)計(jì)模式屬于結(jié)構(gòu)型模式，它創(chuàng)建了對(duì)象組的樹(shù)形結(jié)構(gòu)。

這種模式創(chuàng)建了一個(gè)包含自己對(duì)象組的類(lèi)。該類(lèi)提供了修改相同對(duì)象組的方式。

簡(jiǎn)言之，就是可以像處理簡(jiǎn)單元素一樣來(lái)處理復(fù)雜元素。

首先，我們?cè)趕rc文件夾下創(chuàng)建一個(gè)combination文件夾，然后在其文件夾下分別在創(chuàng)建兩個(gè)文件crawler.ts和urlAnalyzer.ts。

crawler.ts

crawler.ts文件的作用主要是處理獲取頁(yè)面內(nèi)容以及存入文件內(nèi)。

import superagent from "superagent";
import fs from "fs";
import path from "path";
import UrlAnalyzer from "./urlAnalyzer.ts";
export interface Analyzer {  
  analyze: (html: string, filePath: string) => string;
}
class Crowller {  
  private filePath = path.resolve(__dirname, "../../data/url.json");  
  async getRawHtml() {  
    const result = await superagent.get(this.url);    
    return result.text;
  }  
  writeFile(content: string) {  
    fs.writeFileSync(this.filePath, content);  
  }  
  async initSpiderProcess() {  
    const html = await this.getRawHtml();  
    const fileContent = this.analyzer.analyze(html, this.filePath);    
    this.writeFile(fileContent);  
  }  
  constructor(private analyzer: Analyzer, private url: string) {    
    this.initSpiderProcess();
  }
}
const url = "https://www.hanju.run/play/39257-1-1.html";
const analyzer = new UrlAnalyzer();
new Crowller(analyzer, url);

urlAnalyzer.ts

urlAnalyzer.ts文件的作用主要是處理獲取頁(yè)面節(jié)點(diǎn)內(nèi)容的具體邏輯。

import cheerio from "cheerio";
import fs from "fs";import { Analyzer } from "./crawler.ts";
interface objJson {  
  [propName: number]: Info[];
}
interface InfoResult {  
  time: number;  
  data: Info[];
}
interface Info {  
  name: string;  
  url: string;
}
export default class UrlAnalyzer implements Analyzer {  
  private getJsonInfo(html: string) {  
    const $ = cheerio.load(html);  
    const info: Info[] = [];  
    const scpt: string = String($(".play>script:nth-child(1)").html());  
    const url = unescape(  
      scpt.split(";")[3].split("(")[1].split(")")[0].replace(/\"/g, "")  
    );  
    const name: string = String($("title").html());    
    info.push({    
      name,    
      url,  
    });  
    const result = {   
      time: new Date().getTime(),    
      data: info,  
    };  
    return result;  
  }  
  private getJsonContent(info: InfoResult, filePath: string) {    
    let fileContent: objJson = {};    
    if (fs.existsSync(filePath)) {    
      fileContent = JSON.parse(fs.readFileSync(filePath, "utf-8"));    
    }  
    fileContent[info.time] = info.data;  
    return fileContent;  
  }  
  public analyze(html: string, filePath: string) {  
    const info = this.getJsonInfo(html);  
    console.log(info);  
    const fileContent = this.getJsonContent(info, filePath);    
    return JSON.stringify(fileContent);
  }
}

可以在package.json文件中定義快捷啟動(dòng)命令。

然后使用npm run dev-c啟動(dòng)即可。

"scripts": {  
    "dev-c": "ts-node ./src/combination/crawler.ts"
  },

優(yōu)化二：?jiǎn)卫Ｊ?/strong>

單例模式（Singleton Pattern）是 Java 中最簡(jiǎn)單的設(shè)計(jì)模式之一。這種類(lèi)型的設(shè)計(jì)模式屬于創(chuàng)建型模式，它提供了一種創(chuàng)建對(duì)象的最佳方式。

這種模式涉及到一個(gè)單一的類(lèi)，該類(lèi)負(fù)責(zé)創(chuàng)建自己的對(duì)象，同時(shí)確保只有單個(gè)對(duì)象被創(chuàng)建。這個(gè)類(lèi)提供了一種訪(fǎng)問(wèn)其唯一的對(duì)象的方式，可以直接訪(fǎng)問(wèn)，不需要實(shí)例化該類(lèi)的對(duì)象。

應(yīng)用實(shí)例：

1、一個(gè)班級(jí)只有一個(gè)班主任。
2、Windows 是多進(jìn)程多線(xiàn)程的，在操作一個(gè)文件的時(shí)候，就不可避免地出現(xiàn)多個(gè)進(jìn)程或線(xiàn)程同時(shí)操作一個(gè)文件的現(xiàn)象，所以所有文件的處理必須通過(guò)唯一的實(shí)例來(lái)進(jìn)行。
3、一些設(shè)備管理器常常設(shè)計(jì)為單例模式，比如一個(gè)電腦有兩臺(tái)打印機(jī)，在輸出的時(shí)候就要處理不能兩臺(tái)打印機(jī)打印同一個(gè)文件。

同樣，我們?cè)趕rc文件夾下創(chuàng)建一個(gè)singleton文件夾，然后在其文件夾下分別在創(chuàng)建兩個(gè)文件crawler1.ts和urlAnalyzer.ts。
這兩個(gè)文件的作用與上文同樣，只不過(guò)代碼書(shū)寫(xiě)不一樣。
crawler1.ts
import superagent from "superagent";
import fs from "fs";
import path from "path";
import UrlAnalyzer from "./urlAnalyzer.ts";
export interface Analyzer {
analyze: (html: string, filePath: string) => string;
}
class Crowller {
private filePath = path.resolve(__dirname, "../../data/url.json");
async getRawHtml() {
const result = await superagent.get(this.url);
return result.text;
}
private writeFile(content: string) {
fs.writeFileSync(this.filePath, content);
}
private async initSpiderProcess() {
const html = await this.getRawHtml();
const fileContent = this.analyzer.analyze(html, this.filePath);
this.writeFile(JSON.stringify(fileContent));
}
constructor(private analyzer: Analyzer, private url: string) {
this.initSpiderProcess();
}
}
const url = "https://www.hanju.run/play/39257-1-1.html";
const analyzer = UrlAnalyzer.getInstance();
new Crowller(analyzer, url);
urlAnalyzer.ts
import cheerio from "cheerio";
import fs from "fs";
import { Analyzer } from "./crawler1.ts";
interface objJson {
[propName: number]: Info[];
}
interface InfoResult {
time: number;
data: Info[];
}
interface Info {
name: string;
url: string;
}
export default class UrlAnalyzer implements Analyzer {
static instance: UrlAnalyzer;
static getInstance() {
if (!UrlAnalyzer.instance) {
UrlAnalyzer.instance = new UrlAnalyzer();
}
return UrlAnalyzer.instance;
}
private getJsonInfo(html: string) {
const $ = cheerio.load(html);
const info: Info[] = [];
const scpt: string = String($(".play>script:nth-child(1)").html());
const url = unescape(
scpt.split(";")[3].split("(")[1].split(")")[0].replace(/\"/g, "")
);
const name: string = String($("title").html());
info.push({
name,
url,
});
const result = {
time: new Date().getTime(),
data: info,
};
return result;
}
private getJsonContent(info: InfoResult, filePath: string) {
let fileContent: objJson = {};
if (fs.existsSync(filePath)) {
fileContent = JSON.parse(fs.readFileSync(filePath, "utf-8"));
}
fileContent[info.time] = info.data;
return fileContent;
}
public analyze(html: string, filePath: string) {
const info = this.getJsonInfo(html);
console.log(info);
const fileContent = this.getJsonContent(info, filePath);
return JSON.stringify(fileContent);
}
private constructor() {}
}
可以在package.json文件中定義快捷啟動(dòng)命令。
然后使用npm run dev-s啟動(dòng)即可。
"scripts": {
"dev-s": "ts-node ./src/singleton/crawler1.ts",
},
結(jié)語(yǔ)
這下真的結(jié)束了，謝謝閱讀。希望可以幫到你。
完整源碼地址：
??https://github.com/maomincoding/TsCrawler ??

網(wǎng)站題目：基于TypeScript/Node從0到1搭建一款爬蟲(chóng)工具
轉(zhuǎn)載注明：http://uogjgqi.cn/article/dhsojch.html

掃二維碼與項(xiàng)目經(jīng)理溝通

我們?cè)谖⑿派?4小時(shí)期待你的聲音

解答本文疑問(wèn)/技術(shù)咨詢(xún)/運(yùn)營(yíng)咨詢(xún)/技術(shù)建議/互聯(lián)網(wǎng)交流

其他資訊

不需要Web應(yīng)用服務(wù)器Java實(shí)現(xiàn)WebServices
server2008如何將服務(wù)器設(shè)為域控制器？2008域服務(wù)器添加用戶(hù)
KaliLinux攻防技術(shù)探究30字初探(kalilinux攻防)
HDD啥意思？（服務(wù)器的hdd）
揭秘如何獲得寶塔面板77破解版

行業(yè)動(dòng)態(tài)

企業(yè)網(wǎng)站建設(shè)的重要性！

現(xiàn)在雖然是移動(dòng)互聯(lián)網(wǎng)時(shí)代，但企業(yè)網(wǎng)站依然重要，包含PC站點(diǎn)，移動(dòng)站。可以說(shuō)企業(yè)網(wǎng)站關(guān)系企業(yè)的未來(lái)發(fā)展和前途，尤其對(duì)中小企業(yè)更是如此，一些中小企業(yè)老板，對(duì)自己的名片很在乎，因?yàn)檫@是個(gè)門(mén)面。...

服務(wù)項(xiàng)目

網(wǎng)站建設(shè)

查看詳情

移動(dòng)端/APP

查看詳情

微信/小程序

查看詳情

技術(shù)支持

查看詳情

其它服務(wù)

查看詳情

更多服務(wù)項(xiàng)目

用我們的專(zhuān)業(yè)和誠(chéng)信贏得您的信賴(lài)，從PC到移動(dòng)互聯(lián)網(wǎng)均有您想要的服務(wù)！
獲取更多

聯(lián)系吧在百度地圖上找到我們

電話(huà)：13518219792

如遇占線(xiàn)或暫未接聽(tīng)請(qǐng)撥：136xxx98888

業(yè)務(wù)咨詢(xún) 技術(shù)咨詢(xún) 售后服務(wù)

網(wǎng)站設(shè)計(jì)

做網(wǎng)站設(shè)計(jì)
響應(yīng)式網(wǎng)站設(shè)計(jì)
成都網(wǎng)站設(shè)計(jì)
阿壩網(wǎng)站設(shè)計(jì)

網(wǎng)站制作

成都網(wǎng)站制作
手機(jī)網(wǎng)站制作
達(dá)州網(wǎng)站制作
網(wǎng)站制作

聯(lián)系我們

電話(huà)：13518219792

郵箱：[email protected]

地址：成都青羊區(qū)錦天國(guó)際1002號(hào)

網(wǎng)址：uogjgqi.cn

網(wǎng)站建設(shè)

成都網(wǎng)站建設(shè)公司
綿陽(yáng)網(wǎng)站建設(shè)
成都網(wǎng)站建設(shè)
營(yíng)銷(xiāo)網(wǎng)站建設(shè)

微信二維碼

友情鏈接

全網(wǎng)營(yíng)銷(xiāo)
昆明網(wǎng)站維護(hù)
品牌網(wǎng)站定制
網(wǎng)站建設(shè)
成都發(fā)電車(chē)出租
樂(lè)山做網(wǎng)站
成都企業(yè)網(wǎng)站制作
成都網(wǎng)站設(shè)計(jì)
湖北嬰兒床
金羊影視傳媒

Copyright © 2002-2023 uogjgqi.cn 快上網(wǎng)建站品牌 QQ：244261566 版權(quán)所有 備案號(hào)：蜀ICP備19037934號(hào)

在線(xiàn)咨詢(xún)

13518219792

微信二維碼

移動(dòng)版官網(wǎng)

感谢您访问我们的网站，您可能还对以下资源感兴趣：
av激情亚洲男人的天堂国语

av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

基于TypeScript/Node從0到1搭建一款爬蟲(chóng)工具

掃二維碼與項(xiàng)目經(jīng)理溝通

其他資訊

行業(yè)動(dòng)態(tài)

企業(yè)網(wǎng)站建設(shè)的重要性！

服務(wù)項(xiàng)目

網(wǎng)站建設(shè)

移動(dòng)端/APP

微信/小程序

技術(shù)支持

其它服務(wù)

更多服務(wù)項(xiàng)目

聯(lián)系吧 在百度地圖上找到我們

電話(huà)：13518219792

企業(yè)網(wǎng)站建設(shè)的重要性！

聯(lián)系吧在百度地圖上找到我們