【Nuxt.js】Jsonファイルの内容を表示させる方法

今回は、jsonファイルの内容をブラウザに表示させる方法を書いていきます。

Nuxt.jsの初期画面

Nuxt.jsで新しいプロジェクトファイルを作成しました。

npx create-nuxt-app 任意のプロジェクト名

index.vue に色々と記述されていますが、ロゴとh1のみを残して、その他の記述を削除します。

nuxt.js

ブラウザでは次のように表示されます。

Nuxt.js

json-serverの利用

次のコマンドでインストールします。

npm install -g json-server

次のコマンドで json-server がインストールされているか確認しましょう。
インストールされていれば、バージョンが表示されます。

json-server -v

db.jsonというファイルは、まだ作成してませんが、次のコマンドを実行します。

json-server –watch db.json

次のように表示されます。
メッセージの内容は、 db.jsonファイル は存在しなかったので、初期データを含んだ db.jsonファイルを作成しましたよ。という事です。

Nuxt.js

db.jsonファイルの内容をブラウザで確認

ブラウザに Resources のURLを入力して、db.jsonの中身を確認してみましょう。

http://localhost:3000/posts を開くと次のように表示されます。
自動で作成された初期データの内容です。

Nuxt.js

http://localhost:3000/comments を開くと次のように表示されます。

Nuxt.js
http://localhost:3000/profile を開くと次のように表示されます。

Nuxt.js

axios

db.jsonの posts の内容をブラウザに表示させるプログラムを作成します。

プロジェクト作成時に、 axios を選択してあります。
axios がインストールされていない場合は、次のコマンドでインストールしてください。

npm install @nuxtjs/axios

index.vue の script で、 axios をインポートします。

<script>
import axios from 'axios'
export default に、mount を記述します。
その中の axios で http://localhost:3000/posts にアクセスしています。db.jsonファイルの posts 部分です。
catch で、error があった場合は、コンソール画面に、エラー内容を表示するように記述しています。

コンソールで値の読み取りを確認

 GoogleChrome のデベロッパーツールを開いて、db.json の内容を読み取れているか確認します。
Nuxt.js
読み取りに成功している事を確認できました。
Nuxt.js

jsonファイルの内容をブラウザに表示

それでは、この内容をブラウザに表示させましょう。
次のように記述します。

ブラウザに、db.json ファイルの posts の内容が表示されます。

Nuxt.js

title のみを表示させてみましょう。

{{ posts[0].title }} と書き換えます。

ブラウザに json-server と title部分のみを表示させることに成功しました。

Nuxt.js

まとめ

今回は、Nuxt.js でaxiosを使用して、jsonファイルの内容をブラウザに表示させる方法を書きました。
最後までお読みいただきありがとうございました。

返信を残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください