Išsamus vadovas, kaip ieškoti realiuoju laiku „Laravel“

Informatec Digital » Ištekliai » Išsamus vadovas, kaip ieškoti realiuoju laiku „Laravel“

Kai pradedate dirbti su „Laravel“ ir jums reikia realiuoju laiku veikianti paieškos sistema, kuri reaguoja akimirksniuLengva pasiklysti tarp tūkstančio galimų metodų: AJAX su „fetch“, „jQuery“, „Alpine.js“, „Scout“ su „Algolia“ ar „Meilisearch“, front-end filtravimas ir kt. Geros žinios yra tai, kad „Laravel“ ekosistema jau teikia praktiškai viską, ko reikia norint nustatyti sklandžiai ir greitai paiešką, nepertraukiant jos bandymo.

Šiame straipsnyje pamatysite, kaip surinkti skirtingų tipų realaus laiko paieška Laravel sistemojeNuo klasikinio AJAX automatinio užbaigimo iki viso teksto paieškos naudojant „Laravel Scout“ ir paieškos sistemas, tokias kaip „Algolia“, „Meilisearch“, pačią duomenų bazę ar net „Elasticsearch“. Taip pat rasite lengvų alternatyvų su „Alpine.js“, skirtų duomenų filtravimui tiesiai naršyklėje, kai duomenų kiekis mažas.

Kas yra paieška realiuoju laiku „Laravel“ kalboje ir kaip veikia pagrindiniai jos principai?

Realaus laiko paieškos idėja yra ta, kad kai vartotojas rašo teksto laukeSuaktyvinama užklausa ir rezultatai atnaujinami neperkraunant puslapio. Techniškai tai apima tris pagrindinius komponentus: „Laravel“ vidinę sistemą, naršyklės „JavaScript“ ir duomenų mainus JSON formatu.

Viena vertus, „Laravel“ veikia kaip serverio sluoksnis Jis atsakingas už užklausų priėmimą, paieškos parametrų (įvesto teksto) interpretavimą, užklausų pateikimą duomenų bazėje ir struktūrizuoto atsakymo, paprastai JSON formatu, grąžinimą. Šis atsakymas gali reikšti sėkmę, klaidą arba tai, kad rezultatų nerasta.

Kitame gale, „JavaScript“ yra atsakingas už vartotojo įvykių klausymą. Paieškos įvestyje siųskite asinchronines užklausas (AJAX) į serverio sistemą ir rodykite grąžintus duomenis puslapyje, naršyklei neatliekant pilno atnaujinimo. Tai galima padaryti naudojant vietinį iškvietimą, „jQuery AJAX“ arba mažas reaktyviąsias bibliotekas, pvz., „Alpine.js“.

Naudodami šį pagrindinį mechanizmą galite kurti iš Paprastas automatinis užbaigimas su keliais įrašais, iki pažangios viso teksto paieškos sistemos su aktualumo, puslapiavimo ir filtrų funkcija, palaikomos tokių bibliotekų kaip „Laravel Scout“ ir išorinių paieškos sistemų, optimizuotų paieškai.

Pagrindinės realaus laiko paieškos sistemos modelis, maršrutai ir valdiklis

Prieš gilindamiesi į „JavaScript“, turite įsitikinti, kad „Laravel“ pusė yra gerai sutvarkyta: „Eloquent“ paieškos modelis, maršrutų valymas ir specialus valdiklis valdyti paieškos logiką realiuoju laiku.

Pirmas žingsnis – sukurti „Eloquent“ modelį, kuris atitiktų lentelę, kurioje ieškosite. Įsivaizduokite šalių lentelę ir modelį, vadinamą Tėvai Labai paprasta, be laiko žymų ir leidžiamas masinis priskyrimas:

Minimalaus „Eloquent“ paieškos modelio pavyzdys:

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

Čia nurodoma, kad modelis „Pais“ yra standartinėje „Laravel“ vardų erdvėje.Jis paveldi iš „Model“ ir leidžia priskirti bet kurį lauką su „create()“, paliekant apsaugotą masyvą tuščią. Išjungdami laiko žymas su vieša „$timestamps = false“, išvengsite problemų, jei lentelėje nėra stulpelių „created_at“ ir „updated_at“.

Kitas žingsnis – apibrėžti maršrutai, kurie apdoros ir paieškos sistemos rodymą, ir AJAX užklausasLabai dažna schema sujungia GET maršrutą, skirtą rodyti vaizdą, ir POST maršrutą, skirtą gauti užklausas realiuoju laiku:

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

Šakninis maršrutas grąžina pasveikinimo rodinį, o URL /search rezervuota paieškos funkcijomsValdiklio index() metodas rodo formą ir paieškos įvestį, o search() metodas apdoroja asinchronines naršyklės siunčiamas užklausas.

Valdiklyje galite įgyvendinti labai praktišką modelį: Paruošti numatytąjį atsakymo masyvą klaidos atveju ir perrašykite jį tik tada, kai tai iš tiesų yra galiojanti AJAX užklausa ir užklausa vykdoma be problemų.

Valdiklis gali turėti panaši struktūra tai:

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

Šiuo metu jūs jau turite Visas serverio ciklas: gaunama AJAX užklausa, patikrinimas, ar tai AJAX, užklausos su „where“ ir rezultatų apribojimas iki pagrįsto skaičiaus naudojant take(10), kad būtų išvengta duomenų bazės perkrovos. Atsakymas visada siunčiamas JSON formatu, o tai labai supaprastina front-end darbą.

Blade rodinys ir JavaScript gavimas reaktyviai paieškai

Paruošus modelį, maršrutus ir valdiklį, laikas sukurti matomą dalį: forma su paieškos laukeliu ir bloku rezultatams rodyti, taip pat „JavaScript“, atsakinga už užklausų teikimą fone.

Ašmenų vaizdas gali būti labai paprastas, remiantis tuo, CSRF prieigos raktas kurį „Laravel“ įterpia POST užklausoms patvirtinti ir patogioje naudoti paieškos įvestyje:

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

Šiame pavyzdyje scenarijus Klausytis klavišo paspaudimo įvykio paieškos įvestyjeKiekvienas klavišo paspaudimas suaktyvina paieškos užklausą /search keliui. Dabartinis lauko tekstas siunčiamas JSON formatu, o rakto antraštės, tokios kaip X-Requested-With, nurodo, kad tai AJAX, kartu su CSRF prieigos raktu, kad būtų galima apeiti „Laravel“ vidinę apsaugą.

Gavęs atsakymą, jis transformuojamas į JSON ir generuojamas dinamiškai. mažas HTML sąrašas su rezultataisarba pranešimą, pvz., „Rezultatų nerasta“, kai užklausa nepateikia jokių duomenų. Visa tai atliekama neperkraunant puslapio, natūraliu būdu vartotojui.

Šį modelį galima dar labiau patobulinti naudojant mažas UX detales, pavyzdžiui, pridedant vėlavimas (atšokimas) tarp klavišų paspaudimų, rodyti įkroviklį arba tvarkyti tinklo klaidas, kad sąsaja neužstrigtų, kai kas nors nepavyksta.

Tiesioginė paieška su Laravel ir AJAX naudojant jQuery

Nors atnešimas šiais laikais įgijo didelę reikšmę, jQuery AJAX išlieka labai populiarus senesniuose projektuose arba komandose, kurios jau yra ją įdiegusios. Idėja yra visiškai ta pati: užfiksuoti vartotojo įvedamus duomenis, pateikti asinchroninę užklausą ir atnaujinti DOM.

Įprastas „jQuery“ darbo eiga „Laravel“ sistemoje, skirta tiesioginei paieškai, paprastai apima šiuos pagrindinius veiksmus: apibrėžkite konkretų maršrutą, sukurkite specialų valdiklį, sukurkite „Blade“ rodinį su paieškos įvestimi Ir galiausiai pridėkite „jQuery“ kodą, kuris aktyvuoja AJAX, kai jis įvedamas.

Procesas veikia taip: kai vartotojas pradeda rašyti, „jQuery“ siunčia užklausą serveriui su paieškos eilute. „Laravel“ filtruoja informaciją duomenų bazėje, grąžina JSON failą su atitinkamais rezultatais, o „jQuery“ atnaujina HTML konteinerį puslapyje, kad atspindėtų atitikmenis – visa tai per milisekundes.

„jQuery“ naudojimo privalumas yra tas, kad Tai gana gerai apibendrina AJAX sintaksę Ir tai labai paprasta perskaityti, jei biblioteka jau yra jūsų projekte. Tačiau pridedate papildomą priklausomybę, kuri gali būti nebūtina, jei galite dirbti su šiuolaikiniu „JavaScript“ ir vietiniu „fetch“.

Filtravimas ir paieška realiuoju laiku priekinėje dalyje naudojant „Alpine.js“

Kai rodomų duomenų kiekis yra santykinai mažas (pvz., mažiau nei 50 XNUMX prekių), ne visada verta kurti serverio sistemą su sudėtingomis paieškomis. Tokiais atvejais labai patogus pasirinkimas yra Filtruokite tiesiai naršyklėje naudodami „Alpine.js“, neteikiant užklausų serveriui, kol vartotojas rašo.

Idėja yra iš anksto apskaičiuoti kiekvieno elemento paieškos eilutę (pavyzdžiui, pavadinimą, aprašymą ir kategoriją mažosiomis raidėmis), išsaugoti ją „data-search-text“ atribute ir leisti „Alpine.js“ atlikti visa kita. rodyti arba slėpti elementus pagal parašytą tekstą paieškos lauke.

„Alpine.js“ komponento struktūra gali būti panaši į šią: filtro elementai

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

Rodinyje kiekviena kortelė arba duomenų eilutė turėtų atributą duomenų paieškos tekstas su jau paruoštu tekstu mažosiomis raidėmisTodėl filtras „JavaScript“ kalboje supaprastinamas iki „included()“ funkcijos, kuri labai greitai veikia su trumpais sąrašais:

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

Be to, tuščią būsenos bloką galite rodyti tik tada, kai Pagal dabartinę paieškos terminą rezultatų nėra.kviečiant vartotoją modifikuoti tekstą arba išvalyti lauką mygtuku, kuris tiesiog atstato paiešką į tuščią eilutę.

Šis metodas turi aiškių privalumų: Paieškos metu nėra jokių serverio užklausų.Sąveika vyksta praktiškai akimirksniu, o logika išlieka labai lokali ir lengvai derinama. Tai puikiai tinka greitiems selektoriams, elementų pasirinkimo modalams arba mažiems katalogams, įterptiems į „Laravel“ puslapį.

„Laravel Scout“: viso teksto paieška su specializuotais varikliais

Kai viskas tampa rimta ir jums reikia greitos, aktualios ir keičiamo dydžio viso teksto paieškosNatūralus kelias „Laravel“ aplinkoje yra „Laravel Scout“. „Scout“ yra integracijos sluoksnis, leidžiantis lengvai sujungti „Eloquent“ modelius su paieškos sistemomis, tokiomis kaip „Algolia“, „Meilisearch“, savo duomenų baze, vidinėmis kolekcijomis ar net „Elasticsearch“ per išorinius valdiklius.

Norėdami pradėti naudotis „Scout“, įprastai atlikite šiuos veiksmus: sukurti naują „Laravel“ projektą arba pakartotinai panaudoti esamąNorėdami paleisti, naudokite „Docker“ (pavyzdžiui, su „Laravel Sail“) ir įdiekite biblioteką naudodami „Composer“. Tai atlikę, publikuokite konfigūracijos failą „scout.php“ ir pakoreguokite aplinkos kintamuosius pagal norimą naudoti tvarkyklę.

Įprastas darbo procesas būtų įdiegti „Scout“ su „Composer“, paskelbti jos konfigūraciją ir aktyvuokite indeksavimo eilę su SCOUT_QUEUE=true .env faile užtikrinkite, kad daug išteklių reikalaujančios operacijos būtų apdorojamos fone, taip sutrumpinant programų atsako laiką. Be to, turite užtikrinti, kad DB_HOST nukreiptų į naudojamą duomenų bazę, o tai ypač svarbu, jei naudojate „Docker“ konteinerius.

Kad modelis galėtų dalyvauti skautų paieškose, būtina Aiškiai pažymėti kaip ieškomą, pridedant ieškomą požymįPavyzdžiui, jei turite traukinio modelį, kuris vaizduoja traukinių lentelę su pavadinimo lauku, galite jį apibrėžti taip:

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“ metodas leidžia tinkinkite indekso pavadinimą paieškos sistemojeUžuot naudojęs numatytąjį pavadinimą, gautą iš modelio, „Scout“ perima darbą. Nuo šiol „Scout“ sinchronizuoja kūrimo, atnaujinimo ir ištrynimo operacijas su nuotoliniu arba vietiniu indeksu, priklausomai nuo pasirinktos tvarkyklės.

„Laravel Scout“ su „Algolia“: žaibiškai greita SaaS paieška

„Algolia“ yra SaaS paslauga, orientuota į siūlyti labai greitas ir aktualias paieškas dideliuose duomenų kiekiuoseJis turi žiniatinklio skydelį indeksams, aktualumo taisyklėms, sinonimams ir kt. valdyti ir labai gerai integruojasi su „Laravel“ per „Scout“ ir oficialų PHP klientą.

Norėdami naudoti „Algolia“ su „Scout“, turėsite įdiegti jos PHP klientą su „Composer“, užregistruoti savo kredencialus .env faile (programos ID ir administratoriaus API raktas) ir nustatykite SCOUT_DRIVER=algolia kad „Scout“ naudotų šį variklį. Iš „Algolia“ skydelio galite gauti ir programos ID, ir administratoriaus raktą.

Kai aplinka sukonfigūruota, galite naudoti tokius metodus kaip Traukinys::paieškos('tekstas')->puslapiavimo(6) tiesiai į valdiklius, kad būtų galima atlikti paieškas indeksuotuose laukuose, gaunant rezultatus sunumeruotu „Eloquent“ formatu, paruoštu perduoti į „Blade“ rodinį.

PvzGalėtumėte turėti valdiklį rodyklė kuris išvardija visus traukinius arba atlieka paiešką, jei gaunamas „titlesearch“ parametras, ir „create“ metodas naujiems traukiniams į indeksą įterpti:

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

Atitinkamame rodinyje galite sujungti naujų traukinių registracijos forma ir kitą GET formą su „titlesearch“ lauku, kuris aktyvuoja paiešką pateikus užklausą. Tuomet tereikia peržiūrėti traukinių rinkinį ir parodyti jų laukus lentelėje, pasinaudojant „Laravel“ sugeneruotomis puslapiavimo nuorodomis.

Skautų paieška su „Meilisearch“, duomenų baze ir kolekcijomis

Jei pageidaujate vengti išorinių paslaugų, „Meilisearch“ yra atvirojo kodo paieškos sistema kurį galite diegti vietoje arba savo infrastruktūroje. „Scout“ integruojasi su „Meilisearch“ labai panašiai kaip „Algolia“, tiesiog pakeičiant tvarkyklę ir pridedant MEILISEARCH_HOST bei MEILISEARCH_KEY kintamuosius į .env failą.

Norėdami jį naudoti, įdiekite „Meilisearch PHP“ klientą, pakoreguokite SCOUT_DRIVER=meilisiearch ir nukreipkite MEILISEARCH_HOST į egzemplioriaus URL (pavyzdžiui, http://127.0.0.1:7700). Jei jau turėjote ankstesnių įrašų, galite juos indeksuoti naudodami komandą php artisan scout:import „App\Models\Train“, kad jie būtų prieinami sistemoje.

Mažesnėse arba vidutinio dydžio programose taip pat galite pasirinkti Skautų vairuotojų duomenų bazėTai naudoja visateksčius indeksus ir LIKE komandas jūsų MySQL arba PostgreSQL duomenų bazėje. Tokiu atveju jums nereikia išorinės paslaugos; tiesiog nustatykite SCOUT_DRIVER=database, kad „Scout“ naudotų pačią duomenų bazę kaip paieškos sistemą.

Kitas įdomus variantas yra tvarkyklių kolekcija, kuri veikia su „Eloquent“ kolekcijomis atmintyjeŠis variklis filtruoja rezultatus naudodamas WHERE sąlygas ir kolekcijų filtravimą ir yra suderinamas su bet kuria „Laravel“ palaikoma duomenų baze. Jį galite aktyvuoti naudodami `SCOUT_DRIVER=collection` arba pakoreguodami „Scout“ konfigūracijos failą, kad nustatytumėte konkretesnius nustatymus.

Integracija su Elasticsearch naudojant Explorer

Jei jūsų paieškos poreikiai apima darbas su didžiuliais duomenų kiekiais ir analizė realiuoju laiku„Elasticsearch“ yra klasika. „Laravel“ ekosistemoje modernus būdas ją integruoti su „Scout“ yra naudoti „Explorer“ valdiklį, kuris veikia kaip tiltas tarp jūsų modelių ir „Elasticsearch“ klasterio.

Tam dažniausiai naudojama „Docker“ kartu su išsamiu „docker-compose“ failu, kuris, be įprastų paslaugų („Laravel“, „MySQL“, „Redis“, „Meilisearch“ ir kt.), Elasticsearch ir Kibana konteineriaiTada per „Composer“ įdiegiate „jeroen-g/explorer“ paketą ir publikuojate jo konfigūracijos failą, kad nurodytumėte, kurie modeliai turėtų būti indeksuojami.

Faile „config/explorer.php“ galite užregistruoti savo modelius naudodami raktą „indexes“, pavyzdžiui, pridėdami Programėlė\Modeliai\Traukinys::klasėBe to, .env faile „Scout“ tvarkyklę pakeičiate į „elastic“ su SCOUT_DRIVER=elastic, kad viskas rodytų į „Elasticsearch“.

Traukinio modelyje turi būti įdiegta „Explored“ sąsaja ir perrašytas metodas. mappableAskuris apibrėžia laukų, kurie bus siunčiami į indeksą, žemėlapį. Minimalus pavyzdys būtų:

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

Nuo dabar, „Elasticsearch“ galite paleisti paiešką naudodami tą pačią „Scout“ sąsają., pasinaudojant labai trumpu atsako laiku ir visa šio variklio užklausų galia, tačiau nepaliekant „Laravel“ ekosistemos.

Taikant visus šiuos metodus – nuo ​​pagrindinio automatinio užbaigimo naudojant „fetch“ arba „jQuery“ iki priekinės dalies filtravimo naudojant „Alpine.js“ ir viso teksto paieškos naudojant „Laravel Scout“ bei įvairias tvarkykles – „Laravel“ siūlo daugybę galimybių įgyvendinti paieškas realiuoju laiku pritaikyta jūsų projekto dydžiui, reikalingam našumui ir infrastruktūrai, kurią norite prižiūrėti.