Detaillierte Erklärung zur Implementierung der Anmeldefunktion durch Kombination von React mit der Formularkomponente von Antd

Detaillierte Erklärung zur Implementierung der Anmeldefunktion durch Kombination von React mit der Formularkomponente von Antd

1. React kombiniert mit Antd, um die Anmeldefunktion zu realisieren

Importieren Sie die benötigten Antd-Komponenten. Der Code lautet wie folgt:

importiere { Formular, Symbol, Eingabe, Schaltfläche, Nachricht } von 'antd'

Erstellen Sie in Login.jsx eine Login-Komponente. Wenn Sie Komponenten nach außen zeigen, müssen Sie sie mit der Form-Komponente umschließen. Durch das Umschließen der Form-Komponente wird eine neue Komponente „Formular (Anmeldung)“ generiert. Gleichzeitig übergibt die neue Komponente ein leistungsstarkes Objekteigenschaftsformular an die Form-Komponente, sodass der Wert des Formularformulars abgerufen werden kann. Dies ist auch die Verkörperung von Komponenten höherer Ordnung und Funktionen höherer Ordnung. Der Code lautet wie folgt:

Klasse Login erweitert Komponente {}
const WrapLogin = Form.create()(Anmelden)
Standard-WrapLogin exportieren

Wenn Sie ein Formular innerhalb von „Render“ rendern, können Sie das Formular zunächst über this.props abrufen und dann getFieldDecorator im Formular für eine bidirektionale Bindung mit dem Formular erhalten. In getFieldDecorator ist das erste Element der Wert, der dem Formularelement entspricht, und das zweite Element ist das Konfigurationsobjekt, wobei die Attributnamen bestimmte Namen sind. Regeln sind beispielsweise Validierungsregeln. In Regeln können Sie „erforderlich“ festlegen, um anzugeben, ob es erforderlich ist, „Nachricht“ für den Validierungstext, „Muster“ für die Validierung mit regulären Ausdrücken, „max“ für die maximale Länge und „min“ für die minimale Länge. Beispielsweise ist initialValue der Anfangswert des Formularelements. Zur Regelvalidierung können Sie die deklarative Validierung verwenden, d. h., Sie können direkt von anderen definierte Validierungsregeln zur Validierung verwenden. Sie können auch den Validierungsvalidator anpassen, Funktion (Regel, Wert, Rückruf), die eine Rückruffunktion haben muss. Der Code lautet wie folgt:

Klasse Login erweitert Komponente {
 validPwd = (Regel, Wert, Rückruf) => {
  wenn (!Wert) {
   callback('Passwort muss eingegeben werden')
  } sonst wenn (Wert.Länge < 4) {
   Rückruf('Die Passwortlänge darf nicht weniger als 4 Zeichen betragen.')
  } sonst wenn (Wert.Länge > 12) {
   Rückruf('Das Passwort darf nicht länger als 12 Zeichen sein.')
  } sonst wenn (!/^[a-zA-Z0-9_]+$/.test(Wert)) {
   Rückruf('Das Passwort muss Englisch, Zahlen oder Unterstriche sein.')
  } anders {
   Rückruf()
  }
 }

 rendern () {
  const form = diese.props.form
  const { getFieldDecorator } = Formular

  zurückkehren (
   <div Klassenname="Anmelden">
    <header className="login-header">
     <img src={logo} alt="logo"></img>
     <h1>React-Backend-Verwaltungssystem</h1>
    </header>
    <Abschnitt Klassenname="Anmeldeinhalt">
     <h2>Benutzeranmeldung</h2>
     <Formular>
      <Formular.Element>
       {
        getFieldDecorator('Benutzername', { 
         Regeln:
          { erforderlich: true, Leerzeichen: true, Nachricht: ‚Benutzername ist erforderlich‘},
          { min: 4, message: 'Der Benutzername muss mindestens 4 Zeichen lang sein'},
          { max: 12, message: 'Der Benutzername muss mindestens 12 Zeichen lang sein'},
          { pattern: /^[a-zA-Z0-9_]+$/, message: 'Benutzername muss Englisch, Zahlen oder Unterstriche sein'}
         ],
         // Anfangswert: 'admin', 
        })(
         <Eingabe
          Präfix={<Icontyp="Benutzer" Stil={{ Farbe: 'rgba(0,0,0,.25)' }} />}
          Platzhalter="Benutzername"
         />
        )
       }
      </Form.Item>
      <Formular.Element>
       {
        getFieldDecorator('Passwort', {
         Regeln:
          { validator: this.validPwd }
         ]
        })(
         <Eingabe
          Präfix={<Symboltyp="Schloss" Stil={{ Farbe: 'rgba(0,0,0,.25)' }} />}
          Typ="Passwort"
          Platzhalter="Passwort"
         />
        )
       }
      </Form.Item>
      <Formular.Element>
       <Button Typ="primär" htmlType="Senden" Klassenname="Anmeldeformular-Schaltfläche">
         Anmelden</Button>
      </Form.Item>
     </Form>
    </Abschnitt>
   </div>
  )
 }
}

const WrapLogin = Form.create()(Anmelden)
Standard-WrapLogin exportieren

Wir können zwei Toolklassen definieren, um Login-Objekte zu bedienen. MemoryUtils ist ein Toolmodul, das zum Speichern einiger Daten im Speicher verwendet wird, und storageUtils ist ein Toolmodul für die lokale Datenspeicherverwaltung, wie unten gezeigt:

memoryUtils.js, der Code lautet wie folgt:

Standard exportieren {
 Benutzer: {},
 Produkt: {}
}

storageUtils.js, der Code lautet wie folgt:

Store aus „Store“ importieren

const USER_KEY = "Benutzerschlüssel"

Standard exportieren {
 // Benutzer speichern
 saveUser (Benutzer) {
  store.set(USER_KEY, Benutzer)
 },

 // Benutzer lesen
 getUser () {
  returniere store.get(USER_KEY) || {}
 },

 // Benutzer löschen
 entferneBenutzer () {
  speichern.entfernen(BENUTZERSCHLÜSSEL)
 }
}

Definieren Sie die Anforderungsfunktion der Anmeldeschnittstelle, kapseln Sie sie zuerst mit Axios und rufen Sie response.data ab, wie unten gezeigt:

ajax.js, der Code lautet wie folgt:

Axios von „Axios“ importieren
importiere {message} von 'antd'

exportiere Standardfunktion Ajax (URL, Daten = {}, Typ = 'GET') {

 returniere neues Promise((lösen, ablehnen) => {
  lass versprechen
  wenn(Typ==='GET') { 
   Versprechen = axios.get(url, {
    Parameter: Daten 
   })
  } anders { 
   Versprechen = axios.post(URL, Daten)
  }
  versprechen.dann(Antwort => {
   auflösen(Antwort.Daten)
  }).fangen(Fehler => {
   message.error('Anforderungsfehler: ' + error.message)
  })
 })

}

index.js, der Code lautet wie folgt:

importiere jsonp von „jsonp“
Ajax aus „./ajax“ importieren
importiere {Nachricht} von 'antd'

const BASE = ''

export const reqLogin = (Benutzername, Passwort) => ajax(BASE + '/login', { Benutzername, Passwort}, ​​'POST')

export const reqCategories = (parentId) => ajax(BASE + '/verwalten/kategorie/liste', {parentId})

export const reqAddCategories = ({parentId, Kategoriename}) => ajax(BASE + '/verwalten/Kategorie/hinzufügen', {parentId, Kategoriename}, 'POST')

export const reqUpdateCategories = ({categoryId, categoryName}) => ajax(BASE + '/manage/category/update', {categoryId, categoryName}, 'POST')

export const reqCategory = (Kategorie-ID) => ajax(BASE + '/verwalten/Kategorie/info', { Kategorie-ID })

export const reqProducts = ({Seitennummer, Seitengröße}) => ajax(BASE + '/verwalten/Produkt/Liste', {Seitennummer, Seitengröße})

export const reqUpdateStatus = ({productId, status}) => ajax(BASE + '/manage/product/updateStatus', {productId, status}, 'POST')

export const reqSearchProducts = ({ Seitennummer, Seitengröße, Suchname, Suchtyp}) => ajax(BASE + '/verwalten/produkt/suche', {
 Seitennummer,
 Seitengröße,
 [Suchtyp]: Suchname
})

export const reqDeleteImg = (Name) => ajax(BASE + '/manage/img/delete', {Name}, 'POST')

export const reqAddUpdateProduct = (Produkt) => ajax(BASE + '/verwalten/produkt/' + (produkt._id ? 'update' : 'hinzufügen'), Produkt, 'POST')

export const reqRoles = () => ajax(BASE + '/verwalten/Rolle/Liste')

export const reqAddRole = (Rollenname) => ajax(BASE + '/manage/role/add', {Rollenname}, 'POST')

export const reqUpdateRole = (Rolle) => ajax(BASE + '/verwalten/Rolle/aktualisieren', Rolle, 'POST')

export const reqUsers = () => ajax(BASE + '/verwalten/Benutzer/Liste')

export const reqDeleteUser = (Benutzer-ID) => ajax(BASE + '/manage/user/delete', {Benutzer-ID}, 'POST')

export const reqAddOrUpdateUser = (Benutzer) => ajax(BASE + '/manage/user/'+(user._id ? 'update': 'add'), Benutzer, 'POST')

export const reqWeather = (Stadt) => {

 returniere neues Promise((lösen, ablehnen) => {
  const url = `http://api.map.baidu.com/telematics/v3/weather?location=${city}&output=json&ak=IOXimfoqOUVq2KcYCiQU9cMF7hyN5kFB`
  jsonp(url, {}, (err, data) => {
   console.log('jsonp()', Fehler, Daten)
   wenn (!err && data.status==='success') {
    const {dayPictureUrl, Wetter} = Daten.Ergebnisse[0].Weather_Data[0]
    lösen({dayPictureUrl, Wetter})
   } anders {
    message.error('Wetterinformationen konnten nicht abgerufen werden!')
   }

  })
 })
}

Stellen Sie diese Toolklassen und Schnittstellen vor. Der Code lautet wie folgt:

importiere { reqLogin } von '../../api'
importiere memoryUtils aus '../../utils/memoryUtils'
importiere storageUtils aus '../../utils/storageUtils'

Binden Sie das Ereignis „onSubmit“ an das Formular „handleSubmit“. In diesem Fall müssen Sie zuerst event.preventDefault() verwenden, um das Standardverhalten des Ereignisses zu verhindern. Wenn Sie die Eingabedaten der Formularelemente abrufen möchten, können Sie form.getFieldsValue() verwenden. Allerdings müssen die Formulardaten vor dem Absenden des Formulars vorab validiert werden. Verwenden Sie this.props.form.validateFields zur Vorabvalidierung. validateFields kann die Werte aller Formularfelder abrufen und feststellen, ob die Formulardaten falsch sind. Wenn alles korrekt ist, bedeutet dies, dass die Vorüberprüfung bestanden wurde. Rufen Sie die Benutzernamen- und Kennwortwerte aus den Werten ab und initiieren Sie dann eine Anmeldeanforderung über die reqLogin-Schnittstelle in Kombination mit async und await. Wenn der Antwortstatuscode korrekt ist, bedeutet dies, dass die Anmeldung erfolgreich war, der Benutzer im Speicher und lokal gespeichert ist und anschließend this.props.history.replace verwendet wird, um zur Hauptverwaltungsoberfläche zu springen. Andernfalls schlägt die Anmeldung fehl. Wenn der Benutzer beim Rendern bereits angemeldet ist, müssen Sie Redirect verwenden, um automatisch zur Hauptverwaltungsoberfläche zu springen. Der Code lautet wie folgt:

 handleSubmit = (Ereignis) => {
  Ereignis.preventDefault()

  this.props.form.validateFields(async (err, values) => {
   wenn (!err) {
    const { Benutzername, Passwort } = Werte
    const result = warte auf reqLogin(Benutzername, Passwort)
    wenn (Ergebnis.Status === 0) { 
     message.success('Anmeldung erfolgreich')
     const Benutzer = Ergebnis.Daten
     memoryUtils.user = Benutzer
     storageUtils.saveUser(Benutzer)
     dies.props.history.replace('/')
    } anders { 
     Nachricht.Fehler(Ergebnis.Nachricht)
    }
   } anders {
    console.log(fehler)
   }
  })

2. React kombiniert mit Antd, um die Login-Funktion zu realisieren

React kombiniert Ant, um die Anmeldefunktion zu implementieren. Der vollständige Code lautet wie folgt:
login.jsx, der Code lautet wie folgt:

importiere React, {Komponente} von 'react'
importiere { Formular, Symbol, Eingabe, Schaltfläche, Nachricht } von 'antd'
importiere { Redirect } von 'react-router-dom'
importiere './login.less'
Logo importieren aus '../../assets/images/logo.png'
importiere { reqLogin } von '../../api'
importiere memoryUtils aus '../../utils/memoryUtils'
importiere storageUtils aus '../../utils/storageUtils'

Klasse Login erweitert Komponente {

 handleSubmit = (Ereignis) => {
  Ereignis.preventDefault()

  this.props.form.validateFields(async (err, values) => {
   wenn (!err) {
    const { Benutzername, Passwort } = Werte
    const result = warte auf reqLogin(Benutzername, Passwort)
    wenn (Ergebnis.Status === 0) { 
     message.success('Anmeldung erfolgreich')
     const Benutzer = Ergebnis.Daten
     memoryUtils.user = Benutzer
     storageUtils.saveUser(Benutzer)

     dies.props.history.replace('/')
    } anders { 
     Nachricht.Fehler(Ergebnis.Nachricht)
    }
   } anders {
    console.log(fehler)
   }
  })

 }

 validPwd = (Regel, Wert, Rückruf) => {
  wenn (!Wert) {
   callback('Passwort muss eingegeben werden')
  } sonst wenn (Wert.Länge < 4) {
   Rückruf('Die Passwortlänge darf nicht weniger als 4 Zeichen betragen.')
  } sonst wenn (Wert.Länge > 12) {
   Rückruf('Das Passwort darf nicht länger als 12 Zeichen sein.')
  } sonst wenn (!/^[a-zA-Z0-9_]+$/.test(Wert)) {
   Rückruf('Das Passwort muss Englisch, Zahlen oder Unterstriche sein.')
  } anders {
   Rückruf()
  }
 }


 rendern () {

  const Benutzer = memoryUtils.user
  if (Benutzer && Benutzer._ID) {
   zurück <Umleitung zu="/"></Umleitung>
  }

  const form = diese.props.form
  const { getFieldDecorator } = Formular

  zurückkehren (
   <div Klassenname="Anmelden">
    <header className="login-header">
     <img src={logo} alt="logo"></img>
     <h1>React-Backend-Verwaltungssystem</h1>
    </header>
    <Abschnitt Klassenname="Anmeldeinhalt">
     <h2>Benutzeranmeldung</h2>
     <Formular beiSubmit={this.handleSubmit}>
      <Formular.Element>
       {
        getFieldDecorator('Benutzername', { 
         Regeln:
          { erforderlich: true, Leerzeichen: true, Nachricht: ‚Benutzername ist erforderlich‘},
          { min: 4, message: 'Der Benutzername muss mindestens 4 Zeichen lang sein'},
          { max: 12, message: 'Der Benutzername muss mindestens 12 Zeichen lang sein'},
          { pattern: /^[a-zA-Z0-9_]+$/, message: 'Benutzername muss Englisch, Zahlen oder Unterstriche sein'}
         ],
         // Anfangswert: 'admin',
        })(
         <Eingabe
          Präfix={<Icontyp="Benutzer" Stil={{ Farbe: 'rgba(0,0,0,.25)' }} />}
          Platzhalter="Benutzername"
         />
        )
       }
      </Form.Item>
      <Formular.Element>
       {
        getFieldDecorator('Passwort', {
         Regeln:
          { validator: this.validPwd }
         ]
        })(
         <Eingabe
          Präfix={<Symboltyp="Schloss" Stil={{ Farbe: 'rgba(0,0,0,.25)' }} />}
          Typ="Passwort"
          Platzhalter="Passwort"
         />
        )
       }
      </Form.Item>
      <Formular.Element>
       <Button Typ="primär" htmlType="Senden" Klassenname="Anmeldeformular-Schaltfläche">
         Anmelden</Button>
      </Form.Item>
     </Form>
    </Abschnitt>
   </div>
  )
 }
}

const WrapLogin = Form.create()(Anmelden)
Standard-WrapLogin exportieren

login.less, der Code lautet wie folgt:

.Anmelden {
 Breite: 100 %;
 Höhe: 100%;
 Hintergrundbild: URL('./images/bg.jpg');
 Hintergrundgröße: 100 % 100 %;
 .login-header {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Höhe: 80px;
  Hintergrundfarbe: rgba(21, 20, 13, 0,5);
  img {
   Breite: 40px;
   Höhe: 40px;
   Rand: 0,15px, 0,50px;
  }
  h1 {
   Schriftgröße: 30px;
   Farbe: weiß;
  }
 }

 .login-inhalt {
  Breite: 400px;
  Höhe: 300px;
  Hintergrundfarbe: #fff;
  Rand: 50px automatisch;
  Polsterung: 20px 40px;
  h2 {
   Textausrichtung: zentriert;
   Schriftgröße: 30px;
   Schriftstärke: fett;
   Rand unten: 20px;
  }
  .login-form {
   .login-form-button {
    Breite: 100 %;
   }
  }
 }
}

Dies ist das Ende dieses Artikels über die Implementierung der Anmeldefunktion durch Kombination von React mit der Formularkomponente von Antd. Weitere relevante Inhalte zur Anmeldung mit React Antd Form finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • AntDesign Pro + .NET Core implementiert eine JWT-basierte Login-Authentifizierungsfunktion
  • SMS-Bestätigungscode-Anmeldefunktion basierend auf Antd Pro (Prozessanalyse)

<<:  So erstellen Sie einen Nginx-Server mit Docker

>>:  MySQL ruft die aktuelle Datums- und Uhrzeitfunktion ab

Artikel empfehlen

MySQL5.7.27-winx64 Version Win10 Download- und Installations-Tutorial-Diagramm

MySQL 5.7-Installation Wir lernen in der Schule M...

Erklären Sie den Unterschied zwischen Iframe und Frame in HTML anhand von Beispielen

Ich weiß nicht, ob Sie das Frameset-Attribut in I...

Konfigurationsprozess für die MySQL-Master-Slave-Replikation

Konfiguration der Hauptbibliothek 1. Konfiguriere...

Lösen Sie das Problem des Navicat für Mysql-Verbindungsfehlers 1251 (Verbindung fehlgeschlagen)

Da das, was ich zuvor geschrieben habe, nicht det...

So stellen Sie mit Navicat eine Remoteverbindung zur Cloud-Server-Datenbank her

Es ist sehr praktisch, eine Verbindung zu einer R...

Lösung für das Problem, dass eine Linux-Änderung der MySQL-Konfiguration nicht wirksam wird

Hintergrund Ich habe einen Projektdienst, der AWS...

Top 10 der nützlichsten und wichtigsten Open-Source-Tools im Jahr 2019

In der Open-Source-Umfrage von Black Duck aus dem...

Erläuterung zu JavaScript-Anti-Shake und -Throttling

Inhaltsverzeichnis Stabilisierung Drosselung Zusa...

js native Wasserfall-Flow-Plugin-Produktion

In diesem Artikel wird der spezifische Code des n...

Warum sollte die Anzahl der Zeilen in einer einzelnen MySQL-Tabelle 5 Millionen nicht überschreiten?

Lassen Sie uns heute ein interessantes Thema besp...

Popularisierung der Theorie – Benutzererfahrung

1. Konzeptanalyse 1: UE User Experience <br /&...

So ändern Sie in Nginx die über http aufgerufene Website in https

Inhaltsverzeichnis 1. Hintergrund 2. Voraussetzun...

5 einfache XHTML-Webformulare für Webdesign

Einfaches XHTML-Webformular im Webdesign 5. Techn...

Detaillierte Erklärung der Rolle des neuen Operators in Js

Vorwort Js ist heutzutage die am häufigsten verwe...

Geschickte Nutzung von WebKit-Box-Reflect zur Erzielung verschiedener dynamischer Effekte (Zusammenfassung)

In einem Artikel vor langer Zeit habe ich über di...