这篇笔记主要围绕 前后端交互 和 Gin 核心概念,帮你系统理解从浏览器发请求,到 Gin 处理,再返回响应的完整流程。
1. JSON:前后端的通用语言
前端(JavaScript)和后端(Go)使用不同语言,它们不能直接理解对方的数据结构。JSON(JavaScript Object Notation) 就像一份通用的快递包裹,前端可以打包发送,后端拆包处理,再打包返回。
示例 JSON 数据:
json
{"title":"学Gin","status":false}
类比流程:
txt
前端打包 → 发送 JSON → 后端拆包处理 → 后端打包返回 → 前端拆包显示
2. 前后端交互完整流程
- 前端发送请求
js
fetch('/todos', {
method: 'POST',
body: JSON.stringify({title: '学Gin', status: false}),
headers: {'Content-Type': 'application/json'}
})
- Gin 接收请求
go
var body Todo
c.ShouldBindJSON(&body) // 把 JSON 装进 Go 的结构体
- 处理业务逻辑
- 保存数据库
- 校验数据
- 执行其他逻辑
- Gin 返回 JSON 响应
go
c.JSON(200, gin.H{"message": "创建成功", "todo": body})
- 前端接收响应
js
res.json().then(data => console.log(data))
整体流程可以简化为:
txt
前端 → JSON.stringify → 发请求
↓
Gin → c.ShouldBindJSON → 装进结构体 → 处理
↓
Gin → c.JSON → 返回 JSON
↓
前端 → JSON.parse → 更新页面
3. 结构体标签 json:"title":双向翻译官
在 Go 中,结构体字段首字母大写才能被外部访问。JSON 字段通常是小写。标签 json:"..." 就像翻译官:
go
type Todo struct {
Title string `json:"title"`
}
| 方向 | 过程 |
|---|---|
| 输入(前端→后端) | JSON "title" → 装入 Go 的 Title |
| 输出(后端→前端) | Go 的 Title → 转成 JSON "title" |
例子:前端传
"title":"学Gin",经过绑定后body.Title = "学Gin",再返回给前端时自动转成"title":"学Gin"。
4. Body:请求的"身体"
- Body 是 HTTP 请求的内容载体,不在 URL 中
- 用于传输 JSON 或其他数据格式
示例
终端 curl:
bash
curl -d '{"title":"学Gin"}' http://localhost:8080/todos
前端 fetch:
js
fetch('/todos', {
method: 'POST',
body: JSON.stringify({title: '学Gin'})
})
后端 Gin:
go
var body struct {
Title string `json:"title"`
}
c.ShouldBindJSON(&body)
此时 body.Title = "学Gin"。
5. curl:命令行版前端
- curl 是命令行工具,用于模拟前端发请求,便于测试接口
- 对应关系:
| 操作 | 前端 | curl |
|---|---|---|
| 发 GET | fetch(url) |
curl url |
| 发 POST | fetch({method:'POST', body:...}) |
curl -X POST -d '...' |
| 收 JSON | res.json() |
终端直接打印 |
6. Gin 获取请求数据的四种方式
| 方法 | 数据来源 | URL 示例 |
|---|---|---|
c.Param("id") |
URL 路径参数 :id |
/users/5 |
c.Query("name") |
URL 查询参数 ?name= |
/search?name=zhangsan |
c.ShouldBindJSON(&body) |
请求体 Body | 不在 URL |
c.GetHeader("Authorization") |
请求头 Header | 不在 URL |
7. c.BindJSON 赋值过程详解
go
var body struct {
Title string `json:"title"`
}
c.BindJSON(&body)
执行过程:
- Gin 读取请求 Body 中的 JSON:
json
{"title":"学Gin"}
-
根据结构体标签
json:"title"匹配字段 -
将值
"学Gin"存入body.Title
最终:
go
body.Title == "学Gin"
这个过程就是"拆包 + 填字段"的流程。
8. 函数签名标准格式
Go 的函数签名标准格式:
go
func 函数名(参数名 参数类型) 返回值类型 {
// 函数体
}
示例
go
func Register(c *gin.Context) { ... } // 无返回值
func Init(file string) error { ... } // 返回 error
func Add(a int, b int) int { return a + b } // 有参数有返回值
- 参数在括号里
- 返回值类型在括号外
- Gin 中的路由处理函数通常以
c *gin.Context作为参数,用于接收请求、返回响应
总结
- JSON 是前后端通用语言,请求和响应都是 JSON
c *gin.Context是 Gin 的核心管家,负责绑定请求、返回响应- 结构体标签
json:"..."实现字段大小写翻译 - Body 用来传递请求数据,不在 URL
- 函数签名规范 :参数在括号,返回值在括号外,Gin 路由函数固定传入
c *gin.Context
理解这些概念,你就能顺畅完成前后端交互,并在 Gin 框架下处理各种请求。