前端爬虫+可视化Demo

爬虫简介

可以把互联网比做成一张 “大网”,爬虫就是在这张大网上不断爬取信息的程序。

爬虫是请求网站并提取数据的自动化程序。

省流:Demo实现前置知识:

  1. JS 基础
  2. Node 基础

(1)爬虫基本工作流程:

  1. 向指定的URL发送 http 请求
  2. 获取响应(HTML、XML、JSON、二进制等数据)
  3. 处理数据(解析DOM、解析JSON等)
  4. 将处理好的数据进行存储

 

相关岗位:

  • 数据分析
  • 大数据应用
  • 运营
  • 人工智能 

 (2)爬虫作用

  • 搜索引擎
  • 自动化程序
    • 自动获取数据
    • 自动签到
    • 自动薅羊毛
    • 自动下载 
  • 抢票软件 

爬虫就是一个探测程序,它的基本功能就是模拟人的行为去各个网站转悠,点点按钮,找找数据,或者把看到的信息背回来。就像一只虫子在一幢楼里不知疲倦地爬来爬去 。

使用的百度和Google,其实就是利用了这种爬虫技术: 每天放出无数爬虫到各个网站,把他们的信来,存到数据库中等用户来检索。  

抢票软件,自动帮你不断刷新 12306 网站的火车余票。一旦发现有票,就马上下单,然后你自己来付款。
在现实中几乎所有行业的网站都会被爬虫所“骚扰”,而这些骚扰都是为了方便用户。

 


爬虫批量下载图片 

目标:以https://www.itheima.com/teacher.html#aweb 网站目标为例,下载图片

①获取网页内容 

使用 axios 或 node 原生 API发起请求,得到的结果就是整个HTML网页内容 

(1) 使用axios

// 步骤
//使用ES6 语法记得将package.json中的修改为"type":"module"
//1.发起 HTTP 请求,获取到当前网页(借助 axios)
import axios from 'axios'//function getData(){//axios.get('https://www.itheima.com/teacher.html#aweb').then()//.then 后拿到promise对象
//}async function getData(){const res = await axios.get('https://www.itheima.com/teacher.html#aweb')console.log(res.data)
}getData()

(2)使用node方法(使用 http.request()方法即可发送 http 请求)如下:

//引入https模块
const http =require('https')
//创建请求对象
let reg = http.request('https://www.itheima.com/teacher.html#aweb', res =>{//准备chunkslet chunks = []res.on('data',chunk =>{//监听到数据就存储chunks.push(chunk)
})
res.on('end',()=>{//结束数据监听时讲所有内容拼接console.log(Buffer.concat(chunks).toString('utf-8'))})})
//发送请求
req.end()

 


 

②解析 HTML 并下载图片

  • 使用 cheerio 加载 HTML
  • 回顾 jQueryAPI
  • ·加载所有的 img标签的 src 属性
  • 使用 download 库批量下载图片

 

 cheerio库 官方地址:The industry standard for working with HTML in JavaScript | cheerioThe fast, flexible & elegant library for parsing and manipulating HTML and XML.icon-default.png?t=N7T8https://cheerio.js.org/

 在服务器上用这个库来解析 HTML 代码,并且可以直接使用和 jQuery 一样的 API

 官方 demo 如下:

const cheerio = require('cheerio')
const $ = cheerio.load('<h2 class="title">Hello world</h2>')
$('h2.title').text('Hello there!')
$('h2').addClass('welcome')
$.html()
//=> <html><head></head><body><h2 class="title welcome">Hello there!</h2></body></html>

同样也可以通过 jQuery 的 API 来获取DOM元素中的属性和内容

 


 

(1)使用 cheerio库解析 HTML

1.分析网页中所有 img 标签所在结构 

 

import axios from 'axios'
import cheerio from 'cheerio'
async function getData(){const res = await axios.get('https://www.itheima.com/teacher.html#aweb')const $ = cheeri0.load(res.data)//使用 cheerio 解析网页源码const imgs = Array.from($('.tea main .tea con img')).map(img => 'https://www.itheima.com/'+$(img).attr('src'))    //用map遍历之后jQuery的attr//使用选择器解析所有的 img 的src 属性console.log(imgs)
}getData()

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/720938.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

『运维备忘录』之 RegEx 正则表达式实例汇总

运维人员不仅要熟悉操作系统、服务器、网络等知识&#xff0c;甚至对于开发相关的也要有所了解。很多运维工作者可能一时半会记不住那么多命令、代码、方法、原理或者用法等等。这里我将结合自身工作&#xff0c;持续给大家更新运维工作所需要接触到的知识点&#xff0c;希望大…

深入理解Tomcat

目录&#xff1a; TomcatTomcat简介如何下载tomcatTomcat工作原理Tomcat架构图Tomcat组件Server组件Service组件Connector组件Engine组件Host组件Context组件 配置虚拟主机(Host)配置Context Tomcat Tomcat简介 Tomcat服务器是Apache的一个开源免费的Web容器。它实现了JavaEE…

【Android】源码解析 Activity 的构成

本文是基于 Android 14 的源码解析。 当我们写 Activity 时会调用 setContentView() 方法来加载布局。现在来看看 setContentView() 方法是怎么实现的&#xff0c;源码如下所示&#xff1a; 路径&#xff1a;/frameworks/base/core/java/android/app/Activity.javapublic void…

【机器学习】包裹式特征选择之递归特征添加法

&#x1f388;个人主页&#xff1a;豌豆射手^ &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;机器学习 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进…

Springboot解决模块化架构搭建打包错误找不到父工程

Springboot解决模块化架构搭建打包错误找不到父工程 一、情况一找不到父工程依赖1、解决办法 二、情况二子工程相互依赖提示"程序包xxx不存在" 一、情况一找不到父工程依赖 报错信息 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-deploy-plugin:…

windows安装pytorch(anaconda安装)

文章目录 前言一、安装anaconda1、进入官网下载&#xff08;1&#xff09;点击view all Installers&#xff08;2&#xff09;下载需要的版本 2、一顿默认安装就行&#xff08;到这一步这样填&#xff09;3、进入开始找到Anaconda Prompt&#xff0c;点击进入到base环境 二、新…

3-字典树-单词搜索 II

这是字典树的第3篇算法&#xff0c;力扣链接。 给定一个 m x n 二维字符网格 board 和一个单词&#xff08;字符串&#xff09;列表 words&#xff0c; 返回所有二维网格上的单词 。 单词必须按照字母顺序&#xff0c;通过 相邻的单元格 内的字母构成&#xff0c;其中“相邻”单…

docker 常用命令大全(基础、镜像、容器、数据卷)

文章目录 1.docker基础命令2.docker镜像命令2.1 镜像名称2.2 镜像命令2.3 案例1--拉取、查看镜像2.4 案例2--保存、导入镜像 3.docker容器命令3.1 容器命令3.2 案例--创建并运行一个容器3.3 案例--进入容器&#xff0c;修改文件3.4 小结 4.数据卷4.1 什么是数据卷4.2 数据卷操作…

【3GPP】【核心网】【5G】5G核心网协议解析(二)(超详细)

5G UE 附着过程 UE AMF ----------------- 注册请求(Registration Request) ----------------------> <--------------- 鉴权请求(Authentication Request) ------…

当Sora风靡,AI风潮吹醒金融科技

以下文章来源&#xff1a;凤凰网 前有OpenAI发布了Sora&#xff0c; 后有苹果放弃了秘密进行了十年的造车项目&#xff0c;转身拥抱AI&#xff0c; 再有国内市场上此起彼伏的AI呐喊声&#xff0c; 一场以AI为主导的新热浪&#xff0c;正在来袭。 当AI的风潮开始兴盛&#x…

xshell安装java/jdk

1.下载jdk wget https://download.java.net/java/GA/jdk11/13/GPL/openjdk-11.0.1_linux-x64_bin.tar.gz 2.解压jdk安装包 tar -zxvf openjdk-11.0.1_linux-x64_bin.tar.gz 其中第三步 编辑 ~/.bashrc 或 ~/.bash_profile 文件 打开vim文本编辑器 vim ~/.bash_profile export …

MoonBit 新增 += 运算符,引入 super trait 和 List 字面量机制

MoonBit更新 1. 添加了 系列语句 包括、-、*、/&#xff0c;支持运算符重载&#xff1a; fn init {let array [1,2,3,4]array[2] * 10println(array) // [1, 2, 30, 4] }fn init {let mut a 1a 20println(a) // 21 } struct Foo {data : Array[Int] } derive(Debug)fn o…

html邮件基本使用方法?如何发送HTML邮件?

html邮件是什么意思&#xff1f;如何在HTML中创建电子邮件链接&#xff1f; HTML邮件以其丰富的格式和视觉效果&#xff0c;让我们的邮件内容更加生动和吸引人。那么&#xff0c;HTML邮件的基本使用方法是什么呢&#xff1f;我们又该如何发送HTML邮件呢&#xff1f;下面&#…

LSTM 长短期记忆递归神经网络

1、神经网络简介 1.1 神经网络起源 人工神经网络&#xff08;Aritificial Neural Networks, ANN&#xff09;是一种仿生的网络结构&#xff0c;起源于对人类大脑的研究。人工神经网络&#xff08;Aritificial Neural Networks&#xff09;也常被简称为神经网络&#xff08;Ne…

展览展会媒体传播的必要性,有哪些宣传方式?

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 展览展会媒体传播的必要性在于扩大影响力、吸引观众和促进行业交流。通过媒体宣传&#xff0c;可以快速传递展会信息&#xff0c;提升品牌知名度&#xff0c;吸引更多潜在参展商和观众。…

【GIS人必看】如何手动更改ArcGIS矢量文件的编码方式

前面一篇文章&#xff0c;给大家免费免费开源了一款ArcGIS超级工具---一键扩展矢量文件字段名长度脚本工具 工具的具体获取及使用方法请点击链接&#xff1a;【ArcPy工具】【GIS人必备超级工具】【免费开源】ArcGIS超级工具-一键扩展矢量文件字段名长度-CSDN博客 其实工…

品牌有窜货可以这样治理

窜货是品牌渠道中的常见问题&#xff0c;也是品牌发展中必然要面对的&#xff0c;只要品牌没有做好前期的出货管控&#xff0c;窜货会非常容易出现&#xff0c;对区域的销售保护制度是很普遍的&#xff0c;经销商利用区域保护策略&#xff0c;钻品牌漏洞&#xff0c;进行窜货销…

【MySQL使用】show processlist 命令详解

show processlist 命令详解 一、命令含义二、命令返回参数三、Command值解释四、State值解释五、参考资料 一、命令含义 对于一个MySQL连接&#xff0c;或者说一个线程&#xff0c;任何时刻都有一个状态&#xff0c;该状态表示了MySQL当前正在做什么。SHOW PROCESSLIST 命令的…

SpringBoot接口防抖(防重复提交)的一些实现方案

前言 啥是防抖 思路解析 分布式部署下如何做接口防抖&#xff1f; 具体实现 请求锁 唯一key生成 重复提交判断 前言 作为一名老码农&#xff0c;在开发后端Java业务系统&#xff0c;包括各种管理后台和小程序等。在这些项目中&#xff0c;我设计过单/多租户体系系统&a…

springboot+bootstrap+jsp校园二手书交易平台mlg86

考虑到实际生活中在校园二手书交易系统方面的需要以及对该系统认真的分析,将系统权限按管理员和学生这两类涉及用户划分。 (a) 管理员&#xff1b;管理员使用本系统涉到的功能主要有个人中心、学生管理、图书类型管理、二手图书管理、通知公告管理、管理员管理、用户留言、系统…