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

HTML5系列（10）-- 地理位置服务指南

news 来源：原创 2025/5/15 8:19:42

前端技术探索系列：HTML5 地理位置服务指南 🌍

致读者：探索位置服务的魅力 👋

前端开发者们，

今天我们将深入探讨 HTML5 的地理位置服务（Geolocation API），这项强大的功能让我们能够创建位置感知的 Web 应用。让我们一起学习如何安全、高效地使用这项技术。

Geolocation API 基础 🚀

获取当前位置

class LocationService {constructor() {this.options = {enableHighAccuracy: true,  // 高精度模式timeout: 5000,             // 超时时间（毫秒）maximumAge: 0              // 缓存时间};}// 获取当前位置getCurrentPosition() {return new Promise((resolve, reject) => {// 检查浏览器支持if (!navigator.geolocation) {reject(new Error('您的浏览器不支持地理位置服务'));return;}navigator.geolocation.getCurrentPosition(position => {const locationData = {latitude: position.coords.latitude,longitude: position.coords.longitude,accuracy: position.coords.accuracy,timestamp: position.timestamp};resolve(locationData);},error => {this.handleError(error);reject(error);},this.options);});}// 错误处理handleError(error) {switch(error.code) {case error.PERMISSION_DENIED:console.error('用户拒绝了位置请求');break;case error.POSITION_UNAVAILABLE:console.error('位置信息不可用');break;case error.TIMEOUT:console.error('请求超时');break;case error.UNKNOWN_ERROR:console.error('未知错误');break;}}
}

使用示例

const locationService = new LocationService();async function showCurrentLocation() {try {const position = await locationService.getCurrentPosition();console.log('当前位置:', position);// 更新UIdocument.getElementById('location').innerHTML = `<p>纬度: ${position.latitude}</p><p>经度: ${position.longitude}</p><p>精度: ${position.accuracy}米</p>`;} catch (error) {console.error('获取位置失败:', error);}
}

位置监控实现 🔍

持续追踪位置

class LocationTracker extends LocationService {constructor() {super();this.watchId = null;this.listeners = new Set();}// 开始追踪startTracking() {if (this.watchId) return;this.watchId = navigator.geolocation.watchPosition(position => {const locationData = {latitude: position.coords.latitude,longitude: position.coords.longitude,accuracy: position.coords.accuracy,speed: position.coords.speed,heading: position.coords.heading,timestamp: position.timestamp};this.notifyListeners(locationData);},error => {this.handleError(error);this.stopTracking();},{...this.options,enableHighAccuracy: true});}// 停止追踪stopTracking() {if (this.watchId) {navigator.geolocation.clearWatch(this.watchId);this.watchId = null;}}// 添加位置更新监听器addListener(callback) {this.listeners.add(callback);}// 移除监听器removeListener(callback) {this.listeners.delete(callback);}// 通知所有监听器notifyListeners(location) {this.listeners.forEach(callback => {try {callback(location);} catch (error) {console.error('监听器执行错误:', error);}});}
}

位置变化监控示例

const tracker = new LocationTracker();// 添加位置更新处理
tracker.addListener(location => {updateMap(location);updateDistanceToTarget(location);saveLocationHistory(location);
});// 开始追踪
document.getElementById('startTracking').addEventListener('click', () => {tracker.startTracking();
});// 停止追踪
document.getElementById('stopTracking').addEventListener('click', () => {tracker.stopTracking();
});

隐私与安全实践 🔒

用户授权管理

class LocationPermissionManager {constructor() {this.permissionStatus = null;}// 检查权限状态async checkPermission() {try {const result = await navigator.permissions.query({ name: 'geolocation' });this.permissionStatus = result.state;// 监听权限变化result.addEventListener('change', () => {this.permissionStatus = result.state;this.handlePermissionChange(result.state);});return this.permissionStatus;} catch (error) {console.error('权限检查失败:', error);return 'error';}}// 处理权限变化handlePermissionChange(state) {switch (state) {case 'granted':console.log('用户已授予位置权限');break;case 'denied':console.log('用户已拒绝位置权限');break;case 'prompt':console.log('用户将被提示授予位置权限');break;}// 触发自定义事件window.dispatchEvent(new CustomEvent('locationPermissionChange', {detail: { state }}));}// 请求权限async requestPermission() {try {const position = await new Promise((resolve, reject) => {navigator.geolocation.getCurrentPosition(resolve, reject);});return 'granted';} catch (error) {console.error('权限请求失败:', error);return 'denied';}}
}

实践项目：附近服务定位 📍

完整实现

class NearbyServicesLocator {constructor() {this.tracker = new LocationTracker();this.permissionManager = new LocationPermissionManager();this.services = new Map(); // 存储服务点信息}async initialize() {const permission = await this.permissionManager.checkPermission();if (permission !== 'granted') {throw new Error('需要位置权限才能使用此功能');}// 初始化地图this.map = new Map({container: 'map',style: 'mapbox://styles/mapbox/streets-v11',zoom: 15});// 监听位置更新this.tracker.addListener(this.updateNearbyServices.bind(this));}// 更新附近服务async updateNearbyServices(location) {try {const services = await this.fetchNearbyServices(location);this.updateMap(services);this.updateList(services);} catch (error) {console.error('更新服务失败:', error);}}// 获取附近服务async fetchNearbyServices(location) {const response = await fetch(`/api/services?lat=${location.latitude}&lng=${location.longitude}`);if (!response.ok) throw new Error('获取服务失败');return await response.json();}// 更新地图标记updateMap(services) {// 清除旧标记this.services.forEach(marker => marker.remove());this.services.clear();// 添加新标记services.forEach(service => {const marker = new Marker().setLngLat([service.longitude, service.latitude]).setPopup(new Popup().setHTML(this.createPopupContent(service))).addTo(this.map);this.services.set(service.id, marker);});}// 创建弹窗内容createPopupContent(service) {return `<div class="service-popup"><h3>${service.name}</h3><p>${service.address}</p><p>距离: ${service.distance}米</p><button οnclick="showDirections('${service.id}')">导航到这里</button></div>`;}// 更新列表视图updateList(services) {const listContainer = document.getElementById('services-list');listContainer.innerHTML = services.map(service => `<div class="service-item" data-id="${service.id}"><h3>${service.name}</h3><p>${service.address}</p><p>距离: ${service.distance}米</p><button οnclick="showServiceDetails('${service.id}')">查看详情</button></div>`).join('');}// 开始定位服务start() {this.tracker.startTracking();}// 停止定位服务stop() {this.tracker.stopTracking();}
}

使用示例

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>附近服务定位</title><link href='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' rel='stylesheet' />
</head>
<body><div id="map"></div><div id="services-list"></div><script src='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js'></script><script>const locator = new NearbyServicesLocator();async function init() {try {await locator.initialize();locator.start();} catch (error) {console.error('初始化失败:', error);}}init();</script>
</body>
</html>

性能优化建议 ⚡

  1. 位置更新频率控制

    • 根据实际需求设置合适的更新间隔
    • 考虑电池消耗
    • 实现节流机制

  2. 数据处理优化

    • 缓存近期位置数据
    • 批量处理位置更新
    • 使用 Web Workers 处理计算密集型任务

  3. 错误恢复机制

    • 实现优雅降级
    • 自动重试机制
    • 用户友好的错误提示

调试技巧 🛠️

// 模拟位置数据
const mockGeolocation = {getCurrentPosition: (success) => {success({coords: {latitude: 39.9042,longitude: 116.4074,accuracy: 10,speed: 0},timestamp: Date.now()});}
};// 在开发环境中使用模拟数据
if (process.env.NODE_ENV === 'development') {navigator.geolocation = mockGeolocation;
}

写在最后 🌟

地理位置服务为 Web 应用带来了全新的可能性。通过合理使用这项技术，我们可以为用户提供更加个性化和便捷的服务体验。

进一步学习资源 📚

  • MDN Geolocation API 文档
  • W3C Geolocation 规范
  • 位置服务最佳实践指南
  • 地图服务 API 文档

如果你觉得这篇文章有帮助，欢迎点赞收藏，也期待在评论区看到你的想法和建议！👇

终身学习，共同成长。

咱们下一期见

💻

相关文章：

HTML5系列（10）-- 地理位置服务指南

前端技术探索系列&#xff1a;HTML5 地理位置服务指南 &#x1f30d; 致读者&#xff1a;探索位置服务的魅力 &#x1f44b; 前端开发者们&#xff0c; 今天我们将深入探讨 HTML5 的地理位置服务&#xff08;Geolocation API&#xff09;&#xff0c;这项强大的功能让我们能…...

编程日记 2025/5/15 8:19:42

计算机毕业设计Python+大模型农产品推荐系统 农产品爬虫 农产品商城 农产品大数据 农产品数据分析可视化 PySpark Hadoop

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

编程日记 2025/5/14 17:41:01

qt QPrinter详解

1、概述 QPrinter类是Qt框架中用于打印输出的绘图设备。它表示打印出来的一系列页面&#xff0c;并提供了一组附加功能来管理特定于设备的特性&#xff0c;比如方向和分辨率。QPrinter可以生成PDF文档&#xff0c;也可以将内容发送到打印机进行实际打印。它继承自QPagedPaintD…...

编程日记 2025/5/15 7:31:21

CentOS 9 配置静态IP

文章目录 1_问题原因2_nmcli 配置静态IP3_使用配置文件固定IP4_重启后存在的问题5_nmcli 补充 1_问题原因 CentOS 7 于 2014年6月发布&#xff0c;基于 RHEL 7&#xff0c;并在 2024年6月30日 结束维护。 CentOS 9 作为目前的最新版本&#xff0c;今天闲来闲来无事下载下来后…...

编程日记 2025/5/15 7:53:10

MySQL2.0

7.B树和B树的区别 结构特点 B树&#xff1a;是一种平衡的多路查找树&#xff0c;它的每个节点包含多个关键字和多个子节点指针。B树的叶子节点和非叶子节点都可以存储数据记录。B树&#xff1a;也是一种平衡多路查找树&#xff0c;B树的非叶子节点只用于索引&#xff0c;即只…...

编程日记 2025/5/15 7:49:56

Nginx 限制 IP 网速

使用Lua和Nginx限制IP网速的基本原理 要限制某个IP的网速&#xff0c;在Nginx中结合Lua可以通过令牌桶算法&#xff08;Token Bucket&#xff09;来实现。令牌桶算法是一种流量整形算法&#xff0c;它以一定的速率生成令牌放入桶中&#xff0c;当请求到来时&#xff0c;需要从桶…...

编程日记 2025/5/15 7:20:58

前端小练习——大雪纷飞（JS没有上限！！！）

大家好&#xff0c;我是小黄。 具体效果&#xff1a;&#xff08;大雪缓缓下落&#xff09; 完整代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content&qu…...

编程日记 2025/5/11 19:56:55

CE4.【C++ Cont】练习题组4

目录 1.求出 e 的值 题目描述 输入格式 输出格式 输入输出样例 说明/提示 代码 提交结果 2.画矩形 题目描述 输入格式 输出格式 输入输出样例 说明/提示 代码 简化代码 提交结果 3.查找特定的值 题目描述 输入格式 输出格式 输入输出样例 代码 提交结果…...

编程日记 2025/5/9 14:57:47

uniapp h5 vue3 m3u8 和 mp4 外链视频播放

m3u8视频播放 使用mui-player 和hls.js。 安装npm install mui-player hls.js我的版本是"hls.js": "^1.5.17"和"mui-player": "^1.8.1"使用 页面标签&#xff1a; 引用&#xff1a; 点击目录播放视频&#xff1a; m3u8视频播放&a…...

编程日记 2025/5/15 8:11:10

【动手学运动规划】 4.5 A*算法

我宁愿永远做我自己&#xff0c;也不愿成为别人&#xff0c;即使那个人比你更快乐。 —《成为简奥斯汀》 &#x1f3f0;代码及环境配置&#xff1a;请参考 环境配置和代码运行! 4.5.1 概述 Dijkstra算法是基于广度优先搜索策略来遍历空间内的所有节点&#xff0c;最终计算出…...

编程日记 2025/5/15 7:23:35

从零开始学习 sg200x 多核开发之小核 FreeRTOS 运行

sophpi 小核支持默认运行 FreeRTOS&#xff0c;并且已经启动&#xff0c;小核的运行固件被打包在 fip.bin文件中&#xff0c;由 fsbl 负责加载。 启动后&#xff0c;小核会运行 FreeRTOS&#xff0c;并输出日志到串口。串口日志输出在 UART0 上&#xff0c;波特率 115200&…...

编程日记 2025/5/15 7:13:41

生信软件开发1 - 设计一个简单的Windwos风格的GUI报告软件

1. 安装基础库 使用Windows 11标题样式和主题自定义UI窗口库pywinstyles&#xff08;github: https://github.com/Akascape/py-window-styles&#xff09;&#xff0c;结合python自带tkinter库设计一个报告GUI软件。 pip install pywinstyles2. 设计一个简单的Windwos风格的G…...

编程日记 2025/5/12 17:36:46

openEuler 22.03 使用cephadm安装部署ceph集群

目录 目的步骤规格步骤ceph部署前准备工作安装部署ceph集群ceph集群添加node与osdceph集群一些操作组件服务操作集群进程操作 目的 使用ceph官网的cephadm无法正常安装&#xff0c;会报错ERROR: Distro openeuler version 22.03 not supported 在openEuler上实现以cephadm安装部…...

编程日记 2025/5/15 8:03:26

爬虫项目练手

python抓取优美图库小姐姐图片 整体功能概述 这段 Python 代码定义了一个名为 ImageDownloader 的类&#xff0c;其主要目的是从指定网站&#xff08;https://www.umei.cc&#xff09;上按照不同的图片分类&#xff0c;爬取图片并保存到本地相应的文件夹中。不过需要注意&…...

编程日记 2025/5/12 10:51:25

关于使用注册表修改键盘的键位映射

修改注册表实现键盘的键位映射 前言一、scancode是什么&#xff1f;二、步骤1.打开注册表2.scancode表 总结 前言 弄了个蓝牙的欧洲键盘&#xff0c;但左上角居然是WWW home键&#xff0c;还找不到Esc键&#xff0c;崩溃了&#xff0c;VI都用不了。 赶紧考虑键位映射&#xff…...

编程日记 2025/5/14 22:55:49

[HCTF 2018]WarmUp-滑稽

启动场景打开链接&#xff0c;出现一下图片 F12查看代码出现一个注释&#xff0c;应该在这个文件中&#xff0c; 进入到该页面&#xff0c;出现一段代码 <?phphighlight_file(__FILE__);class emmm{public static function checkFile(&$page){$whitelist ["sourc…...

编程日记 2025/5/9 17:55:49

WPF+LibVLC开发播放器-进度条显示和拖动控制

进度条显示和拖动控制 视频教程界面上代码实现进度条显示进度进度条拖动视频进度 效果 视频教程 WPFLibVLC开发播放器-进度条控制 界面上 界面上线增加一个Slider控件&#xff0c;当做播放进度条 <SliderName"PlaySlider"Grid.Row"1"Width"800&qu…...

编程日记 2025/5/13 10:35:17

linux下Qt程序部署教程

文章目录 [toc]1、概述2、静态编译安装Qt1.1 安装依赖1.2 静态编译1.3 报错1.4 添加环境变量1.5 下载安装QtCreator 3、配置linuxdeployqt环境1.1 在线安装依赖1.2 使用linuxdeployqt提供的程序1.3 编译安装linuxdeployqt 4、使用linuxdeployqt打包依赖1.1 linuxdeployqt使用选…...

编程日记 2025/5/7 8:35:45

Python3：pytest+request+yaml+allure接口自动化测试

pytest+request+yaml+allure接口自动化测试 一、Pytest的parametrize结合yaml实现数据驱动 1、读取yaml文件数据 ids:- [请求方式,请求地址,请求头,请求参数,预期结果]#测试用例测试数据 testcases:test_login:- ["POST","http://10.1.1.xx:8081/xx/xx"…...

编程日记 2025/5/12 22:53:37

【Docker】针对开发环境、测试环境、生产环境如何编排？

目录 一、引言 二、Docker Compose 文件基础 三、针对不同环境的 Docker 编排 开发环境 测试环境 生产环境 四、配置文件全局变量的编写 五、总结 一、引言 在软件开发和部署的过程中&#xff0c;不同的环境有着不同的需求和配置。Docker 作为一种强大的容器化技术&…...

编程日记 2025/5/15 7:24:41

数据采集卡的各参数介绍

数据采集卡&#xff08;DAQ 卡&#xff09;是用于测量物理信号&#xff08;如电压、电流、温度等&#xff09;并将其转化为数字信号的设备。 1. 通道数&#xff08;Channels&#xff09; 含义&#xff1a;数据采集卡可以同时采集多少路信号。比喻&#xff1a;通道数就像一个人…...

编程日记 2025/5/12 22:54:37

MySQL备份恢复

华子目录 MySQL日志管理为什么需要日志日志作用日志文件查看方法错误日志通用查询日志慢查询日志示例 撤销日志重做日志二进制日志---重要中继日志 MySQL备份备份类型逻辑备份优缺点备份内容备份工具导入sql文件 MySQL日志管理 为什么需要日志 用于排错用来做数据分析了解程序…...

编程日记 2025/5/15 7:45:37

flask内存马的真谛！！！

flask内存马 1.概念 常用的Python框架有Django、Flask, 这两者都可能存在SSTI漏洞. Python 内存马利用Flask框架中SSTI注入来实现, Flask框架中在web应用模板渲染的过程中用到render_template_string进行渲染, 但未对用户传输的代码进行过滤导致用户可以通过注入恶意代码来实…...

编程日记 2025/5/12 5:54:49

【机器学习02--模型评估】

机器学习 --- 模型评估 你需要得到更好的模型&#xff0c;怎么判断模型更好呢&#xff1f;你需要先得到训练集和测试集&#xff0c;怎么划分它们呢&#xff1f;训练完模型之后&#xff0c;在验证集上测试的时候&#xff0c;用什么指标衡量好坏呢&#xff1f;云里雾里&#xff0…...

编程日记 2025/5/12 12:07:29

【人工智能】深入解析Python中的聚类算法：从K-Means到DBSCAN

解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界 聚类是一种无监督学习的核心技术，用于将数据点分组到不同的簇中，使得同一簇内的点相似度最大化，不同簇间的点差异性最大化。K-Means和DBSCAN是两种最常见的聚类算法，分别适用于密度驱动和形状复杂的数据分组需…...

编程日记 2025/4/16 21:25:51

【STM32 Modbus编程】-作为主设备读取线圈和输入

作为主设备读取线圈和输入 文章目录 作为主设备读取线圈和输入1、硬件准备与连接1.1 RS452模块介绍1.2 硬件配置与接线1.3 软件准备2、读取线圈2.1 主设备发送请求2.2 从设备响应请求2.3 主机接收数据3、读取输入4、结果本文将在前面文章的基础上，实现主设备通过ModBus协议对从…...

编程日记 2025/5/12 23:28:00

数据结构（栈Stack）

1.前言&#xff1a; 在计算机科学中&#xff0c;栈&#xff08;Stack&#xff09;是一种基础而存在的数据结构&#xff0c;它的核心特性是后进先出&#xff08;LIFO&#xff0c;Last In, First Out&#xff09;。想象一下&#xff0c;在现实生活中我们如何处理一堆托盘——我们…...

编程日记 2025/5/11 20:48:02

Maven 中scope 的provided、compile、runtime、test、system 含义

在 Maven 中&#xff0c;<scope> 定义了依赖的可见性和生命周期。不同的 scope 值指示 Maven 在编译、测试和运行时如何处理这些依赖。以下是 Maven 中的几种常用依赖范围及其详细说明&#xff1a; 1. <scope>provided</scope> 含义&#xff1a;provided 范…...

编程日记 2025/5/15 8:16:40

Nginx 负载均衡和反向代理

Nginx 是一个高性能的 HTTP 服务器和反向代理服务器&#xff0c;广泛应用于负载均衡中。它的负载均衡功能支持多种策略&#xff0c;可以有效分配流量到后端服务器&#xff0c;提升系统的可靠性和可用性。 负载均衡 首先&#xff0c;Nginx 负载均衡配置是通过在 Nginx 配置文件…...

编程日记 2025/5/7 3:45:54

【网络安全】数据集合集！

本文将为您介绍经典、热门的数据集&#xff0c;希望对您在选择适合的数据集时有所帮助。 1 SecGPT 更新时间&#xff1a;2024-05-08 访问地址: GitHub 描述&#xff1a; SecGPT的愿景是将人工智能技术引入网络安全领域&#xff0c;以提高网络防御的效率和效果。其使命是推动…...

编程日记 2025/5/13 14:42:40

大数据（一）MaxCompute

一、引言 作者后面会使用MaxCompute&#xff0c;所以在进行学习研究&#xff0c;总会有一些疑问产生&#xff0c;这里讲讲作者的疑问和思路 二、介绍 MaxCompute&#xff08;原名 ODPS - Open Data Processing Service&#xff09;是阿里云提供的大数据处理平台&#xff0c;专…...

编程日记 2025/5/13 10:06:14

数据科学与大数据之间的区别

什么是数据科学&#xff1f; 数据科学是一个跨学科领域&#xff0c;它将统计学和计算方法相结合&#xff0c;旨在从数据中提取见解和知识。它涉及收集、处理、分析以及解读数据&#xff0c;以揭示可用于为决策过程提供依据并推动创新的模式、趋势和关系。 数据科学涵盖了广泛…...

编程日记 2025/5/11 2:13:12

IP 地理位置定位技术原理概述

本文深入探讨 IP 地理位置定位技术的原理。介绍了 IP 地址的基本概念及其在网络中的作用&#xff0c;随后阐述了基于数据库查询、基于网络拓扑分析以及基于机器学习算法的三种主要 IP 地理位置定位技术原理中的基于IP数据库查询。 IP 地址基础 IP 地址是互联网协议&#xff0…...

编程日记 2025/4/9 16:19:09

多进程multiprocessing通信multiprocessing.Queue

multiprocessing.Queue 通常只能在主模块&#xff08;即 if __name__ "__main__": 块&#xff09;中创建和使用。这是因为 multiprocessing 模块在 Windows 系统上需要通过 if __name__ "__main__": 块来避免递归导入问题。 from multiprocessing import…...

编程日记 2025/5/7 9:52:23

工业—使用Flink处理Kafka中的数据_ChangeRecord2

使用 Flink 消费 Kafka 中 ChangeRecord 主题的数据，每隔 1 分钟输出最近 3 分钟的预警次数最多的 设备，将结果存入Redis 中， key 值为...

编程日记 2025/4/28 7:26:51

微信小程序4-内容溢出滚动条

感谢阅读&#xff0c;初学小白&#xff0c;有错指正。 一、功能描述 在前一篇文章的隐藏框页面的功能里&#xff08;《微信小程序3-显标记信息和弹框》&#xff09;&#xff0c;我想添加一个内容溢出的时候&#xff0c;可通过滑动滚动条&#xff0c;实现查看溢出部分的内容&a…...

编程日记 2025/5/14 7:36:38

python源码实例游戏开发小程序办公自动化网络爬虫项目开发源码(250+个项目、26.6GB)

文章目录 源代码下载地址项目介绍预览 项目备注源代码下载地址 源代码下载地址 点击这里下载源码 项目介绍 python源码实例游戏开发小程序办公自动化网络爬虫项目开发源码(250个项目、26.6GB) 预览 项目备注 1、该资源内项目代码都经过测试运行成功&#xff0c;功能ok的情…...

编程日记 2025/5/10 15:36:59

ProjectSend 身份认证绕过漏洞复现（CVE-2024-11680）

0x01 产品描述： ProjectSend 是一个开源文件共享网络应用程序，旨在促进服务器管理员和客户端之间的安全、私密文件传输。它是一款相当流行的应用程序，被更喜欢自托管解决方案而不是 Google Drive 和 Dropbox 等第三方服务的组织使用。0x02 漏洞描述： ProjectSend r1720 之前…...

编程日记 2025/5/9 21:26:19

算法训练-搜索

搜索 leetcode102. 二叉树的层序遍历 法一&#xff1a;广度优先遍历 leetcode103. 二叉树的锯齿形层序遍历 法一&#xff1a;双端队列 法二&#xff1a;倒序 法三&#xff1a;奇偶逻辑分离 leetcode236. 二叉树的最近公共祖先 法一&#xff1a;递归 leetcode230. 二叉…...

编程日记 2025/5/9 18:12:46

【C++】map和set

个人主页 &#xff1a; zxctscl 如有转载请先通知 文章目录 1. 关联式容器2. 键值对3. set3.1 set的模板参数列表3.2 set的构造3.3 set的迭代器3.4 set的容量3.5 set修改操作3.6 multiset 4. map4.1 map的模板参数说明4.2 map的构造4.3 map的迭代器4.4 map的容量与元素访问4.5 …...

编程日记 2025/5/5 5:47:54

MongoDB安装|注意事项

《疯狂Spring Boot讲义》是2021年电子工业出版社出版的图书&#xff0c;作者是李刚 《疯狂Spring Boot终极讲义》不是一本介绍类似于PathVariable、MatrixVariable、RequestBody、ResponseBody这些基础注解的图书&#xff0c;它是真正讲解Spring Boot的图书。Spring Boot的核心…...

编程日记 2025/5/15 0:43:35

使用playwright自动化测试时，npx playwright test --ui打开图形化界面时报错

使用playwright自动化测试时&#xff0c;npx playwright test --ui打开图形化界面时报错 1、错误描述&#xff1a;2、解决办法3、注意符号的转义 1、错误描述&#xff1a; 在运行playwright的自动化测试项目时&#xff0c;使用npm run test无头模式运行正常&#xff0c;但使用…...

编程日记 2025/5/14 12:57:51

Linux ufw 命令详解

简介 UFW(Uncomplicated Firewall) 简单防火墙是一款基于 iptables 构建的、用于管理防火墙规则的用户友好型工具。它简化了在 Linux 系统上配置防火墙的过程。 安装 在 Ubuntu/Debian 上安装 sudo apt update sudo apt install ufw在 CentOS/Red Hat 上安装 sudo yum ins…...

编程日记 2025/5/14 5:58:21

3248. 矩阵中的蛇

3248. 矩阵中的蛇 题目链接&#xff1a;3248. 矩阵中的蛇 代码如下&#xff1a; class Solution { public:int finalPositionOfSnake(int n, vector<string>& commands){int i 0, j 0;for (string& command : commands){if (command "LEFT") { j…...

编程日记 2025/5/13 7:56:53

图片的懒加载

目录 懒加载的来源 事件监听 IntersectionObserver 懒加载的来源 图片的来加载其实就是延迟加载&#xff0c;我们知道浏览器的可视范围是有限的&#xff0c;现在网页的内容越来越丰富&#xff0c;一般网页的内容都是需要滚动才能完成浏览 如果网页有很多图片&#xff0c;然…...

编程日记 2025/5/10 0:08:39

网络脚本生成器

网络官网地址 网络配置生成工具 终端-接入-汇聚-核心-防火墙-互联网路由器 一 开局配置 华为设备配置命令 system-viewsysname SW-JR-Switchvlan 10 vlan 20 vlan 30 vlan 40 quitinterface Vlan-interface 40 ip address 192.168.40.1 255.255.255.0 quitip route-static 1…...

编程日记 2025/5/6 15:32:50

Kibana server is not ready yet

遇到“Kibana server is not ready yet”错误通常表示Kibana无法连接到Elasticsearch。以下是一些常见原因及其解决方案&#xff1a; 1.常见原因 1.1.Elasticsearch未运行&#xff1a; 确保Elasticsearch服务已启动并正常运行。您可以通过访问 http://localhost:9200 来检查…...

编程日记 2025/5/14 7:57:05

Git 高频命令及其功能、作用与使用场景

在软件开发的世界里&#xff0c;Git 已经成为了版本控制的代名词。无论你是开发小型项目还是参与大型团队协作&#xff0c;Git 都是你不可或缺的得力助手。今天我们来聊聊 Git 中的一些高频命令&#xff0c;了解它们的功能、作用以及常见的使用场景&#xff0c;帮助你在日常开发…...

编程日记 2025/5/14 2:30:52

将word里自带公式编辑器编辑的公式转换成用mathtype编辑的格式

文章目录 将word里自带公式编辑器编辑的公式转换成用mathtype编辑的格式MathType安装问题MathType30天试用延期MathPage.wll文件找不到问题 将word里自带公式编辑器编辑的公式转换成用mathtype编辑的格式 word自带公式编辑器编辑的公式格式&#xff1a; MathType编辑的格式&a…...

编程日记 2025/5/14 18:11:53

【HarmonyOS】Component组件引入报错 does not meet UI component syntax.

【HarmonyOS】Component组件引入报错 一、问题背景 有时会碰到引入组件时&#xff0c;无法import引入组件&#xff0c;导致引入的组件报错。 或者提示does not meet UI component syntax. &#xff08;不符合UI组件语法。&#xff09; 如下图所示&#xff0c;在引入组件时&a…...

编程日记 2025/5/7 10:50:23