【读书活动感悟分享】特爱读《大前端三剑客》开发运营配置、接口加解密、mock数据小工具

React + Vite 加解密工具项目学习总结项目概述基于 React + Vite 的前端工具项目，主要功能是接口数据的加解密处理和跳转配置管理。项目采用现代前端技术栈，支持本地文件预览。
技术栈核心框架React 19.1.1 - 用户界面构建
Vite 7.1.2 - 构建工具和开发服务器
React Router 7.9.2（HashRouter） - 路由管理
UI 组件库Ant Design 5.27.4 - 企业级UI设计语言
加密工具库CryptoJS - AES、DES 加密算法实现
js-base64 - Base64 编解码功能
pako - 数据压缩/解压处理

核心功能实现

1. 加解密工具模块出参解密（ResposeDecryptor）Token 相关解密（refreshToken）
压缩数据解密（电站搜索、列表、详情接口）
通用 AES 解密
DES CBC 模式解密
入参解密（RequestDecryptor）DES 解密（支持多种 key/IV 组合）
AES 解密（业务相关）
跳转配置管理（JumpConfig）本地路径跳转
短信链接跳转
支持多种路由类型（WebView、小程序、电站详情等）

关键技术点

1. 路由配置javascript下载复制运行// 使用 HashRouter 适配本地文件环境
import { HashRouter as Router } from 'react-router-dom';原因：HashRouter 使用 # 路由
生产环境打包配置javascript下载复制运行// vite.config.js
base: isProduction ? '' : '/'要点：
生产环境使用空字符串 ''，生成纯相对路径资源引用
开发环境使用 '/'，适配开发服务器
确保本地 file:// 和 WebView 都能正常加载资源

剪贴板 API 兼容性处理javascript下载复制运行const handleCopy = async (text) => {
try {
// 优先使用现代 Clipboard API
if (navigator.clipboard && navigator.clipboard.writeText) {
await navigator.clipboard.writeText(text);
} else {
// 备用方案：使用传统的 execCommand 方法
const textArea = document.createElement('textarea');
textArea.value = text;
textArea.style.position = 'fixed';
textArea.style.left = '-999999px';
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
textArea.remove();
}
} catch (error) {
console.error('复制失败:', error);
}
};

要点：
优先使用 Clipboard API
降级到 execCommand 作为备用
兼容不同浏览器环境
JSON 格式化显示与复制JsonViewer 组件特性：
支持双击复制
格式化 JSON 显示
处理多层转义的 JSON 字符串
自动清理转义字符
要点：
解析 JSON 后再格式化，避免转义字符问题
处理双重转义的情况
提供便捷的复制功能
避免双重 JSON.stringify问题代码：
javascript下载复制运行// ❌ 错误：双重转义
result = JSON.stringify(obj);
setDecryptedText(JSON.stringify(result));解决方案：
javascript下载复制运行// ✅ 正确：只转义一次
const resultString = JSON.stringify(result);
setDecryptedText(resultString);
修改 vite.config.js：base: isProduction ? '' : '/'
确保 WKWebView 加载时允许访问整个 dist 目录：
解决：实现双重降级策略，优先使用现代 API，失败时降级到传统方法
JSON 复制带转义字符问题：复制的 JSON 包含转义反斜杠
解决：
解析 JSON 后再格式化输出
处理多层转义的情况
确保最终输出的是干净的 JSON 格式

项目结构复制react-utils-project/
├── src/
│ ├── pages/ # 页面组件
│ │ ├── HomePage.jsx
│ │ ├── DescryptorPage.jsx
│ │ └── JumpConfigPage.jsx
│ ├── descryptorComponents/ # 解密器组件
│ │ ├── Descryptor.jsx
│ │ ├── RequestDecryptor.jsx
│ │ ├── ResposeDecryptor.jsx
│ │ └── JsonViewer.jsx
│ ├── jumpAppConfigComponts/ # 跳转配置组件
│ │ └── JumpConfig.tsx
│ ├── utils/ # 工具函数
│ │ └── encrypt/ # 加密工具
│ │ ├── aes/
│ │ ├── des/
│ │ └── rsa/
│ └── App.jsx # 主应用组件
├── dist/ # 构建输出
├── vite.config.js # Vite 配置
└── package.json最佳实践1. 环境区分配置开发环境：使用绝对路径，方便本地调试

生产环境：使用相对路径，适配多种部署场景
错误处理所有异步操作都使用 try-catch
提供用户友好的错误提示
实现降级方案
用户体验优化一键复制功能
JSON 格式化显示
双击快速复制
操作反馈提示
代码组织组件化设计
工具函数模块化
样式文件分离

项目截图

学习收获

1. 前端工程化Vite 构建配置优化
生产环境资源路径处理
代码混淆与压缩
跨平台兼容不同浏览器 API 兼容性处理
本地文件环境适配
加密算法应用AES 加密/解密实现
DES 加密/解密实现
多种加密模式支持
React 开发函数式组件与 Hooks
状态管理
路由配置

总结通过这个项目的开发实践，掌握了以下核心技能：

现代前端工程化配置 - Vite 构建工具的高级配置和优化
React 组件开发 - 函数式组件和 Hooks 的熟练应用
加密算法在前端的应用 - 多种加密算法的实际应用场景
用户体验优化 - 交互设计和功能易用性提升
这些经验可以很好地应用到其他前端项目中，有效提升开发效率和代码质量，为后续复杂项目的开发奠定了坚实基础。