架构设计基础

技术选型原则 = 业务需求 + 团队能力 + 维护成本 + 社区成熟度

// 团队刚熟悉 Vue 3 基础用法，却强行堆砌新技术
// 技术栈：Vue 3 + TS + Vite + 微前端 + GraphQL + Node 全栈
// 结果：开发效率低下，Bug 频出

// 根据团队现状选择合适的技术栈
// 技术栈：Vue 3 + Pinia + Axios（团队熟悉）
// 复杂特性（微前端、SSR 等）待团队驾驭后再循序渐进引入

// YAGNI 原则判断清单
const designChecklist = {
  currentNeeds: '当前需求是否满足？',
  futureNeeds: '未来需求是否明确？',
  cost: '过度设计的成本是否可接受？',
  team: '团队能否驾驭？',
  maintenance: '维护成本是否合理？'
}

1. 先满足当前需求
2. 预留扩展点（但不过度实现）
3. 采用迭代式架构演进

初期：使用有赞、上线了等第三方小程序工具
优势：快速上线、成本较低
问题：
  - 可定制性差
  - 数据不在自己手中
  - 后期迁移成本高
  - 业务扩展受限

1. 评估业务发展阶段
2. 短期：可使用第三方工具快速验证
3. 中期：逐步自研核心模块
4. 长期：建立完整技术体系

// 架构实践流程
const architecturePractice = {
  step1: '学习理论（微内核、微服务、响应式等）',
  step2: '小规模试点项目',
  step3: '收集问题和反馈',
  step4: '调整和优化架构',
  step5: '形成适合团队的架构规范',
  step6: '推广到更多项目'
}

架构设计分类
├── 系统架构（最全面）
├── 软件/应用架构
├── 数据架构
├── 网络架构
└── 安全架构

┌─────────────────────────────────────────┐
│              系统架构总览                │
├─────────────────────────────────────────┤
│  客户端层                                │
│  ├── Web 应用                            │
│  ├── 移动端 APP                          │
│  └── 小程序                              │
├─────────────────────────────────────────┤
│  网络层                                  │
│  ├── CDN                                │
│  ├── 负载均衡                            │
│  └── API 网关                            │
├─────────────────────────────────────────┤
│  应用层                                  │
│  ├── 前端服务                            │
│  ├── 后端服务                            │
│  └── 微服务集群                          │
├─────────────────────────────────────────┤
│  数据层                                  │
│  ├── MySQL 主从                          │
│  ├── Redis 缓存                          │
│  └── MongoDB 文档库                      │
└─────────────────────────────────────────┘

// 1. MVC 架构
Model-View-Controller

// 2. MVVM 架构（Vue 常用）
Model-View-ViewModel

// 3. 微服务架构
Microservices Architecture

// 4. 单体架构
Monolithic Architecture

// Vue 项目应用架构
src/
├── api/              // API 接口层
├── assets/           // 静态资源
├── components/       // 组件层
├── composables/      // 组合式函数（Vue 3）
├── directives/       // 自定义指令
├── router/           // 路由配置
├── store/            // 状态管理
├── utils/            // 工具函数
└── views/            // 页面视图

// 数据库选型决策树
const databaseSelection = {
  relational: {
    suit: '结构化数据、事务性强',
    examples: ['MySQL', 'PostgreSQL', 'Oracle']
  },
  nosql: {
    document: { examples: ['MongoDB'], suit: '文档型数据' },
    keyvalue: { examples: ['Redis'], suit: '缓存、会话' },
    column: { examples: ['Cassandra'], suit: '大数据分析' },
    graph: { examples: ['Neo4j'], suit: '关系网络' }
  },
  newsql: {
    examples: ['TiDB', 'CockroachDB'],
    suit: '分布式事务场景'
  }
}

-- 电商系统数据库设计示例

-- 用户表
CREATE TABLE users (
  id BIGINT PRIMARY KEY AUTO_INCREMENT,
  username VARCHAR(50) NOT NULL,
  email VARCHAR(100) UNIQUE,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  INDEX idx_email (email)
);

-- 订单表
CREATE TABLE orders (
  id BIGINT PRIMARY KEY AUTO_INCREMENT,
  user_id BIGINT NOT NULL,
  total_amount DECIMAL(10,2) NOT NULL,
  status ENUM('pending', 'paid', 'shipped', 'completed'),
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (user_id) REFERENCES users(id),
  INDEX idx_user_status (user_id, status)
);

互联网
    ↓
CDN (内容分发网络)
    ↓
防火墙
    ↓
负载均衡器
    ↓
┌─────────┬─────────┐
│  Web服务器1  │  Web服务器2  │
└─────────┴─────────┘
    ↓           ↓
应用服务器集群
    ↓
数据库主从复制

// 安全架构多层防护
const securityLayers = {
  // 1. 网络层安全
  network: {
    https: 'SSL/TLS 加密传输',
    firewall: '防火墙规则配置',
    waf: 'Web 应用防火墙'
  },
  
  // 2. 应用层安全
  application: {
    authentication: 'JWT/OAuth 2.0 身份验证',
    authorization: 'RBAC 权限控制',
    xss: 'XSS 攻击防护',
    csrf: 'CSRF Token 验证'
  },
  
  // 3. 数据层安全
  data: {
    encryption: '敏感数据加密存储',
    backup: '数据备份策略',
    audit: '操作审计日志'
  },
  
  // 4. 运维层安全
  ops: {
    monitor: '安全监控告警',
    patch: '定期安全补丁',
    drill: '安全演练'
  }
}

┌──────────────────────┐
│   表示层 (Presentation)│  ← 用户界面
├──────────────────────┤
│   业务逻辑层 (Service) │  ← 核心业务
├──────────────────────┤
│   数据访问层 (DAL)     │  ← 数据操作
└──────────────────────┘

┌──────────────────────┐
│   用户界面层 (UI)      │
├──────────────────────┤
│   应用层 (Application)│
├──────────────────────┤
│   业务层 (Domain)     │
├──────────────────────┤
│   数据访问层 (DAL)     │
├──────────────────────┤
│   数据库层 (Database)  │
└──────────────────────┘

// 表示层 - 组件
<template>
  <div class="user-list">
    <UserCard v-for="user in users" :key="user.id" :user="user" />
  </div>
</template>

// 业务逻辑层 - 组合式函数
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/store/user'
import { getUserList } from '@/api/user'

export function useUserList() {
  const users = ref([])
  const userStore = useUserStore()
  
  const fetchUsers = async () => {
    const res = await getUserList()
    users.value = res.data
  }
  
  onMounted(() => {
    fetchUsers()
  })
  
  return { users }
}

// 数据访问层 - API
import request from '@/utils/request'

export function getUserList() {
  return request.get('/api/users')
}

export function getUserById(id) {
  return request.get(`/api/users/${id}`)
}

用户请求
    ↓
[网关层] - 认证、限流、日志
    ↓
[用户服务] - 用户信息验证
    ↓
[内容服务] - 内容处理
    ↓
[支付服务] - 支付处理
    ↓
[数据库] - 数据持久化
    ↓
返回用户

// 中间件模式（类似 Koa/Express）
class Pipeline {
  constructor() {
    this.middlewares = []
  }
  
  use(middleware) {
    this.middlewares.push(middleware)
    return this
  }
  
  async run(context) {
    let index = 0
    
    const next = async () => {
      if (index < this.middlewares.length) {
        const middleware = this.middlewares[index++]
        await middleware(context, next)
      }
    }
    
    await next()
    return context
  }
}

// 使用示例
const pipeline = new Pipeline()

pipeline
  .use(async (ctx, next) => {
    console.log('1. 认证检查')
    await next()
  })
  .use(async (ctx, next) => {
    console.log('2. 权限验证')
    await next()
  })
  .use(async (ctx, next) => {
    console.log('3. 业务处理')
    ctx.result = '处理完成'
    await next()
  })

pipeline.run({})

微服务架构特点：
├── 服务独立部署
├── 轻量级通信（HTTP/消息队列）
├── 服务可独立扩展
├── 技术栈多样性
└── 故障隔离

// 1. HTTP RESTful 通信
// 用户服务
class UserService {
  async getUser(id) {
    return await axios.get(`http://user-service/api/users/${id}`)
  }
}

// 2. 消息队列通信
// 订单服务
class OrderService {
  async createOrder(orderData) {
    // 创建订单
    const order = await Order.create(orderData)
    
    // 发送消息到消息队列
    await messageQueue.publish('order.created', {
      orderId: order.id,
      userId: order.userId
    })
    
    return order
  }
}

// 支付服务订阅订单创建事件
messageQueue.subscribe('order.created', async (message) => {
  // 处理支付逻辑
  await paymentService.process(message.orderId)
})

┌──────────────┐
│   API 网关    │
└──────┬───────┘
       │
┌──────┴───────┬──────────┬──────────┐
│              │          │          │
▼              ▼          ▼          ▼
用户服务    订单服务    商品服务    支付服务
    │              │          │          │
    ▼              ▼          ▼          ▼
用户DB        订单DB      商品DB      支付DB

// 简化的响应式系统实现
class Dep {
  constructor() {
    this.subscribers = new Set()
  }
  
  depend() {
    if (activeEffect) {
      this.subscribers.add(activeEffect)
    }
  }
  
  notify() {
    this.subscribers.forEach(effect => effect())
  }
}

let activeEffect = null

function watchEffect(effect) {
  activeEffect = effect
  effect()
  activeEffect = null
}

// 使用示例
const dep = new Dep()
let count = 0

watchEffect(() => {
  dep.depend()
  console.log(`count is: ${count}`)
})

// 触发更新
count++
dep.notify()  // 输出: count is: 1

// Vue 3 事件总线
class EventBus {
  constructor() {
    this.events = {}
  }
  
  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = []
    }
    this.events[event].push(callback)
  }
  
  emit(event, ...args) {
    if (this.events[event]) {
      this.events[event].forEach(callback => callback(...args))
    }
  }
  
  off(event, callback) {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(cb => cb !== callback)
    }
  }
}

// 使用示例
const bus = new EventBus()

// 订阅事件
bus.on('user-login', (user) => {
  console.log(`用户 ${user.name} 登录成功`)
})

// 发布事件
bus.emit('user-login', { name: '张三' })

┌──────────────┐
│   主服务器    │ ← 读写操作
└──────┬───────┘
       │ 数据同步
┌──────┴───────┐
│              │
▼              ▼
从服务器1    从服务器2
(只读)       (只读)

// 数据分片示例
class ShardManager {
  constructor(shards) {
    this.shards = shards  // 分片节点列表
  }
  
  // 根据 key 决定数据存储位置
  getShard(key) {
    const hash = this.hash(key)
    const index = hash % this.shards.length
    return this.shards[index]
  }
  
  // 简单哈希函数
  hash(key) {
    let hash = 0
    for (let char of String(key)) {
      hash = (hash << 5) - hash + char.charCodeAt(0)
    }
    return Math.abs(hash)
  }
}

// 使用示例
const shards = ['shard1.db', 'shard2.db', 'shard3.db']
const shardManager = new ShardManager(shards)

const db1 = shardManager.getShard('user:1001')  // 哈希取模后存储到 shard3
const db2 = shardManager.getShard('user:1002')  // 哈希取模后存储到 shard1

Model (数据模型)
  ↓ 数据变化
View (视图展示) ← 用户交互 → Controller (业务逻辑)

Model (数据模型)
  ↕ 数据绑定
ViewModel (视图模型)
  ↕ 数据绑定
View (视图)

<template>
  <!-- View 视图层 -->
  <div class="user-management">
    <input v-model="newUser.name" placeholder="输入用户名" />
    <button @click="addUser">添加用户</button>
    
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
        <button @click="deleteUser(user.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// Model 数据层
const users = ref([
  { id: 1, name: '张三' },
  { id: 2, name: '李四' }
])

const newUser = ref({ name: '' })

// ViewModel 视图模型层
const userCount = computed(() => users.value.length)

const addUser = () => {
  if (!newUser.value.name) return
  
  users.value.push({
    id: Date.now(),
    name: newUser.value.name
  })
  
  newUser.value.name = ''
}

const deleteUser = (id) => {
  users.value = users.value.filter(user => user.id !== id)
}
</script>

@startuml
actor 用户
participant "前端应用" as FE
participant "API网关" as Gateway
participant "用户服务" as UserService
database "数据库" as DB

用户 -> FE: 点击登录
FE -> Gateway: POST /api/login
Gateway -> UserService: 转发请求
UserService -> DB: 查询用户信息
DB --> UserService: 返回用户数据
UserService --> Gateway: 返回Token
Gateway --> FE: 返回登录结果
FE --> 用户: 跳转到首页
@enduml

-- 数据库建模步骤
1. 创建数据库连接
2. 设计表结构（字段、类型、约束）
3. 建立表关系（外键、索引）
4. 生成 SQL 脚本
5. 正向/逆向工程

PowerDesigner
├── 概念数据模型 (CDM)
├── 物理数据模型 (PDM)
├── 面向对象模型 (OOM)
└── 业务流程模型 (BPM)

const architectureChecklist = {
  // 需求分析阶段
  requirements: [
    ' 明确业务需求',
    ' 识别非功能性需求（性能、安全、可用性）',
    ' 了解团队能力和资源',
    ' 评估技术风险'
  ],
  
  // 设计阶段
  design: [
    ' 选择合适的架构模式',
    ' 划分清晰的模块边界',
    ' 设计合理的数据流向',
    ' 考虑扩展性和维护性',
    ' 制定技术选型方案'
  ],
  
  // 实施阶段
  implementation: [
    ' 编写架构设计文档',
    ' 进行技术评审',
    ' 搭建基础框架',
    ' 建立开发规范'
  ],
  
  // 维护阶段
  maintenance: [
    ' 定期架构评审',
    ' 监控系统性能',
    ' 收集团队反馈',
    ' 持续优化改进'
  ]
}

初级阶段 → 中级阶段 → 高级阶段 → 专家阶段

┌─────────────┐
│  单体架构    │ ← 理解三层架构
│  (Monolith) │   掌握 MVC/MVVM
└──────┬──────┘
       ↓
┌─────────────┐
│  分层架构    │ ← 理解层次分离
│  (Layered)  │   掌握模块化设计
└──────┬──────┘
       ↓
┌─────────────┐
│  微服务架构  │ ← 理解服务拆分
│(Microservices)│  掌握分布式系统
└──────┬──────┘
       ↓
┌─────────────┐
│  云原生架构  │ ← 理解云原生理念
│(Cloud Native)│  掌握 Serverless
└─────────────┘

# [项目名称] 架构设计文档

## 1. 项目概述
- 项目背景
- 业务目标
- 技术目标

## 2. 需求分析
- 功能性需求
- 非功能性需求
- 约束条件

## 3. 架构设计
### 3.1 系统架构图
### 3.2 技术选型
### 3.3 模块划分
### 3.4 数据设计
### 3.5 接口设计

## 4. 详细设计
### 4.1 核心流程
### 4.2 异常处理
### 4.3 性能优化

## 5. 部署方案
### 5.1 部署架构
### 5.2 容器化方案
### 5.3 监控告警

## 6. 风险与应对

## 7. 附录