前后端分离架构

GoViewBoard 系统中前端和后端的联系：

🏗️架构概述

这个系统采用前后端分离架构，包含两个独立的部分：

后端 (Backend)

• 技术栈: Go + Gin 框架
• 端口: 8080
• 功能: 提供 RESTful API 接口，处理业务逻辑，数据库操作
• 位置:go/目录

前端 (Frontend)

• 技术栈: Vue 3 + Element Plus + Vite
• 端口: 构建后静态文件，通过 API 与后端通信
• 功能: 用户界面展示，数据可视化，用户交互
• 位置:vue/目录

🔄前端和后端的通信方式

1. API 调用

前端通过 HTTP 请求调用后端的 API 接口来获取和操作数据：

// 前端代码示例 (vue/src/api/dashboard.js)exportfunctiongetDashboardData(){returnrequest({url:'/api/dashboard',method:'get'})}

2. 数据格式

• 通信采用 JSON 格式
• 使用 RESTful API 设计规范

🌐主要 API 接口

让我为您查看实际的前后端接口

🗂️前端和后端的具体联系

1. API 接口对应关系

让我展示前端如何调用后端的 API：

2. 核心 API 接口列表

后端提供的主要接口 (main.go第47-75行):

3. 前端调用示例

// 前端发送请求 (vue/src/api/dashboard.js)exportfunctiongetDashboardData(params){returnrequest.get('/dashboard',{params})}// 实际请求过程:// 1. 前端发送: GET http://localhost:8080/api/dashboard// 2. 后端接收: 查询数据库 → 返回JSON数据// 3. 前端接收: 解析JSON → 更新页面显示

🔄数据流转过程

让我以一个典型的操作来说明前后端的联系：

场景：页面加载时获取订单数据

让我查找 vue 文件中的 API 调用

📂项目结构分离

现在让我显示项目的结构来解释前后端如何分离：

GoViewBoard/ ├── go/# 后端代码 (Go)│ ├── api/# API 接口实现│ │ ├── order.go# 订单管理 API│ │ ├── dashboard.go# 大屏数据 API│ │ └── product_config.go# 产品配置 API│ ├── dao/# 数据库操作层│ ├── model/# 数据模型│ └── main.go# 后端入口文件│ └── vue/# 前端代码 (Vue)├── src/ │ ├── api/# API 调用封装│ │ ├── order.js# 订单相关 API 调用│ │ ├── dashboard.js# 大屏数据 API 调用│ │ └── index.js │ ├── views/# 页面组件│ │ ├── OrderManage.vue# 订单管理页面│ │ ├── Dashboard.vue# 数据大屏页面│ │ └── ProductConfig.vue# 产品配置页面│ └── utils/request.js# HTTP 请求工具└── vite.config.js# 前端构建配置

🎯前后端联系的关键要点

1. 通信格式统一

• 前端通过request.js统一配置baseURL: '/api'
• 后端路由统一以/api开头
• 保证前后端接口路径对应

2. 数据格式标准

{"code":0,// 0=成功, 其他=失败"msg":"success",// 状态消息"data":{...}// 业务数据}

3. 具体联系示例

前端调用 (vue/src/api/order.js):

exportfunctiongetOrders(params){returnrequest.get('/orders',{params})}

后端处理 (go/main.go 第51行):

apiGroup.GET("/orders",api.GetOrders)

实际通信路径:

前端: request.get('/orders') → 实际请求: http://localhost:8080/api/orders → 后端接收: apiGroup.GET("/orders", api.GetOrders)

现在您清楚了吗？前端和后端就像两个独立的公司部门，通过标准化的接口协议（API）进行数据交换。前端负责展示和交互，后端负责数据处理和存储。