前端爬虫+可视化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 =>{
    //准备chunks
    let 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()

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

RK3568平台 USB基础知识

一.现实工作中USB实际例子 现象&#xff1a;把USB设备比如Android手机接到PC 右下角弹出"发现android phone"跳出一个对话框&#xff0c;提示你安装驱动程序 问1&#xff1a;USB设备插到电脑上去&#xff0c;接触到的对方设备是什么&#xff1f; 答1&#xff1a;…

yum 和 rpm

rpm说明 rpm -qa &#xff1a;列出所有已安装的软件包 [roothub ~] rpm -qa geoipupdate-2.5.0-1.el7.x86_64 ncurses-base-5.9-14.20130511.el7_4.noarch libndp-1.2-9.el7.x86_64 libfastjson-0.99.4-3.el7.x86_64 。。。 rpm -qf FILENAME &#xff1a;查找提供 FILENAME…

SwiftUI之CoreData详解(一)

coreData 是一种数据持久化的方案&#xff0c;是对SQLite的一种封装。一说到这种桌面化的数据库&#xff0c;我就无比的怀念Foxbase|Foxpro, 多好的数据库产品&#xff0c;被微软扼杀了&#xff0c;相当年教大学生妹子们国家二级数据库时都是手把手教的&#xff0c;呃~~~&#…

wordpress模板官网

移民wordpress主题 移民代办wordpress主题&#xff0c;适合做海外移民咨询的代理公司搭建wordpress企业官方网站使用。 https://www.jianzhanpress.com/?p5130 夏令营wordpress主题 绿色夏令营wordpress主题&#xff0c;适合做夏令营或户外拓展的公司搭建wordpress官方网站…

【动态规划】第十一届蓝桥杯省赛第二场C++ C组《数字三角形》(c++)

1.题目描述 上图给出了一个数字三角形。 从三角形的顶部到底部有很多条不同的路径。 对于每条路径&#xff0c;把路径上面的数加起来可以得到一个和&#xff0c;你的任务就是找到最大的和。 路径上的每一步只能从一个数走到下一层和它最近的左边的那个数或者右边的那个数。 …

绝地求生:小团团曝被判8年:地图语音包或将下架,公会和主播被一锅端

这两天大家都在讨论某鱼平台办卡抽奖的事情。这件事发生之后没多久&#xff0c;某鱼平台里面的大量主播在同一时间停播&#xff0c;闲游盒认为大家应该也懂的&#xff0c;这次停播就是因为这些主播也参与了办卡抽奖&#xff0c;都需要接受调查&#xff0c;在两个月左右的调查中…

【项目实践】如何发掘用户隐性需求推送PUSH

1.背景 对比业界广告推荐、触达成熟的平台&#xff0c;例如抖音&#xff0c;小红书&#xff0c;淘宝&#xff0c;知乎等&#xff0c;都已经站在巨量数据的基础之上&#xff0c;具备了 “用户意图分析” 的能力&#xff0c;可以分析出 “用户的隐性需求”&#xff0c;假设我们同…

Python学习日记(一:List、Tuple、dictionary)

前言&#xff1a; 最近想拓展一下自己的知识面&#xff0c;特来学习一下python这门语言&#xff0c;因为之前学习过C语言&#xff0c;目前学习起来Python还不是特别费劲&#xff0c;也由此感叹C语言不愧是最基础的语言。不多废话&#xff0c;进入正题 概述&#xff1a; Pytho…

典中典之西电A测-气压测控仿真系统

兄弟,如果你看到这篇,只能说明你A测也挂了,没办法,哥们太菜了,抄的太假过不了你电有些老师的慧眼 这坨&#x1f415;⑩我先吃为敬 环境搭建可以参考这个兄弟的博客 一、题目要求 实现功能&#xff1a;使用 Arduino UNO 微控制器&#xff0c;搭建一个 PC 上位机远程气压检测控…

动态规划:LeetCode第10题 正则表达式匹配

题目&#xff1a; 给你一个字符串 s 和一个字符规律 p&#xff0c;请你来实现一个支持 . 和 * 的正则表达式匹配。 . 匹配任意单个字符* 匹配零个或多个前面的那一个元素 所谓匹配&#xff0c;是要涵盖 整个 字符串 s的&#xff0c;而不是部分字符串。 示例 1&#xff1a; …

C语言文件操作,linux文件操作,文件描述符,linux下一切皆文件,缓冲区,重定向

目录 C语言文件操作 如何打开文件以及打开文件方式 读写文件 关闭文件 Linux系统下的文件操作 open 宏标志位 write&#xff0c;read&#xff0c;close&#xff0c;lseek接口 什么是当前路径&#xff1f; linux下一切皆文件 文件描述符 文件描述符排序 C语言文件操…

【Linux从青铜到王者】进程信号

——————————————————————————————————————————— 信号入门 在了解信号之前有许多要理解的相关概念 我们可以先通过一个生活例子来初步认识一下信号 1.生活角度的信号 你在网上买了很多件商品&#xff0c;再等待不同商品快递的到来…

达梦、金仓、南大、瀚高、优炫:从社区建设看企业技术自信心

正文约950字&#xff0c;预计阅读时间2分钟 国产技术厂商在面对自身产品问题时&#xff0c;往往保持回避态度&#xff0c;不愿公之于众&#xff0c;主要原因有2方面&#xff1a; 1&#xff0c;产品技术层面问题较多&#xff0c;如某些根本性缺陷难以攻克&#xff0c;或问题发…

Python爬虫实战(基础篇)—13获取《人民网》【最新】【国内】【国际】写入Word(附完整代码)

文章目录 专栏导读背景测试代码分析请求网址请求参数代码测试数据分析利用lxml+xpath进一步分析将获取链接再获取文章内容测试代码写入word完整代码总结专栏导读 🔥🔥本文已收录于《Python基础篇爬虫》 🉑🉑本专栏专门针对于有爬虫基础准备的一套基础教学,轻松掌握Py…

vue 安装各种问题

新下载了个项目模板&#xff0c;安装包就遇到了各种各样问题 电脑&#xff1a;mac 使用npm i 等命令一直安装项目&#xff0c;然后一直报错 2534 info run canvas2.11.2 install node_modules/canvas node-pre-gyp install --fallback-to-build --update-binary 2535 info r…

Tomcat+Nginx的动静分离

1.反向代理多机 实验&#xff1a;Nginx要开启upstream(负载均衡)、location(url链接)、proxy_pass(反向代理) 配置&#xff1a;7-3做代理服务器&#xff1b;7-1 和 7-2做Tomcat服务器 关闭防火墙和selinux 1.准备配置 7-3安装nginx&#xff1b;7-1 和 7-2安装Tomcat&#xff…

Re61:读论文 PRP Get an A in Math: Progressive Rectification Prompting

诸神缄默不语-个人CSDN博文目录 诸神缄默不语的论文阅读笔记和分类 论文名称&#xff1a;Get an A in Math: Progressive Rectification Prompting ArXiv网址&#xff1a;https://arxiv.org/abs/2312.06867 官方实现网站&#xff1a;PRP 官方代码&#xff1a;https://github.…

iOS 17.0 UIGraphicsBeginImageContextWithOptions 崩溃处理

在升级到iOS17后你会发现&#xff0c;之前版本运行的很好&#xff0c;这个版本突然会出现一个运行闪退。报错日志为*** Assertion failure in void _UIGraphicsBeginImageContextWithOptions(CGSize, BOOL, CGFloat, BOOL)(), UIGraphics.m:410 跟踪到具体的报错位置如下所示&a…

闰年导致的哪些 Bug

每次闰年对程序员们都是一个挑战&#xff0c;平时运行好好的系统&#xff0c;在 02-29 这一天&#xff0c;好像就会有各种毛病。 虽然&#xff0c;提前一天&#xff0c;领导们都会提前给下面打招呼。但是&#xff0c;不可避免的&#xff0c;今天公司因为闰年还是有一些小故障。…

Tomcat(二) 动静分离

一、(TomcatNginx)动静分离 1、单机反向代理 利用 nginx 反向代理实现全部转发至指定同一个虚拟主机 客户端curl www.a.com 访问nginx服务&#xff0c;nginx服务通过配置反向代理proxy_pass www.a.com:8080&#xff0c;最终客户端看到的是www.a.com 实验中&#xff1a;7-3 做客…