本站更换了新的技术栈
本文介绍了基于Go+Nuxt.js+Vue3技术栈构建的现代化个人博客系统。该系统采用微服务架构，包含前台展示、后台管理和API服务三大模块，支持容器化部署，具备高性能与高可用性。后端使用Go、Gin、GORM等技术，前端采用Nuxt.js+Vue3+TailwindCSS，并集成AI智能摘要生成、全文搜索、文件上传等核心功能。系统注重安全设计，实施JWT认证、XSS防护等措施，同时通过Redis缓存、CDN加速等策略优化性能。整体架构展示了现代Web开发的最佳实践，为同类项目提供参考价值。
咻兔哔咻兔哔
·2025年12月10日·13 阅读·
后端技术GoVue.jsNuxt.js

新的技术栈

以前使用了PHP的Laravel构建的博客,由于时间已经很久正好练技术所以使用新的技术栈构建了这个网站,下面是我给予新的技术栈的总结

本文详细介绍了基于 Go + Nuxt.js + Vue3 技术栈构建的现代化个人博客系统的技术架构、核心功能和实现细节。

项目概述

这是一个采用现代化技术栈构建的全栈个人博客系统，包含前台展示、后台管理和 API 服务三个核心模块。项目采用微服务架构设计，支持容器化部署，具备高性能、高可用性和良好的扩展性。

技术栈概览

后端技术栈

  • 编程语言: Go 1.21+
  • Web框架: Gin
  • ORM: GORM
  • 数据库: PostgreSQL 16
  • 缓存: Redis 7
  • 搜索: ZincSearch
  • 认证: JWT
  • 容器化: Docker + Docker Compose

前端技术栈

  • 前台网站: Nuxt.js 3 + Vue 3 + TailwindCSS (SSR)
  • 后台管理: Vue 3 + Element Plus + TypeScript

基础设施

  • 反向代理: Caddy (自动 HTTPS)
  • 部署: Docker Compose
  • 监控: 结构化日志 + 健康检查

系统架构设计

整体架构图

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   前台网站      │    │   后台管理      │    │   API服务       │
│  (Nuxt.js SSR)  │    │  (Vue3 SPA)     │    │   (Go + Gin)    │
│   blog-frontend │    │   blog-admin    │    │   blog-api      │
└─────────────────┘    └─────────────────┘    └─────────────────┘
         │                       │                       │
         └───────────────────────┼───────────────────────┘
                                 │
                    ┌─────────────────┐
                    │   Caddy反向代理  │
                    │   (自动HTTPS)    │
                    └─────────────────┘
                                 │
         ┌─────────────────────────────────────┐
         │                 │                   │
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│  PostgreSQL 16  │ │    Redis 7      │ │   ZincSearch    │
│   (数据库)      │ │    (缓存)       │ │   (搜索引擎)     │
└─────────────────┘ └─────────────────┘ └─────────────────┘

核心模块划分

1. API服务模块 (blog-api)

  • 位置: /cmd/api/main.go
  • 职责: 提供 RESTful API 接口
  • 特性:
    • JWT 认证授权
    • 请求验证和参数校验
    • 统一错误处理
    • 结构化日志输出
    • 健康检查接口

2. 前台网站模块 (blog-frontend)

  • 技术: Nuxt.js 3 + SSR
  • 特性:
    • 服务端渲染 (SSR)
    • 响应式设计
    • SEO 优化
    • 文章搜索功能

3. 后台管理模块 (blog-admin)

  • 技术: Vue 3 + Element Plus
  • 特性:
    • 单页面应用 (SPA)
    • 权限管理
    • 富文本编辑器
    • 数据可视化

数据库设计

核心数据模型

文章系统

  • articles: 文章主表
  • content: 文章内容表（分离存储，支持版本控制）
  • category: 分类表
  • tag: 标签表

用户系统

  • sys_user: 用户表
  • sys_role: 角色表
  • sys_menu: 菜单表
  • sys_user_role: 用户角色关联表

简历模块

  • resumes: 简历主表
  • resume_personal_infos: 个人信息
  • resume_experiences: 工作经历
  • resume_projects: 项目经历
  • resume_skills: 技能列表
  • resume_educations: 教育背景

数据库优化策略

  • 索引设计: 关键字段建立索引
  • 外键约束: 确保数据完整性
  • 分表策略: 内容与元数据分离
  • JSON字段: 灵活存储数组类型数据

核心功能特性

1. AI 智能摘要生成

系统集成了多家人工智能服务提供商，支持自动生成文章摘要：

// AI 服务配置示例
type AIConfig struct {
    Provider string        `json:"provider" yaml:"provider"`
    Zhipu    ZhipuConfig   `json:"zhipu" yaml:"zhipu"`
    Cloudflare CloudflareConfig `json:"cloudflare" yaml:"cloudflare"`
    Xunfei   XunfeiConfig  `json:"xunfei" yaml:"xunfei"`
}

支持的服务商:

  • 智谱AI (GLM-4.5-flash)
  • Cloudflare Workers AI
  • 讯飞星火大模型

2. 全文搜索功能

基于 ZincSearch 实现高性能全文搜索：

// 搜索客户端实现
type Client struct {
    baseURL  string
    username string
    password string
    index    string
    client   *http.Client
}

搜索特性:

  • 中文分词支持
  • 相关性排序
  • 高亮显示
  • 分页查询

3. 文件上传系统

支持多种存储后端：

// 存储配置
type StorageConfig struct {
    Driver       string      `json:"driver" yaml:"driver"`
    Local        LocalConfig `json:"local" yaml:"local"`
    Qiniu        QiniuConfig `json:"qiniu" yaml:"qiniu"`
    AllowedTypes []string    `json:"allowed_types" yaml:"allowed_types"`
}

存储选项:

  • 本地存储
  • 七牛云对象存储
  • 阿里云OSS（预留）

4. 评论系统集成

集成 Waline 评论系统，支持：

  • 多级评论回复
  • 邮件通知
  • 反垃圾过滤
  • 社交登录

安全设计

1. 认证授权

  • JWT Token: 无状态认证
  • Refresh Token: 自动刷新机制
  • 权限控制: 基于角色的访问控制 (RBAC)

2. 安全防护

  • CORS: 跨域资源共享配置
  • XSS防护: 输入验证和输出转义
  • CSRF防护: Token 验证机制
  • SQL注入防护: 参数化查询

3. 请求安全

# Caddy 安全配置
servers {
    trusted_proxies static private_ranges
}

# 恶意请求拦截
@malicious path_regexp /cgi-bin/.*\.\./.*
respond @malicious 403 "Forbidden"

部署架构

容器化部署

采用 Docker Compose 进行服务编排：

services:
  blog-api:
    build: .
    container_name: blog-api
    restart: unless-stopped
    ports:
      - "8080:8080"
    depends_on:
      postgres:
        condition: service_healthy
      redis:
        condition: service_healthy

反向代理配置

使用 Caddy 作为反向代理，自动管理 HTTPS：

# 前台网站
esc.show {
    encode gzip
    reverse_proxy blog-frontend:3000
}

# 后台管理
admin.esc.show {
    encode gzip
    reverse_proxy blog-admin:80
}

# API服务
api.esc.show {
    encode gzip
    reverse_proxy blog-api:8080
}

健康检查

所有服务都配置了健康检查机制：

healthcheck:
  test: ["CMD", "wget", "-q", "-O", "/dev/null", "http://localhost:8080/health"]
  interval: 10s
  timeout: 5s
  retries: 3
  start_period: 5s

性能优化策略

1. 缓存策略

  • Redis缓存: 热点数据缓存
  • CDN加速: 静态资源分发
  • 浏览器缓存: 合理的缓存策略

2. 数据库优化

  • 连接池: 控制数据库连接数
  • 查询优化: 避免 N+1 查询问题
  • 索引优化: 合理使用索引

3. 前端优化

  • 代码分割: 按需加载
  • 图片优化: WebP 格式支持
  • 资源压缩: Gzip 压缩

开发体验

1. 本地开发环境

提供完整的本地开发环境配置：

# 快速启动本地测试环境
docker compose -f docker-compose.local.yml up -d --build

# 初始化数据
docker compose exec blog-api ./blog-migrate -seed

2. 自动化脚本

项目包含完整的构建和部署脚本：

  • scripts/build.sh: 镜像构建和推送
  • scripts/deploy.sh: 生产环境部署
  • scripts/backup.sh: 数据备份

3. 配置管理

支持多环境配置：

# 开发环境配置
configs/config.dev.yaml

# 生产环境配置  
configs/config.prod.yaml

# 本地测试配置
configs/config.yaml

监控和日志

1. 结构化日志

采用 JSON 格式的结构化日志：

{
  "level": "info",
  "time": "2024-01-01T10:00:00Z",
  "msg": "API request processed",
  "method": "GET",
  "path": "/api/articles",
  "status": 200,
  "duration": 45
}

2. 日志分割

配置日志文件自动分割：

log {
    output file /data/logs/esc_frontend.log {
        roll_size 50mb
        roll_keep 5
    }
    format json {
        time_format iso8601
    }
}

扩展性设计

1. 插件化架构

系统采用插件化设计，便于功能扩展：

  • AI服务: 可插拔的AI服务提供商
  • 存储后端: 支持多种存储方案
  • 认证方式: 可扩展的认证机制

2. API 设计

RESTful API 设计原则：

// 统一的响应格式
type Response struct {
    Code    int         `json:"code"`
    Message string      `json:"message"`
    Data    interface{} `json:"data,omitempty"`
    Meta    interface{} `json:"meta,omitempty"`
}

3. 错误处理

统一的错误处理机制：

// 错误码定义
const (
    ErrSuccess = 0
    ErrInvalidParams = 10001
    ErrUnauthorized = 10002
    ErrInternal = 10003
)

总结

这个现代化个人博客系统展现了现代Web开发的多个重要特性：

技术亮点

  1. 全栈现代化: 采用最新的前后端技术栈
  2. 微服务架构: 清晰的模块划分和职责分离
  3. 容器化部署: Docker Compose 一键部署
  4. AI集成: 智能化的内容处理能力
  5. 安全可靠: 多层次的安全防护机制

最佳实践

  1. 配置管理: 多环境配置支持
  2. 健康检查: 完善的监控机制
  3. 日志管理: 结构化的日志系统
  4. 性能优化: 全方位的性能优化策略

扩展方向

  1. 移动端适配: PWA 支持
  2. 国际化: 多语言支持
  3. 数据分析: 用户行为分析
  4. 自动化运维: CI/CD 流水线

这个项目不仅是一个功能完整的博客系统，更是一个展示现代Web开发最佳实践的优秀案例。其架构设计和技术选型为类似项目的开发提供了很好的参考价值。

本文基于项目实际代码分析，展示了现代化Web应用开发的完整流程和技术要点。

咻兔哔
咻兔哔·2025年12月10日

本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处

上一篇
Gorm格式化时间输出的另一种实现
下一篇
构建现代化个人博客系统：技术亮点与创新实践

推荐文章

构建现代化个人博客系统：技术亮点与创新实践
后端技术

构建现代化个人博客系统：技术亮点与创新实践

本文介绍了作者构建现代化个人博客系统的技术选型、架构设计和创新实践。核心亮点包括采用Go+Nuxt.js+Vue3技术栈，实现高性能、可扩展的博客平台；创新功能如AI智能摘要生成系统、高性能全文搜索、现代化文件上传系统；微服务化架构、容器化部署及多层次安全防护；性能优化策略如缓存策略、数据库优化和前端性能优化。此外，还展示了智能简历模块、Waline评论系统及多主题支持等特色功能，系统性能指标优异。作者分享了技术收获与未来规划，旨在帮助全栈开发者提升技术能力。

12月10日16
Gorm格式化时间输出的另一种实现
后端技术

Gorm格式化时间输出的另一种实现

Gorm在读取时间时默认带有时区，不符合常规的日期格式。本文提出了一种通过自定义结构体和使用Gorm的Hook方式来解决这个问题。作者首先定义了一个只包含时间字段的结构体，并使用`Str`后缀和`json`标签来指定时间字段只参与存储而不参与数据输出。接着，通过Gorm的Hook机制实现时间字段的格式化。虽然这种方法不是特别高明，但确实提供了一种有效的解决方案。

7月22日17
Golang三方库收集-不定期更新
后端技术

Golang三方库收集-不定期更新

以下是一些热门的第三方库，包括网络请求库、RPC库、Web框架、热重启库、定时任务库、获取机器状态库、JWT库、验证码库、邮件库、汉字转拼音库、消息队列库、随机数库、Redis客户端库、雪花 ID 生成器库、Excel处理库、WEB框架库、数据库库、配置库、REDIS库、工具包库、参数验证库、日志库、JSON库、协程池库和类型转换库。这些库各有特色，适用于不同的开发场景，值得一试。

7月28日7
laravel代码整洁之道
后端技术

laravel代码整洁之道

2月10日5

关于本站

我信命，但不认命！

快速链接

首页分类归档搜索

网站信息

  • 运行天数: -- 天

Copyright © 2025 咻兔哔. All rights reserved.