Vue.jsでtrelloのアーカイブを取得・表示する【Vue.js,axios,trello】

Vue.js

trelloのアーカイブにしたものを確認するサイト及びpower upが見つからなかったので，確認できるものを作ってみました

デモ画像

privateな情報も入っているのでぼかしています f:id:ka1357amnbpdr:20200410014556p:plain

開発環境

  • Vue : 2.6.11
  • moment.js :2.24.0
  • node.js :v12.14.1
  • axios: 0.19.2
  • semantic UI: 2.4.1

    実装内容

    サーバーを書かずにvueの中だけでできたので，ちょっと驚きです．． twitterの場合と同じだと思ってました

trelloからはaxiosを使って情報を取得しています． 日付はmoment.jsで見やすくしています

コード

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- semantic.css  -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Home.vue

<template>
  <div class="home">
    <table class="ui celled table">
      <thead>
        <tr>
          <th>内容</th>
          <th>実行日</th>
          <!-- <th>リスト名</th>
          <th>ボード名</th> -->
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in data" :key="index">
          <td>{{item.name}}</td>
          <td>{{setTime(item.dateLastActivity)}}</td>
          <!-- <td>{{item.idList}}</td>
          <td>{{changeIdToBoardName(item.idBoard)}}</td> -->
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios'
import moment from 'moment'

export default {
  name: 'Home',
  components: {
  },
  data () {
    return {
      client: null,
      data: null,
      boardIds: [],
      key: 'your key',
      token: 'your token',
      boardId: '取得したいboard Id'
    }
  },
  created () {
    this.client = axios.create({
      baseURL: 'https://api.trello.com/1/boards'
    })
    this.getBoards()
  },
  mounted () {
    this.client.get(this.boardId + '/cards/closed', {
      params: {
        key: this.key,
        token: this.token
      }
    }).then((response) => {
      // this.data.dateLastActivity = new Date(response.data.dateLastActivity)
      this.data = response.data
    }).catch((error) => {
      console.log(error)
    })
  },
  methods: {
    getBoards () {
      axios.get('https://api.trello.com/1/members/me/boards', {
        params: {
          key: this.key,
          token: this.token
        }
      }).then((response) => {
        response.data.forEach(item => {
          this.boardIds.push({
            id: item.shortLink,
            name: item.name
          })
        })
      }).catch((error) => {
        console.log(error.response)
      })
    },
    changeIdToBoardName (id) {
      this.boardIds.forEach(item => {
        console.log(id + ',' + item.id)
        if (id === item[0]) {
          return item[1]
        } else {
          return null
        }
      })
    },
    setTime (time) {
      moment.locale('jp')
      return moment(time).format('YYYY年MM月DD日 HH:mm')
    }
  }
}
</script>

参考サイト

www.utakata.work

www.utakata.work