Vue+Bootstrapでシンプルな学生管理システムを実現

Vue+Bootstrapでシンプルな学生管理システムを実現

参考までに、vueとbootstrapを使って比較的シンプルな生徒管理システムを作りました。具体的な内容は以下のとおりです。

では早速レンダリングを見てみましょう

添付のソースコード:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="utf-8">
 <meta http-equiv="X-UA-compatible" content="IE=edge">
 <meta name="viewport" content="width=デバイス幅、初期スケール=1">
 <title>学生管理システム</title>
 <link href="../public/css/bootstrap.min.css" rel="スタイルシート">
 <link href="../public/css/style.css" rel="スタイルシート">
 <スタイル>
 .row>div{境界線: 1px 実線 #000;}
 .modal{display: block;opacity:1;top: 100px; overflow:visible;}
 </スタイル>
</head>
<本文>
 <div id="アプリ">

 
 <div class="コンテナ">
 <テーブルクラス="テーブルテーブルストライプ">
  <caption>学生管理システム v1.0 - 学生の表示</caption>
  <tr>
  <th>名前</th>
  <th>年齢</th>
  <th>性別</th>
  <th>オペレーション</th>
  </tr>
  <tr v-for="item,stuInfoArr のキー">
  <td>{{アイテム名}}</td>
  <td>{{item.age}}</td>
  <td>{{item.性別}}</td>
  <td><button @click="showDialog(item.name,key)" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">削除</button></td>
  </tr>  
 </テーブル>
 
 <時間>
 <時間>
 <時間>
 <フォームアクション="">
  <テーブルクラス="テーブルテーブルストライプ">
  <caption>生徒情報を追加する</caption>
  <tr>
   <td>プロジェクト</td>
   <td>情報</td>
  </tr>
  <tr>
   <td>名前</td>
   <td>
   <input v-model="stuName" type="text" class="form-control" id="stuname" placeholder="姓" name="stuname">
   </td> 
  </tr>
  <tr>
   <td>年齢</td>
   <td>
   <input v-model="stuAge" type="text" class="form-control" id="stuage" placeholder="年齢" name="stuage">
   </td> 
  </tr>
  <tr>
   <td>性別</td>
   <td>
   <label class="gen-span"><input v-model="stuGender" type="radio" class="radio-info" name="gender" checked value="Male"> 男性</label>
   <label class="gen-span"><input v-model="stuGender" type="radio" class="radio-info" name="gender" value="Female"> 女性</label>
   <label class="gen-span"><input v-model="stuGender" type="radio" class="radio-info" name="gender" value="Confidential"> 機密</label>
   </td>
  </tr>
  </テーブル>
  <div style="text-align: center;"><input type="button" class="btn btn-info btn-sm add-btn" value="追加を確認" @click="add"/></div>
  </フォーム>
 </div>
 <!-- 削除ボタンの確認ボックス-->
 <div v-show="isDialogShow" class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
 <div class="modal-dialog" role="document">
  <div class="modal-content">
  <div class="modal-header">
  <button @click="isDialogShow=false" type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
  <h4 class="modal-title" id="exampleModalLabel">確認ボックス</h4>
  </div>
  <div class="modal-body">
  <フォーム>
   <div class="フォームグループ">
   <label for="message-text" class="control-label"><strong class="control-label-name" style="color:blue">{{delStuName}}</strong> を削除してもよろしいですか? </ラベル>
  </div>
  </フォーム>
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal" @click="isDialogShow=false">戻る</button>
  <a href="###" rel="external nofollow" class="delete-a"><button type="button" class="btn btn-primary" @click="delStuInfo()">確認</button></a>
  </div>
  </div>
 </div>
 </div>
 </div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<スクリプト> 
 新しいVue({
 el: '#app',
 データ： {
 stuInfoArr: [
 { 名前: 'シャオミン'、年齢: 12、性別: "男性" },
 { 名前: 'Xiaohong'、年齢: 10、性別: "女性" }、
 { 名前: 'Xiaogang'、年齢: 16、性別: "機密" }
   ]、
 isDialogShow: false、
 stuName: "",
 スタジオ:"",
 stuGender:"男性"、
 delStuName:'xx',
 索引： ""
   
 },
 方法:{
 追加（） {
 // ビジネスロジック // いずれかが空であれば実行は終了します if(!this.stuName || !this.stuAge) {
  警告("名前と年齢は空欄にできません")
  戻る 
 }
 this.stuInfoArr.push({ 名前: this.stuName 、 年齢: this.stuAge 、 性別: this.stuGender })
 },
 // 削除ボタンをクリックして関数をトリガーします showDialog(name,key) {
 this.isDialogShow = true、
 this.delStuName = 名前、
 this.index = キー
 },
 delStuInfo() {
 // 実際に削除関数を実装します this.stuInfoArr.splice(this.index, 1),
 this.isDialogShow = false
 }
 },   
 })
</スクリプト>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueが学生管理機能を実装
  • 学生管理システムを実現するJavaコンソール
  • 学生管理システムのJava実装（IO版）
  • Javaで実装された学生管理システムの詳細説明
  • Vueプロジェクトの学生管理システム例の詳細説明

<<:  Docker コンテナのネットワーク障害に対する 6 つの解決策

>>:  Docker に共通コンポーネント (mysql、redis) をインストールする方法

推薦する

ページ内にマーキーとフラッシュが共存する場合の競合解決

競合の主な症状は、FLASH ボタンがジャンプし続け、不安定になり、Web ページの外観と通常のアク...

Windows 64 ビット版 MySQL 5.7 以降の解凍パッケージにデータディレクトリと my-default.ini がなく、サービスが起動できない問題の簡単な解決方法 (問題概要)

私は SQL の初心者で、オープンソースのインストールは非常に簡単だと思っていましたが、その過程でい...

Vue3 手動カプセル化ポップアップ ボックス コンポーネント メッセージ メソッド

この記事では、ポップアップボックスコンポーネントメッセージのVue3手動カプセル化の具体的なコードを...

MySQL のユーザー権限を照会する方法の概要

MySQLユーザー権限を表示する2つの方法を紹介します1. MySQL grantsコマンドを使用す...

Linux システムで grub.cfg ファイルの破損を修復する手順

目次1. grub.cfg ファイルの紹介1. grub.cfg ファイルの場所2. grub.cf...

リンクされた画像をダウンロードしてアップロードするJavaScriptの実装

写真をアップロードするので、まずはダウンロード可能な画像リソースかどうかを判断する必要があります。正...

DockerコンテナでJupyterノートブックを設定する方法

Jupyter ノートブックは、主に Python コードの記述、より具体的にはディープラーニング開...

MySQL の pid とソケットの詳細な説明

目次1. pidファイルの紹介2.ソケットファイルの紹介要約:ソケット ファイル: Unix ドメイ...

CSS3 フレックスレイアウトを使用して要素を均等に分散するサンプルコード

この記事では主に、CSS3 フレックスレイアウトを使用して要素を均等に配置する方法を紹介します。自分...

ブラウザでのjsのイベントループイベントキューの詳細な説明

目次序文スタックと2つのキューを理解する実行プロセス簡単な例より難しい例要約する序文以下の内容はブラ...

Vueページジャンプの実装方法

1. this.$router.push() 1. ビュー <テンプレート> <d...

MySQL 8.0.12 のインストールと設定方法のグラフィックチュートリアル

MySQL 8.0.12のインストールと設定方法を記録してみんなで共有します。 1. インストール1...

MySQL 5.7.21 解凍バージョンのインストールと設定のグラフィックチュートリアル

この記事では、MySQL 5.7.21の解凍版をダウンロードしてインストールする詳細な手順を記録して...

vue3 で vue-router を使用するための完全な手順

序文ルーティングの管理は、ほとんどのシングルページ アプリケーションにとって不可欠な機能です。 Vu...

Vueウォッチの監視方法の概要

目次1. Vueにおけるwatchの役割はその名の通り、監視の役割です。 2. このオブジェクトのプ...