Enjoy your life

AEnjoy’s Blog

axios发送简单POST请求，Gin简单处理

自己在写一个项目，目前遇到的问题是：根据csdn和axios官网的说明，发送简单POST请求的时候，后端可能没办法正确处理数据，浅浅记录一下解决方案。

传递类型对比

即key:value 键值对，不使用JSON封装

类似于get请求，可以很简单的从命令行中看出key:value

我们进行下对比

curl发送对比

1.简单POST

curl http://localhost:8088/api/auth/signin -X POST -d ‘username=admin&password=passwords’

2.简单GET

curl “http://localhost:8088/api/auth/signin?username=admin&password=passwords“

3.JSON型POST

curl -X POST -H “Content-Type: application/json” http://localhost:8088/api/auth/signin -d ‘{“username”:”admin”,”password”:”passwords”}’

接收端对比

1.处理简单POST请求

1
2
3
4
5
6
7
8
9
10
11
func method(context *gin.Context) {
	if global.IsCookieAuthValid(context) { //防止反复登录授权
		//context.String(http.StatusOK, "ok")
		context.String(http.StatusOK, "Verified")
		return
	}
	//println(context.Request.Body)
	un := context.PostForm("username")
	pw := context.PostForm("password")
    //Code
}

2.处理简单GET请求

1
2
3
4
5
6
7
8
9
10
func method(context *gin.Context) {
	if global.IsCookieAuthValid(context) { //防止反复登录授权
		//context.String(http.StatusOK, "ok")
		context.Redirect(302, "/dashboard")
		return
	}
	un := context.DefaultQuery("username", "")
	pw := context.DefaultQuery("password", "")
	//Code
}

可以发现 简单方法获取参数都是一行代码的事，比较简单

而

3.JSON数据处理…

1
2
3
4
5
6
7
8
9
10
11
12
13
func method(context *gin.Context) {
	if global.IsCookieAuthValid(context) { //防止反复登录授权
		//context.String(http.StatusOK, "ok")
		context.Redirect(302, "/dashboard")
		return
	}    
	json := make(map[string]interface{}) //注意该结构接受的内容
	context.BindJSON(&json)
    un := json["username"]
	pw := json["password"]
    //Code
   
}

好吧 也还算简单，但是我们想实现简单的数据传递，而根据axios官网的数据传递方法：

1
2
3
4
5
6
7
8
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

这种传递方法会使传递的值后端想进行简单处理是不行的，后端没办法获取到数据，或者直接线程panic了，返回500。

解决

我们需要使用标准的JavaScript方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
login(formName) {
      console.log(formName)
      var params = new URLSearchParams();
      params.append('username', formName.name);//标准简单请求参数
      params.append('password', formName.password);//标准简单请求参数
      axios.post('/api/api/auth/signin', params).then(response => {
        if (response.status == 200) {
          goRouter({ name: 'Dashboard' });
          //ok
        } else if (response.status == 401) {
          ElMessageBox.alert("用户名或密码错误", "登录失败", {})
        }
      }, error => {
        console.log('E', error.message)
      })
    }

问题解决，后端可以按（1.）正常获取数据。

或者转换为标准json，按（3.）处理

vuegolang全栈笔记