皮卡丘全栈开发平台 · 项目整体架构说明

渔舟小调

皮卡丘全栈开发平台 · 项目整体架构说明

📌 本文为课程配套的 项目源码说明文档 ，购买全部付费文章后将获赠完整项目源码访问权限。

一、项目简介

Pikachu（皮卡丘）开发平台是一套面向中小型互联网产品的全栈工程化解决方案，由一名独立开发者借助 AI 辅助工具从零搭建，历经多个真实产品的迭代演进。

它不是一个 Demo，是生产级别的工程实践，包含：

端	技术栈	定位
后端服务	Kotlin + Spring Boot + MyBatis-Plus	REST API + 全局加密 + 权限管理
Web 管理台	Vue 3.5 + Element Plus + Ant Design Vue	RBAC 动态路由后台
H5 移动端	Vue 3 + Vant 4 + TailwindCSS	微信内嵌 H5 页面
微信小程序	UniApp X (UTS/UVue)	跨端小程序
跨端 APP	UniApp X (UTS/UVue)	iOS / Android 原生应用
官方网站	Vue 3 + Vite + TailwindCSS	产品落地页

二、整体架构图

┌─────────────────────────────────────────────────────────────────┐│ 客户端层 ││ ││ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────────────┐ ││ │ Web管理台 │ │ H5移动端 │ │ 微信小程序 │ │ iOS / Android │ ││ │ Vue 3.5 │ │ Vue 3 │ │ UniApp X │ │ UniApp X │ ││ │ +ElemPlus│ │ +Vant4 │ │ UTS/UVue │ │ UTS/UVue │ ││ └────┬─────┘ └────┬─────┘ └────┬─────┘ └────────┬─────────┘ │└───────┼─────────────┼─────────────┼──────────────────┼───────────┘ │ │ │ │ └─────────────┴─────────────┴──────────────────┘ │ ┌───────────▼───────────┐ │ 统一通信层 │ │ AES + RSA 双重加密 │ │ JWT Token 鉴权 │ │ MD5/SHA1 签名验证 │ └───────────┬───────────┘ │┌───────────────────────────────▼─────────────────────────────────┐│ 后端服务层 ││ ││ ┌──────────────────────────────────────────────────────────┐ ││ │ Spring Boot 2.3.0 (Kotlin) │ ││ │ │ ││ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ ││ │ │ 用户/权限 │ │ 活动营销 │ │ 小城乐游 │ │ 轻图相册 │ │ ││ │ │ PW_/PLAT│ │ BD_ │ │ TOWN_ │ │ LP_ │ │ ││ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ ││ │ │ ││ │ ┌──────────────────────────────────────────────────┐ │ ││ │ │ MyBatis-Plus 3.3.2 + JPA/Hibernate │ │ ││ │ └──────────────────────────────────────────────────┘ │ ││ └──────────────────────────────────────────────────────────┘ │└─────────────────────────────────────────────────────────────────┘ │ ┌───────────────────────┼───────────────────────┐ │ │ │┌───────▼───────┐ ┌──────────▼──────────┐ ┌──────▼──────┐│ MySQL 8.0 │ │ Redis │ │ 阿里云 OSS ││ 主数据库 │ │ Session + Cache │ │ 文件存储 │└───────────────┘ └─────────────────────┘ └─────────────┘

三、后端架构详解

3.1 技术选型

组件	版本	作用
Kotlin	1.6.10	主语言，空安全、简洁语法
Spring Boot	2.3.0	Web 框架
MyBatis-Plus	3.3.2	ORM，代码生成
JPA/Hibernate	内嵌	复杂关联查询
Druid	最新	数据库连接池 + 监控
Redis	6.x	Session 存储、验证码、缓存
Gradle	Kotlin DSL	构建工具

3.2 核心安全机制

请求流程（前端 → 后端）：1. 前端生成随机 AES 密钥2. 用后端 RSA 公钥加密 AES 密钥 → encryptKey3. 用 AES 密钥加密请求体 → encryptData4. 发送 { encryptKey, encryptData, sign(MD5/SHA1) }5. 后端 RequestBodyAdvice 统一解密6. 响应体同样 AES 加密后返回7. 前端 ResponseBodyAdvice 统一解密

3.3 RBAC 权限模型

运营人员 (PW_OPERATOR) └── 角色 (PLAT_ROLE) └── 菜单 (PLAT_MENU) ← 动态路由来源 └── 按钮 (PLAT_BUTTON) ← 细粒度权限

3.4 业务模块划分

前缀	模块	核心表
PW_	平台运营	PW_OPERATOR, PW_LOGIN_LOG
PLAT_	平台基础	PLAT_MENU, PLAT_ROLE, PLAT_TOKEN
BD_	活动营销	BD_ACTIVITY, BD_SCHEME, BD_USER_JOIN
BASE_	基础用户	BASE_USER, BASE_RESOURCE
MK_	营销规则	MK_RESOURCE, MK_RULE
MSP_	渠道管理	MSP_CHANNEL
PT_	系统配置	PT_ENUM, PT_DICT
TOWN_	小城乐游	TOWN_CITY, TOWN_ATTRACTION, TOWN_ITINERARY
LP_	轻图相册	LP_CLASS, LP_STUDENT, LP_PHOTO
PLAT_TAG_	标签体系	PLAT_TAG_CATEGORY, PLAT_TAG_DEFINITION

四、前端架构详解

4.1 Web 管理台（pikachu-web）

pikachu-web/├── src/│ ├── api/│ │ ├── pikachuNetwork.js # 加密通信层（核心）│ │ └── *.js # 各模块 API│ ├── router/│ │ └── index.js # 动态路由（从后端加载菜单树）│ ├── stores/ # Pinia 状态管理│ ├── views/ # 业务页面│ └── components/ # 公共组件

动态路由核心逻辑：登录成功 → 从后端获取菜单树 → 运行时 router.addRoute() 注入路由 → 支持多应用切换。

4.2 微信小程序（pikachu-mini）

pikachu-mini/├── pages/ # 主包页面（首页、发现、行程、我的）├── pagesUser/ # 分包：登录注册├── pagesDetail/ # 分包：详情页├── api/│ └── index.uts # 所有 API 定义（强类型）├── stores/│ └── app.uts # Pinia Store（Token/密钥持久化）├── common/│ ├── pikachuNetwork.uts # 加密通信层│ └── trackSdk.uts # 埋点 SDK└── pages.json # 分包配置

4.3 H5 移动端（pikachu-h5）

Vant 4 + TailwindCSS + amfe-flexible（rem 适配） 和 Web 管理台共用同一套加密通信方案（JS 版）

五、AI 辅助开发实践

本项目是AI Native 工程实践的典型案例，AI 在以下环节发挥了核心作用：

5.1 需求设计阶段

用 AI 进行产品创意验证（PCV 评分体系） 生成数据库 ER 图和 API 接口文档 自动生成产品原型 HTML

5.2 后端开发阶段

生成 MyBatis-Plus Entity / Mapper / Service / Controller 四层模板代码 生成数据库 DDL 和初始化 SQL 安全机制代码（AES/RSA 加解密工具类）

5.3 前端开发阶段

生成 Vue 组件、Pinia Store 模板 生成 UniApp UTS/UVue 页面（严格类型系统） 生成埋点 SDK、网络层拦截器

5.4 运维/部署阶段

生成 Docker Compose 配置 生成 Nginx 反向代理配置 生成 CI/CD 脚本

六、子产品说明

6.1 小城乐游（核心产品）

定位

：小城市文旅导览微信小程序

亮点

：地图 POI + 精选路线 + 亲子友好评分

验证结论

：PCV 17/24，属强机会，建议谨慎推进

6.2 轻图相册（AI 产品）

定位

：面向教师群体，用百度人脸识别自动将班级合照分类到学生名下

技术亮点

：百度人脸 1:N 搜索 + 异步任务 + ZIP 打包下载

6.3 精神健身房（规划中）

定位

：心理/精神成长社区 APP

七、源码获取说明

🎁 购买全部 50 篇付费文章后，即可免费获取本项目完整源码。

完整源码包含：

✅ back/pikachu_plat — 完整后端工程（Kotlin + Spring Boot） ✅ front/pikachu-web — Web 管理台 ✅ front/pikachu-mini — 微信小程序 ✅ front/pikachu-h5 — H5 移动端 ✅ front/pikachu-app — 跨端 APP ✅ front/pikachu-website — 官方网站 ✅ db/ — 完整数据库初始化 SQL ✅ design/ — 所有产品原型和技术方案文档 ✅ 部署文档（Docker + Nginx + MySQL + Redis）

八、课程学习路径

免费入门（10篇） ↓付费进阶第一阶段：环境与架构（8篇） ↓付费进阶第二阶段：后端开发（12篇） ↓付费进阶第三阶段：Web 管理台（8篇） ↓付费进阶第四阶段：微信小程序（10篇） ↓付费进阶第五阶段：H5 移动端（6篇） ↓付费进阶第六阶段：高级专题（6篇）

完整课程目录详见：📚 课程总目录

我将努力践行“读万卷书、行万里路、历万端事、阅万般人”，点击下方卡片关注我，让我们一起寻找每天的那束光！

微信扫一扫关注该公众号

继续滑动看下一个