Edited at

Go + echoでfetch APIを使ってPOSTする

More than 1 year has passed since last update.

今回作ったのはfetch APIを使ってPOSTしたデータを再度受け取るという簡単なもので、バリデートなどは入れていません。

基本的にはEchoの公式サイトを見ながら進めました。

https://echo.labstack.com/


作ったもの

イメージはこんな感じです。

qiita-go-echo.gif

├── template

│   └── index.html
└── server.go


sever.go

package main

import (
"net/http"
"github.com/labstack/echo"
"io"
"text/template"
"github.com/labstack/echo/middleware"
)

type Template struct {
templates *template.Template
}

func (t *Template) Render(w io.Writer, name string, data interface{}, c echo.Context) error {
return t.templates.ExecuteTemplate(w, name, data)
}

func main() {
e := echo.New()
e.Use(middleware.Logger())
e.Use(middleware.Recover())
t := &Template{
templates: template.Must(template.ParseGlob("template/*.html")),
}
e.Renderer = t
e.GET("/", rootHandler)
e.POST("/signup", PostHandler)
e.Logger.Fatal(e.Start(":1323"))
}

func rootHandler(c echo.Context) error {
return c.Render(http.StatusOK, "index", nil)
}

type User struct {
Name string `json:"name"`
Mail string `json:"mail"`
Password string `json:"password"`
}

func PostHandler(c echo.Context) error {
post := new(User)
if err := c.Bind(post); err != nil {
return err
}
return c.JSON(http.StatusCreated, post)
}



index.html

{{define "index"}}

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>post</title>
</head>
<body>
<div id="content"></div>
NAME : <input type="text" id="js-store-name"><br>
MAIL : <input type="email" id="js-store-mail"><br>
PASS : <input type="password" id="js-store-password"><br>
<button id="js-submit">submit</button>
<script>
const submit = document.getElementById("js-submit");
submit.addEventListener("click", () => {
const name = document.getElementById("js-store-name").value;
const mail = document.getElementById("js-store-mail").value;
const password = document.getElementById("js-store-password").value;
fetch(`/signup`, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
name,
mail,
password
})
}).then((response) => {
return response.json();
}).then((res) => {
document.getElementById('content').innerHTML = `
name:
${res.name}<br>
Mail:
${res.mail}<br>
PASSWORD:
${res.password}<br>`;
});
});
</script>
</body>
</html>
{{end}}


まとめ

すごく簡単にできました。

Echo自体がシンプルなフレームワークなので、とても使いやすいと感じました。

次はDBに接続しようかなと思います。