Vue implementiert Fuzzy-Abfrage-MySQL-Datenbankdaten

Inhaltsverzeichnis

1. Nachfrage
2. Umsetzung
3. Ergebnisse

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.