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 框架下处理各种请求。

相关推荐
LinXunFeng7 天前
Obsidian - 使用 Share Note 分享笔记并自部署
前端·笔记·github
闪闪发亮的小星星11 天前
高斯光以及高斯光公式解释
笔记
cqbzcsq11 天前
CellFlow虚拟细胞论文阅读
论文阅读·人工智能·笔记·学习·生物信息
北极星日淘11 天前
前端 i18n 中日双语交互 + 翻译客服接口联动方案|日系海淘平台中文友好化开发实战
前端·交互
阿米亚波11 天前
【Windows】QEMU 启动 openEuler aarch64/arm64 架构系统 + 离线软件源
linux·windows·经验分享·笔记·架构·arm
自传.11 天前
尚硅谷 Vibe Coding|第三章(1) Claude Code深度使用与进阶技巧 学习笔记
笔记·学习·尚硅谷·vibecoding
.千余11 天前
【C++】模板进阶全解:非类型参数|全特化|偏特化|分离编译完全指南
开发语言·c++·笔记·学习·其他
自传.12 天前
尚硅谷 Vibe Coding|第二章 AI编程工具生态 学习笔记
笔记·学习·ai编程·尚硅谷·vibe coding
秋波。未央12 天前
Java Agent 开发 · Day 1 学习笔记(含作业完整标准答案)
java·笔记·学习
UXbot12 天前
帮助企业低门槛开展AI应用开发的平台推荐
前端·低代码·ui·交互·产品经理·原型模式·web app