golang gin 框架+Vue 实现 get／post 请求

最新推荐文章于 2025-03-20 14:59:20 发布

楊帥

最新推荐文章于 2025-03-20 14:59:20 发布

阅读量2.3k

点赞数 1

分类专栏： ----------Golang---------- Vue 文章标签： golang gin vue get post

本文链接：https://blog.youkuaiyun.com/yangshuaionline/article/details/104000317

版权

Vue 同时被 2 个专栏收录

15 篇文章

订阅专栏

----------Golang----------

3 篇文章

订阅专栏

本文详细介绍了如何结合Golang Gin框架和Vue.js，在前端和后端分别实现GET和POST请求。首先展示了Vue的请求代码，接着是Gin处理GET请求的示例，最后讲解了处理POST请求的实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 前端 vue 代码

    axios
        //.post("http://localhost:8888/ping", {
        .get("http://localhost:8888/ping", {
          params: {
            name: this.input_name,
            sex: this.input_sex
          }
        })
        .then(res => {
          console.log(res);
        })
        .catch(error => {
          console.log("网络请求错误", error);
        });
    }

2. 服务端 get 请求代码

  r := gin.Default()
	r.GET("/ping", func(c *gin.Context) {
		name := c.Query("name")
		sex := c.Query("sex")
		fmt.Printf("name: %s; sex: %s", name, sex)
	})
  r.Run(":8888")

3. 服务端 post 请求代码

post请求需要考虑跨域问题


func main() {
	r := gin.Default()
	r.Use(Cors())
	r.POST("/ping", func(c *gin.Context) {
		buf := make([]byte, 1024)
		n, _ := c.Request.Body.Read(buf)
		c.Request.Body = ioutil.NopCloser(bytes.NewReader(buf[:n]))
		j := buf[0:n]
		fmt.Println("body:", string(j)) //获取到post传递过来的数据

		var message Message
		err := json.Unmarshal(j, &message)
		if err != nil {
			fmt.Println("====>", err)
			return
		}
		fmt.Println("====>" + message.Name)

	})
	r.Run(":8888")
}

//Cors 处理跨域请求,支持options访问
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, Token")
		c.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS")
		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()
	}
}