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

相关推荐
三品吉他手会点灯2 小时前
C语言学习笔记 - 44.运算符和表达式 - 运算符2 - 除法与取余运算符
c语言·开发语言·笔记·算法
2601_colin3 小时前
Codex插件全流程实战指南
开发语言·经验分享·笔记·微信开放平台
疯狂打码的少年3 小时前
输入输出控制方式:DMA(直接存储器存取)
网络·笔记
cuso4win4 小时前
Feed 流面试笔记
笔记·面试·职场和发展
GNG6 小时前
《终身成长》读书笔记
笔记·学习
Cloud_Shy6188 小时前
解读《Effective Python 3rd Edition》:从练气到老魔(第三章 Item 21 - 24)
开发语言·人工智能·笔记·python·迭代器模式
nnsix9 小时前
Unity HybirdCLR 简单了解 笔记
笔记
Z-D-K9 小时前
考验AI的“自我和意识“-AI对《红楼梦》后40回的改写(16)
人工智能·ai·aigc·交互·agi
handler0110 小时前
【算法】并查集(普通/扩展/带权)模板与例题
数据结构·c++·笔记·算法·c·图论·查并集
中屹指纹浏览器10 小时前
指纹浏览器环境克隆、批量派生的风控隐患剖析与标准化新建环境实操指南
经验分享·笔记