背景
大家都知道，Python爬虫是最牛掰的，那么前端人员能玩爬虫吗？
今天，就用nodejs做一个简单的爬虫示例。
爬虫教程
nodejs爬虫最火的库是：puppeteer。详细用法大家可以自己搜索一下，本文只讲述示例用到的API.
初始化
随便新建一个文件夹，然后初始化：
npm init -y
这样你就看到一个package.josn文件了
安装依赖
然后安装依赖
yarn add puppeteer
分析
最近短剧很火，所以今天爬取一个短剧首页的内容，今天以河马剧场为例。目标是爬取首页三大板块的短剧封面、播放地址、总集数、标签类型、标题等
代码
只把关键代码贴出来，具体含义代码里都有注释。
由于页面是服务端渲染后返回的，各个div的class名称可能会变化，读者操作的时候，请打开控制台，用实际的节点class名处理
const puppeteer = require('puppeteer');// 需要爬取的网址
const targetUrl = "https://www.kuaikaw.cn/";(async () => {// 创建 Browser 实例，初始化全屏const browser = await puppeteer.launch({headless: false, // false：显示浏览器，true：不显示浏览器defaultViewport: { width: 0, height: 0 }, // 满屏显示args: ['--start-maximized'], // 窗口最大化});//然后创建一个 tab页的 Page 实例const page = await browser.newPage();console.log('开始进入页面...')await page.goto(targetUrl, {waitUntil: 'networkidle0'});// 等待这个元素加载出来await page.waitForSelector('#__next', { timeout: 5000 })console.log('进入成功')// 获取抓取的数据const htmlInfoList = await page.evaluate(() => {const dataBoxLists = document.querySelectorAll('.pcHome_bookColumn__5t5zY');// 定义变量，存抓取的数据let dataList = [];for (let i = 0; i < dataBoxLists.length; i++) {const title = dataBoxLists[i].querySelector('h2').innerText;// 获取每一条剧集信息const skipItems = dataBoxLists[i].querySelectorAll('.SecondList_secondListItem__2_lJR');const cellInfoList = [];for (let j = 0; j < skipItems.length; j++) {const skipItem = skipItems[j];// 获取短剧 链接const skipUrl = skipItem.querySelector('.SecondList_bookImage__f2rZc').href;// 获取短剧 标题const skipTitle = skipItem.querySelector('.SecondList_bookName__6KW0W').innerText;// 获取短剧 集数const episode = skipItem.querySelector('.SecondList_totalChapterNum__c1QOf').innerText;// 获取短剧 封面图const poster = skipItem.querySelector('img').src;// 获取短剧 标签类型const tags = skipItem.querySelectorAll('.SecondList_tagItem__DI39u');const tagList = [];for (let k = 0; k < tags.length; k++) {const tag = tags[k];tagList.push(tag.innerText);}cellInfoList.push({url: skipUrl,title: skipTitle,poster,episode,tagList})}dataList.push({title: title,cellList: cellInfoList})}return dataList;})console.log('爬取的数据为：', htmlInfoList)
})();
执行上述代码，你就能看到终端打印出这样的内容：
这样看着不是很直观，所以还是把爬取的数据写入一个txt文件里吧，加上如下代码：
const fs = require('fs');// 文件路径，将爬虫数据保存到该文件中
const filePath = '爬虫(河马短剧).txt';// 使用 writeFile 异步写入文件// JSON.stringify()第三个参数设置为 2 表示每层缩进两个空格fs.writeFile(filePath, JSON.stringify(htmlInfoList, null, 2), 'utf8', (error) => {if (error) {console.error('写入文件时出错:', error);} else {console.log(`内容已写入文件 ${filePath}`);}});
再次npm run index.js，就会看到文件夹下多了个爬虫(河马短剧).txt：
完整代码
完整代码放在码云gitee托管了，如果大家去看的话，切换到这个分支，因为主分支我想作为基础分支，以后爬取各种各类的东西，所以主分支是一个基础模版：
最后
小编是前端开发者，目前正在持续更新《若依nodejs全栈》系列，请大家多多关注。
