乐趣区

关于puppeteer:puppeteer-cheerio-mysql-模拟用户去爬取一个aspx网站

jiezi

起源

最近被前共事问是否能够帮他去爬取一个网站的数据，而后他把网站发给我了，之后我就去钻研了下，

原本打算用 spider-flow 这个货色来爬的，毕竟能不写代码的，为啥我要去写代码，而后钻研了下 spider-flow 发现满足不了需要，节约了两天工夫，
😄😄😄，还是老老实实手写把, 对 spider-flow 感兴趣的能够看看我写的：https://www.mubucm.com/doc/7rBgfYhSzrt

最终成果

作者在写这篇文章的技能和环境

  • 前端略懂一二
  • nodejs 无所不通
  • 数据库无所不通
  • window 零碎
  • puppeteer 版本: 19.7.4
  • node 版本: 14.18.0

本文只适宜小白浏览，大佬请出门左转~

页面地址

  • http://zjj.sz.gov.cn:8004/?__EVENTARGUMENT=3&ddlPageCount=20
  • 本文将以爬取一手房预售房源数据为例

页面剖析

  • 一手房预售信息页面信息首页数据从哪里来？
  • 页面执行逻辑
  • 页面渲染逻辑
  • 我的项目详情页跳转逻辑：http://zjj.sz.gov.cn/ris/bol/szfdc/projectdetail.aspx?id=126809
  • 证件详情页跳转逻辑：http://zjj.sz.gov.cn/ris/bol/szfdc/certdetail.aspx?id=126809

思路

  • 思路 1：模仿用户操作，像一个失常的用户去点击而后爬取数据，之后再把数据存储到数据库, 而后点击分页反复这个操作，直到爬取完所有数据
  • 思路 2：间接调用获取数据接口，而后解析数据，之后再把数据存储到数据库咱们先用思路 1 的形式来做，
  • 原本我想用思路 2 的做法来做，起初有个问题没解决，所以先依照思路 1 来实现

外围代码解说

puppetter 如何扭转页面的值？

官网 api

  • 具体代码，依照 20 条 / 页去爬取

puppetter 如何触发事件？

  • api
  • 实例：
page.click(#AspNetPager1 > span:nth-last-of-type(1), {delay: 100})

应用 puppetter 拜访页面，如何去解析数据？

  • 一开始我还始终被困在这个 puppetter api，始终想在这个浏览器执行的时候去获取这些信息，其实这种也是能够的，然而不不便，起初百度发现能够应用 cheerio 这个库，像应用 jquery 把对页面做操作
  • cheerio 遍历页面数据
  • cheerio 具体代码

如何把保留数据到数据库？新建一个 house_info 数据库，而后搞了一个 presell 预售表，预售的表构造

sql 相干常识查问数据

  • select * from presell
  • 更新某一条数据：update presell set name=’ 阿斯顿撒 ’,enterprise=99 WHERE serial=2
  • 更新所有的数据：UPDATE presell SET address=’ 深圳 ’ 插入数据：INSERT INTO presell (mainKey,serial,id) VALUES (1111,2,3);
  • 批量插入数据：INSERT INTO presell (mainKey, serial, id, NAME, enterprise, address, date) VALUES (‘10001’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘2022-02-06’),(‘10002’, ‘2222’, ‘3’, ‘4’, ‘5’, ‘6’, ‘2022-02-06’)

如何批量插入数据 

var mysql      = require('mysql2');
var connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : 'root'
});

connection.query('use house_info')

const array = [
  [ 
    1679389969116,
    '13',
    '深房许字（2023）南山 003 号',
    'http://zjj.sz.gov.cn/ris/bol/szfdc/certdetail.aspx?id=126737',
    '方直珑樾山花园',
    'http://zjj.sz.gov.cn/ris/bol/szfdc/ojectdetail.aspx?id=126737',
    '深圳市龙廷房地产开发有限公司',
    '南山',
    '2023-03-02'
  ],
  [
    1679389969118,
    '13',
    '深房许字（2023）南山 003 号',
    'http://zjj.sz.gov.cn/ris/bol/szfdc/certdetail.aspx?id=126737',
    '方直珑樾山花园',
    'http://zjj.sz.gov.cn/ris/bol/szfdc/ojectdetail.aspx?id=126737',
    '深圳市龙廷房地产开发有限公司',
    '南山',
    '2023-03-02'
  ],
]
connection.query(`INSERT INTO presell ( mainKey, serial, idCard, idCardUrl, productName, productUrl, enterprise, location, authorizeDate)
VALUES ?`,[array], function (error, results, fields) {if (error) {log.error('批量插入失敗，错误信息 ==>', error)
   throw error;
  }
  // connected!
  log.info('批量插入胜利', results)
});

开始编码

  • puppetter 环境搞了我两天，装了新版本，chrom 始终没有下载下来，😭😭😭，解决办法看前面

先拜访一次

因为第一组分页的页面构造和第二组的页面构造不一样，所以要搞成不同的逻辑不同的页面构造，难搞哦

第一页的时候的页面构造和逻辑

第二组分页的页面机构和逻辑

开始第一轮的轮询

开始第二轮的轮询

存储数据库的逻辑

下载不了 chromium 的解决办法

Failed to set up Chromium r1095492! Set “PUPPETEER_SKIP_DOWNLOAD” env variable to skip download

问题截图 关键词：Failed to set up Chromium r1095492! Set “PUPPETEER_SKIP_DOWNLOAD” env variable to skip download

问题起因：上面这张图是我在家外面间接更新就好了，一点问题都没有，在公司电脑已更新就狗带，太难了

解决办法：（想间接看答案的，间接跳到终极起因 或者办法 5 处查看解决办法）

办法 1：从 puppeteer 源码找到下载的资源
  • 修炼不到家，找不到，😄😄😄，起初就放弃了

办法 2：从 chromium 官网下载对应的版本

    1. 查看 puppeter 和 chromium 的对应关系，找到对应关系 而后在 chromium 的下载链接前面本人换一下，而后下载 https://github.com/chromium/chromium/releases/tag/111.0.5556.0

      - 等了两个小时，发现这个文件是不对的，700m，家外面那个电脑也就是 170m。这个思路也是错的

办法 3：chrome 与 puppeteer 版本发生冲突在 gitee 上找了另一个思路

  • 我过后找到了这个 issue，然而没有依照这个思路找上来，如果我间接去搜寻这个关键词，可能我就不用浪费半天工夫了。哈哈谷歌搜寻这个关键词
  • 看这里，github 地址：https://github.com/wadezhan/billfeller.github.io/issues/232，是个深圳的大佬，感激~

办法 4：puppeteer install Chromium r1095492 error 换了个思路，而后进了这个网站

  • 看了这个 issue：https://github.com/puppeteer/puppeteer/issues/1597#issuecomment-351945645
  • 2017 年这个问题就存在了，只不过那时候大多数人用了淘宝镜像能够解决，然而我在 2023-03-13 的时候用淘宝镜像就发现没有那个资源，应该是没有同步过去
  • cnpm 也有这个问题
  • Download failed: server returned code 404. URL: https://npmmirror.com/mirrors//chromium-browser-snapshots/Win…
  • chromium-browser-snapshots 库

终极起因

我就始终好奇这个 Failed to set up Chromium r1095492! 外面的 r1095492 是啥货色，起初失去答案才晓得，原来是一个所谓的版本号。。。，我始终认为是 chromium 的版本，思路错了，他是一个 chromium-browser-snapshots 外面的版本号
https://commondatastorage.googleapis.com/chromium-browser-sna…

  • 这个没有梯子上不去：https://registry.npmmirror.com/binary.html?path=chromium-brow…

    https://commondatastorage.googleapis.com/chromium-browser-sna…

    - 下载后的资源大略长这样，两天了，你晓得我两天怎么过去的吗！！！

  • 间接把解压后的文件丢上去是不行的，必须依照 puppeter 的这种格局才行，解压进去是 chrome-win 文件夹，
  • 而后把拷贝的文件，丢到以后用户下的 .cache/puppeteer 下新建一个 win64-1095492 文件夹下就好了
  • 搞定，上班！！！
  • 最初，总结一下，其实本人好屡次都曾经触碰到了答案，只是没有留神到，😄😄，历时两天，终于搞定，感激浏览，谢谢~

办法 5：应用本机的 chrom

  • 第一步：export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
  • 第二步：npm i puppeteer
  • 第三步：https://stackoverflow.com/questions/59786319/configure-puppeteer-executablepath-chrome-in-your-local-windows
await puppeteer.launch({headless: false,    args: ['--disable-infobars', '--no-sandbox', '--disable-setuid-sandbox'],   // window 如果复制是上面的地址是不行的，executablePath: 'C:\Program Files\Google\Chrome\Application\chrome.exe',   // window 要把 地址外面的 \ 都变成 \ \ , 不然狗带，遗记是啥起因了，反正就是没有计算机体系常识不懂，哈哈，大略这种意思   executablePath: 'C:\Program Files\Google\Chrome\Application\chrome.exe',  });

想看源码的能够瞅瞅

源码

免责申明

  • 本我的项目只是学习应用，无心对此网站进行爬虫等操作

参考资料

  • puppeteer 如何触发表单提交
  • puppeteer 如何执行页面的 js 办法
  • Puppeteer 基本概念介绍
  • puppeteer 环境部署问题小记
  • vscode 如何调试 node
// launch.json 配置 
{
  "name": "nodejs-debugger",
  "program": "${workspaceFolder}/index.js",
  "request": "launch",
  "skipFiles": ["<node_internals>/**"],
  "type": "node"
},
  • 数据库相干 date 空字符串解决问题起因，爬了一千多条数据，而后挂了，说插入数据库谬误。。。

    问了下大哥们，如同不行，只能传入 date 和 null，或者是说把 date 变成字符串，哈哈，感觉不好把，有点业余

退出移动版