Golang + Echo + Vue.js でSPA
- 作ります。本当に導入の導入部分だけ実装します。
-
cotch-io/go-echo-vue-single-page-app このリポジトリをみて参考にしたのですが、ajaxに推奨されていない
vue-resourceを使用している + バージョンが古いので、
フォークしてaxiosを使用するように書き換え + めちゃくちゃ簡素化したものを解説します。 - めんどくさいのでDBはつなぎません。バックエンドとフロントエンドのつなぎ込みだけです
- フォークしたリポジトリに修正分をコミットして、それをベースに解説していきます。
- リポジトリ -> https://github.com/ShingoYadomoto/go-echo-vue-single-page-app
簡素化
コミットはこれ↓
https://github.com/ShingoYadomoto/go-echo-vue-single-page-app/commit/efed92735ffeeccdab93667247a7e1e0b8f7cb2b
☆以下解説です☆
main
func main() {
e := echo.New()
e.File("/", "public/index.html")
e.GET("/tasks", handlers.GetTasks)
e.Start(":8080")
}
そのまんまですが、
http://localhost:8080/ にアクセスするとpublic/index.htmlを返し、
http://localhost:8080/tasks にアクセスすると、handlers.GetTasks()を叩くWebサーバーを起動
model
// Task is a struct containing Task data
type Task struct {
ID int `json:"id"`
Name string `json:"name"`
}
// TaskCollection is collection of Tasks
type TaskCollection struct {
Tasks []Task `json:"items"`
}
// GetTasks
func GetTasks() (tc TaskCollection) {
tc = TaskCollection{
[]Task{
{1, "洗濯"},
{2, "掃除"},
},
}
return
}
Task, TaskCollectionの定義、
GetTasks()は、適当な値が入ってるTaskCollectionを返す
handler
// GetTasks endpoint
func GetTasks(c echo.Context) error {
return c.JSON(http.StatusOK, models.GetTasks())
}
単純です。上のmodels.GetTasks()を叩いて、models.TaskCollectionをjson形式でレスポンスとして返します。
index.html
<html>
<head>
<!-- Vue.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.7.0/vue-resource.min.js"></script>
</head>
<body>
<div>
<h1>Hello Vue.js</h1>
<button v-on:click="showTask">タスクを表示する。</button>
<ul>
<li v-for="task in tasks">
{{ task.name }}
</li>
</ul>
</div>
<script>
new Vue({
el: 'body',
data: {
tasks: [],
},
methods: {
showTask: function() {
// Use the vue-resource $http client to fetch data from the /tasks route
this.$http.get('/tasks').then(function(response) {
this.tasks = response.data.items ? response.data.items : []
})
},
}
})
</script>
</body>
</html>
go run todo.go をターミナルで叩いて、ブラウザでhttp://localhost:8080にアクセスすると
こんな感じになると思います。
そして、タスクを表示する。を押すと、
こうなるはず。これだけでなんちゃってSPAです。
以下はリファクタに近いですが念のため
Vue.jsのバージョンを新しく(2.5.13) + ajaxにaxiosを使用
コミットはこれ↓
https://github.com/ShingoYadomoto/go-echo-vue-single-page-app/commit/515215733df732422e3d7ab724a421e23954bbdb
☆以下解説です☆
読み込みscriptタグの変更
- <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.7.0/vue-resource.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
+ <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
vueのバージョンあげました。バージョンの数字を変えただけでなくcdnのドメインも変わってるか新しくなっているみたいです。
vue-resourece -> axios に変更しました。 vue-resource は、使用できないわけではないらしいですが、本家推奨ではなくなったらしいので変えておきましょう。
elementの変更
- el: 'body',
+ el: '#top',
これはシンプルにbodyタグ(確かhtmlタグも)にはelementとしてマウントできなくなったみたいです(warningかも)
あやふやですいません、、 すぐ試せると思うので、ご自身で試してみてください。
メソッドの変更
- this.$http.get('/tasks').then(function(response) {
- this.tasks = response.data.items ? response.data.items : []
- })
+ axios.get('/tasks').then(res => {
+ this.tasks = res.data.items || [];
+ }).catch(function (error) {
+ console.log(error);
+ });
vue-resourece -> axios の変更に伴う修正です。
書き換えた後は例外処理も含めているので、それがなければ実際はほぼ同じようなもんですね。
以上です
こんな簡単にSPAの仕組みを作れるなんて！
SPAとかむずそうって人はこの記事くらいなら動かせると思うので、きっかけとして利用して下さい！
ありがとうございました。