Vue3 + go + axios 的前后端交互

下载

npm install axios

axios全局配置

创建一个js文件用于保存axios设置，配置文件自行搜索

在main.js中使用保存好的axios设置

```js
import axios from '@/plugins/axios'	//导入刚刚写好的axios文件

app.config.globalProperties.$axios=axios;	//配置axios的全局引用

使用

GET

• 前端

  //Login.vue
  methods: {
      loginEvent: function () {
        this.$axios.get('http://192.168.136.1:8000/login', {
          params: {
            pwd: this.pwd
          }
        })
          .then(function (response) {
            	console.log(response.status)	//对应JSON返回的第二个参数
         	})
          .catch(error => {
            console.log(error)
          })
      }
    },
  

• 后端（golang）

  func main() {
  	r := gin.Default()
  	r.GET("/login", func(c *gin.Context) {
  		pwd := c.Query("params[pwd]")
  		fmt.Println(pwd)
  		c.JSON(http.StatusOK, gin.H{"status": "successful"})
  	})
  	r.Run("192.168.136.1:8000")
  }
  

POST

• 前端

  loginEvent: function () {
      this.$axios.post('http://192.168.136.1:8000/login', {
          params: {
              pwd: this.pwd
          }
      })
          .then(function (response) {
          console.log(response.status)	//对应JSON返回的第二个参数
      })
          .catch(error => {
          console.log(error)
      })
  }
  

• 后端（golang）

  func main() {
  	r := gin.Default()
  	r.POST("/login", func(c *gin.Context) {
  		pwd := c.Query("pwd")
  		fmt.Println(pwd)
  		c.JSON(http.StatusOK, gin.H{"status": "successful"})
  	})
  	r.Run("192.168.136.1:8000")
  }
  

  • 注意：后端向传结构体的时候go语言结构体内的参数需要大写，不然拿不到