nxxmdata/government-mini-program/ARCHITECTURE.md

政府端小程序架构说明

整体架构

┌─────────────────────────────────────────────────────────────┐
│                    政府端小程序架构                          │
├─────────────────────────────────────────────────────────────┤
│  前端层 (Vue.js + uni-app)                                 │
│  ┌─────────────┬─────────────┬─────────────┬─────────────┐  │
│  │   首页组件   │   登录组件   │   看板组件   │   管理组件   │  │
│  │   Home.vue  │   Login.vue │ Dashboard.vue│Supervision.vue│  │
│  └─────────────┴─────────────┴─────────────┴─────────────┘  │
├─────────────────────────────────────────────────────────────┤
│  服务层 (API Services)                                      │
│  ┌─────────────┬─────────────┬─────────────┬─────────────┐  │
│  │  认证服务   │  看板服务   │  监管服务   │  审批服务   │  │
│  │authService  │dashboardSvc │supervisionSvc│approvalSvc │  │
│  └─────────────┴─────────────┴─────────────┴─────────────┘  │
├─────────────────────────────────────────────────────────────┤
│  工具层 (Utils)                                             │
│  ┌─────────────┬─────────────┬─────────────┬─────────────┐  │
│  │  认证工具   │  请求工具   │  路由守卫   │  状态管理   │  │
│  │    auth.js  │  request.js │   router    │    pinia    │  │
│  └─────────────┴─────────────┴─────────────┴─────────────┘  │
├─────────────────────────────────────────────────────────────┤
│  后端API (Government Backend)                              │
│  ┌─────────────┬─────────────┬─────────────┬─────────────┐  │
│  │  认证接口   │  看板接口   │  监管接口   │  审批接口   │  │
│  │  /api/auth  │/api/visual  │/api/superv  │/api/approval│  │
│  └─────────────┴─────────────┴─────────────┴─────────────┘  │
└─────────────────────────────────────────────────────────────┘

组件架构

1. 页面组件 (Pages)

pages/
├── index/
│   └── index.vue          # 首页
├── login/
│   └── login.vue          # 登录页
├── dashboard/
│   └── dashboard.vue      # 数据看板
├── supervision/
│   └── supervision.vue    # 监管管理
├── approval/
│   └── approval.vue       # 审批管理
├── personnel/
│   └── personnel.vue      # 人员管理
├── epidemic/
│   └── epidemic.vue       # 疫情监控
├── service/
│   └── service.vue        # 服务管理
├── warehouse/
│   └── warehouse.vue      # 仓库管理
└── profile/
    └── profile.vue        # 个人中心

2. 业务组件 (Components)

components/
├── Home.vue               # 首页组件
├── Login.vue              # 登录组件
├── Dashboard.vue          # 数据看板组件
├── Supervision.vue        # 监管管理组件
├── Approval.vue           # 审批管理组件
├── Personnel.vue          # 人员管理组件
├── Epidemic.vue           # 疫情监控组件
├── Service.vue            # 服务管理组件
├── Warehouse.vue          # 仓库管理组件
└── Profile.vue            # 个人中心组件

3. 服务层 (Services)

services/
├── authService.js         # 认证服务
├── dashboardService.js    # 看板服务
├── supervisionService.js  # 监管服务
├── approvalService.js     # 审批服务
├── personnelService.js    # 人员服务
├── epidemicService.js     # 疫情服务
├── serviceService.js      # 服务管理
└── warehouseService.js    # 仓库服务

4. 工具层 (Utils)

utils/
├── auth.js                # 认证工具
└── request.js             # 请求工具

数据流架构

1. 用户认证流程

用户输入 → Login组件 → authService → 后端API → 返回Token → 存储到本地 → 路由跳转

2. 数据获取流程

组件挂载 → 调用Service → request工具 → 后端API → 数据处理 → 更新组件状态

3. 状态管理流程

用户操作 → 组件事件 → 调用API → 更新数据 → 重新渲染 → 用户反馈

技术栈架构

前端技术栈

• 框架: Vue 2.6 + uni-app
• 状态管理: Pinia
• 路由: Vue Router
• HTTP: Axios
• 样式: Sass/SCSS
• 构建: Vue CLI + Vite

后端技术栈

• 框架: Express.js
• 数据库: MySQL (可选)
• 认证: JWT
• 端口: 5352

功能模块架构

1. 认证模块

• 用户登录
• Token管理
• 权限控制
• 路由守卫

2. 数据看板模块

• 统计卡片
• 图表展示
• 实时数据
• 预警信息

3. 管理模块

• 监管管理
• 审批管理
• 人员管理
• 疫情监控
• 服务管理
• 仓库管理

4. 个人中心模块

• 用户信息
• 设置管理
• 退出登录

部署架构

开发环境

本地开发 → H5预览 → 微信开发者工具 → 真机调试

生产环境

代码构建 → 服务器部署 → 域名配置 → 小程序发布

安全架构

1. 前端安全

• Token认证
• 路由守卫
• 输入验证
• XSS防护

2. 后端安全

• JWT认证
• CORS配置
• 请求验证
• 错误处理

性能优化

1. 前端优化

• 组件懒加载
• 图片压缩
• 代码分割
• 缓存策略

2. 网络优化

• 请求合并
• 数据缓存
• 错误重试
• 超时处理

扩展性设计

1. 组件扩展

• 模块化设计
• 可复用组件
• 配置化开发
• 主题定制

2. 功能扩展

• 插件机制
• 模块热插拔
• API版本管理
• 数据迁移

总结

政府端小程序采用现代化的前端架构，具有良好的可维护性、可扩展性和用户体验。通过模块化设计和组件化开发，实现了功能的快速迭代和团队协作开发。