Vue.jsでJSON Serverを使う

2021年4月16日2021年5月4日Vue.js

Vue.jsでJSON Serverを使う方法をまとめました。 JSON ServerはAPIモックサーバーです。 ローカル環境からAPIが使えない場合などに使います。

Vue.jsでJSON Serverを使う

ターミナル

まずターミナルで次のように操作します。

cd フォルダ名

でフォルダへ移動します。

npm install json-server

でそのフォルダのローカルにインストールします。 json-server のURLを取得することができます。 たとえば、http://localhost:3000というURLです。

json-server -watch data/db.json

もしくは

npx json-server --watch data/db.json

とすると、json-serverの変更を随時watchしてくれるようになります。

Jobs.vue

たとえば、Vue.jsのrouterの基本的な使い方で作ったJobs.vueのデータをjsonデータにして、それを非同期で受け取るとします。 次のように変更します。

<template>
  <h1>Jobs</h1>
  <div v-if="jobs.length">
    <div v-for="job in jobs" :key="job.id" class="job">
      <router-link :to="{ name: 'jobDetails', params: { id: job.id } }">
        <h2>{{ job.title }}</h2>
      </router-link>
    </div>
  </div>
  <div v-else>
    <p>ローディング中・・・</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      jobs: []
    }
  },
  mounted() {
    fetch('http://localhost:3000/jobs')
      .then(res => res.json())
      .then(data => (this.jobs = data)) // = dataのdataは上のdata()のこと
      .catch(err => console.log(err.message))
  }
}
</script>

dataには、空の配列でjobsを指定します。 そして、mounted()メソッドを作成します。 fetchでデータを取得して、.jsonでパースします。 then()メソッドでチェーンして、空配列で用意したjobsにjsonデータを代入します。 エラー時のときにメッセージが出るようにcatch()メソッドをつなげます。 fetchなどの使い方は、次の記事を参考にしてみてください。

JobDetails.vue

<template>
  <div v-if="job">
    <!-- v-ifでjobがnullならfalse,dataがあるならtrueで表示を条件分岐 -->
    <h1>{{ job.title }}</h1>
    <p>The job is is {{ id }}</p>
    <p>{{ job.details }}</p>
  </div>
  <div v-else>
    <p>ローディング中・・・</p>
  </div>
</template>

v-ifでjobがtrueなら表示、falseならローディング中を表示します。

<script>
export default {
  // index.jsでprops: trueにするとdata()ではpropsで受け取れるようになる
  props: ['id'],
  // fetchしたデータがきた後で上の情報を表示しないとnullなのでエラーになる
  data() {
    return {
      job: null
    }
  },
  // jsonデータを受け取る
  // idはthis.id
  mounted() {
    fetch('http://localhost:3000/jobs/' + this.id)
      .then(res => res.json())
      .then(data => (this.job = data)) // = jobsでなくjob
      .catch(err => console.log(err.message))
  }
}
</script>

Job.vueとほぼ同じですが、jobsの単体のページにあたるので、jobｓでなくjobとなります。 dataではnullとします。 fetchでは、idをつなげたいので、上のように指定します。 jobをdataに代入します。