什么？网络爬虫太难？--像这样写一个爬虫！太简单！！！

前言&初衷最近在写一个前端项目。由于后台没有提供数据接口，只能自己伪造一些数据；但是你会发现，伪造数据也需要大量的精力；我的天啊！难道我们前端就没有办法自己完成一个项目吗？所以我想为什么不自己写一个爬虫来爬取我想要的数据呢？因为我是前端，打算用Node.js写一个爬虫；终于过了一段时间我找到了一个非常简单的网页爬取数据的方法，这个方法既可以从静态网页爬取数据，也可以从动态网页爬取数据。为了不让其他前端小伙伴在写前端项目的时候陷入和我一样的困境，我打算写这篇文章来分享一下我使用的方法。希望能对同样学习前端的朋友有所帮助！准备工具VSCode编码工具（VSCode是一个轻量级但非常强大的源代码编辑器）Node.js开发环境（Node.js采用事件驱动，异步编程，专为网络服务而设计，是目前最快的Javascript引擎。)cheerio运行DOM节点环境安装：cnpmicheerio-Scheerio是专门为服务端定制的jQuery核心实现，快速，灵活，实现，
了解cheerio
英文：https://github.com/cheeriojs/...
中文：https://cnodejs.org/topic/520...nightmare(自动化测试工具)节点环境安装:cnpminightmare-Snightmare是一个基于Electron的web自动化测试和爬虫框架，因为它和PlantomJS一样具有自动化测试功能，可以模拟用户在页面上的行为触发一些异步数据加载，也可以跟随Request该库直接访问URL抓取数据，页面的延迟时间可以设置，所以无论是手动触发脚本还是行为触发脚本都轻而易举。“三步走”流程分析第一步：确定目标网页；今日头条：https://www.toutiao.com/
第二步：确定目标数据区，分析Dom结构；
第三步：安装依赖，代码->测试->抓取数据;
cnpmicheerio-S
cnpminightmare-S开始编码！也是分三步实现的！！！第一步：引入需要的第三方包constcheerio=require('cheerio');constfs=require('fs');//node.js自带的write模块，后面会用到将爬取的数据写入你的根目录constNightmare=require('nightmare');constnightmare=Nightmare({show:true});//show:true显示内置模拟浏览器varnewsList=[]//用于保存新闻数据第二步：使用nightmare将目标网页的数据抓取到控制台使用nightmare工具API介绍：https://github.com/segmentio/...nightmare.goto('https://www.toutiao.com/').wait(6000)//6000表示打开模拟浏览器时等待6秒在抓取页面数据之前。有了这个时间，你就可以为所欲为了动态加载operation.evaluate(()=>document.querySelector("div.feed-infinite-wrapper").innerHTML)//这里必须获取容器的类名你要爬取数据区。then(htmlStr=>{newsListData=getnewsList(htmlStr)//getnewsList()函数会进行原始数据的选择和处理newsListData=JSON.stringify(newsListData)//转换数据写入文件操作的字符串fs.writeFile("newsListData.json",newsListData,"utf-8",(error)=>{//监听错误，如果输出正常，打印nullif(error==null){console.log("恭喜，newsListData数据爬取成功！)");}})}).catch(error=>{console.log(`Datacapturefailed-${error}`);})值得一提的是：es7的async/await据说是异步编程的终极解决方案，它可以让我们用同步的思维方式来做异步编程吧，ES6的Promise解决了异步编程的“回调地狱”，async/await也让异步过程控制变得友好和清晰，有兴趣的同学可以去了解一下，真的很管用。第三步：封装getnewsList()处理原始数据letgetnewsList=(res)=>{if(res){let$=cheerio.load(res);$('ulli').each(function(index,item){if($(item).children().attr('class')==='no-mode'){lettitem=$(item).children('.no-mode').children('.title-box');让fitem=$(item).children('.no-mode').children('.footer-bar');letnews1={title_href:titem.children().attr('href'),//attr('attribute')可以得到对应属性的值，包括内联样式的值title_text:titem.children().text(),//text()获取文本内容tag_href:fitem.children('.footer-bar-left').children('.tag').attr('href'),tag_text:fitem.children('.footer-bar-left').children('.tag').text(),mediaAvatar_href:fitem.children('.footer-bar-left').children('.media-avatar').attr('href'),mediaAvatar_imgsrc:fitem.children('.footer-bar-left').children('.media-avatar').children().first().attr('src'),source1_href:fitem.children('.footer-bar-left').children('.source').first().attr('href')，source1_text:fitem.children('.footer-bar-left').children('.source').first().text(),source2_href:fitem.children('.footer-bar-left').children('.source').last().attr('href'),source2_text:fitem.children('.footer-bar-left').children('.source').last().text(),time_text:fitem.children('.footer-bar-left').children('span').text()}新闻列表.push(news1)}else{letlitem=$(item).children('.single-mode').children('.single-mode-lbox');让ritem=$(item).children('.single-mode').children('.single-mode-rbox').children('.single-mode-rbox-inner');让news2={img_href:litem.children('.img-wrap').attr('href'),img_src:litem.children('.img-wrap').children().attr('src'),title_href:ritem.children('.title-box').children().attr('href'),title_text:ritem.children('.title-box').children().text(),tag_href:ritem.children('.footer-bar').children('.footer-bar-left').children('.tag').attr('href'),tag_text:ritem.children('.footer-bar').children('.footer-bar-left').children('.tag').text(),mediaAvatar_href:ritem.children('.footer-bar').children('.footer-bar-left').children('.media-avatar').attr('href'),mediaAvatar_imgsrc:ritem.children('.footer-bar').children('.footer-bar-left').children('.media-avatar').children().attr('src'),source1_href:ritem.children('.footer-bar').children('.footer-bar-left').children('.source').first().attr('href'),source1_text:ritem.children('.footer-bar').children('.footer-bar-left').children('.source').first(.text(),source2_href:ritem.children('.footer-bar').children('.footer-bar-left').children('.source').last().attr('href'),source2_text:ritem.children('.footer-bar').children('.footer-bar-left').children('.source').last().text(),time_text:item.children('.footer-bar').children('.footer-bar-left').children('span').text()}newsList.push(news2)}})返回newsList}else{console.log('Nodataincoming!')return}}关于cheerio使用技巧如果想进一步了解cheerio，可以返回本文前面提供学习链接；
个人认为，我比较喜欢用cheerio的children()来选择你要拉取的数据的值或者属性，只要你把你想要的文本或者属性的值逐层提取出来，就一定可以搞定！
注意：如果你要爬取的数据不在DOM结构中，而是在.css文件中，cheerio是不能选的，也就是也就是说，不能抓取样式，除了内联样式！可以使用attr('style')获取字符串，然后对字符串进行切割，得到你想要的值！
至此，我们已经可以爬取今日头条新闻榜单的数据了，还请稍等一下，让我看一下网络爬虫的爬取数据的思路，请往下看！重要的是想法！网络爬虫实现爬取数据的四个步骤！1、确定目标网页，分析目标数据区。一般网页上的数据由静态加载和动态加载组成。下面我们以爬取今日头条列表为例：（可以看到今日头条列表中的数据是静态的，加载完数据后，会再次加载！所以我们使用nightmare来模拟浏览器加载数据。）
其次，接下来分析目标数据区（可以看到目标数据区列表中有两个不同的列表的DOM结构，我们将对这两个不同的列表DOM结构进行处理不同，最后把所有的数据放到一个数组中）
3.接下来我们分析其中一个数据列表DOM结构和ProcessingFirst，分析结构，请看图。
(显示列表分析)(浏览器源代码结构分析)让我们使用cheerio为分析的结构获取所需的数据让$=cheerio.load(res);$('ulli')。each(function(index,item){if($(item).children().attr('class')==='no-mode'){//这里的分析思路和下面的分析是一样的。..}//这是分析结构的数据捕获else{letlitem=$(item).children('.single-mode').children('.single-mode-lbox');letitem=$(item).children('.single-mode').children('.single-mode-rbox').children('.single-mode-rbox-inner');letnews2={img_href:litem.children('.img-wrap').attr('href'),img_src:litem.children('.img-wrap').children().attr('src'),title_href:item.children('.title-box').children().attr('href'),title_text:item.children('.title-box').children().text(),tag_href:item.children('.footer-bar').children('.footer-bar-left').children('.tag').attr('href'),tag_text:item.children('.footer-bar').children('.footer-bar-离开t').children('.tag').text()，mediaAvatar_href:ritem.children('.footer-bar').children('.footer-bar-left').children('.media-avatar'.attr('href'),mediaAvatar_imgsrc:ritem.children('.footer-bar').children('.footer-bar-left').children('.media-avatar').children().attr('src'),source1_href：ritem.children('.footer-bar').children('.footer-bar-left').children('.source').first().attr('href'),source1_text:ritem.children('.footer-bar').children('.footer-bar-left').children('.source').first().text(),source2_href:ritem.children('.footer-bar').children('.footer-bar-left').children('.source').last().attr('href'),source2_text:ritem.children('.footer-bar').children('.footer-bar-left').children('.source').last().text(),time_text:ritem.children('.footer-bar').children('.footer-bar-left').children('span').text()}newsList.push(news2)}}4。通过getnewsList()函数对抓取的数据进行逻辑处理，(return)在这里返回需要的目标数据。我们把返回的数据处理一下，通过Node.js自带的写入模块写入到你的Vscode中...,"utf-8",(error)=>{//监听错误，如果输出正常，则打印nullif(error==null){console.log("恭喜，newsListData数据爬取成功！)");}})...最后我们可以看到爬取数据成功后在vscode上显示如下图：（如果要加载更多列表数据，6s内下拉刷新更多数据即可。）（这里我使用Vscode中的JSONTools插件格式化爬取到数据，让数据更方便浏览！）github源码（欢迎star！）至此，一个完整的爬虫就写完了。其实用node.js做爬虫有很多种方法。可以使用node.js的http模块或者第三方包superagent来爬取网页上的数据。同样的是cheerio是用来处理数据的，他们只能爬取静态网页的数据。不过本文使用的第三方包nightmare不仅可以抓取静态网页数据，还可以通过模拟浏览器抓取动态数据来模拟动态加载过程。说到这里，相信读者们已经知道一个简单的爬虫是怎么写的了。看完是不是觉得爬虫也不过如此呢？哈哈哈，一起来聊聊爬虫吧。微软雅黑》>SaySoeasy!!!（如果您喜欢本文，欢迎点赞收藏！您的鼓励会让我更有动力。当然，如果您发现我的方法有瑕疵或改进，欢迎评论！）