Go と Vue.js を使ってどれくらいシームレスにウェブアプリを作れるかを確認したかったのでタスク管理アプリを作ってみた。サーバは Go なので vue-cli や webpack 等は使わない。全て CDN から。Vue.js でアプリのベースを、UI コンポーネントとして Element、Ajax ライブラリとして axios を使った。
以前、Riot.js を使って Todo アプリを作った時はサーバ作るのにも少し時間が掛かったので、今回は横着して echo-scaffold を使った。
GitHub - mattn/echo-scaffold
README.md Echo Scaffold Echo Scaffold is CLI to generate scaffolds for the echo framework.
https://github.com/mattn/echo-scaffold
echo-scaffold を使えば、タスク管理アプリとして必要な「本文」と「実施済み」という属性をモデルにした REST サーバを簡単に作る事が出来る。
$ echo-scaffold init go-vue-example
create /home/mattn/go/src/github.com/mattn/go-vue-example/helpers/database.go
create /home/mattn/go/src/github.com/mattn/go-vue-example/helpers/errors.go
create /home/mattn/go/src/github.com/mattn/go-vue-example/helpers/response.go
create /home/mattn/go/src/github.com/mattn/go-vue-example/config/database.go
create /home/mattn/go/src/github.com/mattn/go-vue-example/config/environment.go
create /home/mattn/go/src/github.com/mattn/go-vue-example/controllers/router.go
create /home/mattn/go/src/github.com/mattn/go-vue-example/controllers/suite_test.go
create /home/mattn/go/src/github.com/mattn/go-vue-example/go-vue-example.go
$ cd go-vue-example
$ echo-scaffold scaffold task body:string done:bool
create models/task.go
create models/task_dbsession.go
create controllers/tasks.go
create controllers/tasks_helpers.go
create controllers/suite_test.go
skip controllers/suite_test.go
insert controllers/router.go
モデルとコントローラ、コンフィグや mongodb へのアクセスも生成される。生成された main 関数に少し手を入れて静的ファイルをサーブ出来る様にする。js 側のモデルとのバインディングを書く。
<div id="app">
<el-main v-loading="loading">
<h2>My Tasks</h2>
<el-input placeholder="Please input your task" v-model="newTask" v-on:change="addTask()"></el-input>
<ul class="list-group">
<li class="list-group-item" v-for="task in tasks">
<el-checkbox :checked="task.done" v-on:change="doneTask(task)">{{ task.body }}</el-checkbox>
</li>
</ul>
</el-main>
</div>
<script src="/static/app.js"></script>
app.js はこんな感じ。
ELEMENT.locale(ELEMENT.lang.ja)
var app = new Vue({
el: '#app',
data: {
tasks: [],
newTask: "",
loading: false,
},
created: function() {
this.loading = true;
axios.get('/tasks')
.then((response) => {
console.log(response);
this.tasks = response.data.items || [];
this.loading = false;
})
.catch((error) => {
console.log(error);
this.loading = false;
});
},
methods: {
addTask: function(task) {
this.loading = true;
let params = new URLSearchParams();
params.append('body', this.newTask);
params.append('done', false);
axios.post('/tasks', params)
.then((response) => {
this.loading = false;
this.tasks.unshift(response.data);
this.newTask = "";
this.loading = false;
})
.catch((error) => {
console.log(error);
this.loading = false;
});
},
doneTask: function(task) {
this.loading = true;
let params = new URLSearchParams();
params.append('done', !task.done);
axios.put('/tasks/' + task.id, params)
.then((response) => {
console.log(response);
this.loading = false;
})
.catch((error) => {
console.log(error);
this.loading = false;
});
}
}
})
これだけで簡単にタスク管理アプリが書ける。Vue.js 便利やね。echo-scaffold で生成したコードを一切触ってないし、動作確認は MongoDB Atlas を使ったので、実際の作業は echo-scaffold の実行とフロントエンドのコードを書いたくらい。Element 超良いし axios も良いし、この3点あればだいたいのアプリは作れる。サーバは JSON が吐ける REST サーバであれば何でもいい。
作った物はここに置いた。
GitHub - mattn/go-vue-example
https://github.com/mattn/go-vue-example
個人的な思いとしては Element にもう少し便利な UI が増えてくれればなぁと思う。
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
