クライアントとサーバーの通信を、クライアントではaxiosを用いる例です。
ユーザーに関する情報をサーバーでデータベースに保存しておき、
ログイン後のページで、そのデータを利用して表示を変えることを想定します。
例えば次のコードを見てみます。
goファイル
var dbSessions = make(map[string]session) var dbUsers = make(map[string]user) type session struct { un string lastActivity time.Time } type user struct { // JSONに整形するため、フィールドの頭文字は大文字 UserName, First, Last, Role string Password []byte Pics []string } func main() { ... http.HandleFunc("/someFunc", someFunc) http.Handle("/favicon.ico", http.NotFoundHandler()) http.ListenAndServeTLS(":10443", "cert.pem", "key.pem", nil) } func someFunc(w http.ResponseWriter, req *http.Request) { w.Header().Set("Access-Control-Allow-Origin", "https://localhost:8081") w.Header().Set("Access-Control-Allow-Credentials", "true") // c.Valueのように、Cookieの中身にアクセスするため必要 c, _ := req.Cookie("session") s, ok := dbSessions[c.Value] if !ok { ... return } var u user u, ok = dbUsers[s.un] if !ok { ... return } bs, _ := json.Marshal(u) // JSON形式に整形する fmt.Fprint(w, string(bs)) // byte配列をstringにキャストして、クライアントへresponse } ...
ポイントは、クライアントへresponseする前に、JSON形式に整形することです。
Javascript(Vue)
const serverPass = "https://localhost:10443/" ... getInfo() { axios.get(this.serverPass + 'images' ,{withCredentials: true} // サーバーサイドでCookieの中身にアクセスするため必要 ) .then(respose => { console.log(respose.status); if (respose.data) { const data = respose.data console.log(data.UserName) // JSON形式に整形したため、フィールドへアクセスできる } }).catch(err => { this.$router.push("/") }) },
サーバーサイドからのresponse.dataを、JSON形式に整形しているため、
「.」により、フィールドにアクセスできます。
これは、サーバーから渡す値の型がstructでなく、map型である場合も同様です。
type user struct { UserName, First, Last, Role string Password []byte Pics []map[string]interface{} // 例えば、この中からmap[string]interface{}を抽出してクライアントへ渡す際 }
もっとも、[]map[string]interface{}ではなく、下記のようにすべきかもしれません。
type pic struct { ID int `json:"id"` //末尾で、JSON形式に整形した時のフィールド名を定義 Src string `json:"src"` } type user struct { UserName, First, Last, Role string Password []byte Pics []pic }
注意点として、JSON形式に整形する対象の型が構造体(struct)の場合、各フィールドの頭文字は大文字でなければなりません。
上記例のように、JSON形式に整形した時のフィールド名を小文字で定義しておいたほうが、クライアントサイドで取り扱いやすいでしょう。(この作業を行わないと、クライアントサイドでも「ID」などと指定しなければなりません。)