You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

4.7 KiB

系统架构设计文档

📋 文档信息

  • 文档版本: v1.0.0
  • 创建日期: 2024年
  • 最后更新: 2024年
  • 文档状态: 草稿
  • 维护人员: 架构师

🏗️ 系统架构概述

整体架构

Getinge Web 采用前后端分离的架构模式,前端使用 Vue.js 框架,后端提供 RESTful API 接口。

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   前端应用      │    │   后端API       │    │   数据库        │
│   (Vue.js)     │◄──►│   (Node.js)     │◄──►│   (MySQL)       │
└─────────────────┘    └─────────────────┘    └─────────────────┘

🎯 技术架构

前端技术栈

  • 框架: Vue.js 2.6.10
  • UI组件库: Element UI 2.15.13 + View Design 4.7.0
  • 状态管理: Vuex 3.1.0
  • 路由管理: Vue Router 3.0.6
  • HTTP客户端: Axios 0.18.1
  • 构建工具: Vue CLI 4.x + Webpack

后端技术栈

  • 运行环境: Node.js
  • Web框架: Express.js
  • 数据库: MySQL
  • 认证: JWT Token
  • API文档: Swagger

🏛️ 系统模块架构

1. 核心模块

src/
├── core/                 # 核心模块
│   ├── auth/            # 认证授权
│   ├── permission/      # 权限控制
│   ├── router/          # 路由管理
│   └── store/           # 状态管理
├── modules/              # 业务模块
│   ├── system/          # 系统管理
│   ├── course/          # 课程管理
│   ├── student/         # 学生管理
│   └── book/            # 预约管理
└── shared/               # 共享模块
    ├── components/       # 公共组件
    ├── utils/            # 工具函数
    └── styles/           # 样式文件

2. 权限架构

用户 (User)
  ├── 角色 (Role)
  │   ├── 权限 (Permission)
  │   │   ├── 菜单权限
  │   │   ├── 操作权限
  │   │   └── 数据权限
  │   └── 部门 (Department)
  └── 个人信息

🔐 安全架构

认证机制

  1. 登录流程

    • 用户输入用户名密码
    • 后端验证并生成 JWT Token
    • 前端存储 Token 到 localStorage
    • 后续请求携带 Token
  2. 权限验证

    • 路由级别的菜单权限
    • 组件级别的操作权限
    • API 接口级别的数据权限

数据安全

  • 敏感数据加密存储
  • API 接口参数验证
  • SQL 注入防护
  • XSS 攻击防护

📊 数据架构

数据模型

用户表 (users)
├── 基本信息
├── 认证信息
└── 关联信息

角色表 (roles)
├── 角色名称
├── 角色描述
└── 权限配置

权限表 (permissions)
├── 权限名称
├── 权限类型
└── 权限标识

业务表
├── 课程表 (courses)
├── 学生表 (students)
├── 预约表 (appointments)
└── 其他业务表

数据流

  1. 前端组件触发操作
  2. 调用 API 接口
  3. 后端处理业务逻辑
  4. 数据库 CRUD 操作
  5. 返回结果给前端
  6. 更新前端状态

🚀 性能架构

前端优化

  • 路由懒加载
  • 组件按需加载
  • 图片懒加载
  • 代码分割

后端优化

  • 数据库索引优化
  • 缓存策略
  • 接口限流
  • 负载均衡

🔧 部署架构

环境配置

开发环境 (Development)
├── 本地开发
├── 开发服务器
└── 测试数据库

测试环境 (Testing)
├── 测试服务器
├── 测试数据库
└── 自动化测试

生产环境 (Production)
├── 生产服务器
├── 生产数据库
├── CDN 加速
└── 监控告警

部署流程

  1. 代码提交到 Git 仓库
  2. 触发 CI/CD 流水线
  3. 自动化测试
  4. 构建打包
  5. 部署到目标环境
  6. 健康检查

📈 扩展性设计

水平扩展

  • 前端静态资源 CDN 分发
  • 后端服务集群部署
  • 数据库读写分离

垂直扩展

  • 模块化设计,支持功能扩展
  • 插件化架构,支持第三方集成
  • 配置化开发,支持业务定制

🔍 监控与日志

监控指标

  • 系统性能指标
  • 业务指标监控
  • 用户行为分析
  • 错误率统计

日志管理

  • 操作日志记录
  • 错误日志收集
  • 性能日志分析
  • 日志分级管理

📝 变更记录

版本 日期 变更内容 变更人
v1.0.0 2024年 初始架构设计 架构师

如有疑问,请联系架构师