Täydellinen opas reaaliaikaiseen hakuun Laravelissa

Informatec Digital » Resurssit » Täydellinen opas reaaliaikaiseen hakuun Laravelissa

Kun aloitat työskentelyn Laravelin kanssa ja tarvitset reaaliaikaisen hakukoneen, joka reagoi välittömästi , on helppo eksyä tuhansien mahdollisten lähestymistapojen joukkoon: AJAX fetchillä, jQuery, Alpine.js, Scout Algolialla tai Meilisearchillä, käyttöliittymäsuodatus jne. Hyvä uutinen on, että Laravelin ekosysteemi tarjoaa jo käytännössä kaiken tarvittavan sujuvan ja nopean hakukoneen rakentamiseen ilman ylikuormitusta.

Tässä artikkelissa opit toteuttamaan erilaisia ​​reaaliaikaisia ​​hakuja Laravelissa , klassisesta AJAX-automaattisesta täydennyksestä kokotekstihakuihin Laravel Scoutilla ja hakukoneilla, kuten Algolia, Meilisearch, itse tietokanta tai jopa Elasticsearch. Tutustut myös kevyisiin vaihtoehtoihin Alpine.js:n avulla tietojen suodattamiseen suoraan selaimessa käsiteltäessä pieniä tietojoukkoja.

Mikä on reaaliaikainen haku Laravelissa ja miten sen perusteet toimivat?

Reaaliaikaisen haun ideana on, että käyttäjän kirjoittaessa tekstikenttään kysely käynnistyy ja tulokset päivittyvät ilman sivun uudelleenlatausta. Teknisesti tämä sisältää kolme keskeistä komponenttia: Laravel-taustajärjestelmän, selaimen JavaScriptin ja tiedonvaihdon JSON-muodossa.

Toisaalta Laravel toimii palvelinkerroksena, joka vastaa pyyntöjen vastaanottamisesta, hakuparametrien (syötetyn tekstin) tulkinnasta, tietokannan kyselyistä ja strukturoidun vastauksen palauttamisesta, yleensä JSON-muodossa. Tämä vastaus voi osoittaa onnistumisen, virheen tai sen, ettei tuloksia löytynyt.

Toisessa päässä JavaScript kuuntelee käyttäjätapahtumia hakusyötteessä, lähettää asynkronisia pyyntöjä (AJAX) taustajärjestelmälle ja renderöi palautetut tiedot sivulla ilman, että selain tarvitsee päivittää kokonaan. Tämä voidaan tehdä natiivilla noudolla, jQuery AJAXilla tai pienillä reaktiivisilla kirjastoilla, kuten Alpine.js.

Tämän perusmekanismin avulla voit rakentaa mitä tahansa yksinkertaisesta muutaman tietueen automaattisesta täydennyksestä edistyneeseen kokotekstihakukoneeseen, jossa on relevanttius, sivutus ja suodattimet. Haulla voit hyödyntää kirjastoja, kuten Laravel Scout, ja ulkoisia hakukoneita, jotka on optimoitu hakuja varten.

Malli, reitit ja ohjain perus-reaaliaikaiselle hakukoneelle

Ennen kuin syvennyt JavaScriptiin, Laravel-puolen on oltava hyvin organisoitu: Eloquent-malli hakuja varten, selkeät reitit ja ohjain, joka käsittelee hakulogiikkaa reaaliajassa.

Ensimmäinen vaihe on luoda Eloquent-malli, joka edustaa taulukkoa, josta aiot hakea. Kuvittele maiden taulukko ja hyvin yksinkertainen malli nimeltä Country , ilman aikaleimoja ja joukkomäärityksiä:

Esimerkki minimaalisesta Eloquent-mallista hakuja varten :

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;
}

Tämä osoittaa, että Pais-malli sijaitsee Laravelin standardinimiavaruudessa , perii Model-mallin ja sallii minkä tahansa kentän määrittämisen create()-funktiolla jättämällä suojatun taulukon tyhjäksi. Poistamalla aikaleimat käytöstä arvolla public $timestamps = false vältät ongelmat, jos taulukossa ei ole created_at- ja updated_at-sarakkeita.

Seuraava vaihe on määrittää reitit, jotka käsittelevät sekä hakukoneen näyttö- että AJAX-pyynnöt . Hyvin yleinen menetelmä yhdistää GET-reitin näkymän näyttämiseksi ja POST-reitin kyselyiden vastaanottamiseksi reaaliajassa:

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']);

Juurireitti palauttaa tervetulonäkymän, kun taas /search-URL-osoite on varattu hakutoiminnolle . Ohjaimen index()-metodi näyttää lomakkeen ja hakusyötteen, kun taas search()-metodi käsittelee selaimesta lähetetyt asynkroniset pyynnöt.

Ohjaimessa voit toteuttaa hyvin käytännöllisen mallin: valmistele oletusarvoinen vastaustaulukko virheen varalta ja korvaa se vain, jos kyseessä on todella kelvollinen AJAX-pyyntö ja kysely suoritetaan ongelmitta.

Ohjaimella voisi olla seuraavanlainen rakenne :

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);
}
}

Tässä vaiheessa backendin koko sykli on käsillä: saapuva AJAX-pyyntö, sen AJAX-vahvistus, kysely `where like`-metodilla ja tulosten määrän rajoittaminen kohtuulliseen määrään `take(10)`-metodilla tietokannan ylikuormituksen välttämiseksi. Vastaus lähetetään aina JSON-muodossa, mikä yksinkertaistaa frontendin työtä huomattavasti.

Blade-näkymä ja JavaScript-nouto reaktiivista hakua varten

Kun malli, reitit ja ohjain ovat valmiina, on aika rakentaa näkyvä osa: lomake, jossa on hakukenttä ja lohko tulosten näyttämiseksi , sekä JavaScript, joka vastaa pyyntöjen tekemisestä taustalla.

Blade-näkymä voi olla hyvin yksinkertainen ja perustua Laravelin POST-pyyntöjen validointiin syöttämään CSRF-tunnukseen sekä kätevään hakukenttään:

<!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>

Tässä esimerkissä skripti kuuntelee keyup-tapahtumaa hakutuloksessa , joten jokainen näppäinpainallus laukaisee noutopyynnön /search-polkuun. Kentän nykyinen teksti lähetetään JSON-muodossa, ja avainotsikot, kuten X-Requested-With, sisällytetään osoittamaan, että kyseessä on AJAX, sekä CSRF-token Laravelin sisäisen suojauksen ohittamiseksi.

Kun vastaus saapuu, se muunnetaan JSON-muotoon ja tuloksista luodaan dynaamisesti pieni HTML-luettelo tai näytetään viesti, kuten "Ei tuloksia löytynyt", jos kysely ei palauta tietoja. Kaikki tämä tapahtuu ilman sivun uudelleenlatausta, luonnollisella tavalla käyttäjälle.

Tätä mallia voidaan tarkentaa edelleen pienillä käyttökokemusta parantavilla yksityiskohdilla, kuten lisäämällä näppäinpainallusten väliin palautuvan vaimennuksen , näyttämällä latausohjelman tai käsittelemällä verkkovirheitä, jotta käyttöliittymä ei jumiutuisi, jos jokin epäonnistuu.

Live-haku Laravelilla ja AJAXilla jQueryn avulla

Vaikka fetch on saavuttanut merkittävää jalansijaa, jQuery AJAX on edelleen erittäin suosittu vanhoissa projekteissa tai tiimeissä, joissa se on jo integroitu. Idea on täsmälleen sama: kaappaa käyttäjän kirjoittamat tiedot, tee asynkroninen pyyntö ja päivitä DOM.

Tyypillinen jQueryn työnkulku Laravelissa reaaliaikaista hakua varten sisältää yleensä seuraavat perusvaiheet: tietyn reitin määrittäminen, erillisen ohjaimen luominen, Blade-näkymän rakentaminen hakusyötteellä ja lopuksi jQuery-koodin lisääminen, joka käynnistää AJAXin kirjoitettaessa.

Prosessi toimii näin: kun käyttäjä alkaa kirjoittaa, jQuery lähettää palvelimelle kyselyn hakusanalla. Laravel suodattaa tietokannan tiedot, palauttaa JSON-objektin osumilla tuloksilla ja jQuery päivittää sivulla olevan HTML-säilön vastaamaan osumia – kaikki millisekunneissa.

jQueryn käytön etuna on, että se yksinkertaistaa AJAX-syntaksia huomattavasti ja on erittäin helppo lukea, jos sinulla on jo kirjasto projektissasi. Se tuo kuitenkin mukanaan lisäriippuvuuden, joka ei välttämättä ole tarpeen, jos voit työskennellä modernin JavaScriptin ja natiivin noutotoiminnon kanssa.

Reaaliaikainen suodatus ja haku käyttöliittymässä Alpine.js:n avulla

Kun näytettävä data on suhteellisen pieni (esimerkiksi alle 50 kohdetta ), ei ole aina kannattavaa perustaa taustajärjestelmää, jossa on monimutkaisia ​​hakuja. Näissä tapauksissa erittäin kätevä vaihtoehto on suodattaa suoraan selaimessa Alpine.js:n avulla tekemättä pyyntöjä palvelimelle käyttäjän kirjoittaessa.

Ajatuksena on laskea etukäteen hakusana jokaiselle kohteelle (esim. nimi, kuvaus ja kategoria pienillä kirjaimilla), tallentaa se data-search-text-attribuuttiin ja antaa Alpine.js:n hoitaa kohteiden näyttämisen tai piilottamisen hakukenttään syötetyn tekstin perusteella .

Alpine.js-komponentilla voi olla seuraavanlainen rakenne: filterItems

{
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;
},
}

Näkymässä jokaisella kortilla tai tietorivillä olisi data-search-text-attribuutti, jonka teksti on jo valmiiksi kirjoitettu pienillä kirjaimilla , joten suodatin supistuu JavaScriptissä includeds()-funktioksi, mikä on erittäin nopeaa lyhyiden listojen kohdalla:

<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>

Lisäksi voit näyttää tyhjän tilapalkin vain silloin, kun nykyisellä hakusanalla ei ole tuloksia , jolloin käyttäjä voi muokata tekstiä tai tyhjentää kentän painikkeella, joka yksinkertaisesti palauttaa haun tyhjäksi merkkijonoksi.

Tällä lähestymistavalla on selkeitä etuja: haun aikana ei ole palvelinkutsuja , vuorovaikutus on käytännössä välitöntä ja logiikka pysyy erittäin paikallisena ja helposti virheenkorjattavana. Se sopii täydellisesti nopeisiin valitsimiin, nimikkeen valintamodaaleihin tai pieniin Laravel-sivulle upotettuihin luetteloihin.

Laravel Scout: Kokotekstihaku erikoistuneilla hakukoneilla

Kun asiat käyvät vakaviksi ja tarvitset nopeaa, relevanttia ja skaalautuvaa kokotekstihakua , Laravelin luonnollinen polku on Laravel Scout. Scout on integraatiokerros, jonka avulla voit helposti yhdistää Eloquent-mallisi hakukoneisiin, kuten Algoliaan, Meilisearchiin, omaan tietokantaasi, muistissa oleviin kokoelmiin tai jopa Elasticsearchiin ulkoisten ohjainten kautta.

Scoutin käytön aloittaminen tapahtuu yleensä luomalla uusi Laravel-projekti tai käyttämällä uudelleen olemassa olevaa projektia , käynnistämällä se Dockerilla (esimerkiksi Laravel Saililla) ja asentamalla sitten kirjasto Composerilla. Kun tämä on tehty, julkaise scout.php-määritystiedosto ja säädä ympäristömuuttujia käytettävän ajurin mukaan.

Tyypillinen työnkulku olisi asentaa Scout Composerilla, julkaista sen kokoonpano ja ottaa käyttöön indeksointijono lisäämällä `SCOUT_QUEUE=true`-määrityksen `.env`-tiedostoon, jotta resursseja kuluttavat toiminnot käsitellään taustalla, mikä parantaa sovellusten vasteaikoja. Lisäksi sinun tulee varmistaa, että `DB_HOST` osoittaa käyttämäänsä tietokantaan, mikä on erityisen tärkeää, jos käytät Docker-kontteja.

Jotta malli voi osallistua Scout-hakuihin, se on merkittävä erikseen haettavaksi lisäämällä siihen `Hakukelpoinen`-ominaisuus . Jos sinulla on esimerkiksi `Juna`-malli, joka edustaa junien taulukkoa, jossa on `otsikko`-kenttä, voit määritellä sen seuraavasti:

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';
}
}

`searchableAs`-metodin avulla voit mukauttaa hakukoneen indeksin nimeä mallista johdetun oletusnimen käyttämisen sijaan. Tämän jälkeen Scout synkronoi luomis-, päivitys- ja poistotoiminnot etä- tai paikallisen indeksin kanssa valitusta ajurista riippuen.

Laravel Scout Algolian kanssa: Salamannopea SaaS-haku

Algolia on SaaS-palvelu, joka keskittyy tarjoamaan erittäin nopeita ja relevantteja hakuja suurista tietomääristä . Siinä on web-paneeli indeksien, relevanttiussääntöjen, synonyymien ja muiden hallintaan, ja se integroituu saumattomasti Laravelin kanssa Scoutin ja virallisen PHP-asiakasohjelman kautta.

Käyttääksesi Algoliaa Scoutin kanssa sinun on asennettava sen PHP-asiakasohjelma Composerilla, rekisteröitävä tunnistetietosi .env-tiedostoon (sovellustunnus ja järjestelmänvalvojan API-avain) ja määritettävä SCOUT_DRIVER=algolia, jotta Scout käyttää tätä moottoria. Voit hankkia sekä sovellustunnuksen että järjestelmänvalvojan avaimen Algolian kojelaudasta.

Kun ympäristö on määritetty, voit käyttää Train::search('text')->paginate(6) -metodeja suoraan ohjaimissasi indeksoitujen kenttien hakuihin ja saada tulokset sivutetussa Eloquent-muodossa, joka on valmis välitettäväksi Blade-näkymään.

Voit esimerkiksi käyttää indeksiohjainta , joka listaa kaikki junat tai suorittaa haun, jos titlesearch-parametri annetaan, ja create-metodia uusien junien lisäämiseksi indeksiin:

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();
}

Vastaavassa näkymässä voit yhdistää lomakkeen uusien junien lisäämistä varten ja toisen GET-lomakkeen otsikkohakukenttään, joka käynnistää haun lähetyksen yhteydessä. Sen jälkeen voit yksinkertaisesti iteroida junakokoelman läpi ja näyttää niiden kentät taulukossa hyödyntäen Laravelin luomia sivutuslinkkejä.

Scout Meilisearchin, tietokannan ja kokoelmien avulla

Jos haluat välttää ulkoisia palveluita, Meilisearch on avoimen lähdekoodin hakukone , jonka voit ottaa käyttöön paikallisesti tai omassa infrastruktuurissasi. Scout integroituu Meilisearchiin hyvin samalla tavalla kuin Algolia, yksinkertaisesti vaihtamalla ajurin ja lisäämällä MEILISEARCH_HOST- ja MEILISEARCH_KEY-muuttujat .env-tiedostoon.

Käyttääksesi sitä, asenna Meilisearch PHP -asiakasohjelma, aseta SCOUT_DRIVER=meilisearch ja osoita MEILISEARCH_HOST instanssin URL-osoitteeseen (esimerkiksi http://127.0.0.1:7700). Jos sinulla on jo tietueita, voit indeksoida ne komennolla php artisan scout:import "App\Models\Train", jotta ne ovat moottorin käytettävissä.

Pienemmille tai keskikokoisille sovelluksille voit valita myös Scoutin tietokanta-ajurin , joka hyödyntää MySQL- tai PostgreSQL-tietokannan kokoteksti-indeksejä ja LIKE-lausekkeita. Tässä tapauksessa et tarvitse ulkoista palvelua; aseta vain SCOUT_DRIVER=database, jotta Scout käyttää itse tietokantaa hakukoneenaan.

Toinen mielenkiintoinen vaihtoehto on kokoelma-ajuri, joka toimii muistissa olevien Eloquent-kokoelmien kanssa . Tämä moottori suodattaa tuloksia `where`- ja kokoelmasuodatusmetodien avulla, ja se on yhteensopiva minkä tahansa Laravelin tukeman tietokannan kanssa. Voit aktivoida sen `SCOUT_DRIVER=collection`-metodilla tai muokkaamalla Scout-määritystiedostoa, jos haluat jotain tarkempaa.

Integrointi Elasticsearchin kanssa Explorerin avulla

Jos hakutarpeisiisi kuuluu työskentely valtavien tietomäärien ja reaaliaikaisen analytiikan kanssa , Elasticsearch on klassikko. Laravel-ekosysteemissä moderni tapa integroida se Scoutin kanssa on käyttää Explorer-ohjainta, joka toimii siltana malliesi ja Elasticsearch-klusterin välillä.

Tämä tarkoittaa tyypillisesti Dockerin ja monipuolisen docker-compose-tiedoston käyttöä, joka käynnistyy tavallisten palveluiden (Laravel, MySQL, Redis, Meilisearch jne.) lisäksi Elasticsearch- ja Kibana-konttien lisäksi . Sitten asennat jeroen-g/explorer-paketin Composerin kautta ja julkaiset sen asetustiedoston määrittääksesi, mitkä mallit indeksoidaan.

Voit rekisteröidä mallisi indexes-avaimeen config/explorer.php-tiedostossa esimerkiksi lisäämällä App\Models\Train::class-luokan . Lisäksi voit vaihtaa ajurin Scoutista Elasticsearchiin .env-tiedostossa muuttujalla SCOUT_DRIVER=elastic, jotta kaikki osoittaa Elasticsearchiin.

Train-mallin sisällä sinun on toteutettava Explored-rajapinta ja korvattava mappableAs -metodi , joka määrittää indeksiin lähetettävien kenttien kartan. Pienin esimerkki olisi:

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,
];
}
}

Täältä voit käynnistää hakuja Elasticsearchissa käyttämällä samaa Scout-käyttöliittymää , hyödyntäen erittäin alhaisia ​​vasteaikoja ja moottorin täyttä kyselytehoa, mutta poistumatta Laravel-ekosysteemistä.

Kaikilla näillä lähestymistavoilla – perusautomaattisesta täydennyksestä fetchillä tai jQueryllä käyttöliittymäsuodatukseen Alpine.js:llä ja kokotekstihakuihin Laravel Scoutin ja erilaisten ajureiden avulla – Laravel tarjoaa sinulle valtavan valikoiman vaihtoehtoja reaaliaikaisten hakujen toteuttamiseen, jotka on räätälöity projektisi koon, tarvitsemasi suorituskyvyn ja ylläpidettävän infrastruktuurin mukaan.