架构演进背景
辣评项目最初是基于微信机器人的小说投稿评论管理系统。随着功能的不断扩展和用户需求的增加,我们逐步意识到需要从微信机器人架构演进为完整的 Web 平台架构。
演进的驱动力
- 用户体验需求
- 微信机器人交互受限于聊天界面
- 需要更丰富的可视化展示
- 需要更灵活的操作方式
- 功能扩展需求
- 复杂的数据统计和分析
- 多维度的筛选和查询
- 管理员后台功能
- 性能和稳定性
- 微信机器人依赖第三方服务
- 需要更稳定的服务保障
- 需要更好的并发处理能力
- 独立部署需求
- 摆脱对微信平台的依赖
- 支持多种访问方式
- 便于功能迭代和维护
架构演进历程
第一阶段:微信机器人时代(2023年2月-2024年3月)
架构特点
微信用户 → 微信机器人 → Go 后端 → SQLite 数据库
核心模块:
cmd/wxBot/- 微信机器人主程序cmd/utils/- 通用工具库- SQLite 数据库
功能实现:
- 通过微信消息收集投稿
- 通过微信消息收集评论
- 基础的数据统计
- 简单的查询功能
优势:
- 部署简单,无需前端开发
- 用户无需额外安装应用
- 基于微信的即时通讯
局限性:
- 交互方式受限
- 数据展示不直观
- 管理功能有限
- 依赖微信平台稳定性
第二阶段:Web 平台建设(2024年3月-2024年6月)
新架构设计
用户浏览器 → Vue 3 前端 → Go REST API → SQLite 数据库
技术栈选择:
后端:
- 语言: Go 1.21+
- Web 框架: Gin
- ORM: GORM
- 数据库: SQLite
- 认证: JWT
前端:
- 框架: Vue 3
- 构建工具: Vite
- UI 库: Element Plus
- 路由: Vue Router
- 状态管理: Pinia
项目结构重组
project/
├── cmd/server/ # Go 后端
│ ├── main.go # 入口文件
│ ├── router/ # 路由定义
│ ├── handlers/ # 请求处理器
│ ├── services/ # 业务逻辑层
│ ├── models/ # 数据模型
│ ├── database/ # 数据库管理
│ ├── middleware/ # 中间件
│ └── config/ # 配置管理
├── admin-vue/ # Vue 3 前端
│ ├── src/
│ │ ├── api/ # API 接口
│ │ ├── views/ # 页面组件
│ │ ├── components/ # 通用组件
│ │ ├── router/ # 路由配置
│ │ ├── stores/ # Pinia 状态管理
│ │ └── utils/ # 工具函数
│ ├── public/
│ └── vite.config.js
└── config.json # 配置文件
核心功能实现
1. RESTful API 设计
// cmd/server/router/router.go
func SetupRouter() *gin.Engine {
r := gin.Default()
// 公开路由
public := r.Group("/api")
{
public.POST("/auth/login", handlers.Login)
public.POST("/auth/register", handlers.Register)
}
// 认证路由
auth := r.Group("/api")
auth.Use(middleware.JWTAuth())
{
auth.GET("/user/profile", handlers.GetProfile)
auth.POST("/submissions", handlers.CreateSubmission)
auth.POST("/comments", handlers.CreateComment)
}
// 管理员路由
admin := r.Group("/api/admin")
admin.Use(middleware.JWTAuth(), middleware.RequireRole("admin"))
{
admin.GET("/users", handlers.ListUsers)
admin.GET("/statistics", handlers.GetStatistics)
admin.POST("/competitions", handlers.CreateCompetition)
}
// 静态文件服务
r.Static("/", "./frontend")
return r
}
2. JWT 认证系统
// cmd/server/middleware/auth.go
func JWTAuth() gin.HandlerFunc {
return func(c *gin.Context) {
token := c.GetHeader("Authorization")
if token == "" {
c.JSON(401, gin.H{"error": "未提供认证Token"})
c.Abort()
return
}
// 验证 Token
claims, err := ValidateToken(token)
if err != nil {
c.JSON(401, gin.H{"error": "Token无效或已过期"})
c.Abort()
return
}
// 将用户信息存入上下文
c.Set("userID", claims.UserID)
c.Set("username", claims.Username)
c.Next()
}
}
3. GORM 数据库管理
// cmd/server/database/database.go
func Initialize() error {
db, err := gorm.Open(sqlite.Open(dbPath), &gorm.Config{
Logger: logger.Default.LogMode(logger.Info),
})
if err != nil {
return err
}
// 设置连接池
sqlDB, _ := db.DB()
sqlDB.SetMaxIdleConns(10)
sqlDB.SetMaxOpenConns(100)
sqlDB.SetConnMaxLifetime(time.Hour)
// 自动迁移
db.AutoMigrate(
&models.User{},
&models.Submission{},
&models.Comment{},
&models.Competition{},
&models.QualificationStatistics{},
// ...
)
DB = db
return nil
}
4. Vue 3 前端架构
<!-- admin-vue/src/App.vue -->
<template>
<router-view />
</template>
<script setup>
import { onMounted } from 'vue'
import { useAuthStore } from '@/stores/auth'
const authStore = useAuthStore()
onMounted(() => {
// 初始化认证状态
authStore.checkAuth()
})
</script>
// admin-vue/src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
const routes = [
{
path: '/',
component: () => import('@/views/Home.vue')
},
{
path: '/admin',
component: () => import('@/layouts/AdminLayout.vue'),
meta: { requiresAuth: true, roles: ['admin'] },
children: [
{
path: 'dashboard',
component: () => import('@/views/admin/Dashboard.vue')
},
// ...
]
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
// 路由守卫
router.beforeEach((to, from, next) => {
const authStore = useAuthStore()
if (to.meta.requiresAuth && !authStore.isAuthenticated) {
next('/login')
} else if (to.meta.roles && !authStore.hasAnyRole(to.meta.roles)) {
next('/403')
} else {
next()
}
})
export default router
数据迁移方案
从微信机器人到 Web 平台
虽然架构发生了变化,但数据库结构保持兼容:
- 数据库保持不变
- 继续使用 SQLite
- 表结构保持兼容
- 数据无需迁移
- API 层重构
- 从微信消息处理改为 HTTP API
- 业务逻辑保持一致
- 数据访问层统一
- 前端新增
- 开发 Vue 3 前端应用
- 调用后端 REST API
- 提供 Web 界面
性能对比
架构演进前后对比
| 指标 | 微信机器人架构 | Web 平台架构 |
|---|---|---|
| 用户体验 | 受限于聊天界面 | 丰富的可视化界面 |
| 功能扩展性 | 有限 | 灵活 |
| 数据展示 | 文本为主 | 图表、表格等多种形式 |
| 管理功能 | 基础 | 完善的后台管理 |
| 并发处理 | 依赖微信平台 | 独立控制 |
| 部署方式 | 依赖微信 | 独立部署 |
| 访问方式 | 仅微信 | 浏览器、移动端等 |
演进过程中的挑战
1. 保持向下兼容
挑战: 在演进过程中,需要保证现有数据和功能不受影响。
解决方案:
- 保持数据库结构兼容
- 逐步迁移功能
- 提供过渡期支持
2. 用户迁移
挑战: 引导用户从微信机器人迁移到 Web 平台。
解决方案:
- 保留微信机器人作为辅助入口
- 提供详细的使用指南
- 逐步引导用户使用 Web 平台
3. 功能重新实现
挑战: 将微信机器人的功能迁移到 Web 平台。
解决方案:
- 梳理现有功能清单
- 优先实现核心功能
- 逐步完善辅助功能
架构演进成果
功能提升
- 用户体验
- 直观的可视化界面
- 丰富的交互方式
- 响应式设计支持移动端
- 管理功能
- 完善的后台管理系统
- 数据统计和分析
- 灵活的权限管理
- 系统稳定性
- 独立部署,不依赖第三方
- 更好的并发处理能力
- 完善的错误处理和日志
- 开发效率
- 前后端分离,便于协作
- 清晰的代码结构
- 便于功能迭代
总结
从微信机器人到 Web 平台的架构演进,是辣评项目发展的重要里程碑。这次演进不仅提升了系统的功能和性能,还为后续的发展奠定了坚实的基础。
关键收获
- 技术选型的重要性
- Go + Gin + GORM 提供了高性能的后端支持
- Vue 3 + Vite + Element Plus 提供了现代化的前端体验
- 架构设计的灵活性
- 前后端分离便于独立开发和部署
- RESTful API 设计便于扩展
- 渐进式演进策略
- 保持向下兼容
- 逐步迁移功能
- 降低演进风险
这次架构演进为辣评平台的快速发展提供了强有力的支撑,使我们能够专注于业务功能的实现,为用户提供更好的服务体验。