logo
1
0
WeChat Login
Forkfromlooc/cnb-year, behindmain1 commits

CNB 我的一年 - 完整项目

基于现代技术栈的年度总结展示项目,包含前端、后端和反向代理的完整解决方案。

🏗️ 项目架构

cnb-year/
├── frontend/              # 前端 (Vite + Vanilla JS)
│   ├── index.html        # 主页面
│   ├── script.js         # 前端逻辑
│   ├── style.css         # 样式文件
│   ├── package.json      # 前端依赖
│   ├── vite.config.js    # Vite 配置
│   └── Dockerfile        # 前端容器化
├── backend-go/           # 后端 (Go + Iris 框架)
│   ├── handlers/         # 请求处理器
│   ├── middleware/       # 中间件
│   ├── models/          # 数据模型
│   ├── services/        # 业务逻辑
│   ├── main.go          # 主程序
│   ├── go.mod           # Go 模块
│   ├── Dockerfile       # 后端容器化
│   └── .env             # 环境变量
├── nginx/               # Nginx 反向代理
│   ├── nginx.conf       # Nginx 主配置
│   └── default.conf     # 站点配置
├── docker-compose.yml   # Docker Compose 配置
├── start-docker.sh      # Docker 启动脚本
└── README.md           # 项目说明

🚀 技术栈

前端

  • Vite: 现代化构建工具,支持热重载
  • Vanilla JavaScript: 原生 JS,轻量高效
  • CSS3: 现代样式,支持响应式设计
  • html2canvas: 图片导出功能

后端

  • Go 1.21: 高性能编程语言
  • Iris v12: 高性能 Web 框架
  • RESTful API: 标准 REST 接口设计
  • 中间件: CORS、日志、错误恢复等

基础设施

  • Nginx: 反向代理和负载均衡
  • Docker: 容器化部署
  • Docker Compose: 多服务编排

🛠️ 快速开始

方式一:Docker Compose (推荐)

# 克隆项目
git clone <repository-url>
cd cnb-year

# 启动所有服务
./start-docker.sh

# 或者手动启动
docker compose up --build -d

方式二:本地开发

前端开发

cd frontend
npm install
npm run dev

后端开发

cd backend-go
go mod download
go run main.go

📱 访问地址

🔧 API 接口

获取年度数据

GET /api/year-summary?userId=user123

响应示例:

{
  "success": true,
  "data": {
    "quietestDay": {
      "date": "7月 11日",
      "visits": 2
    },
    "busiestDay": {
      "date": "10月 2日",
      "hours": 16
    },
    "favoriteTime": {
      "time": "02:30"
    },
    "yearSummary": {
      "totalVisits": 1247,
      "createdMoments": 89
    }
  },
  "timestamp": "2024-12-04T22:00:00Z",
  "userId": "user123"
}

更新年度数据

POST /api/year-summary
Content-Type: application/json

{
  "userId": "user123",
  "data": {
    // 年度数据结构
  }
}

🎨 功能特性

前端功能

  • ✨ 精美的年度总结展示页面
  • 📱 响应式设计,支持移动端
  • 🖼️ 一键导出图片功能
  • 🎭 流畅的动画效果
  • 🔄 动态数据加载
  • ⚡ 快速的页面加载

后端功能

  • 🚀 高性能 Go 后端
  • 📊 RESTful API 设计
  • 🛡️ 完善的错误处理
  • 📝 结构化日志记录
  • 🔒 CORS 跨域支持
  • 💾 可扩展的数据存储

部署功能

  • 🐳 Docker 容器化
  • 🔄 一键启动脚本
  • 🌐 Nginx 反向代理
  • 📈 负载均衡支持
  • 🔧 环境变量配置

📊 项目结构说明

前端架构

  • 组件化设计: 模块化的 JavaScript 代码
  • 响应式布局: 适配各种屏幕尺寸
  • 动态渲染: 从 API 获取数据并渲染
  • 图片导出: 支持将卡片导出为图片

后端架构

  • 分层设计: handlers -> services -> models
  • 中间件系统: 可插拔的功能模块
  • 错误处理: 统一的错误响应格式
  • 配置管理: 环境变量和配置文件

部署架构

  • 微服务: 前后端分离部署
  • 反向代理: Nginx 统一入口
  • 容器化: Docker 标准化部署
  • 编排管理: Docker Compose 服务编排

🔧 开发指南

添加新功能

  1. 前端: 在 frontend/script.js 中添加新的处理逻辑
  2. 后端: 在 backend-go/handlers/ 中添加新的处理器
  3. 路由: 在 backend-go/main.go 中注册新路由
  4. 模型: 在 backend-go/models/ 中定义数据结构

环境配置

  • 前端配置: frontend/vite.config.js
  • 后端配置: backend-go/.env
  • Nginx 配置: nginx/default.conf
  • Docker 配置: docker-compose.yml

🚀 部署说明

生产环境部署

  1. 修改环境变量配置
  2. 构建生产版本镜像
  3. 使用 Docker Compose 部署
  4. 配置域名和 SSL 证书

扩展性考虑

  • 数据库集成 (MySQL/PostgreSQL/MongoDB)
  • Redis 缓存支持
  • 用户认证系统
  • 监控和日志系统
  • CI/CD 流水线

🤝 贡献指南

  1. Fork 项目
  2. 创建功能分支
  3. 提交代码变更
  4. 发起 Pull Request

📄 许可证

MIT License

🙏 致谢

感谢所有贡献者和开源社区的支持!

About

No description, topics, or website provided.
Language
JavaScript39.2%
Go28.4%
CSS20.2%
HTML8.7%
Others3.5%