【express + swagger + vue】swaggerで立てたモックをGUI操作で簡単に変更する

概要

前回【Swagger】モックサーバーの立て方について書きました。

ただ、あくまで定義ファイルという立ち位置だとすると、ワンパターンのAPIでは少し不便です。

FE観点として実際に利用するとなると、例えば複数のコンテンツのUI、もしくは、様々なパターンによってUIを出し分ける実装の検証などには、データの個数・値の変更を行えればなお良いかと思います。

そこで、簡易的ではありますがプロトタイプを作成したのでご紹介します。

仕様

今回用いるフレームワークは以下です。

vue.js
express

手順としては、

expressで、swaggerのモックサーバーにHTTPリクエストを行う
受け取ったAPIをGETリクエスト
client側のvue.jsで取得と加工を行い、適宜POST
expressでPOSTを受け取り、GETリクエスト

簡易的ですが、ざっくりと構造は以下となります。

nodejs-server
└ ...api
client
└ ...vue.js
server
└ index.js

nodejs-server: swaggerで落としたファイル
参考: 【Swagger】モックサーバーの立て方
client: vue cliのtemplate
server: expressのjsファイル

server / index.js

const express = require('express')
const app = express()
const port = 3000
const rp = require('request-promise')

// body parser
app.use(express.json())
app.use(express.urlencoded({ extended: true }));

app.use('/', express.static('./client/dist'))

// CORSを許可
app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

// request options
const options = {
  url: 'http://localhost:8080/v2/pet/1',
  method: 'GET'
};

let Pet = {};

(async () => {
  try {
    Pet = await rp(options);
    app.get('/v2/pet/1', function (req, res) {
      res.send(Pet)
    })
  } catch (error) {
    console.log(error);
  }
})();

app.post('/test', function (req, res) {
  Pet = req.body
})

app.listen(process.env.PORT || port);

swaggerのエンドポイントhttp://localhost:8080/v2/pet/1へリクエストを飛ばす
結果を非同期で取得、http://localhost:3000/v2/pet/1エンドポイントで配信
/testに対し、リクエストが来たら変数Petへ格納、連動しhttp://localhost:3000/v2/pet/1が更新される。

というのがざっくりとした流れです。

client / src / App.vue

<template>
  <div id="app">
    <p>status: {{Response.status}}</p>
    <p>
      status change =>
      <input type="checkbox" v-model="isCheck" />
      <button @click="postData">submit</button>
    </p>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "app",
  components: {},
  data() {
    return {
      Response: {},
      isCheck: false
    };
  },
  methods: {
    async postData() {
      const sendData = {
        ...this.Response,
        status: this.isCheck ? "available" : "unavailable"
      };
      const res = await axios.post("http://localhost:3000/test", sendData);
      console.log(res.data);
    }
  },
  async mounted() {
    try {
      const res = await axios.get("http://localhost:3000/v2/pet/1");
      this.Response = res.data;
      this.isCheck = this.Response.status === "available";
    } catch (err) {
      console.log(err);
    }
  }
};
</script>

vueでは大したことはやっていないのですが

mountedでAPI取得
v-modelでcheckboxと連動して変数の値を変更
取得したAPIの雛形をもとにcheckboxによって値を更新し、postする

といった流れとなっております。

まとめ

簡単さとシンプルさを追求した分、無理矢理感はありますがAPI定義を元に自由に値を変更できる実装の紹介でした。一方で、自由すぎる部分や、API定義の変更に弱い部分がまだあると思うのでもう少し良い方法やツールがあればぜひ教えて欲しいです。

リポジトリ

github.com