Heim > Web-Frontend > View.js > So implementieren Sie die Benutzeranmeldefunktion

So implementieren Sie die Benutzeranmeldefunktion

醉折花枝作酒筹
Freigeben: 2021-05-07 09:29:37
nach vorne
3898 Leute haben es durchsucht

In diesem Artikel erfahren Sie, wie Sie die Benutzeranmeldefunktion 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 Benutzeranmeldefunktion

Implementierung der Benutzeranmeldefunktion

Datenbankinformationen und Mybatis-bezogene Informationen in SpringBoot konfigurieren

wie unten gezeigt:

So implementieren Sie die Benutzeranmeldefunktion

Datenbank-Easyuser-Tabelle und Benutzer-Entitätsklasse

Easyuser-Tabelle in der Datenbank, wie unten gezeigt :

So implementieren Sie die Benutzeranmeldefunktion

javabean-Klasse Benutzer, wie unten gezeigt:

So implementieren Sie die Benutzeranmeldefunktion

Das Front-End-Vue-Gerüst sendet eine Anmeldeanforderung an das SpringBoot-Backend

So implementieren Sie die Benutzeranmeldefunktion

Der Code der Anmeldemethode ist wie unten gezeigt:

So implementieren Sie die Benutzeranmeldefunktion

SpringBoot Backend LoginController-Steuerung Die Anmeldemethode des Servers

Der Code der Anmeldemethode lautet wie folgt:

So implementieren Sie die Benutzeranmeldefunktion

getUserByMessage-Methode in der dynamischen Proxy-Schnittstelle von UserDao

Zunächst müssen Sie den dynamischen Proxy scannen Schnittstelle für die Startup-Klasse, wie unten gezeigt:

So implementieren Sie die Benutzeranmeldefunktion

So implementieren Sie die Benutzeranmeldefunktion

UserDao.xml-Zuordnungsdatei

So implementieren Sie die Benutzeranmeldefunktion

Die Route springt zur Home.vue-Komponente

Nachdem das Frontend eine Axios-Anfrage an die Rückseite gesendet hat Am Ende gibt das Back-End JSON-String-Daten an das Front-End zurück und das Front-End analysiert diesen JSON-String. Wenn das Flag-Login-Flag „ok“ ist, wird die Route übersprungen, der Localhost:8081 des Browsers Die Adresse /login wird zur Adresse localhost:8081/home, und der Pfad „/home“ entspricht der Home-Vue-Komponente, sodass die Home.vue-Komponente mit der Bezeichnung „Home“ gerendert wird Die .vue-Komponente lautet wie folgt:

So implementieren Sie die Benutzeranmeldefunktion

Der Code der Home.vue-Komponente lautet wie folgt:

So implementieren Sie die Benutzeranmeldefunktion

Test

Starten Sie die Front-End- bzw. Back-End-Projekte, wie unten gezeigt:

So implementieren Sie die Benutzeranmeldefunktion

So implementieren Sie die Benutzeranmeldefunktion

Geben Sie die Generierungsadresse des Gerüstprojekts in den Browser ein und greifen Sie auf die Front-End-Standardhomepage zu, wie unten gezeigt:

So implementieren Sie die Benutzeranmeldefunktion

Nachdem Sie auf die Anmeldeschaltfläche geklickt haben, wie unten gezeigt:

So implementieren Sie die Benutzeranmeldefunktion

【Verwandte Empfehlung: „vue.js Tutorial“】

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Benutzeranmeldefunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage