前端和后端是怎么配合工作的（Go后端视角）

很多初学者学 Gin 的时候，经常会有一个疑问：

前端到底是怎么和后端通信的？

为什么我写一个接口，前端就能拿到数据？

JSON 到底是怎么传过去的？

实际上：

前端负责展示页面

后端负责提供数据

两者通过 HTTP + JSON 通信

---

一、最简单的理解

假设你在淘宝搜索：

机械键盘

你看到的是：

商品图片
商品名称
商品价格

这些内容不是前端自己写死的。

而是：

前端向后端要数据

后端返回数据

前端渲染页面

整个过程：

前端
 ↓
发请求
 ↓
后端
 ↓
查数据库
 ↓
返回数据
 ↓
前端展示

---

二、前后端职责

前端负责

页面展示

例如：

<h1>机械键盘</h1>

<p>199元</p>

用户交互：

点击按钮

输入账号

提交表单

常见技术：

HTML

CSS

JavaScript

Vue

React

---

后端负责

业务逻辑

例如：

登录

注册

订单

支付

权限

数据库操作：

MySQL

Redis

常见技术：

Go

Java

Python

Node.js

---

三、两者如何通信

通过：

HTTP协议

例如：

前端：

fetch("/login")

实际上就是：

给服务器发送HTTP请求

---

请求：

POST /login HTTP/1.1

后端收到：

r.POST("/login", Login)

执行：

func Login(c *gin.Context) {

}

---

四、最完整的一次请求

用户登录：

---

前端页面：

<input>
<input>

<button>登录</button>

用户输入：

账号：admin

密码：123456

点击登录。

---

前端JS：

fetch("/login",{
    method:"POST",
    body:JSON.stringify({
        username:"admin",
        password:"123456"
    })
})

发送：

{
    "username":"admin",
    "password":"123456"
}

---

服务器收到：

func Login(c *gin.Context) {

    var req struct {
        Username string `json:"username"`
        Password string `json:"password"`
    }

    c.ShouldBindJSON(&req)

}

---

此时：

req.Username

等于：

admin

---

此时：

req.Password

等于：

123456

---

五、后端开始处理

例如：

db.Where("username=?", req.Username)

查询数据库。

发现：

账号存在
密码正确

---

返回结果：

c.JSON(200, gin.H{
    "msg":"登录成功",
})

返回：

{
    "msg":"登录成功"
}

---

六、前端收到数据

前端：

const res = await fetch(...)

const data = await res.json()

console.log(data)

得到：

{
    msg:"登录成功"
}

---

前端更新页面：

欢迎回来：admin

---

整个过程：

用户点击登录
        ↓
前端收集数据
        ↓
JSON.stringify
        ↓
HTTP请求
        ↓
Gin接口
        ↓
ShouldBindJSON
        ↓
数据库查询
        ↓
c.JSON返回
        ↓
HTTP响应
        ↓
res.json()
        ↓
页面更新

---

七、什么是接口（API）

例如：

r.POST("/login", Login)

r.POST("/register", Register)

r.GET("/user/info", UserInfo)

这些：

/login

/register

/user/info

就叫：

接口(API)

---

接口本质：

一个URL

对应一个处理函数

例如：

r.GET("/user", GetUser)

访问：

/user

执行：

GetUser()

---

八、为什么要用JSON

因为：

前端是JavaScript

后端是Go

语言不同。

需要一种双方都认识的数据格式。

于是：

JSON

出现了。

---

前端：

{
    name:"张三",
    age:18
}

---

发送：

{
    "name":"张三",
    "age":18
}

---

后端：

type User struct {
    Name string `json:"name"`
    Age int `json:"age"`
}

自动转换。

---

九、真实项目架构

例如外卖项目：

Vue前端
     ↓
Axios请求
     ↓
Gin接口
     ↓
Service业务层
     ↓
Gorm
     ↓
MySQL

完整流程：

用户
 ↓
Vue
 ↓
Axios
 ↓
Gin
 ↓
Service
 ↓
Gorm
 ↓
MySQL
 ↓
返回JSON
 ↓
Vue渲染

---

十、你现在学习Gin时最应该理解的

每次看到：

func Login(c *gin.Context)

脑子里就要出现：

前端发请求
 ↓
Gin收到请求
 ↓
c获取数据
 ↓
处理业务
 ↓
c.JSON返回结果
 ↓
前端展示

因为：

Gin本质就是一个接收请求
和返回响应的框架

---

一句话总结

前端负责页面，后端负责数据。

用户操作页面后，前端通过 HTTP 请求把 JSON 发给 Gin，Gin 使用 ShouldBindJSON 接收数据，处理业务并查询数据库，然后通过 c.JSON 返回结果，前端再根据返回的 JSON 更新页面。

前端
 ↓
HTTP请求
 ↓
Gin接口
 ↓
数据库
 ↓
Gin返回JSON
 ↓
前端渲染页面