# cfeteam/weapp-demo-album architecture

> Architecture diagram of the GitHub repository cfeteam/weapp-demo-album, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/cfeteam/weapp-demo-album
- Repository: https://github.com/cfeteam/weapp-demo-album

## Overview

小相册是一个微信小程序，用于浏览、上传、预览、保存和删除 COS 图片。主要流程是用户在相册页查看图片或选择操作：列表和删除请求经客户端请求封装发送到 Node 服务，上传由小程序直接发起文件请求；服务端路由分发到相册处理器，再由处理器与 COS 交互。预览和本地保存是客户端功能。列表、删除处理器及其内部调用未采样，相关能力和 COS 交互依据 README 描述。

Main entry points: [`app/pages/album/album.js`](https://github.com/cfeteam/weapp-demo-album/blob/master/app/pages/album/album.js) (相册页面), [`server/middlewares/route_dispatcher.js`](https://github.com/cfeteam/weapp-demo-album/blob/master/server/middlewares/route_dispatcher.js) (路由分发), [`server/routes/album/routehub.js`](https://github.com/cfeteam/weapp-demo-album/blob/master/server/routes/album/routehub.js) (相册路由), [`app/lib/request.js`](https://github.com/cfeteam/weapp-demo-album/blob/master/app/lib/request.js) (请求封装)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["小程序客户端"]
  node_album_page["相册页面<br/>[album.js]"]
  node_api_urls["接口 URL<br/>[api.js]"]
  node_request["请求封装<br/>[request.js]"]
  node_preview["图片预览<br/>[album.js]"]
  node_save_image["本地保存<br/>[album.js]"]
end

subgraph group_server["Node 服务"]
  node_server_app["HTTP 服务<br/>[app.js]"]
  node_dispatcher["路由分发"]
  node_route_map["路由映射<br/>[index.js]"]
  node_album_routes["相册路由<br/>[routehub.js]"]
  node_list_handler["图片列表<br/>[list.js]"]
  node_upload_handler["图片上传<br/>[upload.js]"]
  node_delete_handler["图片删除<br/>[delete.js]"]
end

subgraph group_cos["COS 集成"]
  node_cos_adapter["COS SDK 配置<br/>[index.js]"]
  node_cos_store[("COS 图片存储")]
end

node_user(("相册用户"))
node_wechat["微信平台"]

node_user -->|"操作"| node_album_page
node_album_page -->|"构造接口地址"| node_api_urls
node_album_page -->|"请求列表/删除"| node_request
node_album_page -->|"上传文件"| node_dispatcher
node_album_page -->|"进入预览"| node_preview
node_album_page -->|"保存图片"| node_save_image
node_save_image -->|"下载并保存"| node_wechat
node_request -->|"发起请求"| node_wechat
node_request -->|"HTTPS 请求"| node_server_app
node_dispatcher -->|"接收请求"| node_server_app
node_server_app -->|"挂载中间件"| node_dispatcher
node_dispatcher -->|"读取映射"| node_route_map
node_dispatcher -->|"加载路由"| node_album_routes
node_album_routes -->|"处理列表"| node_list_handler
node_album_routes -->|"处理上传"| node_upload_handler
node_album_routes -->|"处理删除"| node_delete_handler
node_upload_handler -->|"调用 SDK"| node_cos_adapter
node_list_handler -->|"列举图片"| node_cos_store
node_upload_handler -->|"上传图片"| node_cos_store
node_delete_handler -->|"删除图片"| node_cos_store
node_cos_adapter -->|"访问存储"| node_cos_store

click node_album_page "https://github.com/cfeteam/weapp-demo-album/blob/master/app/pages/album/album.js"
click node_api_urls "https://github.com/cfeteam/weapp-demo-album/blob/master/app/lib/api.js"
click node_request "https://github.com/cfeteam/weapp-demo-album/blob/master/app/lib/request.js"
click node_preview "https://github.com/cfeteam/weapp-demo-album/blob/master/app/pages/album/album.js"
click node_save_image "https://github.com/cfeteam/weapp-demo-album/blob/master/app/pages/album/album.js"
click node_server_app "https://github.com/cfeteam/weapp-demo-album/blob/master/server/app.js"
click node_dispatcher "https://github.com/cfeteam/weapp-demo-album/blob/master/server/middlewares/route_dispatcher.js"
click node_route_map "https://github.com/cfeteam/weapp-demo-album/blob/master/server/routes/index.js"
click node_album_routes "https://github.com/cfeteam/weapp-demo-album/blob/master/server/routes/album/routehub.js"
click node_list_handler "https://github.com/cfeteam/weapp-demo-album/blob/master/server/routes/album/handlers/list.js"
click node_upload_handler "https://github.com/cfeteam/weapp-demo-album/blob/master/server/routes/album/handlers/upload.js"
click node_delete_handler "https://github.com/cfeteam/weapp-demo-album/blob/master/server/routes/album/handlers/delete.js"
click node_cos_adapter "https://github.com/cfeteam/weapp-demo-album/blob/master/server/services/cos/index.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_album_page,node_api_urls,node_request,node_preview,node_save_image toneBlue
class node_server_app,node_dispatcher,node_route_map,node_album_routes,node_list_handler,node_upload_handler,node_delete_handler toneAmber
class node_cos_adapter,node_cos_store toneMint
class node_user,node_wechat toneIndigo
```

## Components

### 小程序客户端

- [相册页面](https://github.com/cfeteam/weapp-demo-album/blob/master/app/pages/album/album.js): `app/pages/album/album.js`
- [接口 URL](https://github.com/cfeteam/weapp-demo-album/blob/master/app/lib/api.js): `app/lib/api.js`
- [请求封装](https://github.com/cfeteam/weapp-demo-album/blob/master/app/lib/request.js): `app/lib/request.js`
- [图片预览](https://github.com/cfeteam/weapp-demo-album/blob/master/app/pages/album/album.js): `app/pages/album/album.js`
- [本地保存](https://github.com/cfeteam/weapp-demo-album/blob/master/app/pages/album/album.js): `app/pages/album/album.js`

### Node 服务

- [HTTP 服务](https://github.com/cfeteam/weapp-demo-album/blob/master/server/app.js): `server/app.js`
- [路由分发](https://github.com/cfeteam/weapp-demo-album/blob/master/server/middlewares/route_dispatcher.js): `server/middlewares/route_dispatcher.js`
- [路由映射](https://github.com/cfeteam/weapp-demo-album/blob/master/server/routes/index.js): `server/routes/index.js`
- [相册路由](https://github.com/cfeteam/weapp-demo-album/blob/master/server/routes/album/routehub.js): `server/routes/album/routehub.js`
- [图片列表](https://github.com/cfeteam/weapp-demo-album/blob/master/server/routes/album/handlers/list.js): `server/routes/album/handlers/list.js`
- [图片上传](https://github.com/cfeteam/weapp-demo-album/blob/master/server/routes/album/handlers/upload.js): `server/routes/album/handlers/upload.js`
- [图片删除](https://github.com/cfeteam/weapp-demo-album/blob/master/server/routes/album/handlers/delete.js): `server/routes/album/handlers/delete.js`

### COS 集成

- [COS SDK 配置](https://github.com/cfeteam/weapp-demo-album/blob/master/server/services/cos/index.js): `server/services/cos/index.js`
- **COS 图片存储**

### Other components

- **相册用户**
- **微信平台**

## Connections

- 相册用户 → 相册页面: 操作
- 相册页面 → 接口 URL: 构造接口地址
- 相册页面 → 请求封装: 请求列表/删除
- 相册页面 → 路由分发: 上传文件
- 相册页面 → 图片预览: 进入预览
- 相册页面 → 本地保存: 保存图片
- 本地保存 → 微信平台: 下载并保存
- 请求封装 → 微信平台: 发起请求
- 请求封装 → HTTP 服务: HTTPS 请求
- 路由分发 → HTTP 服务: 接收请求
- HTTP 服务 → 路由分发: 挂载中间件
- 路由分发 → 路由映射: 读取映射
- 路由分发 → 相册路由: 加载路由
- 相册路由 → 图片列表: 处理列表
- 相册路由 → 图片上传: 处理上传
- 相册路由 → 图片删除: 处理删除
- 图片上传 → COS SDK 配置: 调用 SDK
- 图片列表 → COS 图片存储: 列举图片
- 图片上传 → COS 图片存储: 上传图片
- 图片删除 → COS 图片存储: 删除图片
- COS SDK 配置 → COS 图片存储: 访问存储