SpringBoot + Vue.js + h2 + axiosでJavaにREST API作成を真似てみた

背景

• 自分の記録用としてメモしていたものですが、数年経って見返して、当時は当時なりの模索手順を記録しているなと感じたので、公開することにしました。(出来栄えはよくないですが、作る過程で模索した内容が少しでも参考になれば幸いです。)

環境構築

1. STS(総合開発環境)でプロジェクト作成

1. Spring スタータープロジェクト作成
   
2. プロジェクトの名前を入力
   
3. H2 Databaseのライブラリを追加
   
4. 「次へ」で進んで「完了」
   

2. H2 Databaseのコンソール確認

1. src/main/resources/application.propertiesに次の内容を追加

spring.h2.console.enabled=true
spring.h2.console.path=/h2-console
spring.h2.console.settings.trace=true
spring.h2.console.settings.web-allow-others=false

各項目説明

spring.h2.console.enabled : コンソールの有効/無効
spring.h2.console.path : コンソールのパス(書かなければデフォルトは/h2-console)
spring.h2.console.settings.trace : トレースの表示の有効/無効
spring.h2.console.settings.web-allow-others : リモートでのコンソールの表示(まだ試したことはないです。)

3. H2 Databaseにテーブル作成、API実行時のSQL作成

1.src/main/resources配下にschema.sqlファイルを作成し以下を記述

CREATE TABLE person
(
   id INT NOT NULL AUTO_INCREMENT,
   code VARCHAR(100) NOT NULL,
   name VARCHAR(100) NOT NULL,
   fruits_nm VARCHAR(500) NOT NULL,
   PRIMARY KEY(id)
);

2.src/main/resources配下にdata.sqlファイルを作成し以下を記述

INSERT INTO person(code, name, fruits_nm)
VALUES('001', 'テスト１', 'りんご');
INSERT INTO person(code, name, fruits_nm)
VALUES('002', 'テスト２', 'ばなな');

3.アプリを実行してH2 databaseのコンソールを開く
3.1. アプリを実行

3.2. H2 databaseのコンソールURL(http://localhost:8080/h2-console )にアクセス

JDBC URLはjdbc:h2:■:〇で入力した。
■の部分はインメモリの場合memになる。(ローカルフォルダに保存する場合は試していません。)
〇の部分は指定したdb名を入力した。

3.3. 接続をクリック
接続できずにハマって、こちらのページに別途ハマった時の解決を記録した。

紆余曲折経て接続完了
テーブル名をクリックするとselect文が表示される。

実行するとテーブルにデータが作成できている

4. Controller,Service,ServiceImplの作成

private finalでサービスのフィールドを作成したいが、nullになってしまう問題にはまった
=>コンストラクタインジェクションで解決
(参考記事)

5. DBとの連携(Form,Dao作成)

(spring starter jdbcを使っての連携)

6. .Vueを作成

1.'.Vue'を作成
2. vueプロジェクトを作成 = vue create ○○
2.vueのサーバーポート番号を変更 = vueプロジェクトに移動して npm run serve -- --port ポート番号
3.SpringBoot用とvueのサーバー起動
4.作成したHomeViewCompの中身がうまく表示されない=>サーバー起動した際に表示されるhtmlの要素idがappなので、createAppのmountメソッドに'#app'を記入すると表示される
しかし、初期表示のhtmlはどこから設定されているのか分からない

(今後使うかも？)

5.vuetifyをインストールして起動
run serveしたら

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './dist/json/importMap.json' is not defined by "exports" in D:\04_SourceCode\01_STS\JavaRestApi\vueproject\node_modules\vuetify\package.json

が発生。

NPMライブラリのpackage.jsonにexportsプロパティが書いてあると、
そこに列挙されたモジュール以外をrequire/importしようとしたときに
ERR_PACKAGE_PATH_NOT_EXPORTEDエラーが発生します。

たとえば@kintone/rest-api-clientのKintoneRequestConfigBuilderなど使わせてもらおうとして、こうしちゃうとエラー。
(参考記事)

=>中身をいじる以外の方法をさがし、node_modulesファイルとpackage-lock.jsonを削除して,node_modulesを再度インストールしてみた

6.vuetifyのV2にして、itemsにテーブルデータを挿入
itmesと「ミススペル」してはまってた
7.vuetifyのデザインが適応されてなかったので、適応方法調査
vuetifyのドキュメントを参考に、vuetifyの適用のcss linkをindex.htmlに追加した

追加内容

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

8.v-data-tableのヘッダーのズレとページングのselectionタブが正しく機能しなかった
<v-app>タグで<v-data-table>タグを囲んだら正しく機能した。ただし、原因は不明

参考

・vueプロジェクトの基本フォルダ構成
・ファイルルートのrouter追加方法