2018/03/30

Recent entries from same category

  1. golang の html/template でレイアウトを扱う方法
  2. Go言語で ping を打って「にゃーん」を表示させる
  3. goroutine でドハマリした。
  4. IP アドレスからレンジを引いて CIDR 形式で表示するツールを作った。
  5. gRPC を使ったファイル転送ツール作った。

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 サーバであれば何でもいい。

Task管理アプリ

作った物はここに置いた。

GitHub - mattn/go-vue-example
https://github.com/mattn/go-vue-example

個人的な思いとしては Element にもう少し便利な UI が増えてくれればなぁと思う。

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
山田 祥寛
技術評論社 / ¥ 2,800 (2016-09-30)
 
発送可能時間:在庫あり。


blog comments powered by Disqus