当前位置： 首页 > news >正文

前端爬虫+可视化Demo

news 2025/11/14 22:22:04

爬虫简介

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

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

省流：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()

相关文章：

前端爬虫+可视化Demo

爬虫简介 可以把互联网比做成一张 “大网”&#xff0c;爬虫就是在这张大网上不断爬取信息的程序。 爬虫是请求网站并提取数据的自动化程序。 省流&#xff1a;Demo实现前置知识&#xff1a; JS 基础Node 基础 &#xff08;1&#xff09;爬虫基本工作流程&#xff1a; 向…...

编程日记 2024/3/5 12:45:40

keepAlive

router c.js const view (name) > () > import(/views/文件夹名/ name) export const c [ {path: /xxx,name: aaa,meta: {title: 哈哈哈,admin: true,keepAlive:true //加这个},component: view(xxx) }, ]adminMain.vue <keep-alive><router-view v-if"…...

编程日记 2024/3/5 12:43:38

蓝桥杯练习题——dp

五部曲&#xff08;代码随想录&#xff09; 1.确定 dp 数组以及下标含义 2.确定递推公式 3.确定 dp 数组初始化 4.确定遍历顺序 5.debug 入门题 1.斐波那契数 思路 1.f[i]&#xff1a;第 i 个数的值 2.f[i] f[i - 1] f[i - 2] 3.f[0] 0, f[1] 1 4.顺序遍历 5.记得特判 …...

编程日记 2024/3/5 12:39:35

kotlin基础语法

1.变量 var a:Int 2 //声明类型的可变变量 var b 3 //代码推测可变变量类型 val c 6 //代码推测不可变常量类型 var d:String?null //可为null的String类型的可变变量 latei…...

编程日记 2024/3/5 12:37:33

淘宝天猫商家爬虫工具 电商采集软件使用教程

介绍&#xff1a; 淘宝和天猫是中国最大的电商平台之一&#xff0c;商家在这里销售各种商品。在市场竞争激烈的环境下&#xff0c;了解竞争对手的商品信息和价格变化对于电商运营来说非常重要。本文将介绍如何使用Python编写一个简单的淘宝天猫商家爬虫工具&#xff0c;以获取商…...

编程日记 2024/3/5 12:35:31

建库建表时，最容易忽略的10个细节

大家使用 DolphinDB 创建数据库和表时&#xff0c;有时对于分区列、分区类型和排序列的选择并不十分清晰。如果不加注意&#xff0c;可能导致查询速度变慢、数据丢失或插入错误等问题。合理地设置分区列、排序列和分区类型&#xff0c;有助于加快查询速度&#xff0c;减少内存使…...

编程日记 2024/3/5 12:34:30

【基础知识】什么是 PPO（Proximal Policy Optimization，近端策略优化）

什么是 PPO&#xff08;Proximal Policy Optimization&#xff0c;近端策略优化&#xff09; PPO&#xff08;Proximal Policy Optimization&#xff0c;近端策略优化&#xff09;是一种强化学习算法&#xff0c;由John Schulman等人在2017年提出。PPO属于策略梯度方法&#x…...

编程日记 2024/3/5 12:33:29

程序员如何选择职业赛道？

程序员如何选择职业赛道&#xff1f; 程序员的职业赛道就像是一座迷宫&#xff0c;充满了各种各样的岔路口。每个岔路口都代表着不同的方向&#xff0c;不同的技术领域&#xff0c;不同的职业发展道路。 前端开发 前端开发就像迷宫中的美丽花园&#xff0c;它是用户与网站或应…...

编程日记 2024/3/5 12:31:28

[LeetBook]【学习日记】寻找和为指定数字的连续数字

题目 文件组合 待传输文件被切分成多个部分&#xff0c;按照原排列顺序&#xff0c;每部分文件编号均为一个 正整数&#xff08;至少含有两个文件&#xff09;。传输要求为&#xff1a;连续文件编号总和为接收方指定数字 target 的所有文件。请返回所有符合该要求的文件传输组…...

编程日记 2024/3/5 12:29:25

阿里云中小企业扶持权益

为企业提供云资源和技术服务&#xff0c;助力企业开启智能时代创业新范式。阿里云推出中小企业扶持权益 上云必备&#xff0c;助力企业长期低成本用云 一、ECS-经济型e实例、ECS u1实例活动规则 活动时间 2023年10月31日0点0分0秒至2026年3月31日23点59分59秒 活动对象 同时满…...

编程日记 2024/3/5 12:25:22

2核4g服务器能支持多少人访问？并发数性能测评

2核4g服务器能支持多少人访问&#xff1f;支持80人同时访问&#xff0c;阿腾云使用阿里云2核4G5M带宽服务器&#xff0c;可以支撑80个左右并发用户。阿腾云以Web网站应用为例&#xff0c;如果视频图片媒体文件存储到对象存储OSS上&#xff0c;网站接入CDN&#xff0c;还可以支持…...

编程日记 2024/3/5 12:24:21

Anthropic官宣Claude3：建立大模型 推理、数学、编码和视觉等方面 新基准

文章目录 1. product2. Main2.1 核心能力2.2 打榜表现 3. My thoughtsReference Claude 3 在推理、数学、编码、多语言理解和视觉方面&#xff0c;全面超越GPT-4在内的所有大模型&#xff0c;重新树立大模型基准。 1. product https://claude.ai/ 国内暂不能使用&#xff0c;…...

编程日记 2024/3/5 12:18:16

STM32 TIM编码器接口

单片机学习&#xff01; 目录 文章目录 前言 一、编码器接口简介 1.1 编码器接口作用 1.2 编码器接口工作流程 1.3 编码器接口资源分布 1.4 编码器接口输入引脚 二、正交编码器 2.1 正交编码器功能 2.2 引脚作用 2.3 如何测量方向 2.4 正交信号优势 2.5 执行逻辑 三、编码器定时…...

编程日记 2024/3/5 12:16:14

Jupyter Notebook的安装和使用(windows环境)

一、jupyter notebook 安装 前提条件&#xff1a;安装python环境 安装python环境步骤&#xff1a; 1.下载官方python解释器 2.安装python 3.命令行窗口敲击命令pip install jupyter 4.安装jupyter之后&#xff0c;直接启动命令jupyter notebook,在默认浏览器中打开jupyte…...

编程日记 2024/3/5 12:15:13

Platformview在iOS与Android上的实现方式对比

Android中早期版本Platformview的实现基于Virtual Display。VirtualDisplay方案的原理是&#xff0c;先将Native View绘制到虚显&#xff0c;然后Flutter通过从虚显输出中获取纹理并将其与自己内部的widget树进行合成&#xff0c;最后作为Flutter在 Android 上更大的纹理输出的…...

编程日记 2024/3/5 12:14:11

使用lnmp环境部署laravel框架需要注意的点

1&#xff0c;上传项目文件后&#xff0c;需要chmod -R 777 storage授予文件权限&#xff0c;不然会报错file_put_contents(/): failed to open stream: Permission denied。 如果后面还是报错没有权限的话&#xff0c;就执行ps -ef |grep php查询php运行用户。然后执行chown …...

编程日记 2024/3/5 12:12:10

AI-RAN联盟在MWC24上正式启动

AI-RAN联盟在MWC24上正式启动。它的logo是这个样的&#xff1a; 2月26日&#xff0c;AI-RAN联盟&#xff08;AI-RAN Alliance&#xff09;在2024年世界移动通信大会&#xff08;MWC 2024&#xff09;上成立。创始成员包括亚马逊云科技、Arm、DeepSig、爱立信、微软、诺基亚、美…...

编程日记 2024/3/5 12:09:07

Reactor详解

目录 1、快速上手 介绍 2、响应式编程 2.1. 阻塞是对资源的浪费 2.2. 异步可以解决问题吗&#xff1f; 2.3.1. 可编排性与可读性 2.3.2. 就像装配流水线 2.3.3. 操作符&#xff08;Operators&#xff09; 2.3.4. subscribe() 之前什么都不会发生 2.3.5. 背压 2.3.6. …...

编程日记 2024/3/5 12:08:06

实践航拍小目标检测，基于YOLOv5全系列【n/s/m/l/x】参数模型开发构建无人机航拍场景下的小目标检测识别分析系统

关于无人机相关的场景在我们之前的博文也有一些比较早期的实践&#xff0c;感兴趣的话可以自行移步阅读即可&#xff1a; 《deepLabV3Plus实现无人机航拍目标分割识别系统》 《基于目标检测的无人机航拍场景下小目标检测实践》 《助力环保河道水质监测&#xff0c;基于yolov…...

编程日记 2024/3/5 12:06:04

分布式数据库中全局自增序列的实现

自增序列广泛使用于数据库的开发和设计中&#xff0c;用于生产唯一主键、日志流水号等唯一ID的场景。传统数据库中使用Sequence和自增列的方式实现自增序列的功能&#xff0c;在分布式数据库中兼容Oracle和MySQL等传统数据库语法&#xff0c;也是基于Sequence和自增列的方式实现…...

编程日记 2024/3/5 12:05:03

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

编程新知 2025/11/7 20:25:02

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2025/11/7 20:04:06

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2025/11/12 19:49:10

P3 QT项目----记事本（3.8）

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2025/11/10 0:12:36

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

编程新知 2025/10/11 0:24:31

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

编程新知 2025/10/18 0:50:34

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

编程新知 2025/10/24 7:04:27

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/8/25 19:12:45

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2025/11/12 6:44:56

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

编程新知 2025/10/3 10:56:48