Teljes körű útmutató a valós idejű kereséshez Laravelben

Informatec Digital » Erőforrás » Teljes körű útmutató a valós idejű kereséshez Laravelben

Amikor elkezdesz Laravel-lel dolgozni és szükséged van egy valós idejű keresőmotor, amely azonnal reagálKönnyű elveszni ezernyi lehetséges megközelítés között: AJAX fetch-kel, jQuery, Alpine.js, Scout Algoliával vagy Meilisearch-kel, frontend szűrés stb. A jó hír az, hogy a Laravel ökoszisztéma már gyakorlatilag mindent biztosít, amire szükséged van egy zökkenőmentes és gyors keresés beállításához anélkül, hogy a próbálkozásodban elakadnál.

Ebben a cikkben megtudhatod, hogyan kell összeszerelni Különböző típusú valós idejű keresések LaravelbenA klasszikus AJAX automatikus kiegészítéstől a teljes szöveges keresésekig a Laravel Scouttal és olyan keresőmotorokkal, mint az Algolia, a Meilisearch, maga az adatbázis, vagy akár az Elasticsearch. Könnyű alternatívákat is találhatsz az Alpine.js segítségével, amelyekkel közvetlenül a böngészőben szűrheted az adatokat, ha az adatmennyiség kicsi.

Mi a valós idejű keresés Laravelben, és hogyan működnek az alapok?

A valós idejű keresés mögött az az elképzelés áll, hogy miközben a felhasználó beírja a szövegmezőbeEgy lekérdezés elindul, és az eredmények frissülnek az oldal újratöltése nélkül. Technikailag ez három kulcsfontosságú összetevőt foglal magában: a Laravel backendet, a böngésző JavaScriptjét és a JSON formátumú adatcserét.

Egyrészt A Laravel szerver rétegként működik Felelős a kérések fogadásáért, a keresési paraméterek (a beírt szöveg) értelmezéséért, az adatbázis lekérdezéséért és egy strukturált válasz visszaadásáért, általában JSON formátumban. Ez a válasz jelezheti a sikert, a hibát, vagy azt, hogy nem található találat.

A másik végén, A JavaScript felelős a felhasználói események figyeléséért. A keresési bemenetnél aszinkron kéréseket (AJAX) küld a háttérrendszernek, és a visszaadott adatokat jeleníti meg az oldalon anélkül, hogy a böngésző teljes frissítést hajtana végre. Ez natív lehívással, jQuery AJAX-szal vagy kis reaktív könyvtárakkal, például az Alpine.js-szel tehető meg.

Ezzel az alapvető mechanizmussal építhetsz egy Egyszerű automatikus kiegészítés néhány rekorddal, akár egy fejlett, teljes szövegű keresőmotorig relevancia, oldalszámozás és szűrők funkcióval, amelyet olyan könyvtárak támogatnak, mint a Laravel Scout és a keresésre optimalizált külső keresőmotorok.

Modell, útvonalak és vezérlő egy alapvető valós idejű keresőmotorhoz

Mielőtt belemerülnél a JavaScriptbe, győződj meg róla, hogy a Laravel oldala jól szervezett: egy Eloquent modell a kereséshez, útvonalak törlése és egy dedikált vezérlő a keresési logika valós idejű kezelése.

Az első lépés egy Eloquent modell létrehozása, amely azt a táblázatot reprezentálja, amelyben keresni fogsz. Képzelj el egy országokat tartalmazó táblázatot és egy modellt, amelynek neve: Ország Nagyon egyszerű, időbélyegek nélkül és tömeges hozzárendeléssel:

Példa egy minimális Eloquent modellre keresésekhez:

namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Pais extends Model
{
use HasFactory;
protected $guarded = [];
public $timestamps = false;
}

Itt jelezve van, hogy a modell A Pais a standard Laravel névtérben található.A Model függvényből örököl, és lehetővé teszi bármely mező értékének megadását a create() függvénnyel a védett tömb üresen hagyásával. Az időbélyegek letiltásával a public $timestamps = false paraméterrel elkerülhetők a problémák, ha a táblázat nem tartalmazza a created_at és az updated_at oszlopokat.

A következő lépés a meghatározás az útvonalak, amelyek mind a keresőmotor megjelenítését, mind az AJAX kéréseket kezelikEgy nagyon gyakori séma egy GET útvonalat kombinál a nézet megjelenítéséhez és egy POST útvonalat a valós idejű lekérdezések fogadásához:

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\BuscadorController;

Route::get('/', function () {
return view('welcome');
});

Route::get('buscador', [BuscadorController::class, 'index']);
Route::post('buscador', [BuscadorController::class, 'buscar']);

A gyökérútvonal üdvözlő nézetet ad vissza, míg az URL A /search a keresési funkciók számára van fenntartva.A vezérlő index() metódusa megjeleníti az űrlapot és a keresési bemenetet, míg a search() metódus a böngészőből küldött aszinkron kéréseket dolgozza fel.

A vezérlőben egy nagyon praktikus mintát valósíthatsz meg: Alapértelmezett választömb készítése hiba esetén és csak akkor írja felül, ha valóban érvényes AJAX kérésről van szó, és a lekérdezés problémamentesen végrehajtódik.

A vezérlőnek lehet egy hasonló felépítésű erre:

namespace App\Http\Controllers;

use App\Models\Pais;
use Illuminate\Http\Request;

class BuscadorController extends Controller
{
public function index()
{
return view('welcome');
}

public function buscar(Request $request)
{
$response = [
'success' => false,
'message' => 'Hubo un error',
];

if ($request->ajax()) {
$data = Pais::where('nombre', 'like', $request->texto.'%')
->take(10)
->get();

$response = [
'success' => true,
'message' => 'Consulta correcta',
'data' => $data,
];
}

return response()->json($response);
}
}

Ezen a ponton már megvan a teljes backend ciklus: bejövő AJAX kérés, annak ellenőrzése, hogy AJAX-e, lekérdezés a „where like” kifejezéssel és az eredmények korlátozása ésszerű számra a take(10) használatával, hogy elkerüljük az adatbázis túlterhelését. A válasz mindig JSON formátumban kerül elküldésre, ami nagyban leegyszerűsíti a frontend munkáját.

Blade nézet és JavaScript lekérés reaktív kereséshez

Miután a modell, az útvonalak és a vezérlő készen áll, itt az ideje a látható rész felépítésének: egy űrlap keresőmezővel és egy blokkal az eredmények megjelenítéséhez, valamint a háttérben végrehajtott kérésekért felelős JavaScript.

A Penge nézet nagyon egyszerű lehet, a következőkre támaszkodva: CSRF token amelyet a Laravel a POST kérések validálásához injektál, és egy kényelmesen használható keresési beviteli mezőben:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<strong><meta name="csrf-token" content="{{ csrf_token() }}"></strong>
<title>Laravel</title>
</head>
<body>

<form action="" method="post">
<input type="search" name="texto" id="buscar">
</form>

<div id="resultado"></div>

<script>
window.addEventListener('load', function () {
const buscar = document.getElementById('buscar');
const resultado = document.getElementById('resultado');

buscar.addEventListener('keyup', function () {
fetch('/buscador', {
method: 'post',
body: JSON.stringify({ texto: buscar.value }),
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest',
'X-CSRF-Token': document.head.querySelector('[name~="csrf-token"][content]').content,
},
})
.then(response => response.json())
.then(data => {
let html = '';
if (data.success) {
html += '<ul>';
for (let i in data.data) {
html += '<li>' + data.data[i].nombre + '</li>';
}
html += '<ul>';
} else {
html += 'No existen resultados';
}
resultado.innerHTML = html;
});
});
});
</script>

</body>
</html>

Ebben a példában a szkript Figyelje a keyup eseményt a keresési bemenetenMinden billentyűleütés egy lekérést indít el a /search elérési úthoz. A mező aktuális szövege JSON formátumban kerül elküldésre, és kulcsfejlécek, például az X-Requested-With szerepelnek, jelezve, hogy AJAX-ról van szó, valamint a CSRF token, amely megkerüli a Laravel natív védelmét.

Amikor a válasz megérkezik, JSON formátumba alakítja és dinamikusan generálja. egy kis HTML lista az eredményekkelvagy egy „Nincs találat” üzenet, amikor a lekérdezés nem ad vissza adatot. Mindez az oldal újratöltése nélkül, a felhasználó számára természetes módon.

Ez a minta tovább finomítható apró UX részletekkel, például egy késleltetés (visszapattanás-csökkentés) billentyűleütések között, megjeleníthet egy betöltőt, vagy kezelheti a hálózati hibákat, hogy megakadályozza a felület lefagyását hiba esetén.

Élő keresés Laravel és AJAX segítségével jQuery használatával

Bár a fetching manapság sokat hódított, A jQuery AJAX továbbra is nagyon népszerű régi projektekben vagy olyan csapatokban, amelyek már implementálták. Az ötlet pontosan ugyanaz: rögzíteni a felhasználó által beírt adatokat, aszinkron kérést kezdeményezni, és frissíteni a DOM-ot.

Egy tipikus jQuery munkafolyamat Laravelben élő kereséshez általában a következő alapvető lépéseket tartalmazza: definiáljon egy adott útvonalat, hozzon létre egy dedikált vezérlőt, építse fel a Blade nézetet a keresési bemenettel Végül pedig add hozzá a jQuery kódot, amely beíráskor elindítja az AJAX-ot.

A folyamat a következőképpen működik: amikor a felhasználó elkezd gépelni, A jQuery lekérdezést küld a szervernek a keresési karakterlánccal. A Laravel kiszűri az adatbázisban található információkat, visszaad egy JSON-t az egyező eredményekkel, és a jQuery frissíti az oldalon található HTML-tárolót, hogy tükrözze az egyezéseket, mindezt ezredmásodpercek alatt.

A jQuery használatának előnye, hogy Ez nagyjából összefoglalja az AJAX szintaxisát. És nagyon egyszerűen olvasható, ha már megvan a könyvtár a projektedben. Azonban egy extra függőséget adsz hozzá, amire esetleg nincs szükség, ha tudsz dolgozni a modern JavaScriptdel és a natív fetch-kel.

Valós idejű szűrés és keresés a frontendben az Alpine.js segítségével

Amikor a megjelenítendő adatmennyiség viszonylag kicsi (pl. kevesebb mint 50 XNUMX tétel), nem mindig érdemes egy összetett kereséseket végző backendet beállítani. Ilyen esetekben egy nagyon kényelmes lehetőség a Szűrés közvetlenül a böngészőben az Alpine.js segítségével, anélkül, hogy kéréseket küldene a szervernek, miközben a felhasználó gépel.

Az ötlet az, hogy minden elemhez előre kiszámítunk egy keresési karakterláncot (például kisbetűvel írva a nevet, a leírást és a kategóriát), ezt egy data-search-text attribútumban tároljuk, és az Alpine.js-re bízzuk a többit. elemek megjelenítése vagy elrejtése a szövegnek megfelelően egy keresőmezőben.

Az Alpine.js komponens felépítése hasonló lehet ehhez: szűrési elemek

{
search: '',
hasResults: true,
selectedValue: '',
init() {
this.$watch('search', () => this.filterItems());
this.$nextTick(() => this.$refs.searchInput?.focus());
},
filterItems() {
const searchLower = this.search.toLowerCase().trim();
const cards = this.$el.querySelectorAll('.item-card');
let visibleCount = 0;

cards.forEach(card => {
const text = card.dataset.searchText || '';
const isVisible = searchLower === '' || text.includes(searchLower);
card.style.display = isVisible ? '' : 'none';
if (isVisible) visibleCount++;
});

this.hasResults = visibleCount > 0;
},
}

A nézetben minden kártya vagy adatsor egy attribútumot tartalmazna adatkeresési szöveg, a szöveg már előkészítve kisbetűsEzért a szűrő egy included() függvényre redukálódik JavaScriptben, ami nagyon gyors a rövid listák esetén:

<input type="search" x-model="search" x-ref="searchInput" placeholder="Buscar..." />
<div>
<div class="item-card" data-search-text="formulario contacto simple">
<h3>Formulario de contacto</h3>
<p>Formulario de contacto simple</p>
</div>
</div>

Ezenkívül csak akkor jeleníthet meg üres állapotblokkot, ha Nincsenek találatok a jelenlegi keresési kifejezésre.a felhasználót a szöveg módosítására vagy a mező törlésére kéri fel egy gombbal, amely egyszerűen visszaállítja a keresést egy üres karakterláncra.

Ennek a megközelítésnek egyértelmű előnyei vannak: A keresés során nincsenek szerverhívások.Az interakció gyakorlatilag azonnali, a logika továbbra is lokális és könnyen hibakereshető. Tökéletes gyors szelektorokhoz, elemkiválasztó modálokhoz vagy Laravel-oldalakba ágyazott kis katalógusokhoz.

Laravel Scout: Teljes szöveges keresés speciális motorokkal

Amikor a dolgok komolyra fordulnak, és szükséged van rá gyors, releváns és skálázható teljes szöveges keresésekA Laravelben a természetes út a Laravel Scout. A Scout egy integrációs réteg, amely lehetővé teszi az Eloquent modellek egyszerű összekapcsolását olyan keresőmotorokkal, mint az Algolia, a Meilisearch, a saját adatbázisoddal, memórián belüli gyűjteményekkel, vagy akár az Elasticsearch-kel külső vezérlőkön keresztül.

A Scouttal való kezdéshez a szokásos dolog a következő hozzon létre egy új Laravel projektet, vagy használjon fel egy meglévőtAz indításhoz használd a Dockert (például Laravel Sail-lel), majd telepítsd a függvénykönyvtárat a Composerrel. Ha ezzel megvagy, publikáld a scout.php konfigurációs fájlt, és állítsd be a környezeti változókat a használni kívánt illesztőprogramnak megfelelően.

Egy tipikus munkafolyamat a Scout telepítése a Composerrel, a konfiguráció közzététele és Aktiválja az indexelési sort a SCOUT_QUEUE=true paraméterrel Az .env fájlban ügyeljen arra, hogy az erőforrás-igényes műveletek a háttérben kerüljenek feldolgozásra, ezáltal javítva az alkalmazások válaszidejét. Ezenkívül gondoskodjon arról is, hogy a DB_HOST a használt adatbázisra mutasson, ami különösen fontos, ha Docker konténereket használ.

Ahhoz, hogy egy modell részt vehessen a felderítő keresésekben, a következőkre van szükség: Kereshetőként való explicit megjelölése a Kereshető tulajdonság hozzáadásávalPéldául, ha van egy vonatmodellje, amely egy címmezővel rendelkező vonatok táblázatát ábrázolja, akkor így definiálhatja:

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Laravel\Scout\Searchable;

class Train extends Model
{
use Searchable;

protected $fillable = ['title'];

public function searchableAs()
{
return 'trains_index';
}
}

A searchableAs metódus lehetővé teszi testreszabhatja az index nevét a keresőmotorbanA modellből származó alapértelmezett név használata helyett a Scout veszi át az irányítást. Innentől kezdve a Scout kezeli a létrehozási, frissítési és törlési műveletek szinkronizálását a távoli vagy a helyi indexszel, a választott illesztőprogramtól függően.

Laravel Scout az Algoliával: Villámgyors SaaS keresés

Az Algolia egy SaaS szolgáltatás, amely a következőkre összpontosít hogy nagyon gyors és releváns kereséseket kínáljon nagy mennyiségű adatbanVan egy webes panelje az indexek, relevancia szabályok, szinonimák stb. kezeléséhez, és nagyon jól integrálódik a Laravel-lel a Scout és a hivatalos PHP kliensen keresztül.

Az Algolia Scouttal való használatához telepítenie kell a PHP klienst a Composerrel, regisztrálnia kell a hitelesítő adatait az .env fájlban (alkalmazásazonosító és rendszergazdai API-kulcs), és set SCOUT_DRIVER=algolia hogy megmondja a Scoutnak, hogy ezt a motort használja. Az Algolia panelről lekérheti mind az alkalmazás azonosítóját, mind az adminisztrátori kulcsot.

Miután a környezet konfigurálva van, olyan módszereket használhat, mint a Vonat::search('szöveg')->paginate(6) közvetlenül a vezérlőkbe, hogy kereséseket végezhessenek az indexelt mezőkön, és az eredményeket lapozott Eloquent formátumban kapják meg, amely készen áll a Blade nézetbe való továbbításra.

PéldáulLehetne egy vezérlőd index amely listázza az összes vonatot, vagy keresést hajt végre, ha titlesearch paramétert kap, és egy create metódus új vonatok indexbe való beszúrásához:

public function index(Request $request)
{
if ($request->has('titlesearch')) {
$trains = Train::search($request->titlesearch)->paginate(6);
} else {
$trains = Train::paginate(6);
}

return view('Train-search', compact('trains'));
}

public function create(Request $request)
{
$this->validate($request, ['title' => 'required']);
Train::create($request->all());
return back();
}

A megfelelő nézetben kombinálhatja új vonatok regisztrációjához szükséges űrlap és egy másik GET űrlap egy titlesearch mezővel, amely beküldéskor elindítja a keresést. Ezután már csak végig kell haladni a vonatok gyűjteményén, és egy táblázatban kell megjeleníteni a mezőiket, kihasználva a Laravel által generált lapozási hivatkozásokat.

Felderítés a Meilisearch, adatbázis és gyűjtemények segítségével

Ha inkább elkerülnéd a külső szolgáltatásokat, A Meilisearch egy nyílt forráskódú keresőmotor amelyet helyben vagy a saját infrastruktúráján telepíthet. A Scout az Algoliához nagyon hasonló módon integrálódik a Meilisearch-szel, egyszerűen a meghajtóprogram módosításával és a MEILISEARCH_HOST és MEILISEARCH_KEY változók hozzáadásával az .env fájlhoz.

A használatához telepítenie kell a Meilisearch PHP klienst, majd be kell állítania a SCOUT_DRIVER=meilikearch és irányítsa a MEILISEARCH_HOST címet a példány URL-címére (például http://127.0.0.1:7700). Ha már voltak korábbi rekordjai, akkor azokat a php artisan scout:import "App\Models\Train" paranccsal indexelheti, hogy a motor számára elérhetőek legyenek.

Kisebb vagy közepes alkalmazásoknál a következőt is választhatja: Scout sofőr adatbázisEz teljes szöveges indexeket és LIKE parancsokat használ a MySQL vagy PostgreSQL adatbázisodon. Ebben az esetben nincs szükséged külső szolgáltatásra; egyszerűen állítsd be a SCOUT_DRIVER=database értéket, hogy a Scout magát az adatbázist használja keresőmotorként.

Egy másik érdekes lehetőség a illesztőprogram-gyűjtemény, amely a memóriában tárolt Eloquent-gyűjteményeken dolgozikEz a motor WHERE záradékok és gyűjteményszűrés segítségével szűri az eredményeket, és kompatibilis a Laravel által támogatott bármely adatbázissal. Aktiválható a `SCOUT_DRIVER=collection` paranccsal, vagy a Scout konfigurációs fájl pontosabb beállításokkal történő módosításával.

Elasticsearch integráció az Explorer használatával

Ha a keresési igényei a következőket foglalják magukban hatalmas adatmennyiséggel való munka és valós idejű elemzésAz Elasticsearch egy klasszikus. A Laravel ökoszisztémában a Scouttal való integrációjának modern módja az Explorer vezérlő használata, amely hidat képez a modellek és az Elasticsearch klaszter között.

Ehhez általában a Dockert használják, egy gazdag docker-compose fájllal együtt, amely a tipikus szolgáltatásokon (Laravel, MySQL, Redis, Meilisearch stb.) kívül... Elasticsearch és Kibana konténerekEzután telepíted a jeroen-g/explorer csomagot a Composer segítségével, és közzéteszed a konfigurációs fájlját, hogy jelezd, mely modelleket kell indexelni.

A config/explorer.php fájlban regisztrálhatod a modelljeidet az indexes kulcs alatt, például a következő hozzáadásával: App\Models\Train::classEzenkívül a .env fájlban a Scout illesztőprogramot elastic-re kell állítani a SCOUT_DRIVER=elastic beállítással, hogy minden az Elasticsearch-re mutasson.

A Train modellen belül meg kell valósítani az Explored interfészt, és felül kell írni a metódust. mappableAsamely meghatározza az indexbe küldendő mezők térképét. Egy minimális példa a következő lenne:

use JeroenG\Explorer\Application\Explored;
use Laravel\Scout\Searchable;

class Train extends Model implements Explored
{
use Searchable;

protected $fillable = ['title'];

public function mappableAs(): array
{
return [
'id' => $this->id,
'title' => $this->title,
];
}
}

Mostantól, Az Elasticsearch-en ugyanazzal a Scout felülettel indíthatsz kereséseket., kihasználva a nagyon alacsony válaszidőket és a motor teljes lekérdezési teljesítményét, anélkül, hogy elhagyná a Laravel ökoszisztémát.

Mindezen megközelítésekkel – az alapvető automatikus kiegészítéstől a fetch vagy jQuery segítségével az Alpine.js-sel végzett frontend szűrésen át a Laravel Scouttal és különféle illesztőprogramokkal végzett teljes szöveges keresésekig – A Laravel hatalmas választékot kínál a valós idejű keresések megvalósításához a projekt méretéhez, a szükséges teljesítményhez és a fenntartani kívánt infrastruktúrához igazítva.