前后端分离实现 get post 请求

---

提示： 前端：vue3 后端：go 框架 gin

---

一、前端代码

1.title

axios.get('/get',{
     params:{
       id:1
     }
    }).then((res,err)=>{
   console.log(res);
 })

axios.post('/post',{
     name:"123",
     "pass":"213213"
   }).then((res,err)=>{
  console.log(res);
})

2.title

axios.defaults.baseURL = 'http://127.0.0.1:8080';

二、golang gin 后端

1.初始化 下载gin 并运行

1.创建main.go文件

package main

import "github.com/gin-gonic/gin"
r := gin.Default()
func main() {
	
	r.Run(":8080") // 监听并在 0.0.0.0:8080 上启动服务
}

2.安装gin

1.初始化包

go mod init  packageName

2.下载所需要的包内容

go mod tidy

3.执行

go run main.go

http://127.0.0.1:8080/ping // 即可访问

2，Get 请求

r.GET("/get", func(c *gin.Context) {
		name := c.Query("name")
		fmt.Println(name)  //前端传过来的值
		c.JSON(200, gin.H{"test": gin.H{"data": name}, "test1": gin.H{"data": name}}) 		//可以多层嵌套
	})

3，Post请求

// 定义被绑定的结构体    结构体（Name） 首字母大写
type user struct {
	Name  string
	Age   int
}

r.POST("/post1", func(c *gin.Context) {
		user1 := &user{}  //使用结构体 user
		err := c.BindJSON(&user1)  // 扫描前端的值 并 赋给 &user1
		if err != nil {
			c.JSON(500, gin.H{"err": err})
		}
		c.JSON(200, gin.H{"return": user1})
})

三，跨域问题

func Cors() gin.HandlerFunc {
	return func(c *gin.Context) {
		method := c.Request.Method
		c.Header("Access-Control-Allow-Origin", "*")                                                     // 可将将 * 替换为指定的域名
		c.Header("Access-Control-Allow-Headers", "Content-Type,AccessToken,X-CSRF-Token, Authorization") //你想放行的header也可以在后面自行添加
		c.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE, UPDATE")              //我自己只使用 get post 所以只放行它
		c.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers, Content-Type")
		c.Header("Access-Control-Allow-Credentials", "true")

		// 放行所有OPTIONS方法
		if method == "OPTIONS" {
			c.AbortWithStatus(http.StatusNoContent)
		}
		// 处理请求
		c.Next()
	}
}

func main() {
	r.Use(Cors()) //开启中间件 允许使用跨域请求  在第一行
}

--------------容易遇到的问题--------------

axios.post(‘/post’

/ ：问题

放回 JSON 值

c.JSON(200, gin.H{"return": param})