Vue+Bootstrap realisiert ein einfaches Studentenverwaltungssystem

Ich habe Vue und Bootstrap verwendet, um ein relativ einfaches Studentenverwaltungssystem zu Ihrer Referenz zu erstellen. Die spezifischen Inhalte sind wie folgt

Schauen wir uns ohne weiteres die Renderings an

Angehängter Quellcode:

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-kompatibel" content="IE=edge">
 <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1">
 <title>Studentenverwaltungssystem</title>
 <link href="../public/css/bootstrap.min.css" rel="stylesheet">
 <link href="../public/css/style.css" rel="stylesheet">
 <Stil>
 .row>div{border: 1px solid #000;}
 .modal{Anzeige: Block;Deckkraft:1;oben: 100px; Überlauf:sichtbar;}
 </Stil>
</Kopf>
<Text>
 <div id="app">

 
 <div Klasse="Container">
 <table Klasse="table table-striped">
  <caption>Studentenverwaltungssystem v1.0 - Studenten anzeigen</caption>
  <tr>
  <th>Name</th>
  <th>Alter</th>
  <th>Geschlecht</th>
  <th>Betrieb</th>
  </tr>
  <tr v-for="item,key in stuInfoArr">
  <td>{{Artikelname}}</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">Löschen</button></td>
  </tr>  
 </Tabelle>
 
 <hr>
 <hr>
 <hr>
 <Formularaktion="">
  <table Klasse="table table-striped">
  <caption>Studenteninformationen hinzufügen</caption>
  <tr>
   <td>Projekt</td>
   <td>Informationen</td>
  </tr>
  <tr>
   <td>Name</td>
   <td>
   <input v-model="stuName" type="text" class="form-control" id="stuname" placeholder="Zuweisen" name="stuname">
   </td> 
  </tr>
  <tr>
   <td>Alter</td>
   <td>
   <input v-model="stuAge" type="text" class="form-control" id="stuage" placeholder="Alter" name="stuage">
   </td> 
  </tr>
  <tr>
   <td>Geschlecht</td>
   <td>
   <label class="gen-span"><input v-model="stuGender" type="radio" class="radio-info" name="gender" checked value="Male"> Männlich</label>
   <label class="gen-span"><input v-model="stuGender" type="radio" class="radio-info" name="gener" value="Female"> Weiblich</label>
   <label class="gen-span"><input v-model="stuGender" type="radio" class="radio-info" name="gender" value="Vertraulich"> Vertraulich</label>
   </td>
  </tr>
  </Tabelle>
  <div style="text-align: center;"><input type="button" class="btn btn-info btn-sm add-btn" value="Zum Hinzufügen bestätigen" @click="add"/></div>
  </form>
 </div>
 <!-- Bestätigungsfeld für die Schaltfläche „Löschen“-->
 <div v-show="isDialogShow" class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
 <div Klasse="modal-dialog" Rolle="document">
  <div Klasse="modaler Inhalt">
  <div Klasse="modal-header">
  <button @click="isDialogShow=false" type="button" class="close" data-dismiss="modal" aria-label="Schließen"><span aria-hidden="true">×</span></button>
  <h4 class="modal-title" id="exampleModalLabel">Bestätigungsfeld</h4>
  </div>
  <div Klasse="modal-body">
  <form>
   <div Klasse="Formulargruppe">
   <label for="message-text" class="control-label">Möchten Sie wirklich <strong class="control-label-name" style="color:blue">{{delStuName}}</strong> löschen? </Bezeichnung>
  </div>
  </form>
  </div>
  <div Klasse="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal" @click="isDialogShow=false">Zurück</button>
  <a href="###" rel="external nofollow" class="delete-a"><button type="button" class="btn btn-primary" @click="delStuInfo()">Bestätigen</button></a>
  </div>
  </div>
 </div>
 </div>
 </div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<Skript> 
 neuer Vue({
 el: '#app',
 Daten: {
 stuInfoArr: [
 { Name: 'Xiao Ming', Alter: 12, Geschlecht: "Männlich" },
 { Name: 'Xiaohong', Alter: 10, Geschlecht: "weiblich" },
 { Name: ‚Xiaogang‘, Alter: 16, Geschlecht: „vertraulich“ }
   ],
 isDialogShow: false,
 stuName: "",
 stuAge:"",
 stuGender:"Männlich",
 delStuName:'xx',
 Index: ""
   
 },
 Methoden:{
 hinzufügen() {
 // Geschäftslogik // Die Ausführung wird beendet, solange einer von ihnen leer ist if(!this.stuName || !this.stuAge) {
  alert("Name und Alter dürfen nicht leer sein")
  zurückkehren 
 }
 this.stuInfoArr.push({ Name:this.stuName , Alter:this.stuAge, Geschlecht:this.stuGeschlecht })
 },
 // Klicken Sie auf die Schaltfläche „Löschen“, um die Funktion showDialog(name,key) { auszulösen.
 this.isDialogShow = true,
 this.delStuName = Name,
 this.index = Schlüssel
 },
 delStuInfo() {
 // Tatsächliche Implementierung der Löschfunktion this.stuInfoArr.splice(this.index, 1),
 this.isDialogShow = false
 }
 },   
 })
</Skript>
</body>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Vue implementiert Studentenverwaltungsfunktion
Java-Konsole zur Realisierung eines Studentenverwaltungssystems
Java-Implementierung eines Studentenverwaltungssystems (IO-Version)
Detaillierte Erläuterung des in Java implementierten Studentenverwaltungssystems
Detaillierte Erläuterung des Studentenverwaltungssystembeispiels des Vue-Projekts

<<: 6 Lösungen für Netzwerkfehler im Docker-Container

>>: So installieren Sie allgemeine Komponenten (MySQL, Redis) in Docker