🌐

关于项目

技术选型与设计理念

🎯 这是什么

一个开箱即用的前后端分离项目模板。后端使用 GoFrame v2（Go 语言高性能 Web 框架）， 前端使用 Nuxt 3（Vue 3 SSR 框架），通过 Docker 容器化部署。

Nuxt Server API 作为反向代理层，前端请求先经过 Nuxt 再转发到 GoFrame 后端， 既解决了跨域问题，又保持了前后端完全解耦。

⚡

前端 — Nuxt.js

用户界面 & SSR
  • Nuxt 3 — Vue 3 元框架，支持 SSR / SSG
  • Vue 3 — Composition API + <script setup>
  • Server API — 服务端路由，代理后端请求
  • 热重载 — 修改即时预览，无需手动刷新
  • TypeScript — 全面类型提示，编译期纠错
npm run dev → :3000
🔧

后端 — GoFrame

API 服务 & 业务逻辑
  • GoFrame v2 — Go 语言企业级 Web 框架
  • 路由分组 — RESTful 风格，模块化管理
  • 控制器层 — 清晰的 MVC 分层结构
  • 配置管理 — YAML 配置，环境变量覆盖
  • 编译产物 — 单二进制文件，零依赖部署
./goframe-app → :4000

设计理念

01

前后端解耦

前端和后端独立开发、独立部署、独立扩展，通过 API 契约通信

02

容器化优先

每个服务一个容器，服务名即域名，Docker Compose 一键编排

03

开发体验

热重载、类型安全、清晰的目录结构，降低心智负担

04

生产就绪

SSR 首屏、API 代理、错误处理、环境变量配置，可直接用于生产

项目结构

project/
├── goframe/                    # GoFrame 后端
│   ├── main.go                 # 入口
│   ├── internal/
│   │   ├── cmd/cmd.go          # 路由 + 端口
│   │   └── controller/home.go  # API 控制器
│   ├── manifest/config/        # 配置文件
│   └── go.mod
│
├── frontend/                   # Nuxt 前端
│   ├── pages/
│   │   ├── index.vue           # 首页
│   │   ├── api-demo.vue        # API 演示
│   │   └── about.vue           # 关于
│   ├── server/api/
│   │   ├── ping.ts             # 健康检查
│   │   └── proxy/goframe.ts    # 代理后端
│   └── nuxt.config.ts
│
└── homepage/                   # 原有项目（独立）