Vue implementiert verschiedene Ideen zur Erkennung sensibler Wortfilterkomponenten

Vue implementiert verschiedene Ideen zur Erkennung sensibler Wortfilterkomponenten

Vorne geschrieben

Beim Erkennen sensibler Wörter auf der Händlerseite sind uns einige Probleme aufgefallen, die wir hier zusammenfassen. Die Idee dieses Artikels besteht darin, Code zur Erkennung sensibler Wörter zu schreiben. Die ersten beiden Ideen übernehmen nicht die Idee der komponentenbasierten Entwicklung, und die letzten drei Ideen werden gemäß den geänderten Anforderungen unter Verwendung der komponentenbasierten Idee und Mixins entwickelt.

Anforderungsanalyse v1

Klicken Sie im Händlerproduktmodul auf die Schaltfläche „Produkt bearbeiten“, um den Produkttitel und den Preis zu ändern. Wenn der Produkttitel nicht ausgefüllt ist, ist die Schaltfläche „Speichern“ ausgegraut. Wenn der ausgefüllte Produkttitel vertrauliche Wörter enthält, ist die Schaltfläche „Speichern“ ausgegraut und es wird eine Eingabeaufforderung zur Rückkehr zum Backend angezeigt.

Im Anpassungsmodul auf Händlerseite können Sie nach Abschluss der Anpassung direkt zur Produktbearbeitungsseite springen, um den Produkttitel und den Preis zu ändern. Wenn der Produkttitel nicht ausgefüllt ist, ist die Schaltfläche „Speichern“ ausgegraut. Wenn der ausgefüllte Produkttitel vertrauliche Wörter enthält, ist die Schaltfläche „Speichern“ ausgegraut und es wird eine Eingabeaufforderung zur Rückkehr zum Backend angezeigt.

Idee 1: Verwenden Sie eine Abfangmethode, um Eingabeereignisse des Eingabefelds zu überwachen

Da ich für das Produktmodul verantwortlich war, wusste ich nicht, dass den Produkttiteln der angepassten Module auch eine Erkennung sensibler Wörter hinzugefügt werden musste. Deshalb habe ich die Erkennung sensibler Wörter von Anfang an nicht als Komponente geschrieben. Das ist also die erste Idee: Verwenden Sie die Abfangmethode, um das Eingabeereignis des Eingabefelds zu überwachen.

Ideen:

1. Solange die Eingabe nicht leer oder voller Leerzeichen ist, wird nach jeder Eingabe das Eingabeereignis des Eingabefelds ausgelöst und die Schnittstelle zur Erkennung sensibler Wörter aufgerufen. Häufige Schnittstellenanforderungen verursachen eine enorme Belastung des Servers. Daher kann die Häufigkeit von Schnittstellenanforderungen durch die Abfangmethode verringert werden.

2. Fügen Sie einen Timer für die angeforderte Schnittstelle hinzu und fügen Sie eine Countdown-Zeit von 1 s hinzu. Verzögern Sie die Anforderungsschnittstelle nach jeder Eingabe um 1 s. Daher kann der vorherige Timer gelöscht werden, nachdem das Eingabeereignis des Eingabefelds ausgelöst wurde. Verhindern Sie Timer-Überlappungen und wiederholte Schnittstellenanforderungen und behalten Sie nur die Schnittstellenanforderung für die Erkennung vertraulicher Wörter bei, die durch das letzte Eingabeereignis ausgelöst wurde. Dies bedeutet, dass, wenn der Benutzer den Produkttitel kontinuierlich eingibt und das Intervall zwischen den einzelnen Eingaben weniger als 1 s beträgt, die vom Benutzer beim letzten Mal eingegebenen Informationen von der Schnittstelle überprüft werden, um festzustellen, ob sie den Spezifikationen für vertrauliche Wörter entsprechen. Wenn der Benutzer den Produkttitel in Intervallen eingibt und die Intervallzeit 1 s überschreitet, werden mehrere Schnittstellenanforderungen initiiert, was immer noch eine erhebliche Belastung des Servers darstellt. Daher weist diese Methode immer noch Einschränkungen auf.

//HTML zur Erkennung sensibler Wörter
<div class="edit-title">Produkttitel</div>
   <el-Eingabe
     v-model="Produktname"
     Platzhalter="Bitte geben Sie den Produkttitel ein"
     Typ="Text"
     Auto-Vervollständigung="ein"
     löschbar
     @input="Spams prüfen"
   />
<div v-if="showMessage" class="message">{{ Fehlernachricht }}</div>

//Schaltfläche „HTML speichern“
<el-button type="primary" @click="save" :disabled="productName === '' || showMessage === true">Speichern</el-button>

 Daten() {
    zurückkehren {
      Produktname: '',
      Fehlermeldung: '',
      Nachricht anzeigen: false,
      Zeitgeber: -1
    }
  },
  Methoden: {
    inspizieren() {
      wenn(dieser.Produktname.trim() !== '') {
        dies.$store.dispatch('products/inspectSpams', dies.productName).catch((err)=>{
          this.errorMessage = err.response.data.message
          this.showMessage = wahr
        })
      }
    },
    inspectSpams() {
      this.showMessage = falsch
      Zeitüberschreitung löschen(dieser.Timer)
      dieser.timer = setTimeout(() => {
        dies.inspect()
      }, 1000)
    }
  }

Fehler: Nachdem Sie dem Produkttitel vertrauliche Wörter hinzugefügt haben, können die vertraulichen Wörter erfolgreich gespeichert werden, indem Sie innerhalb von 1 Sekunde auf die Schaltfläche „Speichern“ klicken, solange die Handgeschwindigkeit schnell genug ist. Dies widerspricht jedoch unseren Anforderungen.

Idee 2: Fokusverlust des Eingabefelds und Klickereignis der Schaltfläche „Speichern“ nutzen

Da es Probleme bei der Verwendung des Eingabeereignisses des Eingabefelds gibt, ist es möglich, das Fokusverlustereignis des Eingabefelds und das Klickereignis der Schaltfläche „Speichern“ zu verwenden? Die Antwort ist ja. Es gibt jedoch zwei Aspekte, die in diesem Prozess besondere Aufmerksamkeit erfordern.

Notiz:

  • Sie müssen unscharfe Ereignisse verstehen. Was ist unscharf? Nachdem Sie den Titel in das Eingabefeld eingegeben haben, führt ein Klick irgendwo außerhalb des Eingabefelds zu einem Fokusverlust. Vergessen Sie also nicht, dass ein Klick auf die Schaltfläche „Speichern“ auch einen Fokusverlust auslöst. Daher müssen Sie die Schnittstelle zur Erkennung sensibler Wörter nur im Ereignis „Eingabefeld außerhalb des Fokus“ anfordern, ohne die Anforderung im Klickereignis wiederholen zu müssen.
  • Es müssen die asynchronen Probleme berücksichtigt werden, die durch das Auslösen von Unfokus-Ereignissen und Klick-Ereignissen verursacht werden. Durch Klicken auf die Schaltfläche „Speichern“ werden sowohl das Unschärfeereignis als auch das Klickereignis ausgelöst. Das Unschärfeereignis hat Vorrang vor dem Klickereignis. Das Unfokussierungsereignis wird verwendet, um die Schnittstelle zur Erkennung vertraulicher Wörter anzufordern, und das Klickereignis wird verwendet, um Produktinformationen zu ändern. Die Interaktionslogik besteht darin, zuerst die Schnittstelle zur Erkennung sensibler Wörter anzufordern. Wenn der von der Schnittstelle zurückgegebene Status erfolgreich ist, muss keine Fehlermeldung angezeigt werden. Andernfalls muss die vom Backend zurückgegebene Fehlermeldung angezeigt und die Schaltfläche „Speichern“ deaktiviert werden. Fordern Sie nach erfolgreicher Überprüfung eine Änderung der Produktinformationsschnittstelle an. Daher gibt es eine Abfolge zwischen diesen beiden Methoden. Und das Unschärfeereignis muss zuerst die Schnittstelle für sensible Wörter anfordern, und die Anforderung zum Ändern der Produktinformationen muss erfolgen, nachdem die Anforderung für die Schnittstelle für sensible Wörter abgeschlossen ist. Aufgrund der langsamen Erkennung sensibler Wörter können wir nicht zulassen, dass unzulässige sensible Wörter erfolgreich gespeichert und wiedergegeben werden. Derzeit ist es nicht erforderlich, die API zur Erkennung sensibler Wörter anzufordern. Da es unmöglich ist, die beiden Schnittstellen zu bestimmen und zu garantieren, muss eine Variable hinzugefügt werden, um zu bestimmen, ob die Anforderung der Schnittstelle für sensible Wörter beendet wurde. Wenn die Schnittstelle die Anforderung nicht abgeschlossen hat, müssen Sie die Anforderung im Klickereignis erneut starten. Wenn die Schnittstelle die Anforderung abgeschlossen hat, kehren Sie einfach zurück und ignorieren Sie sie.

Ideen:

  • Fügen Sie dem Eingabefeld ein Fokusverlustereignis hinzu.
  • Fügen Sie ein Klickereignis für die Schaltfläche „Speichern“ hinzu.

Code:

<div class="edit-title">Produkttitel</div>
 <el-Eingabe
   v-model="Produktname"
   Platzhalter="Bitte geben Sie den Produkttitel ein"
   Typ="Text"
   Auto-Vervollständigung="ein"
   löschbar
   @blur="Spams prüfen"
 />
 <div v-if="showMessage" class="message">{{ Fehlernachricht }}</div>
 
 <el-button type="primary" @click="save" :disabled="!productName || showMessage">Speichern</el-button>

 Daten() {
   zurückkehren {
     Nachricht anzeigen: false,
     Produktname: '',
     Fehlermeldung: '',
     Zeitgeber: -1,
     hat überprüft: false
   }
 },
 Methoden: {
  //Ereignis außerhalb des Fokus (Schnittstelle zur Erkennung sensibler Wörter anfordern)
   asynchron inspectSpams() {
     this.hasVerified = falsch
     this.showMessage = falsch
     wenn(dieser.Produktname.trim() !== '') {
       warte auf dies.$store.dispatch('products/inspectSpams', this.productName).catch((err) => {
         this.errorMessage = err.response.data.message
         this.showMessage = wahr
       })
     }
     this.hasVerified = wahr
   },
   //Klickereignis (Anforderung zur Änderung der Produktinformationsschnittstelle)
   asynchron speichern() {
     wenn(!dies.hasVerified) {
        warte auf dies.inspectSpams()
     }
     const Varianten = diese.Varianten.map((Variante) => {
       zurückkehren {
         ID: Variante.ID,
         Preis: Variante.Preis,
       }
     })
     Konstante Parameter = {
       Varianten,
       Name: dieser.Produktname
     }
     params.productId = diese.productId
     warte darauf.$store.dispatch('products/editProduct', params)
       .then(async() => {
         warte auf this.getProductListData(this.productStatus, 1)
         diese.$nachricht({
           Typ: "Erfolg",
           Meldung: ,Produktänderung erfolgreich!‘ '
         })
       })
       .catch((Nachricht) => {
         diese.$nachricht({
           Typ: "Fehler",
           Nachricht
         })
       })
     this.showEditProductDialog = false
   }
 }

Idee 3: Verwenden Sie Mixins, um eine Methode zur Erkennung sensibler Wörter zu extrahieren

Ich dachte, ich hätte auf die Erkennung sensibler Wörter verzichtet, erhielt dann aber eine Produktnachricht, dass ich dem Produkttitel des benutzerdefinierten Moduls auch die Erkennung sensibler Wörter hinzufügen müsse. Danach drückte ich wie ein Tiger Strg+C und Strg+V und stellte schließlich fest, dass der Code zu redundant war und sortiert werden musste. Hier und im Folgenden werden wir nur über die Erkennungslogik für sensible Wörter des Produktmoduls schreiben. Die Erkennungslogik für sensible Wörter des benutzerdefinierten Moduls ähnelt tatsächlich der des Produktmoduls. Da Stil und Logik der Produkttitelbearbeitung im benutzerdefinierten Modul fast dieselben sind wie im Produktmodul, warum nicht die öffentliche Methode zur Erkennung vertraulicher Wörter extrahieren? Ich habe mich gerne dafür entschieden und nach viel Tippen auf der Tastatur wurde die Mixin-Methode gebildet:

Standard exportieren {
Daten() {
     zurückkehren {
         hat überprüft: falsch,
         Nachricht anzeigen: false,
         Fehlermeldung: ''
     }
 },
 Methoden: {
     asynchron inspectSpams(Name) {
         this.hasVerified = falsch
         this.showMessage = falsch
         wenn(name.trim() !== '') {
           warte darauf.$store.dispatch('products/inspectSpams', name).catch((err) => {
             this.errorMessage = err.response.data.message
             this.showMessage = wahr
           })
         }
         this.hasVerified = wahr
     }
 }
}

<div class="edit-title">Produkttitel</div>
<el-Eingabe
    v-model="Produktname"
    Platzhalter="Bitte geben Sie den Produkttitel ein"
    Typ="Text"
    Auto-Vervollständigung="ein"
    löschbar
    @blur="inspectSpams(Produktname)"
/>
<div v-if="showMessage" class="message">{{ Fehlernachricht }}</div>

<el-button type="primary" @click="save" :disabled="!productName || showMessage">Speichern</el-button>

importiere inspectSpams von '@/mixins/inspectSpams'

Standard exportieren {
     Daten() {
          zurückkehren {
              Produktname: ''
          }
      },
      Mixins: [inspectSpams],
      Methoden: {
        //Klickereignis (Anforderung zur Änderung der Produktinformationsschnittstelle)
        asynchron speichern() {
          wenn(!dies.hasVerified) {
              warte auf this.inspectSpams(this.productName)
          }
          const Varianten = diese.Varianten.map((Variante) => {
            zurückkehren {
              ID: Variante.ID,
              Preis: Variante.Preis,
            }
          })
          Konstante Parameter = {
            Varianten,
            Name: dieser.Produktname
          }
          params.productId = diese.productId
          warte darauf.$store.dispatch('products/editProduct', params)
            .then(async() => {
              warte auf this.getProductListData(this.productStatus, 1)
              diese.$nachricht({
                Typ: "Erfolg",
                Meldung: ,Produktänderung erfolgreich!‘ '
              })
            })
            .catch((Nachricht) => {
              diese.$nachricht({
                Typ: "Fehler",
                Nachricht
              })
            })
          this.showEditProductDialog = false
        }
      }
}

Idee 4: Verwenden Sie Promise, um Komponenten zur Erkennung sensibler Wörter zu kapseln (bedarfsorientiert v1)

Angesichts der Tatsache, dass die HTML-Struktur der Erkennung sensibler Wörter im Produktmodul und des benutzerdefinierten Moduls nahezu identisch ist, wurde entschieden, eine Komponente zur Erkennung sensibler Wörter zu kapseln und den HTML-Code und die Geschäftslogik der Erkennung sensibler Wörter im Produkttitel zusammenzufügen. Dabei müssen jedoch drei Aspekte besondere Aufmerksamkeit erhalten:

Notiz:

  • Die asynchrone Funktion gibt ein Promise-Objekt zurück;
  • Der übergebene Props-Wert kann nicht direkt geändert werden, aber der Props-Wert kann indirekt geändert werden, indem die Zwischenvariable über die Zwischenvariable bidirektional an die Props gebunden wird.
  • Sie können den Eigenschaften in der übergeordneten Komponente einen Synchronisierungsmodifikator hinzufügen und Eigenschaften und Zwischenvariablen in der untergeordneten Komponente überwachen. Wenn sich der Wert einer der Parteien ändert, wird der geänderte Wert der anderen Partei zugewiesen, wodurch der Zweck der wechselseitigen Bindung erreicht wird.

Ideen:

  • Schreiben Sie eine Komponente zur Erkennung sensibler Wörter.
  • Einführung einer Komponente zur Erkennung sensibler Wörter.
//Komponente zur Erkennung sensibler Wörter <template>
    <div>
        <el-input v-model="input" placeholder="Bitte geben Sie den Produkttitel ein" type="text" clearable @blur="inspectSpams" />
        <div v-if="isShowMessage" class="message">{{ Fehlernachricht }}</div>
    </div>
</Vorlage>

<Skript>
Standard exportieren {
    Requisiten: {
        Titel:
            erforderlich: wahr,
            Typ: Zeichenfolge
        }
    },
    Daten() {
        zurückkehren {
            Eingabe: '',
            isShowMessage: false,
            Fehlermeldung: '',
            hat überprüft: wahr
        }
    },
    betrachten:
        Titel:
            handler(Wert) {
                diese.Eingabe = Wert
            },
            sofort: wahr
        },
        Eingabe(Wert) {
            dies.$emit('update:title', val)
        }
    },
    Methoden: {
        asynchron inspectSpams() {
            this.hasVerified = falsch
            this.isShowMessage = false
            wenn (diese.Eingabe !== '') {
                warte auf dies.$store.dispatch('products/inspectSpams', this.input).catch((err) => {
                    this.errorMessage = err.response.data.message
                    this.isShowMessage = true
                })
            }
            this.hasVerified = wahr
        },
        init() {
            this.isShowMessage = false
        },
        asynchron überprüfen() {
            wenn (!this.hasVerified) {
                warte auf dies.inspectSpams()
            }
            const emptyInput = this.input.trim()
            wenn (emptyInput === '') {
                this.isShowMessage = true
                this.errorMessage = 'Bitte geben Sie den Produktnamen ein'
            }
            gib ein neues Promise zurück((resvole, reject) => {
                wenn (Boolean(!emptyInput || this.isShowMessage)) {
                    ablehnen()
                } anders {
                    Antwort()
                }
            })
        }
    }
}
</Skript>

<Stil>
.Nachricht {
    Schriftstärke: fett;
    Farbe: rot;
    Rand oben: 10px;
}
</Stil>

//Komponente zur Erkennung sensibler Wörter einführen <script>
importiere { mapState } von 'vuex'
importiere InspectSpams aus '@/components/InspectSpams'

Standard exportieren {
 Namensliste',
 Komponenten:
   Spams prüfen
 },
 Daten() {
   zurückkehren {
     Produktname: ''
   }
 },
 berechnet: {
   ...mapState({
     Varianten: (Status) => Status.Produkte.Detail.Varianten
   }),
 },
 Methoden: {
   speichern() {
     dies.$refs.productSpamsRef.verify()
       .dann(async()=>{
         const Varianten = diese.Varianten.map((Variante) => {
         zurückkehren {
           ID: Variante.ID,
           Preis: Variante.Preis,
         }
       })
       Konstante Parameter = {
         Varianten,
         Name: dieser.Produktname
       }
       params.productId = diese.productId
       warte darauf.$store.dispatch('products/editProduct', params)
         .then(async() => {
           warte auf this.getProductListData(this.productStatus, 1)
           diese.$nachricht({
             Typ: "Erfolg",
             Meldung: ,Produktänderung erfolgreich!‘ '
           })
         })
       this.showEditProductDialog = false
       })
       .fangen(()=>{
         diese.$nachricht({
           Typ: "Fehler",
           Meldung: „Bitte geben Sie einen gültigen Produktnamen ein“
         })
       })
   },
   getProductListData(status, seite) {
     dies.$store.dispatch('products/getList', {
       Grenze: 16,
       Status,
       Reihenfolge: 'id',
       Richtung: 'desc',
       Seite
     })
   }
}
</Skript>

<Vorlage>
    <div>
      <div class="edit-title">Produkttitel</div>
      <InspectSpams 
         :title.sync="Produktname"
         ref="ProduktSpamsRef"
      />
      <el-button type="primary" @click="save">Speichern</el-button>
    </div>
</Vorlage>

Idee 5: Verwenden Sie Slots und Mixins, um Komponenten zur Erkennung sensibler Wörter zu kapseln (bedarfsorientiert v2)

Anforderungsänderungen: Im Vergleich zur Anforderung v1 gibt es tatsächlich keine Änderung. Nur der Produkttitel des Produktmoduls muss ausgefüllt werden, sonst ist die Schaltfläche „Speichern“ deaktiviert. Der Produkttitel des benutzerdefinierten Moduls kann leer gelassen werden. Nach dem Speichern ist der ausgefüllte Produkttitel + Whiteboard-Name die Standardeinstellung.

Idee: Warum in diesem Fall nicht das HTML für Fehleraufforderungen in eine Komponente einfügen, Slots zum Darstellen der zu erkennenden Felder verwenden und die Logik zur Erkennung vertraulicher Wörter in Mixins einfügen? Wenn in Zukunft an anderen Stellen eine Erkennung sensibler Wörter erforderlich ist, wird sie flexibler sein. Tatsächlich kommt dies dem Prinzip der Wiederverwendung von Komponenten eher zugute.

//Komponente zur Erkennung sensibler Wörter <template>
 <div>
     <Steckplatz />
     <div v-if="isShowMessage" Klasse="Nachricht">
         {{ Fehlernachricht }}
     </div>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Requisiten: {
     istShowMessage: {
         erforderlich: wahr,
         Typ: Boolean
     },
     Fehlermeldung: {
         erforderlich: wahr,
         Typ: Zeichenfolge
     }
 }
}
</Skript>

<Stil>
.Nachricht {
 Schriftstärke: fett;
 Farbe: rot;
 Rand oben: 10px;
}
</Stil>

//Mixins zur Erkennung sensibler Wörter
Standard exportieren {
 Daten() {
     zurückkehren {
         isShowMessage: false,
         Fehlermeldung: '',
         hat überprüft: wahr
     }
 },
 Methoden: {
     asynchrone Überprüfung von Spams(Name) {
         this.hasVerified = falsch
         this.isShowMessage = false
         wenn (name.trim() !== '') {
             warte darauf.$store.dispatch('products/inspectSpams', name).catch((err) => {
                 this.errorMessage = err.response.data.message
                 this.isShowMessage = true
             })
         }
         this.hasVerified = wahr
     }
 }
}

importiere InspectSpams aus '@/components/InspectSpams'
importiere inspectSpams von '@/mixins/inspectSpams'

Komponenten:
 Spams prüfen
},
Mixins: [inspectSpams],

asynchron speichern() {
   wenn(!dies.hasVerified) {
     warte auf this.inspectSpams(this.productName)
   }
   const Varianten = diese.Varianten.map((Variante) => {
     zurückkehren {
       ID: Variante.ID,
       Preis: Variante.Preis,
     }
   })
   Konstante Parameter = {
     Varianten,
     Name: dieser.Produktname
   }
   params.productId = diese.productId
   warte darauf.$store.dispatch('products/editProduct', params)
     .then(async() => {
       warte auf this.getProductListData(this.productStatus, 1)
       diese.$nachricht({
         Typ: "Erfolg",
         Meldung: ,Produktänderung erfolgreich!‘ '
       })
     })
     .catch((Nachricht) => {
       diese.$nachricht({
         Typ: "Fehler",
         Nachricht
       })
     })
   this.showEditProductDialog = false
 },
 
<div class="edit-title">Produkttitel</div>
<InspectSpams :isShowMessage="isShowMessage" :errorMessage="errorMessage">
 <el-Eingabe
     v-model="Produktname"
     Platzhalter="Bitte geben Sie den Produkttitel ein"
     Typ="Text"
     Auto-Vervollständigung="ein"
     löschbar
     @blur="inspectSpams(Produktname)"
 />
</InspectSpams>

Optimierung und Verbesserung

1. Optimieren Sie die Bedingungen für den Aufruf der Erkennung sensibler Wörter. Wenn sich der Produkttitel nicht geändert hat, ist es nicht erforderlich, die API zur Erkennung vertraulicher Wörter anzufordern. Da nur erfolgreich verifizierte Titel erfolgreich gespeichert werden können, ist ein wiederholtes Aufrufen der Schnittstelle nicht erforderlich. Sie müssen die Bedingungen der Mixin-Anforderungsschnittstelle ändern.

Idee: Weisen Sie beim Öffnen des Modalfelds zum Anfordern der Produktdetailseite basierend auf der Produkt-ID das Namensfeld der entsprechenden Produktinformationen der neu hinzugefügten Variable „originalName“ zu. Übergeben Sie beim Aufrufen der Mixin-Methode „inspectSpams“ in HTML und JS „originalName“ und „productName“ als Variablen.

//Geänderte Mixins werden in export default { eingemischt.
    Daten() {
        zurückkehren {
            isShowMessage: false,
            Fehlermeldung: '',
            hat überprüft: wahr
        }
    },
    Methoden: {
        async inspectSpams(ursprünglicherName, aktuellerName) {
            this.hasVerified = falsch
            this.isShowMessage = false
            wenn (originalName !== aktuellerName && aktuellerName.trim() !== '') {
                warte darauf.$store.dispatch('products/inspectSpams', currentName).catch((err) => {
                    this.errorMessage = err.response.data.message
                    this.isShowMessage = true
                })
            }
            this.hasVerified = wahr
        }
    }
}

2. Durch mehrmaliges Klicken auf die Schaltfläche wird die Schnittstelle wiederholt angefordert. Zur Optimierung können Sie Anti-Shake, einen Tasten-Countdown, die Kapselung von Axios-Anfragen, das Festlegen der Belastung für die Taste usw. verwenden.

Abschließende Gedanken

Tatsächlich ist die Zusammenfassung nicht sehr gut, die geschriebenen Komponenten sind nicht gut genug und die Ideen sind nicht sehr klar. Ich zeichne sie hier hauptsächlich auf, um die Ideen 2 und 4 zusammenzufassen. Schließlich bin ich mit der Vue-Dokumentation nicht sehr vertraut. Es gibt noch viele Bereiche, die in der Komponente zur Erkennung sensibler Wörter verbessert werden können. Bitte weisen Sie in den Kommentaren darauf hin.

Oben finden Sie ausführliche Informationen zu verschiedenen Ideen zum Schreiben von Vue-Komponenten zum Erkennen sensibler Wörter. Weitere Informationen zu Vue-Komponenten zum Erkennen sensibler Wörter finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • 4 Möglichkeiten zur Implementierung der Filterung sensibler Wörter in Python
  • Abrufen und Ausgeben sensibler Wörter basierend auf Python
  • Das Laravel-Framework implementiert ein Beispiel für eine Filterfunktion für sensible Wörter
  • Python verwendet Klassen, um ein Beispiel für eine Methode zur artikelsensitiven Wortfilterung zu implementieren
  • Eine kurze Diskussion über die Implementierung der Python-sensitiven Wortfilterung
  • Beispiel einer in PHP implementierten Methode zur Filterung sensibler Wörter
  • So filtern Sie vertrauliche Wörter mit regulären Python-Ausdrücken
  • Python implementiert ein Beispiel für die Filterung sensibler Wörter in Honor of Kings
  • Python implementiert eine Methode zum Filtern sensibler Wörter
  • js implementiert einen Algorithmus zum Filtern sensibler Wörter und eine Implementierungslogik
  • Java implementiert den DFA-Algorithmus zum Filtern sensibler Wörter und Werbewörter

<<:  So installieren Sie die IonCube-Erweiterung mit Pagoda

>>:  Detaillierte Schritte zur vollständigen Deinstallation und Neuinstallation von MySQL unter Windows 10

Artikel empfehlen

Gründe, warum MySQL Kill Threads nicht beenden kann

Inhaltsverzeichnis Hintergrund Problembeschreibun...

Verwenden Sie Docker, um einen Redis-Master-Slave-Replikationscluster zu erstellen

In einem Cluster mit Master-Slave-Replikationsmod...

Implementierung eines verschachtelten Sprungs der Vue-Routing-Ansicht Router-Ansicht

Inhaltsverzeichnis 1. Ändern Sie die app.vue-Seit...

Vant+postcss-pxtorem implementiert Browser-Anpassungsfunktion

Rem-Layout-Anpassung Die Stile in Vant verwenden ...

Lösung zum Erstellen mehrerer Datenbanken, wenn Docker PostgreSQL startet

1 Einleitung Im Artikel „PostgreSQL mit Docker st...

Der gesamte Prozess der Konfiguration von Hive-Metadaten für MySQL

Gehen Sie im Hive-Installationsverzeichnis in das...

Eine kurze Diskussion über die Verwendung virtueller Listen zur Optimierung von Tabellen in el-table

Inhaltsverzeichnis Vorwort Lösung Konkrete Umsetz...

Verwenden von CSS3 zum Implementieren eines Schriftfarbverlaufs

Beim Verwenden von Animation.css habe ich festges...

Windows Server 2019 installieren (grafisches Tutorial)

Windows Server 2019 ist das neueste Server-Betrie...

Fassen Sie einige allgemeine Prinzipien des Webdesigns und der Webproduktion zusammen

<br />Verwandte Artikel: 9 praktische Vorsch...

Detaillierte Erläuterung der Reihenfolge der JS-Objektdurchquerung

Einige von Ihnen haben vielleicht gehört, dass di...

So verwenden Sie eine Multi-Core-CPU, um Ihre Linux-Befehle zu beschleunigen (GNU Parallel)

Mussten Sie schon einmal sehr große Datenmengen (...

Erfahren Sie, wie Sie den Zabbix-Dienst auf Saltstack bereitstellen

Inhaltsverzeichnis Saltstack stellt Zabbix-Dienst...

Detaillierte Erklärung der Datentypen in den JavaScript-Grundlagen

Inhaltsverzeichnis 1. Datentyp 1.1 Warum brauchen...

Detaillierte Erklärung zur Verwendung von pt-heartbeat zur Überwachung der MySQL-Replikationsverzögerung

pt-Herzschlag Wenn die Datenbank zwischen Master ...