質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Go

Go(golang)は、Googleで開発されたオープンソースのプログラミング言語です。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

1回答

718閲覧

VueからaxiosでGoにjsonを渡したいのですが、うまくいきません。

takuya_atsugi

総合スコア10

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Go

Go(golang)は、Googleで開発されたオープンソースのプログラミング言語です。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2020/06/17 08:09

やりたいこと

Vueからaxiosを使って、goサーバーにjson形式のデータを投げたい。
(goでjsonを受け取りたい)
とりあえず、responseとしてjsonのデータの一部でも良いから返したい。

確認できていること

response返ってきているので、通信はできている。
dataが空で返ってきてしまっているので、取得方法が間違っているのかな、と。

質問者のレベル

Go初心者。
他サーバーサイド言語1年〜。
フロントはお初。
なんか話題になっているし、職場でも使う!
みたいな話があるのでやってみよう!って感じではじめた

###コード

  • vue

main.vue

1<script> 2export default { 3 name: 'SqlGenerater', 4 data() { 5 return { 6 columns:[ 7 {column_name: 'name', column_type: '1'} 8 ] 9 } 10 }, 11 methods:{ 12 test(){ 13 this.$axios.post('/api',{columns:this.columns}) 14 .then(response => { 15 console.log(response) 16 }) 17 this.generated_sql = sql; 18 }, 19 } 20} 21 22</script>
  • go
package main import ( "fmt" "net/http" ) func main() { http.HandleFunc("/", index) http.ListenAndServe(":8081", nil) } func index(w http.ResponseWriter, r *http.Request) { ColumnData := r.FormValue("column_data") fmt.Fprintf(w, ColumnData) }

妄想

  • fmt.Fprintfではjson形式のものを返せない?

ColumnDataの値を"test"に変更するとresponse.dataがtestになる。

  • Form値の受け取り方が間違えている?

そもそも間違えているから受け取れていない?

  • axiosのpostは、パラメータをjson形式にしてしまうからややこしい感じになってる?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

自分もgo触りたてでわからんけどFormValueでとれないんじゃないの?調べたらr.Bodyで取ってる感。

go

1func index(w http.ResponseWriter, r *http.Request) { 2 w.Header().Set("Content-Type", "application/json") 3 fmt.Fprint(w, `{"message": "OK"}`) 4}

とりあえずこれで実験してみたら?

未検証だけど適当に吐いてみるとか

go

1import ( 2 "encoding/json" 3 "fmt" 4 "io/ioutil" 5 "net/http" 6) 7 8func index(w http.ResponseWriter, r *http.Request) 9 body, err := ioutil.ReadAll(req.Body) 10 if err != nil { 11 log.Fatal(err) 12 } 13 14 fmt.Println("[request body row] " + string(body)) 15 w.Header().Set("Content-Type", "application/json") 16 fmt.Fprint(w, `{"message": "OK"}`) 17 // ぶちこめるのかはわからん 18 // fmt.Fprint(w, string(body)) 19}

投稿2020/06/17 11:04

sousuke

総合スコア3828

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takuya_atsugi

2020/06/18 05:35 編集

レスポンス遅くなって、すみません。 いただいたコードだと動かなかったです、 echo導入してみたら動きました(開発で動くが、本番として考えているGKEでは動かずエラーも出ないのにデーモンは起動) コードはこんな感じです。 - vue ``` <script> export default { name: 'SqlGenerater', data() { return { columns:[ {column_name: 'name', column_type: '1'} ] } }, methods:{ test(){ this.$axios.post('/api',{params:{columns:this.columns}}) .then(response => { console.log(response) }) this.generated_sql = sql; }, } } </script> ``` - go ``` package main import ( "net/http" "github.com/labstack/echo" ) type CreateSqlFormData struct { TableName string `json:"table_name" form:"table_name" query:"table_name"` DataNum string `json:"data_num" form:"data_num" query:"data_num"` ColumnData string `json:"column_data" form:"column_data" query:"column_data"` } func main() { e := echo.New() initRouting(e) e.Logger.Fatal(e.Start(":8081")) } func initRouting(e *echo.Echo) { e.GET("/", index) } func index(c echo.Context) (err error) { s := new(CreateSqlFormData) if err = c.Bind(s); err != nil { return } return c.JSON(http.StatusOK, s) } ``` structにformとかjsonで渡されたデータをいれるだけで、echo導入前とやってることあんまり変わらない気が...(goを知らないだけ) とりあえず、formの受け取り確認できたので閉じます〜、ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問