Pilnīgs ceļvedis reāllaika meklēšanai Laravel vidē

Informatec Digital » Resursi » Pilnīgs ceļvedis reāllaika meklēšanai Laravel vidē

Kad sākat strādāt ar Laravel un jums ir nepieciešams reāllaika meklētājprogramma, kas reaģē nekavējotiesIr viegli apmaldīties starp tūkstoš iespējamām pieejām: AJAX ar fetch, jQuery, Alpine.js, Scout ar Algolia vai Meilisearch, front-end filtrēšana utt. Labā ziņa ir tā, ka Laravel ekosistēma jau nodrošina praktiski visu nepieciešamo, lai iestatītu vienmērīgu un ātru meklēšanu, neapstājoties mēģinājumā.

Šajā rakstā jūs uzzināsiet, kā salikt dažādi reāllaika meklēšanas veidi Laravel vidēNo klasiskās AJAX automātiskās pabeigšanas līdz pilna teksta meklēšanai ar Laravel Scout un meklētājprogrammām, piemēram, Algolia, Meilisearch, pašu datubāzi vai pat Elasticsearch. Jūs redzēsiet arī vieglas alternatīvas ar Alpine.js datu filtrēšanai tieši pārlūkprogrammā, ja datu apjoms ir neliels.

Kas ir reāllaika meklēšana Laravel valodā un kā darbojas tās pamati?

Reāllaika meklēšanas pamatā ir ideja, ka lietotājam rakstot teksta laukāTiek aktivizēts vaicājums, un rezultāti tiek atjaunināti, neielādējot lapu atkārtoti. Tehniski tas ietver trīs galvenos komponentus: Laravel aizmugursistēmu, pārlūkprogrammas JavaScript un datu apmaiņu JSON formātā.

No vienas puses, Laravel darbojas kā servera slānis Tā ir atbildīga par pieprasījumu saņemšanu, meklēšanas parametru (ievadītā teksta) interpretēšanu, vaicājumu veikšanu datubāzē un strukturētas atbildes atgriešanu, parasti JSON formātā. Šī atbilde var norādīt uz panākumiem, kļūdu vai to, ka rezultāti netika atrasti.

Otrā galā, JavaScript ir atbildīgs par lietotāja notikumu uztveršanu. Meklēšanas ievades laukā nosūtiet asinhronus pieprasījumus (AJAX) uz servera serveri un parādiet atgrieztos datus lapā, pārlūkprogrammai neveicot pilnīgu atsvaidzināšanu. To var izdarīt, izmantojot vietējo ielādētāju, jQuery AJAX vai mazas reaģējošas bibliotēkas, piemēram, Alpine.js.

Ar šo pamata mehānismu jūs varat veidot no Vienkārša automātiskā pabeigšana ar dažiem ierakstiem, līdz pat uzlabotai pilna teksta meklētājprogrammai ar atbilstības funkciju, lappušu numerāciju un filtriem, ko atbalsta tādas bibliotēkas kā Laravel Scout un ārējās meklētājprogrammas, kas optimizētas meklēšanai.

Modelis, maršruti un kontrolieris pamata reāllaika meklētājprogrammai

Pirms iedziļināties JavaScript, jāpārliecinās, ka Laravel puse ir labi organizēta: Eloquent modelis meklēšanai, maršrutu tīrīšana un īpaši paredzēts kontrolieris lai pārvaldītu meklēšanas loģiku reāllaikā.

Pirmais solis ir izveidot Eloquent modeli, kas attēlo tabulu, kurā veiksiet meklēšanu. Iedomājieties valstu tabulu un modeli ar nosaukumu Pais Ļoti vienkārši, bez laika zīmogiem un ar atļautu masveida piešķiršanu:

Minimāla Eloquent modeļa piemērs meklēšanai:

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

Šeit ir norādīts, ka modelis Pais atrodas standarta Laravel vārdtelpā.Tas manto no Model un ļauj piešķirt jebkuru lauku ar create() funkciju, atstājot aizsargāto masīvu tukšu. Atspējojot laika zīmogus ar public $timestamps = false, jūs izvairāties no problēmām, ja tabulā nav created_at un updated_at kolonnu.

Nākamais solis ir definēt maršruti, kas apstrādās gan meklētājprogrammas attēlojumu, gan AJAX pieprasījumusĻoti izplatīta shēma apvieno GET maršrutu skata attēlošanai un POST maršrutu, kas paredzēts reāllaika vaicājumu saņemšanai:

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

Saknes maršruts atgriež apsveikuma skatu, savukārt URL /search ir rezervēts meklēšanas funkcionalitāteiKontroliera index() metode parāda formu un meklēšanas ievadi, savukārt search() metode apstrādā no pārlūkprogrammas nosūtītos asinhronos pieprasījumus.

Kontrolierī var ieviest ļoti praktisku modeli: Sagatavot noklusējuma atbildes masīvu kļūdas gadījumā un pārrakstīt to tikai tad, ja tas patiešām ir derīgs AJAX pieprasījums un vaicājums tiek izpildīts bez problēmām.

Kontrolierim var būt līdzīga struktūra tas:

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

Šajā brīdī jums jau ir Pilns servera cikls: ienākošais AJAX pieprasījums, pārbaude, vai tas ir AJAX, vaicāšana ar “where” un rezultātu ierobežošana uz saprātīgu skaitli, izmantojot take(10), lai izvairītos no datubāzes pārslodzes. Atbilde vienmēr tiek nosūtīta JSON formātā, kas ievērojami vienkāršo front-end darbu.

Blade skats un JavaScript ielāde reaktīvai meklēšanai

Kad modelis, maršruti un kontrolieris ir gatavi, ir pienācis laiks izveidot redzamo daļu: veidlapa ar meklēšanas lauku un bloku rezultātu parādīšanai, kā arī JavaScript, kas atbild par pieprasījumu veikšanu fonā.

Asmens skats var būt ļoti vienkāršs, paļaujoties uz CSRF marķieris ko Laravel ievada, lai validētu POST pieprasījumus, un ērti lietojamā meklēšanas ievades laukā:

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

Šajā piemērā skripts Klausieties taustiņu nospiešanas notikumu meklēšanas ievades laukāKatrs taustiņsitiens aktivizē pieprasījumu uz /search ceļu. Pašreizējais lauka teksts tiek nosūtīts JSON formātā, un ir iekļautas atslēgas galvenes, piemēram, X-Requested-With, lai norādītu, ka tas ir AJAX, kā arī CSRF marķieris, lai apietu Laravel iebūvēto aizsardzību.

Kad atbilde tiek saņemta, tā tiek pārveidota par JSON un dinamiski ģenerēta. neliels HTML saraksts ar rezultātiemvai ziņojumu, piemēram, “Rezultāti netika atrasti”, ja vaicājums neatgriež datus. Tas viss bez lapas atkārtotas ielādes, lietotājam dabiskā veidā.

Šo modeli var vēl vairāk uzlabot ar nelielām lietotāja pieredzes detaļām, piemēram, pievienojot aizkave (atlēcienu mazināšana) starp taustiņsitieniem, parādīt ielādētāju vai apstrādāt tīkla kļūdas, lai novērstu saskarnes iesaldēšanu kļūmes gadījumā.

Tiešraides meklēšana ar Laravel un AJAX, izmantojot jQuery

Lai gan mūsdienās atnesšana ir ieguvusi lielu popularitāti, jQuery AJAX joprojām ir ļoti populārs mantotos projektos vai komandās, kurās tas jau ir ieviests. Ideja ir tieši tāda pati: uztvert lietotāja rakstīto, veikt asinhronu pieprasījumu un atsvaidzināt DOM.

Tipiska darbplūsma ar jQuery Laravel vidē tiešsaistes meklēšanai parasti ietver šādas pamata darbības: definēt konkrētu maršrutu, izveidot īpašu kontrolieri, izveidot Blade skatu ar meklēšanas ievadi Un visbeidzot, pievienojiet jQuery kodu, kas aktivizē AJAX, kad tas tiek rakstīts.

Process darbojas šādi: kad lietotājs sāk rakstīt, jQuery nosūta vaicājumu serverim ar meklēšanas virkni. Laravel filtrē informāciju datubāzē, atgriež JSON failu ar atbilstošajiem rezultātiem un jQuery atjaunina HTML konteineru lapā, lai atspoguļotu atbilstības, un tas viss milisekundēs.

jQuery izmantošanas priekšrocība ir tā, ka Tas diezgan labi apkopo AJAX sintaksi Un to ir ļoti viegli lasīt, ja jūsu projektā jau ir bibliotēka. Tomēr jūs pievienojat papildu atkarību, kas, iespējams, nav nepieciešama, ja varat strādāt ar modernu JavaScript un vietējo ielādēt.

Reāllaika filtrēšana un meklēšana priekšpusē, izmantojot Alpine.js

Ja attēlojamo datu apjoms ir relatīvi neliels (piemēram, mazāk nekā 50 XNUMX vienību), ne vienmēr ir vērts izveidot aizmugursistēmu ar sarežģītām meklēšanām. Šādos gadījumos ļoti ērta iespēja ir Filtrējiet tieši pārlūkprogrammā, izmantojot Alpine.js, neveicot pieprasījumus serverim, kamēr lietotājs raksta.

Ideja ir iepriekš aprēķināt meklēšanas virkni katram elementam (piemēram, nosaukums, apraksts un kategorija ar mazajiem burtiem), saglabāt to atribūtā data-search-text un ļaut Alpine.js paveikt pārējo. parādīt vai paslēpt elementus atbilstoši rakstītajam tekstam meklēšanas laukā.

Alpine.js komponentam var būt līdzīga struktūra: filtra vienumus

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

Skatā katrai kartei vai datu rindai būtu atribūts datu meklēšanas teksts ar jau sagatavotu tekstu mazajiem burtiemTāpēc filtrs tiek reducēts līdz includes() funkcijai JavaScript valodā, kas ir ļoti ātra īsiem sarakstiem:

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

Turklāt tukšu stāvokļa bloku var parādīt tikai tad, ja Pašreizējam meklēšanas terminam nav rezultātu.aicinot lietotāju modificēt tekstu vai notīrīt lauku ar pogu, kas vienkārši atiestata meklēšanu uz tukšu virkni.

Šai pieejai ir skaidras priekšrocības: Meklēšanas laikā nav servera izsaukumu.Mijiedarbība notiek praktiski acumirklī, un loģika joprojām ir ļoti lokāla un viegli atkļūdojama. Tas ir ideāli piemērots ātriem selektoriem, elementu atlases modālajiem logiem vai nelieliem katalogiem, kas iegulti Laravel lapā.

Laravel Scout: pilna teksta meklēšana ar specializētām dzinējiem

Kad lietas kļūst nopietnas un jums ir nepieciešams ātra, atbilstoša un mērogojama pilna teksta meklēšanaDabiskais ceļš Laravel vidē ir Laravel Scout. Scout ir integrācijas slānis, kas ļauj viegli savienot Eloquent modeļus ar meklētājprogrammām, piemēram, Algolia, Meilisearch, savu datubāzi, atmiņā esošajām kolekcijām vai pat Elasticsearch, izmantojot ārējos kontrollerus.

Lai sāktu darbu ar Scout, parasti viss ir kārtībā. izveidot jaunu Laravel projektu vai atkārtoti izmantot esošuLai to palaistu, izmantojiet Docker (piemēram, ar Laravel Sail) un pēc tam instalējiet bibliotēku, izmantojot Composer. Kad tas ir izdarīts, publicējiet konfigurācijas failu scout.php un pielāgojiet vides mainīgos atbilstoši draiverim, kuru vēlaties izmantot.

Tipiska darbplūsma būtu instalēt Scout ar Composer, publicēt tā konfigurāciju un aktivizējiet indeksēšanas rindu ar SCOUT_QUEUE=true .env failā pārliecinieties, vai resursietilpīgas darbības tiek apstrādātas fonā, tādējādi uzlabojot lietojumprogrammu atbildes laikus. Turklāt jums jāpārliecinās, ka DB_HOST norāda uz izmantoto datubāzi, kas ir īpaši svarīgi, ja izmantojat Docker konteinerus.

Lai modelis varētu piedalīties izlūku meklējumos, ir nepieciešams Lai to skaidri atzīmētu kā meklējamu, pievienojot meklējamu pazīmiPiemēram, ja jums ir vilciena modelis, kas attēlo vilcienu tabulu ar nosaukuma lauku, varat to definēt šādi:

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 metode ļauj Pielāgojiet indeksa nosaukumu meklētājprogrammāTā vietā, lai izmantotu no modeļa atvasināto noklusējuma nosaukumu, darbu pārņem Scout. Turpmāk Scout sinhronizē izveides, atjaunināšanas un dzēšanas darbības ar attālo vai lokālo indeksu atkarībā no izvēlētā draivera.

Laravel Scout ar Algolia: zibensātra SaaS meklēšana

Algolia ir SaaS pakalpojums, kas koncentrējas uz piedāvāt ļoti ātru un atbilstošu meklēšanu lielos datu apjomosTam ir tīmekļa panelis indeksu, atbilstības noteikumu, sinonīmu u. c. pārvaldībai, un tas ļoti labi integrējas ar Laravel, izmantojot Scout un oficiālo PHP klientu.

Lai izmantotu Algolia kopā ar Scout, jums būs jāinstalē tā PHP klients ar Composer, jāreģistrē savi akreditācijas dati .env failā (lietojumprogrammas ID un administratora API atslēga) un iestatīt SCOUT_DRIVER=algolia lai norādītu Scout izmantot šo dzinēju. No Algolia paneļa var iegūt gan lietojumprogrammas ID, gan administratora atslēgu.

Kad vide ir konfigurēta, varat izmantot tādas metodes kā Vilciens::meklēšana('teksts')->lapot(6) tieši jūsu kontrolleros, lai veiktu meklēšanu indeksētajos laukos, saņemot rezultātus lappušu Eloquent formātā, kas ir gatavs nosūtīšanai uz Blade skatu.

PiemJums varētu būt kontrolieris indekss kas uzskaita visus vilcienus vai veic meklēšanu, ja tiek saņemts titlesearch parametrs, un izveides metode jaunu vilcienu ievietošanai indeksā:

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

Atbilstošajā skatā varat apvienot veidlapa jaunu vilcienu reģistrācijai un vēl viena GET forma ar titlesearch lauku, kas aktivizē meklēšanu pēc iesniegšanas. Pēc tam jums tikai jāatkārto vilcienu kolekcija un jāattēlo to lauki tabulā, izmantojot Laravel ģenerētās lappušu numerācijas saites.

Izlūkošana ar Meilisearch, datubāzi un kolekcijām

Ja vēlaties izvairīties no ārējiem pakalpojumiem, Meilisearch ir atvērtā koda meklētājprogramma ko var izvietot lokāli vai savā infrastruktūrā. Scout integrējas ar Meilisearch ļoti līdzīgi kā Algolia, vienkārši mainot draiveri un pievienojot MEILISEARCH_HOST un MEILISEARCH_KEY mainīgos .env failam.

Lai to izmantotu, instalējiet Meilisearch PHP klientu, pielāgojiet SCOUT_DRIVER=meilisiearch un norādiet MEILISEARCH_HOST uz instances URL (piemēram, http://127.0.0.1:7700). Ja jums jau bija iepriekšējie ieraksti, varat tos indeksēt ar komandu php artisan scout:import "App\Models\Train", lai tie būtu pieejami dzinējam.

Mazākās vai vidēji lielās lietojumprogrammās varat izvēlēties arī Skautu vadītāju datubāzeTas izmanto pilna teksta indeksus un LIKE komandas jūsu MySQL vai PostgreSQL datubāzē. Šajā gadījumā jums nav nepieciešams ārējs pakalpojums; vienkārši iestatiet SCOUT_DRIVER=database, lai Scout izmantotu pašu datubāzi kā meklētājprogrammu.

Vēl viena interesanta iespēja ir draiveru kolekcija, kas darbojas ar Eloquent kolekcijām atmiņāŠis dzinējs filtrē rezultātus, izmantojot WHERE klauzulas un kolekciju filtrēšanu, un ir saderīgs ar jebkuru Laravel atbalstītu datubāzi. To var aktivizēt ar `SCOUT_DRIVER=collection` vai pielāgojot Scout konfigurācijas failu konkrētākiem iestatījumiem.

Integrācija ar Elasticsearch, izmantojot Explorer

Ja jūsu meklēšanas vajadzības ietver darbs ar milzīgu datu apjomu un analīze reāllaikāElasticsearch ir klasika. Laravel ekosistēmā mūsdienīgs veids, kā to integrēt ar Scout, ir izmantot Explorer kontrolieri, kas darbojas kā tilts starp jūsu modeļiem un Elasticsearch klasteri.

Lai to izdarītu, parasti tiek izmantots Docker kopā ar bagātīgu Docker-compose failu, kas papildus tipiskajiem pakalpojumiem (Laravel, MySQL, Redis, Meilisearch utt.) Elasticsearch un Kibana konteineriPēc tam, izmantojot Composer, instalējiet pakotni jeroen-g/explorer un publicējiet tās konfigurācijas failu, lai norādītu, kuri modeļi ir jāindeksē.

Failā config/explorer.php varat reģistrēt savus modeļus ar indexes atslēgu, piemēram, pievienojot Lietotne\Modeļi\Vilciens::klaseTurklāt .env failā jūs maināt Scout draiveri uz elastic ar SCOUT_DRIVER=elastic, lai viss norādītu uz Elasticsearch.

Vilciena modeļa ietvaros ir jāievieš Explored saskarne un jāpārraksta metode. mappableAskas nosaka lauku karti, kas tiks nosūtīta uz indeksu. Minimāls piemērs būtu:

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

No šī brīža, Meklēšanu vietnē Elasticsearch var sākt, izmantojot to pašu Scout saskarni., izmantojot ļoti īsu atbildes laiku un šī dzinēja pilno vaicājumu jaudu, taču nepametot Laravel ekosistēmu.

Ar visām šīm pieejām — sākot ar pamata automātisko pabeigšanu ar fetch vai jQuery un beidzot ar front-end filtrēšanu ar Alpine.js, kā arī pilna teksta meklēšanu ar Laravel Scout un dažādiem draiveriem — Laravel piedāvā plašu iespēju klāstu reāllaika meklēšanas ieviešanai pielāgots jūsu projekta lielumam, nepieciešamajai veiktspējai un infrastruktūrai, kuru esat gatavs uzturēt.