kz’s blog

興味のあることについて書いていきます。

Vue UI を使ってユーザ管理機能を作る①

バージョン確認

$ node -v
v10.6.0

$ npm -v
6.1.0

$ vue --version
3.0.0-rc.7

vue のバージョンは 3.0 以上にしておいて下さい。

プロジェクト作成

  • プリセットは「手動」にします。 f:id:kz62:20180814223839p:plain

  • 機能で「Router」「Vuex」を ON にします。 f:id:kz62:20180814223902p:plain

  • 設定の ESLint は適当に(筆者も違いはよく分かってません笑)

  • 最後にプリセットを保存するか聞かれますが気にせず保存しないで進みます。

  • プロジェクトの作成が終わってアプリを起動、画面を確認できたらいよいよソースコードの修正に入ります。

ユーザ管理機能の構成

  • 「ホーム ー ユーザ管理 ー ユーザ編集」のような構成にします。

  • また、今回は API でのデータ取得は行わないので、Vuex を使用してデータを管理していきます。

ユーザ管理の作成

プロジェクト作成が終わった段階で、Router(Vue Router)をインストールしているので、最初から2画面構成になっています。 2画面目の About.vue をユーザ管理画面に修正してしまいます。

ファイル名変更

src/views/About.vue → UserList.vue
  • 変更するとエラーが出るので、src/router.js を修正します。
src/router.js

// 修正前
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
// 修正後
component: () => import(/* webpackChunkName: "about" */ './views/UserList.vue')

パスの変更

  • アクセスする URL が /about になってしまっているのでそれっぽく修正します。name もついでに変えておきます。
src/router.js

// 修正前
path: '/about',
name: 'about',
// 修正後
path: '/user',
name: 'user',
  • ホームにある About リンクにアクセスできなくなるのでアクセスできるように修正します。
src/App.vue

// 修正前
<router-link to="/about">About</router-link>
// 修正後
<router-link to="/user">ユーザ管理</router-link>
  • これで About リンクが ユーザ管理に変更され、ページ遷移ができるようになります。

ユーザデータの作成

本来 API を介してデータを取得して表示を行いたいのですが、今回は API を用意していないので、Vuex の機能を利用して擬似的にデータベースの役割をさせることとします。

Vuex をインストールしているので src/store.js というファイルが作成されているのでこれを修正します。

src/store.js

// 修正前
  state: {

  },
// 修正後
  state: {
    users: [
      { id: 1, name: 'tanaka', created_at: new Date(), updated_at: new Date() },
      { id: 2, name: 'satou', created_at: new Date(), updated_at: new Date() }
    ]
  },

state にデータを定義することで、どの画面でもデータを共有して使用することができるようになります。

ユーザを一覧で表示

  • 先ほど作成したデータをユーザ管理画面から使用できるように script を追加します。
src/views/UserList.vue

<script>
export default {
  data () {
    return {
      users: this.$store.state.users
    }
  }
}
</script>
  • ユーザの一覧を表示できるように tempate を修正します。(ごっそり上書いちゃって下さい)
src/views/UserList.vue

<template>
  <div>
    <h1>ユーザ管理</h1>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>名前</th>
          <th>登録日時</th>
          <th>更新日時</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(user, index) in users" :key="index">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.created_at }}</td>
          <td>{{ user.updated_at }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

確認

以上でユーザの一覧を表示できているかと思います。 画面にアクセスして確認してみて下さい。

今回は以上になります。次回、ユーザ編集画面を作りたいと思います。

www.kz62.net