Gin 核心概念 & 前后端交互笔记

这篇笔记主要围绕 前后端交互Gin 核心概念,帮你系统理解从浏览器发请求,到 Gin 处理,再返回响应的完整流程。


1. JSON:前后端的通用语言

前端(JavaScript)和后端(Go)使用不同语言,它们不能直接理解对方的数据结构。JSON(JavaScript Object Notation) 就像一份通用的快递包裹,前端可以打包发送,后端拆包处理,再打包返回。

示例 JSON 数据:

json 复制代码
{"title":"学Gin","status":false}

类比流程:

txt 复制代码
前端打包 → 发送 JSON → 后端拆包处理 → 后端打包返回 → 前端拆包显示

2. 前后端交互完整流程

  1. 前端发送请求
js 复制代码
fetch('/todos', {
    method: 'POST',
    body: JSON.stringify({title: '学Gin', status: false}),
    headers: {'Content-Type': 'application/json'}
})
  1. Gin 接收请求
go 复制代码
var body Todo
c.ShouldBindJSON(&body) // 把 JSON 装进 Go 的结构体
  1. 处理业务逻辑
  • 保存数据库
  • 校验数据
  • 执行其他逻辑
  1. Gin 返回 JSON 响应
go 复制代码
c.JSON(200, gin.H{"message": "创建成功", "todo": body})
  1. 前端接收响应
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)

执行过程:

  1. Gin 读取请求 Body 中的 JSON:
json 复制代码
{"title":"学Gin"}
  1. 根据结构体标签 json:"title" 匹配字段

  2. 将值 "学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 作为参数,用于接收请求、返回响应

总结

  1. JSON 是前后端通用语言,请求和响应都是 JSON
  2. c *gin.Context 是 Gin 的核心管家,负责绑定请求、返回响应
  3. 结构体标签 json:"..." 实现字段大小写翻译
  4. Body 用来传递请求数据,不在 URL
  5. 函数签名规范 :参数在括号,返回值在括号外,Gin 路由函数固定传入 c *gin.Context

理解这些概念,你就能顺畅完成前后端交互,并在 Gin 框架下处理各种请求。

相关推荐
sealaugh321 小时前
react native(学习笔记第五课) 英语打卡微应用(4)- frontend的列表展示
笔记·学习·react native
05候补工程师1 小时前
【考研线代笔记】相似对角化与实对称矩阵:判定法则、计算技巧与物理本质
笔记·线性代数·考研·矩阵
Cloud_Shy6182 小时前
Python 数据分析基础入门:《Excel Python:飞速搞定数据分析与处理》学习笔记系列(第十章 Python 驱动的 Excel 工具 下篇)
笔记·python·学习·数据分析·excel·pandas
Odedipus2 小时前
二叉树的学习笔记
数据结构·笔记·学习
会编程的土豆2 小时前
Gin 中 `c.BindJSON` 与 `c.JSON` 详细讲解
c语言·json·gin
会编程的土豆2 小时前
Gin 核心对象:`c *gin.Context` 详细解析
服务器·c语言·gin
sakiko_2 小时前
Swift/UIkit学习笔记27-模块管理,发送位置信息
前端·笔记·学习·ios·swift·uikit
神秘剑客_CN2 小时前
Ubuntu 26.04使用笔记
linux·笔记·ubuntu
ZC跨境爬虫2 小时前
跟着 MDN 学 HTML day_59:HTML表单与按钮——构建用户交互的基石
前端·javascript·ui·html·交互·媒体