Zenn
👏

Vue3+axiosでlocalサーバにアクセス

2023/03/10に公開
Vue.js
axios
Vue 3
OpenAI
tech

Vue3+axiosでlocalサーバにアクセス

はじめに

  • Vueは初心者です
  • localサーバの構築には触れません
  • Windows環境で実装を進めます

環境準備

Node.js install

Node.jsのインストールが必要なのでこちらからインストールしてください。
インストールは確認は、下記になります。versionが出力されればOKです。

node -v
v19.7.0

プロジェクト作成

今回はvue-appとして作成する。

npm init vite@latest vue-app -- --template vue

npm install

vue-appのカレントディレクトリでnpm installを実行する
Vue.jsを動作させるために必要なリソース群を取得する

npm install

axios install

vue-appのカレントディレクトリでnpm install axiosを実行する

npm install axios

開発サーバを起動確認

vue-appのカレントディレクトリnpm run devを実行する

npm run dev

VITE v4.1.4  ready in 370 ms
 ➜  Local:   http://localhost:5173/
 ➜  Network: use --host to expose
 ➜  press h to show help

ブラウザでhttp://localhost:5173/にアクセスして下記のページが表示されればOKです。

localサーバのIF

OpenAI APIで実装した環境を利用する。

エンドポイント

URI

GET http://localhost:8080/api/completions

Parameters

  • Header
    なし
  • Body
    Name 説明
    prompt キーワード
  • Responses
    {
  "choices": [
    {
      "text": "人生は楽しくて悲しくてたくさんある。"
    }
  ]
}

Vue実装

App.vueを変更する

HelloWorld.vueのimportはそのまま残して、不要な記述を削除する。

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
  <HelloWorld msg="Vue3 + axios" />
</template>

HelloWorld.vueを変更する

<script setup>
import axios from "axios";
import { reactive } from "vue";

const url = "http://localhost:8080/api/completions";

defineProps({ ← App.vueからのProps
  msg: String,
})
const data = reactive({ ← HelloWorld.vueで利用するreactiveオブジェクト
  responses: "",
  keyWord: "",
});

const getData = async () => {
  let result = await axios.get(url, {params: {prompt: data.keyWord}}); ← サーバサイド呼び出し
  data.responses = result.data;
};
</script>

<template>
  <h1>{{ msg }}</h1>
  <input type="text" v-model="data.keyWord" @input="inputPrompt" />
  <button @click="getData">Request</button>
  <hr>
  <div v-for="(item, index) in data.responses.choices">
    {{ item.text }} ← サーバサイドから返却された値を表示する
  </div>
</template>

ブラウザで動かしてみる

テキストボックス人生とは？を入力して、Requestボタンを押下すると、下記のように結果が表示されます！

その他

CORS 設定が必要だった

サーバサイドにCORS設定が必要だったため、下記のConfigurationクラスを追加した。

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
  @Override
  public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
            .allowedOrigins("http://localhost:5173/")
            .allowedMethods("GET", "POST")
            .allowedHeaders("Authorization");
  }
}

感想

Vue3とaxiosに初めて触れてみた感想は、純粋に楽しかったです。(フロントの実装が数十年ぶりなので)
コンポーネント設計やデザイン管理（コンポーネントetc..）など、管理面について気になってきました。
管理系もゆる～～～く学んで行きたいので、よさげな記事がありましたらコッソリ教えていただけると嬉しいです。

Discussion