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

今回作ったのはfetch APIを使ってPOSTしたデータを再度受け取るという簡単なもので、バリデートなどは入れていません。
基本的にはEchoの公式サイトを見ながら進めました。
https://echo.labstack.com/

作ったもの

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

├── 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に接続しようかなと思います。