【学習記録】DRFとVueでTodoアプリ作成3

この記事の続きです。

programming-gogogogo.hatenablog.com

Django REST framework(DRF)とVue.jsでTodoリストを作っていきます。
こちらの動画を参考にしています。

www.youtube.com

前回まででバックエンドの実装はできているので、今回はフロントエンドの実装を行います。

フロントエンドのsrc/views/Home.vueを以下のように変更します。

<template>
  <div class="home">
    <h1 class="title">Vuengo</h1>
    <hr>
    <div class="columns">
      <div class="column is-3 is-offset-3">
        <form>
          <h2 class="subtitle">Add Task</h2>

          <div class="field">
            <label class=label>Description</label>
            <div class="control">
              <input class="input" type="text">
            </div>
          </div>

          <div class="field">
            <label class="label">Status</label>
            <div class="control">
              <div class="select">
                <select>
                  <option value="todo">To do</option>
                  <option value="done">Done</option>
                </select>
              </div>
            </div>
          </div>

          <div class="field">
            <div class="control">
              <button class="button is-link">Submit</button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <div class="columns">
      <div class="column is-6">
        <h2 class="subtitle">Todo</h2>
        <div class="todo">
          <div class="catd">
            <div class="card-content">
              Task description
            </div>
            <footer class="card-footer">
              <a class="card-footer-item">Done</a>
            </footer>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {

    }
  }
}
</script>

<style lang="scss">
.select, select {
  width: 100%;
}

.card {
  margin-bottom: 20px;
}

.done {
  opacity: 0.3;
}
</style>

ブラウザにアクセスして確認すると画面は以下のようになっていました。

f:id:JunpeiNakasone:20210405070155p:plain

次にバックエンドからデータを受け取るためにコードを加えます。

<template>
  <div class="home">
    <h1 class="title">Vuengo</h1>
    <hr>
    <div class="columns">
      <div class="column is-3 is-offset-3">
        <form>
          <h2 class="subtitle">Add Task</h2>

          <div class="field">
            <label class=label>Description</label>
            <div class="control">
              <input class="input" type="text">
            </div>
          </div>

          <div class="field">
            <label class="label">Status</label>
            <div class="control">
              <div class="select">
                <select>
                  <option value="todo">To do</option>
                  <option value="done">Done</option>
                </select>
              </div>
            </div>
          </div>

          <div class="field">
            <div class="control">
              <button class="button is-link">Submit</button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <div class="columns">
      <div class="column is-6">
        <h2 class="subtitle">Todo</h2>
        <div class="todo">
          <div class="catd" v-for="task in tasks" v-bind:key="task.id">
            <div v-if="task.status == 'todo'">
              <div class="card-content">
              {{ task.description}}
            </div>
            </div>

            <footer class="card-footer">
              <a class="card-footer-item">Done</a>
            </footer>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import axios from 'axios'

export default {
  name: 'Home',
  data () {
    return {
      tasks: []
    }
  },
  mounted () {
    this.getTasks()
  },
  methods: {
    getTasks() {
      axios({
        method: 'get',
        url: 'http://127.0.0.1:8000/tasks/',
        auth: {
          username: 'admin',
          password: 'admin'
        }
      }).then(response => this.tasks = response.data
      )
    }
  }
}
</script>

<style lang="scss">
.select, select {
  width: 100%;
}

.card {
  margin-bottom: 20px;
}

.done {
  opacity: 0.3;
}
</style>

ブラウザにアクセスするとまだ見た目は整っていませんがバックエンドからデータを受け取れているのが確認できました。
f:id:JunpeiNakasone:20210405214519p:plain

次回はTODOタスクの新規追加機能などを実装します。