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

前端爬虫+可视化Demo

news 2026/4/4 21:34:49

爬虫简介

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

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

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

18 指挥AI批量生成业务代码，大幅提升开发效率

指挥AI批量生成业务代码，大幅提升开发效率 摘要 本文为《30天掌控AI编程：从指令到落地，手把手教你指挥AI写代码》系列第十八篇，属于第三阶段多场景实战核心内容。本篇聚焦业务代码批量生成这一高效开发痛点，针对企业开发中大量重复、模块化的业务场景，讲解如何通过结构…...

编程新知 2026/4/4 21:23:46

Claude Code 源码泄露，拿来改造 OpenClaw

一场意外的源码泄露&#xff0c;意外地给开源AI助手社区带来了一份珍贵的“研究素材”。Claude Code近51万行源码的暴露&#xff0c;正好可以为OpenClaw的下一阶段发展&#xff0c;提供一个明确的架构升级蓝图。核心功能&#xff1a;自动化定时任务 (Cron)两者都将“时间管理”…...

编程新知 2026/4/4 20:31:12

数据分析师课程

数据分析是什么定义&#xff1a;运用统计分析方法对收集的数据进行汇总、理解和消化&#xff0c;最大化开发数据功能数据形式&#xff1a;观测值通过实验/测量获得&#xff0c;常以图表或表格呈现分类体系&#xff1a;描述性分析&#xff08;初级&#xff09;&#xff1a;占日常…...

编程新知 2026/4/4 20:21:11

2025届毕业生推荐的AI辅助写作平台推荐

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 能协助研究者完成文献检索、框架构建以及语言润色的人工智能论文工具&#xff0c;是基于自然…...

编程新知 2026/4/4 19:06:30

一键永久珍藏QQ空间回忆：GetQzonehistory完整备份指南

一键永久珍藏QQ空间回忆&#xff1a;GetQzonehistory完整备份指南 【免费下载链接】GetQzonehistory 获取QQ空间发布的历史说说 项目地址: https://gitcode.com/GitHub_Trending/ge/GetQzonehistory 你是否担心QQ空间里的珍贵回忆会随着时间流逝而消失&#xff1f;那些记…...

编程新知 2026/4/4 18:46:22

Java 并发编程封神！从入门到精通，面试再也不怕被问爆

目录 synchronized 支持重入吗&#xff1f;如何实现的? syncronized锁升级的过程讲一下 JVM对Synchornized的优化&#xff1f; 介绍一下AQS CAS 和 AQS 有什么关系&#xff1f; 如何用 AQS 实现一个可重入的公平锁&#xff1f; Threadlocal作用&#xff0c;原理&#x…...

编程新知 2026/4/4 18:30:11

OpenClaw浏览器自动化：Qwen3-14b_int4_awq实现智能爬虫

OpenClaw浏览器自动化&#xff1a;Qwen3-14b_int4_awq实现智能爬虫 1. 为什么需要智能爬虫&#xff1f; 上周我需要从几十个电商页面抓取产品参数&#xff0c;传统爬虫遇到三个致命问题&#xff1a;动态加载内容无法解析、反爬机制频繁拦截、非结构化数据难以提取。当我尝试用…...

编程新知 2026/4/4 18:01:51

AutoUpdater.NET实战：Windows服务程序更新失败的3种解决方案

AutoUpdater.NET实战&#xff1a;Windows服务程序更新失败的3种解决方案 在Windows服务程序的开发和维护过程中&#xff0c;自动更新是一个常见但颇具挑战性的需求。许多开发者习惯使用AutoUpdater.NET这类便捷的库来处理桌面应用程序的更新&#xff0c;但当同样的代码迁移到Wi…...

编程新知 2026/4/4 17:01:01

快速验证抓取逻辑：在快马平台用AI十分钟搭建龙虾openclaw演示原型

最近在研究机器人抓取控制相关的技术&#xff0c;偶然发现了龙虾openclaw这个开源库&#xff0c;想快速验证下它的抓取逻辑。传统开发流程需要先搭建环境、写大量样板代码&#xff0c;但借助InsCode(快马)平台&#xff0c;整个过程变得异常简单。下面分享我的十分钟原型搭建经验…...

编程新知 2026/4/4 16:20:24

k6：现代性能测试工具的新标杆

本人已经有几年不接触性能测试了&#xff0c;近些年一直是在从事功能和操作系统的自动化测试工作&#xff0c;现在回头看以前所专注的性能测试工具&#xff0c;感觉是有点跟不上时代了&#xff0c;在网上无意中发现一款比较火的工具k6&#xff0c;我也不知道这工具是哪年冒出来…...

编程新知 2026/4/4 14:18:38