{T}

架构设计基础 学习笔记（第 3 部分）

4.1 模式总览

模式类型适用场景复杂度
层次架构模式传统企业应用
数据流架构模式数据处理系统
模块型架构模式大型复杂系统
事件驱动架构模式异步处理系统
分布式架构模式高并发高可用系统
用户界面架构模式前端应用

4.2 详细解析

4.2.1 层次架构模式

三层架构：

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

N 层架构扩展：

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

前端分层示例：

javascript
// 表示层 - 组件
<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}`)
}

4.2.2 数据流架构模式

核心概念：数据像流水线一样经过各个处理节点

数据流示例：

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

实现示例：

javascript
// 中间件模式（类似 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({})

4.2.3 模块型架构模式

微服务架构：

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

微服务通信示例：

javascript
// 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)
})

微服务示例架构：

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

4.2.4 事件驱动架构模式

核心模式：

  • 发布-订阅模式
  • 观察者模式