Vue implementiert Fuzzy-Abfrage-MySQL-Datenbankdaten

Vue implementiert Fuzzy-Abfrage-MySQL-Datenbankdaten

1. Nachfrage

Geben Sie Daten in das Eingabefeld ein und suchen Sie basierend auf den Eingabeergebnissen unscharf nach dem entsprechenden Inhalt in der Datenbank, um eine unscharfe Abfrage zu erreichen.

2. Umsetzung

Das Eingabefeld verwendet eine bidirektionale v-model -Bindung zum Abfragen von keyWord .

<el-input v-model="keyWord" placeholder="Bitte geben Sie das zu suchende Schlüsselwort ein" löschbar></el-input>
        <el-button type="erfolgreich" icon="el-icon-suche" @click="suche"></el-button>


Da sich das Eingabefeld und das Anzeigeergebnis nicht mehr in derselben view befinden, werden die Suchergebnisse an die Seite weitergegeben, die die Ergebnisse anzeigt, wenn die Route springt. query lautet

Suchfunktion:

SearchResult.vue -Code

Bildbeschreibung hier einfügen

Holen Sie sich keyWord aus dem Eingabefeld in der created Funktion

getData(offset,limit) verwendet axios , um Daten basierend auf keyWord vom Backend abzufragen, wobei offset und limit Parameter für Paging-Abfragen sind.

//Methode zum Anfordern von Datenbankdaten getData(offset,limit){
      dies.axios.post('/php/search.php', qs.stringify({
        Versatz: Versatz,
        Grenze: Grenze,
        Schlüsselwort: dieses.Schlüsselwort
      }), { Header: { 'Inhaltstyp': 'Anwendung/x-www-form-urlencoded' } }).then((res) => {
        dies.total = res.data.total
        diese.Ergebnisliste = res.data.data
      }).catch((err) => {
        dies.$message.error(err)
      })

Nach erfolgreichem Abrufen der Daten werden diese im Array resultList gespeichert. Sie müssen nur eine Schleife durch das Array ausführen, um die Abfrageergebnisse im Frontend anzuzeigen.

Das Backend ist in php geschrieben und verwendet like sql Anweisungen, um Fuzzy-Abfragen zu implementieren.
Ändern Sie in der Backend-Datei search.php die grundlegenden Datenbankverbindungsinformationen in Ihre eigenen.

<?php
$servername = "Hostadresse";
$Benutzername = "Konto";
$password = "Passwort";
$dbname = "Datenbankname";

// Verbindung erstellen $conn = new mysqli($servername, $username, $password, $dbname);
// Verbindung prüfen
wenn ($conn->connect_error) {
    die("Verbindung fehlgeschlagen: " . $conn->connect_error);
} 

$Schlüsselwort = $_POST['Schlüsselwort'];
//Start- und Endnummer der Front-End-Parameter abrufen
wenn ( !isset( $_POST['offset'] ) ) {
 Echo 0;
 Ausfahrt();
};
$offset = (int)$_POST['Offset'];

wenn ( !isset( $_POST['limit'] ) ) {
 Echo 0;
 Ausfahrt();
};
$limit = (int)$_POST['limit'];
//Paginierungsabfragedatenbank $sql = "SELECT * FROM Beiträge mit Titeln wie ‚%$keyWord%‘, sortiert nach ID desc LIMIT $limit OFFSET $offset";
$Ergebnis = $conn->query($sql);

$sqlGetCount = "SELECT COUNT(*) cnt FROM Beiträge mit Titeln wie '%$keyWord%'";
: $rescnt = $conn->query($sqlGetCount);
$rescnt = $rescnt->fetch_assoc();
$arr = Array();
wenn ($Ergebnis->Anz.Zeilen > 0) {
 während ( $row = $result->fetch_assoc() ) {
    array_push( $arr, $row );
}
 //echo json_encode( $arr, JSON_UNESCAPED_UNICODE );
 echo json_encode(array_merge(array('Daten'=>$arr),array('total'=>(int)$rescnt['cnt'])));
 
} anders {
    Echo 0;
}
mysqli_close( $conn );
?>

Beachten Sie die SQL-Anweisung:

SELECT * FROM Beiträge mit Titeln wie „%$keyWord%“, sortiert nach ID absteigend LIMIT $limit OFFSET $offset;

Auf like sollte zur Parameterübergabe '%$keyWord%' folgen, statt %' $keyWord'% . Ich glaube, ich bin in eine Falle getappt.
Dies ist dann ein auf den Eingabedaten basierender Fuzzy-Abfragetitel, also der Datensegmenttitel, der geändert werden kann, um andere Inhalte abzufragen.

3. Ergebnisse

Dies ist das Ende dieses Artikels über die Implementierung von Fuzzy-Abfragen von MySQL-Datenbankdaten basierend auf Vue. Weitere relevante Inhalte zur Implementierung von Fuzzy-Abfragen von MySQL-Datenbankdaten basierend auf Vue 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:
  • Ein einfaches Beispiel zur Implementierung einer Fuzzy-Abfrage in Vue
  • Vue implementiert die Fuzzy-Abfragemethode des Input-Eingabefelds
  • Vue implementiert den Beispielcode der Fuzzy-Abfrage des Eingabefelds (Anwendungsszenario der Drosselungsfunktion).
  • Vue2-Filter-Fuzzy-Abfragemethode
  • Beispielcode für Fuzzy-Abfrage eines Vue-Eingabefelds

<<:  Unterschied zwischen varchar- und char-Typen in MySQL

>>:  Erfahren Sie, wie Sie Docker unter Windows 10 Home Edition installieren.

Artikel empfehlen

Was Sie beim Schreiben selbstschließender XHTML-Tags beachten sollten

Das img-Tag in XHTML sollte wie folgt geschrieben...

Detailliertes Tutorial zur Neuinstallation von Python 3.6.6 auf CentOS 7.5

ps: Die Umgebung ist wie der Titel Mögliche Abhän...

Eine kurze Diskussion über Schreibregeln für Docker Compose

Dieser Artikel stellt nichts im Zusammenhang mit ...

Ändern Sie den Stil des HTML-Textkörpers in JS

Inhaltsverzeichnis 1. Ursprüngliche Definition 2....

Tutorial zur Installation und Konfiguration von MySQL für Mac

In diesem Artikel finden Sie das MySQL-Installati...

JavaScript zum Erzielen eines Taobao-Produktbild-Umschalteffekts

JavaScript-Umschalteffekt für Bekleidungsalben (ä...

Einführung in die MySQL-Gesamtarchitektur

Die Gesamtarchitektur von MySQL ist in die Server...

MySQL-Schleife fügt zig Millionen Daten ein

1. Erstellen Sie eine Testtabelle Tabelle `mysql_...

Vue verwendet drei Methoden zum Aktualisieren der Seite

Beim Schreiben von Projekten stoßen wir häufig au...

Implementierung der Anmeldeseite des tatsächlichen Kampfprotokolls von Vue

Inhaltsverzeichnis 1. Vorbereitende Maßnahmen 1.1...

Detailliertes Tutorial zur Installation von Python 3.8.1 unter Linux

Dieses Beispiel nimmt die Installation von Python...