Backend·アーカイブ·2024-01: 進行中

BDMIN_VUE

Vue 3 + Spring Boot 管理画面学習 (B_CMS)

「いくら React が好きでも、実務で頻繁に使う Vue でも個人プロジェクトの記録を残そう」という思いで始めました。最初の会社のスタックをサイドプロジェクトで整理した事例です。

技術スタック

会社で AMS / WMS を作っていた経験があり、その根幹となるユーザー別言語 · タブ · カスタマイズ可能な ADMIN コア機能を、自身のサイドで実装することに集中しました。自身は React 派ですが、最初の会社が Vue + Spring Boot の環境だったためです。

2024 年時点の模範的フルスタック構成 (Vite 4 + Vue 3.4 + Spring Boot 3.2 + JWT) を備えました。 React 本拠以外にも会社スタックを深く扱えることを示した事例です。

01Vue 3.4 + Vite 4 + Pinia (persistedstate) + vue-i18n 9 (サーバサイド: DB の Locale エンティティから fetch)
02Spring Boot 3.2.2 + Java 17 + Spring Data JPA + Spring Security + JJWT 0.11 + Redis Reactive
03JWT フィルタの抽象化: AbstAuthProcessFilterImpl で共通部を分離、JwtAuthFilter で拡張 (もう 1 段抽象化)
04タブシステム (keep-alive + Pinia): addCache/getCacheList/removeCache/refreshCurrentTab の 4 関数で同期
05メニュー-ロール動的権限: Menubyrole · RoleByUser の独立エンティティ + 複合キーでロール別メニュー決定
06DaisyUI テーマプリセット + 自作グリッド (CRUD · マスキング · 行スタイル): ag-grid を段階的に置換中