起源

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

原本打算用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 变成字符串，哈哈，感觉不好把，有点业余