So implementieren Sie die Funktion „Benutzer hinzufügen'.-MySQL-Tutorial-php.cn

So implementieren Sie die Funktion „Benutzer hinzufügen'.

醉折花枝作酒筹

Freigeben： 2021-05-07 09:08:13

nach vorne

2994 Leute haben es durchsucht

In diesem Artikel erfahren Sie, wie Sie die Funktion zum Hinzufügen von Benutzern implementieren. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

So implementieren Sie die Funktion „Benutzer hinzufügen'.

Implementierung der Funktion „Benutzer hinzufügen“

Anforderungen

Nachdem Sie auf die Schaltfläche „Hinzufügen“ geklickt haben, wird ein Dialogfeld zum Hinzufügen eines Benutzers angezeigt. Geben Sie dann die Informationen des hinzugefügten Benutzers in dieses Dialogfeld ein und klicken Sie auf „Hinzufügen“. Benutzerinformationen werden am Ende angezeigt. Eine Seite wird angezeigt.

Ein Klickereignis an die Schaltfläche „Benutzer hinzufügen“ binden

Nach dem Klicken auf die Schaltfläche „Benutzer hinzufügen“ wird ein Dialogfeld zum Hinzufügen eines Benutzers angezeigt. Das gebundene Klickereignis sieht wie folgt aus:

So implementieren Sie die Funktion „Benutzer hinzufügen.

Der Effekt und Code des Hinzufügens des Benutzerdialogfelds

Der Effekt ist wie folgt:

So implementieren Sie die Funktion „Benutzer hinzufügen.

Der Code ist wie folgt:

So implementieren Sie die Funktion „Benutzer hinzufügen.

Die Daten in der UserList.vue-Komponente, die benötigt werden Um das Benutzerdialogfeld hinzuzufügen

befindet sich in Nach der Eingabe der Benutzerinformationen in das Add-Formular werden die Benutzerinformationen in den Eigenschaften des JSON-Objekts namens addForm gespeichert, da es sich um eine bidirektionale Bindung handelt Wie unten gezeigt:

So implementieren Sie die Funktion „Benutzer hinzufügen.

in der UserList.vue-Komponente addUser-Methode

Der Inhalt der addUser-Methode lautet wie folgt:

So implementieren Sie die Funktion „Benutzer hinzufügen.

Nachdem die addUser-Methode erfolgreich ausgeführt wurde, liegen neue Benutzerdaten vor wurde zur easyUser-Tabelle in der Datenbank hinzugefügt und die Daten des Benutzers müssen in der UserList.vue-Komponente angezeigt werden. Wie werden diese neu hinzugefügten Daten in der Tabelle angezeigt? Dabei wird die aktuelle Seitenzahl auf einen großen Wert geändert, der größer als die Gesamtseitenzahl ist. Da der Rationalisierungsparameter für die Seitenaufrufe in der SpringBoot-Konfigurationsdatei auf „true“ gesetzt wurde, entspricht diese große Seitenzahl tatsächlich der letzten Seite. Seitenzahl. Rufen Sie nach dem Festlegen der aktuellen Seitennummer die Methode getUserList in der Methode addUser auf, um die Benutzersammlungsdaten der letzten Seite neu zu laden.

getUserList-Methode

getUserList-Methode wird verwendet, um Werte zu userList und Gesamtdaten zuzuweisen, wie unten gezeigt:

So implementieren Sie die Funktion „Benutzer hinzufügen.

Paging-Daten in der UserList.vue-Komponente

wie unten gezeigt:

So implementieren Sie die Funktion „Benutzer hinzufügen.

In SpringBoot-Back-End-Controller Die Methode zum Empfangen von Seitenbenutzeranforderungen lautet getUserList

Da das Backend das vom Frontend übergebene JSON-Objekt „Page“ empfangen muss, muss im Backend eine entsprechende Page-Entitätsklasse geschrieben werden, um den Empfang zu erleichtern Die vom Frontend übergebenen Parameter lauten wie folgt: Die getuserlist-Methode im Back-End von SpringBoot, wie unten gezeigt:

So implementieren Sie die Funktion „Benutzer hinzufügen.

Getalluser-Methode in UserDao, dynamische Proxy-Schnittstelle

Wie unten gezeigt: So implementieren Sie die Funktion „Benutzer hinzufügen.

So implementieren Sie die Funktion „Benutzer hinzufügen. UserDao.xml-Zuordnungsdatei Die SQL-Anweisung

sieht wie folgt aus: So implementieren Sie die Funktion „Benutzer hinzufügen.

Nachdem die getUserList-Methode in der addUser-Methode ausgeführt wurde, werden die abgefragten Paging-Daten erneut gerendert Tabelle, in der die UserList.vue-Komponente Benutzerinformationen anzeigt

Die Tabelle, in der Benutzerinformationen gespeichert sind: So implementieren Sie die Funktion „Benutzer hinzufügen.

Nachdem die getUserList-Methode ausgeführt wurde, werden die Daten der aktuellen Seite in der userList-Sammlung gespeichert. wie unten gezeigt:

So implementieren Sie die Funktion „Benutzer hinzufügen.

Verwenden Sie die Tabelle im Element ui, um die Benutzerdaten in der userList-Sammlung anzuzeigen, wie unten gezeigt:

So implementieren Sie die Funktion „Benutzer hinzufügen.

Testen

Die erste Möglichkeit besteht darin, die Startseite aufzurufen und auf die Schaltfläche „Benutzer hinzufügen“ zu klicken, wie unten gezeigt:

So implementieren Sie die Funktion „Benutzer hinzufügen.

Geben Sie dann die hinzuzufügenden Benutzerinformationen in das Popup-Dialogfeld ein, wie unten gezeigt:

So implementieren Sie die Funktion „Benutzer hinzufügen.

Klicken Sie wie unten gezeigt auf die Schaltfläche „Hinzufügen“:

So implementieren Sie die Funktion „Benutzer hinzufügen.

Sehen Sie sich die easyUser-Tabelle in der Datenbank an, wie unten gezeigt:

So implementieren Sie die Funktion „Benutzer hinzufügen.

[Empfohlenes Lernen: SQL-Video-Tutorial]

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Funktion „Benutzer hinzufügen'.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!