前后端分离架构

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 接口对应关系让我展示前端如何调用后端的 APIHTTP 请求JSON 数据GET /api/ordersPOST /api/ordersGET /api/dashboardGET /api/product-configs前端 Vue 应用后端 Go API获取订单列表创建订单获取大屏数据获取产品配置2. 核心 API 接口列表后端提供的主要接口 (main.go第47-75行):前端页面后端 API 接口功能描述订单管理/api/ordersCRUD 订单操作产品配置/api/product-configs管理产品SQL配置数据大屏/api/dashboard获取大屏展示数据系统配置/api/board-configs管理系统参数3. 前端调用示例// 前端发送请求 (vue/src/api/dashboard.js)exportfunctiongetDashboardData(params){returnrequest.get(/dashboard,{params})}// 实际请求过程:// 1. 前端发送: GET http://localhost:8080/api/dashboard// 2. 后端接收: 查询数据库 → 返回JSON数据// 3. 前端接收: 解析JSON → 更新页面显示数据流转过程让我以一个典型的操作来说明前后端的联系场景页面加载时获取订单数据数据库 (MySQL)后端 (Go)前端 (Vue)用户数据库 (MySQL)后端 (Go)前端 (Vue)用户打开订单管理页面GET /api/orders?page1page_size10SELECT * FROM board_order LIMIT 0,10返回订单数据返回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进行数据交换。前端负责展示和交互后端负责数据处理和存储。