跳到主要内容一个完整的车辆监控管理系统,包含后端API、Web管理后台和移动端应用 | 极客日志Python
一个完整的车辆监控管理系统,包含后端API、Web管理后台和移动端应用
引言 本项目是一个专业的车辆监控管理系统,主要用于银行贷款车辆的实时监控和管理。系统采用前后端分离架构,包含: 🚀 **后端服务**: Spring Boot + MySQL/H2 💻 **Web管理后台**: Vue.js + Element Plus 📱 **移动端应用**: uni-app(支持H5/小程序/APP) * * !图片 一、项目背景及简介 1.1 项目背景 随着汽车金融业…
并发大师4.6K 浏览 引言
本项目是一个专业的车辆监控管理系统,主要用于银行贷款车辆的实时监控和管理。系统采用前后端分离架构,包含:
- 🚀 后端服务: Spring Boot + MySQL/H2
- 💻 Web管理后台: Vue.js + Element Plus
- 📱 移动端应用: uni-app(支持H5/小程序/APP)

一、项目背景及简介
1.1 项目背景
随着汽车金融业务的快速发展,银行及金融机构在车辆抵押贷款业务中面临日益严峻的风险管理挑战。传统的车辆监管方式依赖人工巡检和定期核查,存在效率低下、监管盲区多、响应不及时等问题。特别是在车辆抵押贷款场景下,贷款机构需要对抵押车辆进行24小时不间断监控,确保资产安全,防范车辆被盗、私自转移等风险。
1.2 项目简介
本车辆监控管理平台是一套专为金融行业设计的智能化车辆监控解决方案。系统通过集成GPS定位设备、实时数据采集、智能报警机制和可视化管理系统,实现对抵押车辆的全程实时监控、位置追踪、异常预警和数据分析。平台采用现代化的前后端分离架构,支持Web端和移动端多平台访问,为银行、融资租赁公司、汽车金融服务商等机构提供全方位的车辆资产监管服务。
1.3 核心价值
- 风险防控:实时监控车辆位置,及时发现异常情况,降低资产损失风险
- 监管效率:自动化监控替代人工巡检,大幅提升监管效率和覆盖率
- 决策支持:数据统计分析为业务决策提供科学依据
- 成本节约:减少人工成本,提高资产监管的投入产出比

二、目标客户
2.1 主要客户群体
银行金融机构
- 个人汽车抵押贷款业务部门
- 企业车辆融资租赁业务部门
- 资产管理和风险控制部门
非银行金融机构
- 汽车金融服务公司
- 融资租赁公司
- 小额贷款公司
- 典当行
其他相关机构
- 物流运输企业(车辆管理场景)
- 工程机械租赁公司
- 车辆资产管理公司
2.2 客户需求特征
- 实时监控需求:需要7×24小时实时掌握车辆位置和状态
- 风险预警需求:要求及时发现车辆异常移动、设备离线等风险事件
- 合规管理需求:满足金融监管要求,建立完善的车辆监管记录和档案
- 多用户协作:支持多部门、多角色协同工作,分级权限管理
- 移动办公需求:需要随时随地通过手机、平板等移动设备查看监控信息

三、平台定位
3.1 产品定位
本平台定位为金融级车辆资产监管SaaS平台,专注于为金融机构提供专业、可靠的车辆监控管理服务。平台以"智能监控、风险可控、决策有据"为核心价值,通过技术创新帮助金融机构实现车辆资产的数字化、智能化监管。
3.2 市场定位
- 行业定位:垂直领域的专业车辆监管系统,深耕金融行业应用场景
- 技术定位:采用主流成熟技术栈,确保系统的稳定性、安全性和可扩展性
- 服务定位:提供完整的解决方案,包括系统部署、培训支持、持续维护等
3.3 功能定位
// 平台核心能力示例代码 public class PlatformCapability { // 实时监控能力 public Location getRealTimeLocation(Long vehicleId); // 风险预警能力 public void triggerAlarm(AlarmType type, Vehicle vehicle); // 数据分析能力 public Statistics getVehicleStatistics(DateRange range); // 权限管理能力 public boolean checkPermission(User user, Permission permission); }
平台功能覆盖车辆监控全生命周期:从车辆登记、设备绑定、实时监控、报警处理、轨迹分析到统计报表,形成完整的业务闭环。
四、平台技术与系统架构
4.1 技术架构概览
平台采用前后端分离的微服务架构,支持水平扩展和模块化部署。整体架构分为表现层、业务层和数据层,各层职责清晰,通过RESTful API进行交互。
┌─────────────────────────────────────────────────────────┐ │ 表现层 (Presentation Layer) │ ├─────────────────────────────────────────────────────────┤ │ Web管理后台 (Vue.js 3) │ 移动端应用 (uni-app) │ │ - Element Plus UI │ - 跨平台支持 │ │ - Vuex状态管理 │ - 响应式设计 │ └────────────────┬──────────────────┬─────────────────────┘ │ │ │ HTTP/REST API │ │ (JSON) │ ▼ ▼ ┌─────────────────────────────────────────────────────────┐ │ 业务层 (Business Layer) │ ├─────────────────────────────────────────────────────────┤ │ Spring Boot 2.7.14 后端服务 │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │Controller│ │ Service │ │Repository│ │ │ │ 层 │→ │ 业务层 │→ │ 数据访问 │ │ │ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ - JWT认证授权 - 异常处理 - 日志管理 │ └────────────────────────┬───────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────┐ │ 数据层 (Data Layer) │ ├─────────────────────────────────────────────────────────┤ │ H2内存数据库 (开发) │ MySQL 8.0 (生产) │ │ - 快速启动 │ - 高可用 │ │ - 零配置 │ - 集群支持 │ └─────────────────────────────────────────────────────────┘
4.2 后端技术栈
# 技术选型示例配置 spring: boot: version: 2.7.14
- Spring Boot 2.7.14:企业级Java应用框架,提供自动配置和快速开发能力
- Spring Security + JWT:安全认证框架,实现基于Token的无状态认证
- Spring Data JPA:数据持久化框架,简化数据库操作
- H2 / MySQL:开发环境使用H2内存数据库,生产环境支持MySQL集群
// 安全配置示例 @Configuration @EnableWebSecurity publicclass SecurityConfig { @Bean public SecurityFilterChain filterChain(HttpSecurity http) throws Exception { http.csrf().disable() .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS) .and() .authorizeRequests() .antMatchers("/api/auth/**").permitAll() .anyRequest().authenticated(); return http.build(); } }
4.3 前端技术栈
- Vue.js 3:渐进式JavaScript框架,采用Composition API提升代码组织
- Element Plus:企业级UI组件库,提供丰富的业务组件
- Vue Router 4:路由管理,支持动态路由和路由守卫
- Vuex 4:状态管理,集中管理应用状态
- Axios:HTTP客户端,统一处理请求拦截和响应处理
- uni-app:跨平台开发框架,一套代码支持H5、小程序、APP多端
- 高德地图API:提供地图展示、定位、轨迹回放等功能
- uni-ui:uni-app官方UI组件库
4.4 系统架构设计
// 后端分层示例 com.bank.vehiclemonitoring/ ├── controller/
系统采用模块化设计,每个业务模块独立开发,通过接口交互:
- 认证授权模块:独立的用户认证和权限管理
- 车辆管理模块:车辆信息的增删改查和状态管理
- 位置服务模块:实时位置查询和历史轨迹管理
- 报警管理模块:报警触发、处理和统计分析
- 围栏管理模块:电子围栏的创建、管理和越界检测
- 统计分析模块:多维度数据统计和可视化
五、平台核心业务功能
5.1 用户认证与权限管理
平台实现了完整的RBAC(基于角色的访问控制)权限体系,支持多角色、多权限的灵活配置。
- JWT Token无状态认证,支持分布式部署
- 4种预设角色:ADMIN(管理员)、MANAGER(经理)、MONITOR(监控员)、USER(普通用户)
- 细粒度权限控制,支持功能级和数据级权限
- 密码BCrypt加密存储,保障账户安全
// 用户认证示例 @PostMapping("/auth/login") public ApiResponse<JwtResponse> login(@RequestBody LoginRequest request) { Authentication authentication = authenticationManager.authenticate( new UsernamePasswordAuthenticationToken(request.getUsername(), request.getPassword()) ); String jwt = jwtUtils.generateJwtToken(authentication); return ApiResponse.success(new JwtResponse(jwt)); }
5.2 车辆全生命周期管理
- 车辆信息管理:支持车辆基本信息(车牌号、客户名称、车辆型号等)的增删改查
- 设备绑定管理:车辆与GPS设备的IMEI绑定,支持设备重新注册
- 多条件搜索:支持按客户名称、车牌号、注册状态等条件快速检索
- 状态监控:实时显示车辆在线状态、设备注册状态
@Entity @Table(name = "vehicles") publicclass Vehicle { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; @Column(unique = true, nullable = false) private String imei;
5.3 实时位置监控与轨迹管理
- 实时位置查询:获取单车或批量车辆的当前GPS位置
- 历史轨迹回放:支持按时间范围查询历史轨迹,在地图上可视化展示
- 行驶距离计算:自动计算指定时间段内的行驶里程
- 位置数据存储:完整保存位置历史记录,支持长期数据分析
// 位置数据更新示例 @Service publicclass LocationHistoryService { public void updateVehicleLocation(String imei, Double latitude, Double longitude) { Vehicle vehicle = vehicleRepository.findByImei(imei); LocationHistory location = new LocationHistory(); location.setVehicle(vehicle); location.setLatitude(latitude); location.setLongitude(longitude); location.setLocationTime(LocalDateTime.now()); locationRepository.save(location); // 检查围栏越界 checkGeoFenceViolation(vehicle, latitude, longitude); } }
5.4 智能报警系统
平台内置智能报警引擎,可自动检测异常情况并触发报警。
- 围栏越界报警:车辆驶出电子围栏范围时自动触发
- 超速报警:车辆速度超过设定阈值时触发
- 低电量报警:设备电量低于阈值时提醒
- 离线报警:设备长时间未上报数据时报警
// 报警触发和处理示例 @Service publicclass AlarmService { public void triggerAlarm(AlarmType type, Vehicle vehicle, String content) { Alarm alarm = new Alarm(); alarm.setType(type); alarm.setVehicle(vehicle); alarm.setContent(content); alarm.setStatus(AlarmStatus.UNHANDLED); alarm.setCreateTime(LocalDateTime.now()); alarmRepository.save(alarm); } public void handleAlarm(Long alarmId, String handler, String remark) { Alarm alarm = alarmRepository.findById(alarmId).orElseThrow(); alarm.setStatus(AlarmStatus.HANDLED); alarm.setHandler(handler); alarm.setHandleTime(LocalDateTime.now()); alarm.setRemark(remark); alarmRepository.save(alarm); } }
5.5 电子围栏管理
支持多种围栏类型的创建和管理,实现灵活的区域监控。
- 圆形围栏:以中心点和半径定义圆形监控区域,适用于固定场所
- 多边形围栏:通过多个坐标点定义不规则区域,适用于复杂地形
- 矩形围栏:通过对角坐标点定义矩形区域,快速创建规则区域
// 围栏越界检测示例 public boolean isPointInCircle(Double lat, Double lng, Double centerLat, Double centerLng, Double radius) { double distance = calculateDistance(lat, lng, centerLat, centerLng); return distance > radius; // 超出半径范围 } public boolean isPointInPolygon(Double lat, Double lng, List<Point> polygon) { // 射线法判断点是否在多边形内 int crossings = 0; for (int i = 0; i < polygon.size(); i++) { Point p1 = polygon.get(i); Point p2 = polygon.get((i + 1) % polygon.size()); // 射线与边的交点计算 if (rayIntersectsEdge(lat, lng, p1, p2)) { crossings++; } } return (crossings % 2) == 1; }
5.6 数据统计与分析
- 系统总览:车辆总数、在线车辆数、未处理报警数等关键指标
- 报警统计:按类型、时间范围统计报警数量,生成趋势图表
- 车辆统计:单车详情统计、车辆排行榜(按行驶里程、报警次数等)
- 趋势分析:每日/每周/每月的数据趋势,支持图表可视化
@GetMapping("/statistics/overview") public ApiResponse<OverviewStatistics> getOverview() { long totalVehicles = vehicleRepository.count(); long onlineVehicles = vehicleRepository.countByStatus(VehicleStatus.ONLINE); long unhandledAlarms = alarmRepository.countByStatus(AlarmStatus.UNHANDLED); OverviewStatistics stats = new OverviewStatistics(); stats.setTotalVehicles(totalVehicles); stats.setOnlineVehicles(onlineVehicles); stats.setUnhandledAlarms(unhandledAlarms); return ApiResponse.success(stats); }
六、平台独特优势
6.1 技术优势
采用现代化的前后端分离设计,后端提供标准RESTful API,前端独立部署,便于团队协作和系统扩展。前后端可以独立升级,互不影响。
系统采用模块化设计,各业务模块相对独立,支持按需扩展和部署。未来可轻松拆分为微服务架构,支持分布式部署。
- 使用JPA进行数据库操作,自动优化SQL查询
- 支持分页查询,避免大数据量查询导致性能问题
- 位置数据异步保存,提升系统响应速度
// 分页查询示例 public Page<Vehicle> searchVehicles(String keyword, int page, int size) { Pageable pageable = PageRequest.of(page, size); return vehicleRepository.findByKeyword(keyword, pageable); }
- JWT Token认证机制,无需服务器存储会话,支持集群部署
- 密码BCrypt加密,符合安全规范
- RBAC权限控制,细粒度权限管理
- CORS跨域保护,防止恶意请求
6.2 业务优势
从车辆注册、设备绑定、实时监控、报警处理到数据分析,形成完整的业务闭环,覆盖车辆监管全流程。
支持三种围栏类型(圆形、多边形、矩形),满足不同场景的区域监控需求。一个围栏可关联多台车辆,实现批量监控。
多种报警类型自动触发,无需人工巡检。报警信息包含详细的位置、时间、车辆信息,便于快速响应和处理。
提供丰富的统计报表和数据分析功能,帮助管理者了解车辆运行状况,发现潜在风险,辅助业务决策。
6.3 用户体验优势
- Web管理后台:功能完整,适合办公室场景
- 移动端应用:支持H5、小程序、APP,随时随地查看监控信息
- 地图实时显示车辆位置,一目了然
- 轨迹回放可视化,清晰展示行驶路线
- 统计图表直观展示数据趋势
移动端采用响应式设计,适配各种屏幕尺寸,提供良好的移动端使用体验。
6.4 可扩展性优势
开发环境使用H2内存数据库,零配置快速启动;生产环境支持MySQL,满足高可用和高性能需求。数据库切换只需修改配置文件。
系统预留设备API接口,可方便地集成第三方GPS设备厂商的API,扩展设备支持范围。
// 设备API服务接口 public interface DeviceProviderService { Location getDeviceLocation(String imei); DeviceStatus getDeviceStatus(String imei); boolean registerDevice(String imei, Vehicle vehicle); }
各功能模块相对独立,可根据业务需求选择性部署或扩展新功能模块。
七、平台安装使用
7.1 系统要求
- JDK 17或更高版本
- Maven 3.6+
- MySQL 8.0+(生产环境)或无需安装(开发环境使用H2)
- Node.js 14+ 和 npm 6+
- 现代浏览器(Chrome、Firefox、Edge等)
7.2 快速安装
# 克隆项目 git clone <repository-url> cd vehicle-monitoring-system
cd backend # 方式A:使用启动脚本 chmod +x start-backend.sh ./start-backend.sh # 方式B:Maven命令 mvn spring-boot:run # 方式C:打包后运行 mvn clean package -DskipTests java -jar target/vehicle-monitoring-1.0.0.jar
- 运行 → 运行到浏览器 → Chrome
- 或运行到手机模拟器/真机
7.3 生产环境部署
CREATE DATABASE vehicle_monitoring CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
修改后端配置 backend/src/main/resources/application.yml:
spring: datasource: url:jdbc:mysql://localhost:3306/vehicle_monitoring?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai driver-class-name:com.mysql.cj.jdbc.Driver username:root password:your_password jpa: hibernate: ddl-auto:update properties: hibernate: dialect:org.hibernate.dialect.MySQL8Dialect
mysql -u root -p vehicle_monitoring < database/mysql_schema.sql mysql -u root -p vehicle_monitoring < database/mysql_data.sql
cd backend mvn clean package -DskipTests java -jar -Dspring.profiles.active=prod target/vehicle-monitoring-1.0.0.jar
cd frontend npm install npm run build
server { listen 80; server_name your-domain.com; location / { root /path/to/frontend/dist; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://localhost:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }
7.4 默认账号
|
| --- | --- | --- | --- |
|
7.5 配置说明
# application.yml 关键配置 server: port:8080 servlet: context-path:/api jwt: secret:"your-secret-key-change-in-production"# 生产环境必须修改 expiration:86400000# Token有效期(毫秒) spring: datasource: url:jdbc:h2:mem:testdb# 开发环境
// frontend/vue.config.js module.exports = { devServer: { port: 8081, proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } } }
// mobile/api/request.js const BASE_URL = 'http://your-api-domain.com/api' // 修改为实际后端地址 const USE_MOCK = false // 使用真实后端
八、应用场景及使用案例说明
8.1 典型应用场景
背景:某银行开展车辆抵押贷款业务,需要对抵押车辆进行全程监管,确保资产安全。
- 贷款发放时,为每台抵押车辆安装GPS定位设备,并在系统中注册车辆和设备信息
- 创建电子围栏,将车辆常驻地设置为围栏区域,车辆异常离开时自动报警
- 监控人员通过Web后台或移动端实时查看车辆位置,定期检查车辆状态
- 当车辆出现围栏越界、设备离线等异常情况时,系统自动报警,监控人员及时跟进处理
- 定期生成统计报表,分析车辆使用情况,为风险评估提供数据支撑
// 车辆注册示例 @PostMapping("/vehicles") public ApiResponse<VehicleDTO> createVehicle(@RequestBody VehicleDTO vehicleDTO) { // 1. 检查IMEI是否已存在 if (vehicleRepository.existsByImei(vehicleDTO.getImei())) { return ApiResponse.error("设备IMEI已注册"); } // 2. 创建车辆记录 Vehicle vehicle = new Vehicle(); vehicle.setImei(vehicleDTO.getImei()); vehicle.setCustomerName(vehicleDTO.getCustomerName()); vehicle.setVehicleName(vehicleDTO.getVehicleName()); vehicle.setPlateNumber(vehicleDTO.getPlateNumber()); vehicle.setStatus(VehicleStatus.REGISTERED); // 3. 注册设备到第三方平台 boolean registered = deviceProviderService.registerDevice( vehicleDTO.getImei(), vehicle ); vehicle.setDeviceRegistered(registered); vehicleRepository.save(vehicle); return ApiResponse.success(convertToDTO(vehicle)); }
背景:融资租赁公司需要管理大量租赁车辆,确保车辆正常使用,防范承租人违约风险。
- 建立完整的车辆档案,记录客户信息、租赁期限、租金等信息
- 设置多个电子围栏,包括客户工作区域、居住区域等,监控车辆活动范围
- 设置超速报警,监控车辆是否被用于高风险用途
- 通过轨迹回放功能,分析车辆使用规律,识别异常行为
- 利用统计分析功能,评估客户信用状况,优化租赁决策
// 轨迹分析示例 @GetMapping("/track/history/{vehicleId}") public ApiResponse<List<LocationHistoryDTO>> getHistoryTrack( @PathVariable Long vehicleId, @RequestParam String startTime, @RequestParam String endTime) { LocalDateTime start = LocalDateTime.parse(startTime); LocalDateTime end = LocalDateTime.parse(endTime); List<LocationHistory> tracks = locationHistoryRepository .findByVehicleIdAndLocationTimeBetween(vehicleId, start, end); // 计算行驶距离 double totalDistance = calculateTotalDistance(tracks); List<LocationHistoryDTO> dtos = tracks.stream() .map(this::convertToDTO) .collect(Collectors.toList()); return ApiResponse.success(dtos); }
背景:物流公司需要实时掌握车辆位置,优化调度,提高运输效率。
- 在地图上实时查看所有车辆位置,快速定位可用车辆
- 通过轨迹回放分析车辆行驶路线,优化运输路径
- 设置目的地围栏,车辆到达后自动通知调度中心
- 统计车辆行驶里程和运行时长,用于成本核算和绩效考核
8.2 使用案例详细说明
场景描述:抵押车辆在非工作时间驶离常驻区域,系统触发围栏越界报警。
- 报警通知:监控人员通过移动端APP收到报警推送通知
- 查看详情:点击报警信息,查看车辆当前位置、驶出时间、围栏信息等
- 核实处理:
- 联系客户确认是否正常用车
- 如为异常情况,启动应急处理流程
- 在系统中标记报警处理状态,添加处理备注
- 记录归档:系统自动记录处理过程,形成完整的监管档案
场景描述:客户申请延长贷款期限,银行需要分析车辆使用情况,评估风险。
- 查询历史轨迹:选择车辆和时间范围,查询历史行驶轨迹
- 轨迹可视化:在地图上回放车辆行驶轨迹,查看行驶路线和停留点
- 数据统计分析:
- 计算行驶总里程和平均日行驶里程
- 分析车辆活动区域和出行规律
- 识别异常行驶行为(如长期停放在非指定地点)
- 风险评估:基于轨迹分析结果,评估客户还款能力和风险等级
@GetMapping("/track/replay/{vehicleId}") public ApiResponse<TrackReplayDTO> replayTrack( @PathVariable Long vehicleId, @RequestParam @DateTimeFormat(iso = DateTimeFormat.ISO.DATE_TIME) LocalDateTime startTime, @RequestParam @DateTimeFormat(iso = DateTimeFormat.ISO.DATE_TIME) LocalDateTime endTime) { List<LocationHistory> tracks = locationHistoryRepository .findByVehicleIdAndLocationTimeBetweenOrderByLocationTime( vehicleId, startTime, endTime); TrackReplayDTO replay = new TrackReplayDTO(); replay.setVehicleId(vehicleId); replay.setStartTime(startTime); replay.setEndTime(endTime); replay.setTrackPoints(convertToTrackPoints(tracks)); replay.setTotalDistance(calculateDistance(tracks)); replay.setDuration(Duration.between(startTime, endTime)); return ApiResponse.success(replay); }
场景描述:银行风控部门、业务部门、催收部门需要协同工作,但权限不同。
- ADMIN(系统管理员):拥有所有权限,可管理用户、配置系统参数
- MANAGER(部门经理):可查看所有车辆、处理报警、查看统计报表
- MONITOR(监控人员):可查看分配的车辆、处理报警、查看轨迹
- USER(普通用户):仅可查看分配的车辆基本信息
@PreAuthorize("hasRole('ADMIN') or hasRole('MANAGER')") @GetMapping("/vehicles") public ApiResponse<Page<VehicleDTO>> getAllVehicles( @RequestParam(defaultValue = "0") int page, @RequestParam(defaultValue = "10") int size) {
8.3 最佳实践建议
- 根据车辆使用场景合理设置围栏大小,避免频繁误报
- 为不同类型的车辆设置不同的围栏规则
- 定期检查和更新围栏配置,确保围栏有效性
- 建立报警分级机制,区分紧急报警和一般报警
- 设置报警处理时限,确保及时响应
- 保留完整的报警处理记录,便于追溯和分析
相关免费在线工具
- curl 转代码
解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。 在线工具,curl 转代码在线工具,online
- Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
- Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online
- Markdown转HTML
将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML转Markdown 互为补充。 在线工具,Markdown转HTML在线工具,online
- HTML转Markdown
将 HTML 片段转为 GitHub Flavored Markdown,支持标题、列表、链接、代码块与表格等;浏览器内处理,可链接预填。 在线工具,HTML转Markdown在线工具,online
- JSON 压缩
通过删除不必要的空白来缩小和压缩JSON。 在线工具,JSON 压缩在线工具,online