EchoとVue.jsでCRUDを、、、、作りかけた

EchoとVue.jsを使いTodoをCRUDするサンプルを作り始めました。
「始めました」と書いているのは、サーバ側のCRUDは実装したのですが
クライアント側は一覧の表示だけしか実装していないからです。

まあ、EchoとVue.jsを組み合わせたサンプルの一つにはなるかと思います。

アプリについて

サーバ側はCRUDのAPIを作成してあります。クライアント側はReadのAPIを叩き、取得した一覧を表示しています。
以下、APIのcurlと、画面です。

curl

create

$ curl -v -H "Accept: application/json" -H "Content-type: application/json" -X POST -d "{\"name\":\"programming\"}"  http://localhost:8080/todos

update

$ curl -v -H "Accept: application/json" -H "Content-type: application/json" -X PUT -d "{\"name\":\"trainning\"}"  http://localhost:8080/todos/1

select

$ curl http://localhost:8080/todos

$ curl http://localhost:8080/todos/1

delete

$ curl -v -H "Accept: application/json" -H "Content-type: application/json" -X DELETE http://localhost:8080/todos/1

HTML

ブラウザで「http://localhost:8080/」を表示。

「Show Todos!」ボタンを押下。

ソースについて

以下のmainが一番特徴を表しているかと思います。

package main

import (
	"github.com/SrcHndWng/go-todo-echo-sample/handlers"
	"github.com/labstack/echo"
)

func main() {
	e := echo.New()
	e.File("/", "templates/index.html")
	e.POST("/todos", handlers.CreateTodo)
	e.GET("/todos", handlers.GetTodos)
	e.GET("/todos/:id", handlers.GetTodo)
	e.PUT("/todos/:id", handlers.UpdateTodo)
	e.DELETE("/todos/:id", handlers.DeleteTodo)
	e.Logger.Fatal(e.Start(":8080"))
}

URL毎の動きがここに書かれています。
ルートURLでアクセスが来るとtemplates/index.htmlを返却しています。
/todos配下にGet・Postなどの要求が来ると、それぞれに応じたメソッドを実行しており、これがAPIとしての動きとなります。

今回作成したソースについては以下に格納してあります。
GitHub - SrcHndWng/go-todo-echo-sample