Zeshawn
返回博客

智钓蓝海信息平台

2026-03-223 min 阅读

简历项目经历 — 智钓蓝海（Smart-Fish）

以下分别从 前端开发、后端开发、全栈开发 三个视角撰写，可根据投递岗位选用。

一、前端开发视角

智钓蓝海 — 智能垂钓信息平台（前端）

技术栈： Vue 3.5 + TypeScript 5.9 + Vite 8 + Element Plus + ECharts 6 + Pinia 3 + Axios

项目简介： 边缘-云协同的智能垂钓信息平台，面向垂钓爱好者和水域管理人员提供水域监控、环境数据可视化、社区交流、垂钓记录管理等功能。前端涵盖 10 个页面视图、57 个 Vue 组件、14 个 API 服务模块、8 个 Pinia 状态管理仓库，TypeScript 类型定义 440+ 行。

核心工作与亮点：

  • 数据可视化大屏（Dashboard）： 设计并实现全屏暗色主题数据大屏，核心组件为 837 行的 ECharts 中国地图（DashChinaMap），支持 全国→省→市三级地图下钻，动态从阿里 DataV CDN 加载 GeoJSON 数据；实现了基于经纬度阈值的 散点聚合算法，自动将密集水域点合并为聚合标记并在缩放/下钻时重新计算；集成环境趋势折线图、雷达图、设备状态面板等 12 个子组件，通过 onMounted 统一拉取 8 类数据源并提供 30 秒自动刷新。

  • 服务工厂模式（createResourceService）： 设计并实现泛型资源服务工厂（328 行），通过 createResourceService<T>() 一次性生成 CRUDL 五个标准方法 + ID 级别 Map 缓存 + 列表查询参数缓存，写操作自动失效关联缓存；支持通过 extend 回调注入自定义方法，14 个业务 Service 中有 10 个基于此工厂创建，大幅减少重复代码。

  • 认证体系与 Token 刷新队列： 基于 Pinia 实现完整的 Access Token + Refresh Token 双 Token 认证流程。在 Axios 响应拦截器中实现 并发请求排队机制：当 401 触发 Token 刷新时，后续请求自动进入等待队列，刷新成功后批量重发，避免多次重复刷新。支持页面加载时自动从 localStorage 恢复登录态。

  • Mock 数据降级机制： 实现完整的 MockDataService（13KB），覆盖全部 API 接口的模拟数据，含时序数据动态生成（24 小时日变化模拟）。每个页面的数据加载均采用 try/catch + 自动降级策略，无后端环境下可完整运行全部功能。

  • 配置驱动的管理后台： 通过统一的配置数组描述 11 个资源管理器的字段定义、表格列、表单规则和操作权限，单个 AdminView 组件即可动态渲染不同资源的 CRUD 管理界面，新增资源管理仅需添加配置项。

  • 响应式设计与组件封装： 使用 CSS Grid + Flexbox 实现桌面/移动端双端适配；封装 BaseChart 图表基础组件支持自动 resize 和主题切换；实现确定性头像生成算法（基于用户名 hash 生成唯一渐变色）。

二、后端开发视角

智钓蓝海 — 智能垂钓信息平台（后端）

技术栈： Go 1.25 + Gin + GORM + MySQL 8.0 + Redis + JWT (HS256) + bcrypt

项目简介： 边缘-云协同的智能垂钓信息平台后端服务，采用三层架构（Handler → Service → DAO），管理 18 个数据模型、提供 V1（Flask 兼容）+ V2（Go 原生）双版本共 110+ RESTful API 端点，支持 IoT 设备数据采集、社区论坛、垂钓记录、环境监控等业务。

核心工作与亮点：

  • 双版本 API 兼容架构（V1/V2）： 设计 V1 和 V2 并行的双版本 API 体系。V1 完全兼容原 Flask（SFR）后端的接口路径、响应格式和认证方式——实现了 werkzeug 密码哈希兼容（支持 pbkdf2_sha256 和 scrypt 两种格式验证）和 Flask JWT 令牌解析中间件；V2 为 Go 原生 RESTful 接口，采用标准化的分页/排序/筛选范式。两套版本共享同一数据库和 Service/DAO 层，确保数据一致性。

  • Goroutine 并发优化体系： 系统性地利用 sync.WaitGroup + Goroutine 进行并发优化：

    • 设计泛型并发分页工具 PaginateMapConcurrent[T,D]，在分页查询的 DTO 转换阶段对每条记录并行执行含 I/O 操作的转换函数，将列表接口延迟从 N×RTT 降低至约 1×RTT；
    • 帖子详情接口 5 个独立查询（评论数、点赞数、是否已赞、帖子图片、用户头像）全部并行执行；
    • 钓鱼记录 DTO 转换中鱼获查询与设备查询并行，鱼获图片改为 WHERE IN 批量查询消除 N+1 问题；
    • 系统概览接口 10 个统计查询并发执行并统一缓存；
    • 区域环境数据接口 3 个表并发查询。

  • Redis 缓存与优雅降级： 设计 12 种缓存键模式覆盖高频查询（概览统计、区域环境、帖子详情、用户信息等），统一通过 cache.Get/Set/Invalidate 接口操作。Redis 为可选依赖——启动时连接失败则自动切换为纯数据库模式，所有缓存操作变为无操作（no-op），实现零配置降级。

  • 三级权限与中间件链： 实现 user → staff → admin 三级角色权限体系，通过 AuthRequired、StaffRequired、AdminRequired 中间件链组合实现路由级权限控制。JWT 采用 Access Token（1h）+ Refresh Token（3d）双令牌机制，刷新接口原子化更换双 Token。

  • 批量查询优化（消除 N+1）： 在 DAO 层设计批量查询函数（GetFishCaughtByRecordIDs、GetFirstImagesByPostIDs、GetImagesByFishIDs 等），通过 WHERE IN 一次查回关联数据再在内存中按 ID 分组，替代循环逐条查询，V1 兼容接口中帖子列表、钓鱼记录列表等接口均采用此模式。

  • IoT 数据采集与和风天气集成： 提供环境数据、水质数据、设备状态等 4 类 IoT 数据上传接口；集成和风天气 API 代理，使用 Ed25519 签名生成 JWT 进行 API 鉴权。

  • 前后端一体化部署： 利用 Go embed 指令在编译时将前端 dist 嵌入二进制文件，实现单文件即启的组合部署模式（含 SPA fallback 路由）；配合 GitHub Actions 自动交叉编译 5 个平台（Linux/macOS/Windows × amd64/arm64）并发布 Release。

三、全栈开发视角

智钓蓝海 — 智能垂钓信息平台（全栈）

技术栈： Vue 3.5 + TypeScript 5.9 + ECharts 6 + Pinia 3 / Go 1.25 + Gin + GORM + MySQL + Redis

项目简介： 独立完成的边缘-云协同智能垂钓信息平台，包含前端 57 个 Vue 组件 + 后端 110+ API 端点 + 18 个数据模型，提供水域监控数据可视化大屏、社区论坛、垂钓记录、IoT 设备管理、环境监测告警等功能，支持三级地图下钻、双版本 API 兼容、前后端一体化单文件部署。

核心工作与亮点：

  • ECharts 数据可视化大屏： 实现全屏暗色主题数据大屏，核心为 837 行的中国地图组件，支持 全国→省→市三级下钻（动态加载阿里 DataV GeoJSON），实现经纬度散点聚合算法、水域详情弹窗联动、环境趋势折线图和雷达图；整个大屏由 12 个子组件构成，统一拉取 8 类数据源并支持 30 秒自动刷新。

  • Goroutine 并发优化体系（后端）： 设计泛型并发分页工具 PaginateMapConcurrent[T,D]，列表接口 DTO 转换阶段对每条记录并行执行 I/O 密集的查询，将响应时间从 O(N×RTT) 降至 O(1×RTT)。帖子详情 5 查询并行、概览统计 10 查询并行、钓鱼记录 DTO 中鱼获+设备查询并行 + 批量 WHERE IN 消除 N+1 问题。

  • 双版本 API 兼容架构： V1 完全兼容原 Flask 后端（含 werkzeug 密码哈希验证、Flask JWT 解析中间件），V2 为 Go 原生 RESTful 接口，两套版本共享 Service/DAO 层和数据库。实现无缝迁移的同时保证旧客户端零改动可用。

  • 泛型服务工厂模式（前端）： 设计 createResourceService<T>() 工厂，一次性生成 CRUDL + ID 级 Map 缓存 + 自动失效策略，14 个 Service 中 10 个基于工厂创建；配合 Axios 拦截器实现 401 Token 刷新并发排队机制，以及完整的 Mock 数据降级（无后端可独立运行全部功能）。

  • Redis 缓存 + 可选依赖降级： 后端设计 12 种缓存键模式覆盖高频接口，Redis 为可选组件——连接失败自动降级为纯 DB 模式；前端同样实现 API 失败 → Mock 数据自动回退。前后端均具备独立运行能力，提升开发效率与系统韧性。

  • 三级权限 + 配置驱动管理后台： 后端 user/staff/admin 三级角色 + JWT 双 Token 认证，前端路由守卫联动权限拦截；管理后台采用配置数组驱动，单组件动态渲染 11 个资源的 CRUD 管理界面。

  • 一体化部署与 CI/CD： 利用 Go embed 将前端产物嵌入后端二进制（含 SPA fallback），实现单文件部署；GitHub Actions 自动交叉编译 5 平台 + 版本自增 + Release 发布。

评论

0/1000
返回博客列表