学生管理システム

機能

1. 学生情報表示

2. 学生情報追加

3. 学生情報編集

4. 学生情報削除

開発

フロントエンド

フロントエンドフレームワークVueで実現した。

ファイル

AddStudent.vue:　学生追加画面を作成する

index.vue:　ルーターを表示する

StudentInformation.vue:　学生情報表示画面を作成する

StudentUpdate.vue:　学生情報更新画面を作成する

index.js:　ルーターの設定と管理ファイルです

APP.vue: 　ルーターを実現した主要コンポーネントである。すべてのページは、App.vueで切り替えられる。

main.js :　エントリファイルで、Vueインスタンスを初期化し、必要なプラグインを導入する

バックエンド

バックエンドフレームワークspring bootとKotlin言語で実現した。データベースはH2です。

ファイル

h2db:　インメモリh2データベース

StudentsHandler.kt:　フロントエンドからのHTTP Request（GET、PUT、POST、DELETE）を処理してリスポンスする

Sthdent:　データベースのテーブルからEntityにマッピングする

StudentRepository:　テーブルに対する操作Create、Read、Update、DeleteをCrudRepositoryから継承するInterfaceです。

SpringboottestApplication.kt:　メインプログラムです。プロジェクトの実行はここから始まる

static:　フロントエンドの静的ファイル

application.properties: 　DBの接続情報などアプリケーションに関する設定を記述する

スタート

1. npm run dev でフロントエンドのプログラムが実行できる。詳しくはフロントエンドプログラムのReadme.mdを参考してください。フロントエンドポートは8081です。バックエンドのプログラムはSpringboottestApplication.ktから実行できる。バックエンドポートは8080です。バックエンドのプログラムを実行した後に、URL：localhost:8081にアクセスすればシステムを操作できる。
2. バックエンドプログラムのstaticにフロントエンドの静的ファイルが入っているので、バックエンドを起動するだけで、URL：localhost:8080にアクセスしてシステムを操作できる。