Lambda経由でYOLPを呼んでみる(ちょっとだけ Nuxt.js 版)

先ほどのエントリに引き続き、リクエスト発信HTMLだけお試しでNuxt.js使ってみた。
React.jsベースのNext.jsでなくて、Vue.jsベースのNuxt.jsね。

二つ前のエントリ(↓)の "６．リクエスト発信ページ作成" だけ置き換える感じ。
Lambda経由でYOLPを呼んでみる - ngtokuの日記

Node.jsは入っている前提で。
inputやbuttonはelement-ui使ってるので、そのまま使うならカスタムUIはelement-uiで、
その他はお好みで。

$yarn create nuxt-app nuxt-aws-gateway
yarn create v1.6.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
warning Your current version of Yarn is out of date. The latest version is "1.12.3", while you're on "1.6.0".
info To upgrade, run the following command:
$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
success Installed "create-nuxt-app@2.1.1" with binaries:
      - create-nuxt-app
[#####################################################################] 306/306> Generating Nuxt.js project in /Users/xxx/xxx/nuxt-aws-gateway
? Project name nuxt-aws-gateway
? Project description AWS API Gateway Test
? Use a custom server framework none
? Use a custom UI framework element-ui
? Choose rendering mode Single Page App
? Use axios module yes
? Use eslint no
? Use prettier no
? Author name ngtoku
? Choose a package manager yarn

まずは nuxt-aws-gateway/pages/index.vue を編集。
実作業はデフォルトで作成されるレイアウトの下にロジックを足したけど、以下は必要な部分のみ抜粋してある。

前のエントリと同じく、APIのURLは各自で作成したAPIの物を入力。

<template>
  <section class="container">
    <div>
      <h4>データ件数は最大10件に絞ってあります。</h4><br />
      <form id="form" method="post" accept-charset="utf-8" return false>
        <p>
            <label >住所コード(JIS 0402)。先頭5桁</label><br>
            <el-input  id="ac" name="ac"  placeholder="住所コード(JIS 0402)" v-model="input_ac" size="small" class="el-input-style"></el-input>
            <a href="http://www.soumu.go.jp/denshijiti/code.html" target="_blank">コード値参照先</a>
        </p>
        <p>
            <label>ジャンルコード</label><br>
            <el-input  id="gc" name="gc"  placeholder="ジャンルコード" v-model="input_gc" size="small" class="el-input-style"></el-input>
            <a href="https://developer.yahoo.co.jp/webapi/map/openlocalplatform/genre.html" target="_blank">コード値参照先</a>
        </p>
      <br />
      <el-button size="medium" d="searchButton" @click="getYolpData" :disabled="sendingRequest">検索</el-button>
      </form>
      <br/>
      <div v-if="resData !== null" >
        <div id="dataCount"> {{ resData.ResultInfo.Count }} 件ヒットしました。</div>
        <ul id="result" class="yolp-results">
           <li v-for="item in resData.Feature">
            {{ item.Name }}
          </li>
        </ul>
      </div>
      <div id="responseData"></div>
    </div>
  </section>
</template>

<script>
import axios from 'axios'

export default {
  components: {
  },
  data() {
    return {
      input_ac: '13103',
      input_gc: '0110',
      sendingRequest: false
    }
  },
  computed: {
    resData () { return this.$store.state.resData },
    sendingRequest: function () {
      	return this.sendingRequest;          
      }
  },
  methods: {
    async getYolpData() {
        this.sendingRequest = true;
        this.$store.commit('set', null) // データエリアをクリア
        const response = await axios.post('APIのURLは各自で作成したAPIの物を入力', {
            ac: this.input_ac,
            gc: this.input_gc
        }).then((res) => {
          //console.log(res);
          const resData = res.data;
          //console.log(resData);
          this.$store.commit('set', resData); // レスポンスをセット
        })
        .catch((e) => {
            callback({ statusCode: 500, message: 'サーバーエラーです' })
        })
        .finally(() => {
             this.sendingRequest = false;
        });
    },
  }
}
</script>

<style>

.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  // align-items: center;
  text-align: center;
}

.el-input-style {
    width: 180px;   
}

.yolp-results {
    text-align: left;   
}
</style>

YOLPから取得したデータはstoreに格納しているので、store/index.js を作成して以下記載。

export const state = () => ({
  resData: null
})

export const mutations = {
  set (state, resData) {
    state.resData = resData;
  }
}

あとは起動して、動作確認

$yarn run dev
yarn run v1.6.0
$ nuxt
 INFO  Building project
✔ success Builder initialized
✔ success Nuxt files generated
 READY  Listening on http://localhost:3000

Nuxt.jsの理解がまだまだ足りてないなーと反省中。