nuxt axiosでjsonのデータを取得する方法

プログラミング

今回はnuxt+axiosでjsonデータを取得して、フロント画面へ表示する方法について説明していきます。

受け取りたいデータはjson-serverというライブラリを使ってjson形式のものを受け取るようにします。

環境とバージョンについて

nuxtでaxiosを使う準備

まずはaxiosをインストールします。


npm install @nuxtjs/axios

次にnuxt.config.jsを修正


  modules: [
    '@nuxtjs/axios',
  ],

先程インストールしたモジュールをmodulsの中に追加します。

これでaxiosを使う準備はOKです。

Json Server

json-serverをインストールします。

これは簡単なjson形式のレスポンスを取得するのに利用します。


npm i json-server

インストールが完了したら次はpackage.jsonの設定を行います。


"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint": "npm run lint:js",
    "json": "json-server --watch db.json" //これを追加
  },

一番下の行に追加します。

次にレスポンスのデータを作ります。

今回はname_listというデータを作成しましたがここは何でも好きなように変更してください。


{
  "name_list" : [
    {
      "name": "Jared Mullins",
      "email": "cepe@od.fr"
    },
    {
      "name": "Bobby Stevenson",
      "email": "zehzep@dic.lc"
    },
    {
      "name": "Ola Morales",
      "email": "wejro@ciwhas.cw"
    },
    {
      "name": "Lucille Singleton",
      "email": "gul@horte.cg"
    },
    {
      "name": "Emma Cohen",
      "email": "nak@huhdec.de"
    },
    {
      "name": "Duane Weber",
      "email": "mugode@we.sz"
    }
  ]
}

では、json-serverを立ち上げて見ましょう。

コマンドは先程、package.jsonで設定したものです。


npm run json

これでOKです!しかし、これだけだとlocalhost:3000でサーバーが起動してしまします。

なのでポートの指定をしてサーバーを起動しましょう。

方法は簡単です。先程、package.jsonで設定したコマンドに少し追加するだけ

"json": "json-server --watch db.json --port 30001"

上記の記述だと、3001番ポートでサーバーが起動します。

これで、nuxtのサーバーを起動してもポートがかぶらなくなります。

起動後、URLにアクセスしjsonが表示されれば準備はOKです。

axioxの設定

import axios from 'axios'
export default {
  data() {
    return {
			info: [],
    }
  },
  mounted() {
    axios
      .get('http://localhost:3001/name_list')
      .then((response) => (this.info = response.data))
  },
}

まずはaxiosをインポートします。

あとはmountedにaxiosの記述をするだけ、getで接続したいURLを指定します。

それから、レスポンスが帰ってきたら、dataで定義したinfoの配列の中にデータを代入します。

これであとは帰ってきた配列の中のデータを表示させるだけです。

axioxで受け取ったデータを表示

今回はpugで記述します。

p {{info[0].name}}

これだけでOKです!上記の記述で0番目の名前だけを取得することができます。

とってきたデータをすべて取得したい場合は、v-forを使ってループを回して表示させることも可能です。

その場合は下記のような記述になります。

ul
  li(v-for="i in info" :key="i.id")
		p 名前:{{ i.name }}
    p メールアドレス:{{i.email}}

これで名前とメールアドレスが表示されます。

最後に

axiosでデータを取得するのは一見難しいように思いますが、帰ってくる値の形式とアクセスするURLさえわかればあとは帰ってくる形式合わせてデータを上手く表示するだけです。

APIの作成はバックエンドがするけど、フロントの開発も並行して勧めたいとなったときに今回使ったjson-serverで簡単なjsonを返してサクッと表示を確認したりすることができるのでぜひ使って見てください!

プログラミング
スポンサーリンク
スポンサーリンク
e-logsをフォローする
スポンサーリンク
eLogs

コメント

タイトルとURLをコピーしました