58 lines
No EOL
1.9 KiB
Markdown
58 lines
No EOL
1.9 KiB
Markdown
# セットアップガイド
|
||
|
||
## バックエンド接続確認
|
||
|
||
✅ **接続状況**: バックエンドAPI（ポート8080）との接続が確認できました
|
||
|
||
### 確認したエンドポイント
|
||
|
||
- `GET /api/v1/items` - 正常にレスポンス（3件のテストデータを確認）
|
||
- データ例:
|
||
- "Test Item" (TEST001)
|
||
- "ぽえ" (0X23)
|
||
- "マヌケ" (0X13)
|
||
|
||
### 環境設定
|
||
|
||
現在の設定:
|
||
- **API Base URL**: `http://127.0.0.1:8080/api/v1`
|
||
- **開発モード**: 有効（APIリクエストログ出力）
|
||
|
||
### 実装した機能
|
||
|
||
1. **環境変数サポート**
|
||
- `.env` ファイルでAPIエンドポイント設定可能
|
||
- `VITE_API_BASE_URL` で接続先変更可能
|
||
|
||
2. **接続ステータス表示**
|
||
- ナビバーに接続状況のChip表示
|
||
- 30秒間隔で自動接続チェック
|
||
- クリックで手動接続確認
|
||
|
||
3. **エラーハンドリング強化**
|
||
- ネットワークエラーの日本語メッセージ
|
||
- 開発モードでのリクエスト/レスポンスログ
|
||
- APIエラーの詳細表示
|
||
|
||
4. **実データ連携**
|
||
- 備品一覧ページで実際のAPIデータ取得
|
||
- ページネーション対応
|
||
- 検索機能準備完了
|
||
|
||
## 次のステップ
|
||
|
||
1. **開発サーバー起動**: `npm run dev`
|
||
2. **ブラウザで確認**: http://localhost:5173
|
||
3. **API接続状況**: ナビバーの接続ステータスで確認
|
||
4. **備品一覧**: 実際のバックエンドデータが表示される
|
||
|
||
## トラブルシューティング
|
||
|
||
### バックエンドが見つからない場合
|
||
- `.env` ファイルの `VITE_API_BASE_URL` を確認
|
||
- バックエンドサーバーが起動しているか確認
|
||
- ポート番号が正しいか確認（デフォルト: 8080）
|
||
|
||
### CORS エラーの場合
|
||
- バックエンドのCORS設定を確認
|
||
- 開発環境では通常自動設定される |