Vue+Bootstrap realizes a simple student management system

I used vue and bootstrap to make a relatively simple student management system for your reference. The specific contents are as follows

Without further ado, let's take a look at the renderings

Attached source code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Student Management System</title>
 <link href="../public/css/bootstrap.min.css" rel="stylesheet">
 <link href="../public/css/style.css" rel="stylesheet">
 <style>
 .row>div{border: 1px solid #000;}
 .modal{display: block;opacity:1;top: 100px; overflow:visible;}
 </style>
</head>
<body>
 <div id="app">

 
 <div class="container">
 <table class="table table-striped">
  <caption>Student Management System v1.0-Display Students</caption>
  <tr>
  <th>Name</th>
  <th>Age</th>
  <th>Gender</th>
  <th>Operation</th>
  </tr>
  <tr v-for="item,key in stuInfoArr">
  <td>{{item.name}}</td>
  <td>{{item.age}}</td>
  <td>{{item.gender}}</td>
  <td><button @click="showDialog(item.name,key)" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Delete</button></td>
  </tr>  
 </table>
 
 <hr>
 <hr>
 <hr>
 <form action="">
  <table class="table table-striped">
  <caption>Add student information</caption>
  <tr>
   <td>Project</td>
   <td>Information</td>
  </tr>
  <tr>
   <td>Name</td>
   <td>
   <input v-model="stuName" type="text" class="form-control" id="stuname" placeholder="姓名" name="stuname">
   </td> 
  </tr>
  <tr>
   <td>Age</td>
   <td>
   <input v-model="stuAge" type="text" class="form-control" id="stuage" placeholder="Age" name="stuage">
   </td> 
  </tr>
  <tr>
   <td>Gender</td>
   <td>
   <label class="gen-span"><input v-model="stuGender" type="radio" class="radio-info" name="gender" checked value="Male"> Male</label>
   <label class="gen-span"><input v-model="stuGender" type="radio" class="radio-info" name="gender" value="Female"> Female</label>
   <label class="gen-span"><input v-model="stuGender" type="radio" class="radio-info" name="gender" value="Confidential"> Confidential</label>
   </td>
  </tr>
  </table>
  <div style="text-align: center;"><input type="button" class="btn btn-info btn-sm add-btn" value="Confirm to add" @click="add"/></div>
  </form>
 </div>
 <!-- Delete button confirmation box-->
 <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">Confirmation box</h4>
  </div>
  <div class="modal-body">
  <form>
   <div class="form-group">
   <label for="message-text" class="control-label">Are you sure you want to delete <strong class="control-label-name" style="color:blue">{{delStuName}}</strong>? </label>
  </div>
  </form>
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal" @click="isDialogShow=false">Return</button>
  <a href="###" rel="external nofollow" class="delete-a"><button type="button" class="btn btn-primary" @click="delStuInfo()">Confirm</button></a>
  </div>
  </div>
 </div>
 </div>
 </div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script> 
 new Vue({
 el: '#app',
 data: {
 stuInfoArr: [
 { name: 'Xiao Ming', age:12, gender:"Male" },
 { name: 'Xiaohong', age:10, gender:"female" },
 { name: 'Xiaogang', age:16, gender:"confidential" }
   ],
 isDialogShow: false,
 stuName: "",
 stuAge:"",
 stuGender:"Male" ,
 delStuName:'xx',
 index: ""
   
 },
 methods:{
 add() {
 // Business logic // Execution terminates as long as one of them is empty if(!this.stuName || !this.stuAge) {
  alert("Name and age cannot be empty")
  return 
 }
 this.stuInfoArr.push({ name:this.stuName , age:this.stuAge, gender:this.stuGender })
 },
 // Click the delete button to trigger the function showDialog(name,key) {
 this.isDialogShow = true,
 this.delStuName = name,
 this.index = key
 },
 delStuInfo() {
 // Actually implement the deletion function this.stuInfoArr.splice(this.index, 1),
 this.isDialogShow = false
 }
 },   
 })
</script>
</body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Vue implements student management function
Java console to realize student management system
Java implementation of student management system (IO version)
Detailed explanation of student management system implemented in Java
Detailed explanation of the student management system example of the Vue project

<<: 6 solutions for network failure in Docker container

>>: How to install common components (mysql, redis) in Docker