【Nuxt.js/axios】APIで取得したデータを画面に表示しよう【ちょっとNestJS】

【Nuxt.js/axios】APIで取得したデータを画面に表示しよう【ちょっとNestJS】

はじめに

コジマです。

前提

【Nuxt.js】プロジェクトを作成してみる
で作ったプロジェクトと
【NestJS/TypeORM/MySQL】NestJSとTypeORMで1からさっくりAPIのひな型作りたい人が読む記事【tutorial】
で作ったAPIとデータを使用します。

やること

  1. はじめに
  2. axiosの設定
  3. データを表示するためのページを作成
  4. データを取得する処理を実装

はじめに

プロジェクトを作るときにHTTP Clientをaxiosに設定していれば不要ですが、
そうでない場合はインストールが必要になります。

npm install --save @nuxtjs/axios

axiosの設定

NestJS側のプロジェクトとポートが3000番でぶつかっちゃうので
NestJS側はポート80で受け取るようにします。

main.ts

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  // ポート80にした
  await app.listen(80);
}
bootstrap();

nuxt.config.jsを修正し、axiosのbaseURLを設定します。
nuxt.config.js

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    baseURL: 'http://localhost'
  },

変更点のみ記載してます。
baseURLを設定すればいちいちhttp://~~と入れる必要がなくなるのでやっといたほうがいいです。

データを表示するためのページを作成

api-test.vueというページを適当に作ってみます。
api-test.vue




UI FrameworkにVuetifyを入れているので色々スタイル乗ってますがここでは無視してください。
とりあえずhello worldするページを作れました。

データを取得する処理を実装

今回はasyncDataでAPIを実行してみます。
api-test.vue





APIで取得したDBのデータを画面に表示することができました!

さいごに

せっかくAPI作ったので、それをフロントで取得する仕組みを作ってみました。

参考サイトは以下。
https://axios.nuxtjs.org/options/
https://ja.nuxtjs.org/docs/2.x/features/data-fetching/

この記事を面白いまたは役に立ったと思ってくれた方は是非私のTwitter(@kojimanotech)を
フォローしてくれたらうれしいです!

以上、コジマでした。


Vue.js/Nuxt.jsカテゴリの最新記事