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

前端爬虫+可视化Demo

news 2026/2/9 7:04:44

爬虫简介

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

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

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

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2026/2/8 20:42:41

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/10/8 10:56:25

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

编程新知 2026/1/16 16:34:26

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/12/15 1:34:37

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2026/1/25 13:18:12

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

编程新知 2026/1/31 10:55:22

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2026/1/29 17:12:17

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2026/2/1 6:11:51

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/10/26 5:04:25

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

编程新知 2026/1/24 6:30:25