Vue3+Springboot RestApiの構築

Ⅰ. 前提知識

１．SPAと3大JavaScriptフレームワーク（React、Vue、AnguarJs）
２．JAVA、Springboot、OpenAPI
３．Docker、その他

Ⅱ. 技術要素

１．フロントエンド
Vue.js3、BootStrap、TypeScript（必須ではない）
２．バックエンド
Springboot、MyBatis
３．その他
DB：mysql、サーバ：Docker

Ⅲ．SPAのフレームワーク

Ⅳ．責務配置

Ⅴ. アーキテクチャ

Ⅵ. 実装手順（摘要）

１．Rest API部分
①. Spring Boot DevTools
②. Lombok
③. Validation
④. MyBatis Framework
⑤. MySQL Driver
⑥. Spring Web
⑦. Rest Repositories

２. Vue3部分
①. Vue3 CLI
②. axios (apiを呼び出すため）

Ⅶ. ディレクトリ構成

１．Rest　Api部分
Sample/
　　controller/
　　　　XXXController.java 　※コントローラー
　　mapper/
　　　　XXXMapper.java 　※マッパー
　　model/
　　　　XXX.java 　※モデル
　　service
　　　　XXXService.java 　※サービス

src/main/resources/　※MyBatis仕様
　　sample/
　　　　mapper/
　　　　　XXXMapper.xml 　※SqlXML

２. Vue3部分
src/
　assest/css/
　　bootstrap.min.css　※CSSファイル
　components/
　　MenuList.vue 　※コンポーネント
　router/
　　index.js 　※ルーティング
　store/
　　index.js 　※Vuex
　views/
　　XXX.vue ※ページ作成
App.vue　※ホームページ

Ⅷ. 課題と展望

１．課題
フロントエンドとバックエンドの仕様連携が一定程度の難度がある

２．展望
システムを高度的なコンポネント化することが期待でき

Ⅸ. 参考文献

１．Spring Boot 2 応用: REST x Swagger UI、MyBatis から AWS へのデプロイまで｜原田 けいと, 竹田 甘地, Robert Segawa
２．Vue.js3超入門｜掌田津耶乃