Vue.jsからaxiosでGoにパラメータ渡せなくてつまり続けたが、Echo導入したら即解決した

Vueで入力された値をJson形式でGoに渡して処理をさせたかった。
うまい感じに渡せず、詰まったがEcho導入したら即解決した。

やりたいこと

• VueからPost（非同期）でパラメータを渡して、Goで処理をさせたい。
  • とりあえず、Axiosで送信したparamsがGoで受け取れていることを確認したい。

VueとAxios

あるボタン押下時にtestを実行して、data1とdata2をjson形式でpostする。
Goの処理結果をconsoleに表示する。

axiosはpost時、以下のように渡せば自動的にjson形式にしてくれるらしい。

vue.js(一部抜粋)

<script>

export default {
  name: 'SqlGenerater',
  data() {
    return {
      data1:'1',
      data2:'2',
    }
  },
  methods:{
    test(){
      let params= {
        data1: this.data1,
        data2: this.data2,
      }
      this.$axios.get('/api',{ params: params })
      .then(response => {
        console.log(response.data)
      })
    }
  }
}
</script>

Go(Echo)

Echo公式のrequestにかなりわかりやすく書いてある。
下記のようにすれば自動でバインドできるみたい。すごく便利ぃ

main.go

package main

import (
	"net/http"

	"github.com/labstack/echo"
)

type Test struct {
	Data1  string `json:"data1" form:"data1" query:"data1"`
	Data2  string `json:"data2" form:"data2" query:"data2"`
}

func main() {
	e := echo.New()
	e.GET("/", index)
	e.Logger.Fatal(e.Start(":8081"))
}

func index(c echo.Context) (err error) {
	t := new(Test)
	if err = c.Bind(t); err != nil {
		return
	}
	return c.JSON(http.StatusOK, t)
}

実行したら、ちゃんと取れてることが確認できた。

console

{data1: "1", data2: "2"}

ありがとうEcho