はじめに
コジマです。
前提
【Nuxt.js】プロジェクトを作成してみる
で作ったプロジェクトと
【NestJS/TypeORM/MySQL】NestJSとTypeORMで１からさっくりAPIのひな型作りたい人が読む記事【tutorial】
で作ったAPIとデータを使用します。
やること
- はじめに
- axiosの設定
- データを表示するためのページを作成
- データを取得する処理を実装
はじめに
プロジェクトを作るときに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
{{ message }}
UI FrameworkにVuetifyを入れているので色々スタイル乗ってますがここでは無視してください。
とりあえずhello worldするページを作れました。
データを取得する処理を実装
今回はasyncDataでAPIを実行してみます。
api-test.vue
{{ users }}
APIで取得したDBのデータを画面に表示することができました！
さいごに
せっかくAPI作ったので、それをフロントで取得する仕組みを作ってみました。
参考サイトは以下。
https://axios.nuxtjs.org/options/
https://ja.nuxtjs.org/docs/2.x/features/data-fetching/
この記事を面白いまたは役に立ったと思ってくれた方は是非私のTwitter(@kojimanotech)を
フォローしてくれたらうれしいです！
以上、コジマでした。
