Umhlahlandlela ophelele wokusesha kwesikhathi sangempela e-Laravel

I-Informatec Digital » Izinsiza » Umhlahlandlela ophelele wokusesha ngesikhathi sangempela eLaravel

Uma uqala ukusebenza neLaravel futhi udinga injini yokusesha yesikhathi sangempela ephendula ngokushesha , kulula ukulahleka phakathi kwezindlela eziyinkulungwane ezingaba khona: i-AJAX ene-fetch, i-jQuery, i-Alpine.js, i-Scout ene-Algolia noma i-Meilisearch, ukuhlunga kwe-frontend, njll. Izindaba ezinhle ukuthi i-ecosystem ye-Laravel isivele inikeza cishe konke okudingayo ukwakha injini yokusesha ebushelelezi futhi esheshayo ngaphandle kokukhungatheka.

Kulesi sihloko, uzofunda ukuthi ungazisebenzisa kanjani izinhlobo ezahlukene zokusesha ngesikhathi sangempela ku-Laravel , kusukela ekuqedeleni ngokuzenzakalela kwe-AJAX yakudala kuya ekusesheni okugcwele umbhalo usebenzisa i-Laravel Scout nezinjini zokusesha ezifana ne-Algolia, i-Meilisearch, isizindalwazi ngokwaso, noma ngisho ne-Elasticsearch. Uzohlola nezindlela ezilula nge-Alpine.js zokuhlunga idatha ngqo kusiphequluli lapho usebenza namasethi edatha amancane.

Kuyini ukusesha kwesikhathi sangempela e-Laravel futhi izisekelo zisebenza kanjani?

Umqondo osemuva kokusesha ngesikhathi sangempela ukuthi, njengoba umsebenzisi ethayipha ensimini yombhalo , umbuzo uyaqala futhi imiphumela ibuyekezwa ngaphandle kokulayisha kabusha ikhasi. Ngobuchwepheshe, lokhu kuhilela izingxenye ezintathu ezibalulekile: i-backend ye-Laravel, i-JavaScript yesiphequluli, kanye nokushintshana kwedatha ngefomethi ye-JSON.

Ngakolunye uhlangothi, i-Laravel isebenza njengesendlalelo seseva esinomthwalo wemfanelo wokwamukela izicelo, ukuhumusha amapharamitha okusesha (umbhalo ofakiwe), ukubuza ngesizindalwazi, nokubuyisela impendulo ehlelekile, ngokuvamile ngefomethi ye-JSON. Le mpendulo ingabonisa impumelelo, iphutha, noma ukuthi akukho miphumela etholakele.

Ngakolunye uhlangothi, i-JavaScript iphatha ukulalela imicimbi yabasebenzisi kokufakwayo kokusesha, ithumela izicelo ezingavumelani (i-AJAX) ku-backend, futhi inikeze idatha ebuyisiwe ekhasini ngaphandle kokudinga ukuvuselelwa okugcwele kwesiphequluli. Lokhu kungenziwa nge-native fetch, i-jQuery AJAX, noma amalabhulali amancane asebenzayo njenge-Alpine.js.

Ngale ndlela eyisisekelo ungakha noma yini kusukela ekuqedeleni okuzenzakalelayo okulula okunamarekhodi ambalwa , kuya enjinini yokusesha egcwele umbhalo ethuthukisiwe enokubaluleka, ukuhlukanisa amakhasi kanye nezihlungi, uthembele emitatsheni efana neLaravel Scout kanye nezinjini zokusesha zangaphandle ezilungiselelwe ukusesha.

Imodeli, imizila, nesilawuli senjini yokusesha yesikhathi sangempela eyisisekelo

Ngaphambi kokuthi ujule ku-JavaScript, udinga ukuthi uhlangothi lwe-Laravel luhlelwe kahle: imodeli ye-Eloquent yokusesha, ukucacisa imizila, kanye nesilawuli esizinikele ekuphatheni i-logic yokusesha ngesikhathi sangempela.

Isinyathelo sokuqala ukuba nemodeli ye-Eloquent emele ithebula lapho uzosesha khona. Cabanga ngethebula lamazwe kanye nemodeli elula kakhulu ebizwa ngokuthi i-Country , ngaphandle kwezitembu zesikhathi futhi kuvunyelwe isabelo esikhulu:

Isibonelo semodeli encane ye-Eloquent yokusesha :

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

Lokhu kubonisa ukuthi imodeli ye-Pais itholakala ku-standard Laravel namespace , izuza njenge-Model, futhi ivumela ukwabela noma iyiphi insimu nge-create() ngokushiya i-guarded array ingenalutho. Ngokukhubaza ama-timestamps nge-public $timestamps = false, ugwema izinkinga uma ithebula lingenawo amakholomu e-created_at kanye ne-updated_at.

Isinyathelo esilandelayo ukuchaza imizila ezosingatha kokubili isibonisi senjini yokusesha kanye nezicelo ze-AJAX . Uhlelo oluvame kakhulu luhlanganisa umzila we-GET ukubonisa umbono kanye nomzila we-POST owenzelwe ukwamukela imibuzo ngesikhathi sangempela:

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

Indlela yempande ibuyisa umbono owamukelekile, kuyilapho i -URL yokusesha /igcinelwe ukusebenza kokusesha . Indlela ye-index() yomlawuli ibonisa ifomu kanye nokufakwa kokusesha, kuyilapho indlela yokusesha () icubungula izicelo ezingavumelani ezithunyelwe kusuka kusiphequluli.

Kusilawuli ungasebenzisa iphethini ewusizo kakhulu: lungiselela uhlu lwempendulo oluzenzakalelayo uma kwenzeka iphutha bese ulibhala ngaphezulu kuphela uma empeleni kuyisicelo se-AJAX esivumelekile futhi umbuzo uyasebenza ngaphandle kwezinkinga.

Isilawuli singaba nesakhiwo esifana nalesi:

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

Kuleli qophelo, une -backend cycle ephelele: isicelo se-AJAX esingenayo, ukuqinisekiswa ukuthi ngempela yi-AJAX, umbuzo usebenzisa i-`where like`, kanye nokunciphisa inani lemiphumela ibe yinani elifanele nge-`take(10)` ukuze ugweme ukulayisha ngokweqile i-database. Impendulo ithunyelwa njalo ku-JSON, okwenza umsebenzi we-frontend ube lula kakhulu.

Ukubuka kwe-Blade nokulanda i-JavaScript ukuze kuseshwe kabusha

Njengoba imodeli, imizila, kanye nesilawuli sezilungile, sekuyisikhathi sokwakha ingxenye ebonakalayo: ifomu elinensimu yokusesha kanye nebhulokhi yokubonisa imiphumela , kanye neJavaScript enesibopho sokwenza izicelo ngemuva.

Ukubuka kwe-Blade kungaba lula kakhulu, kuncike kuthokheni ye-CSRF efakwa yi-Laravel ukuqinisekisa izicelo ze-POST kanye nokufakwa kokusesha okulula ukukusebenzisa:

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

Kulesi sibonelo, iskripthi silalela umcimbi we-keyup kokufakwayo kokusesha , ngakho-ke ukuchofoza ngakunye kuqalisa isicelo sokulanda endleleni yokusesha /search. Umbhalo wamanje wensimu uthunyelwa ngefomethi ye-JSON, futhi izihloko eziyinhloko ezifana ne-X-Requested-With zifakiwe ukukhombisa ukuthi yi-AJAX, kanye nethokheni ye-CSRF yokudlula ukuvikelwa kwemvelo kukaLaravel.

Uma impendulo ifika, iguqulwa ibe yi-JSON bese uhlu oluncane lwe-HTML olunemiphumela lukhiqizwa ngokuguquguqukayo , noma umlayezo onjengokuthi "Ayikho imiphumela etholakele" uyaboniswa uma umbuzo ungabuyisi idatha. Konke lokhu kwenzeka ngaphandle kokulayisha kabusha ikhasi, ngendlela yemvelo kumsebenzisi.

Le phethini ingathuthukiswa ngemininingwane emincane ye-UX, njengokwengeza impikiswano phakathi kokucindezela okhiye, ukubonisa i-loader, noma ukuphatha amaphutha enethiwekhi ukuvimbela isikhombimsebenzisi ukuthi singabonakali siqandisiwe lapho okuthile kwehluleka.

Sesha bukhoma nge-Laravel ne-AJAX usebenzisa i-jQuery

Nakuba i-fetch ithole ukuthandwa okukhulu, i-jQuery AJAX isathandwa kakhulu kumaphrojekthi amadala noma amaqembu asevele eyihlanganisile. Umqondo ufana ncamashi: thatha lokho umsebenzisi akuthayiphayo, wenze isicelo esingahambisani, bese uvuselela i-DOM.

Indlela ejwayelekile yokusebenza ene-jQuery ku-Laravel yokusesha bukhoma ivame ukufaka lezi zinyathelo eziyisisekelo: chaza umzila othize, dala isilawuli esizinikele, yakha umbono we-Blade ngokufakwa kokusesha , bese ekugcineni ufaka ikhodi ye-jQuery eqala i-AJAX njengoba ithayiphwa.

Inqubo isebenza kanje: uma umsebenzisi eqala ukuthayipha, i-jQuery ithumela umbuzo kuseva ngentambo yokusesha. I-Laravel ihlunga ulwazi kusizindalwazi, ibuyisele into ye-JSON enemiphumela efanayo, bese i-jQuery ibuyekeza isitsha se-HTML ekhasini ukuze ibonise okufanayo, konke lokhu ngemizuzwana emincane.

Inzuzo yokusebenzisa i-jQuery ukuthi yenza lula kakhulu i-syntax ye-AJAX futhi ilula kakhulu ukuyifunda uma usunayo ilabhulali kuphrojekthi yakho. Kodwa-ke, iveza ukuthembela okwengeziwe okungase kungadingeki uma ungasebenza nge-JavaScript yesimanje kanye nokusebenza kwe-native fetch.

Ukuhlunga kwesikhathi sangempela bese usesha endaweni engaphambili nge-Alpine.js

Uma idatha ezoboniswa incane kakhulu (isibonelo, izinto ezingaphansi kuka-50 ), akusizi ngaso sonke isikhathi ukusetha i-backend enokusesha okuyinkimbinkimbi. Kulezi zimo, inketho elula kakhulu ukuhlunga ngqo kusiphequluli usebenzisa i-Alpine.js , ngaphandle kokwenza izicelo kuseva ngenkathi umsebenzisi ethayipha.

Umqondo uwukubala kusengaphambili umucu wokusesha wento ngayinye (isb., igama, incazelo, kanye nesigaba ngosonhlamvukazi abancane), uyigcine kusici se-data-search-text, bese uvumela ama-Alpine.js ukuthi aphathe ukubonisa noma ukufihla izinto ngokusekelwe kumbhalo ofakwe ensimini yokusesha.

Ingxenye ye-Alpine.js ingaba nesakhiwo esifana nalesi: 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;
},
}

Ekubukeni, ikhadi ngalinye noma umugqa wedatha uzoba nesici se-data-search-text esinombhalo osuvele ulungiselelwe ngosonhlamvukazi abancane , ngakho-ke isihlungi sincishiswa sibe yi-includes() ku-JavaScript, ngokushesha kakhulu ohlwini olufushane:

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

Ngaphezu kwalokho, ungabonisa ibhulokhi yesimo esingenalutho kuphela uma kungekho miphumela yetemu lokusesha lamanje , umema umsebenzisi ukuthi ashintshe umbhalo noma asule insimu ngenkinobho emane isethe kabusha usesho lube yintambo engenalutho.

Le ndlela inezinzuzo ezicacile: azikho izingcingo zeseva ngesikhathi sokusesha , ukusebenzisana kushesha kakhulu, futhi i-logic ihlala isendaweni futhi kulula ukuyilungisa. Ilungele abakhethi abasheshayo, amamodali wokukhetha izinto, noma amakhathalogi amancane afakwe ekhasini le-Laravel.

I-Laravel Scout: Usesho lombhalo ogcwele ngezinjini ezikhethekile

Uma izinto ziba zimbi kakhulu futhi udinga usesho oluphelele olusheshayo, olufanele, nolunwebekayo , indlela yemvelo eLaravel yiLaravel Scout. I-Scout iyisendlalelo sokuhlanganiswa esikuvumela ukuthi uxhume kalula amamodeli akho e-Eloquent nezinjini zokusesha ezifana ne-Algolia, i-Meilisearch, isizindalwazi sakho, amaqoqo ememori, noma ngisho ne-Elasticsearch ngabalawuli bangaphandle.

Ukuze uqale nge-Scout, indlela evamile ukudala iphrojekthi entsha ye-Laravel noma ukusebenzisa kabusha ekhona , ukuyiqalisa nge-Docker (isibonelo, usebenzisa i-Laravel Sail), bese ufaka umtapo wolwazi nge-Composer. Uma lokho sekuqediwe, ushicilela ifayela lokucushwa kwe-scout.php bese ulungisa iziguquguquko zemvelo ngokuya ngomshayeli ofuna ukumsebenzisa.

Indlela ejwayelekile yokusebenza kungaba ukufaka i-Scout nge-Composer, ukushicilela ukucushwa kwayo, nokuvumela umugqa wokufaka izinkomba nge-`SCOUT_QUEUE=true` kufayela le-`.env` ukuze imisebenzi edinga izinsiza eziningi icutshungulwe ngemuva, okuthuthukisa izikhathi zokuphendula kohlelo lokusebenza. Ngaphezu kwalokho, kufanele uqinisekise ukuthi i-`DB_HOST` ikhomba kudathabheyisi oyisebenzisayo, okubaluleke kakhulu uma usebenzisa izitsha ze-Docker.

Ukuze imodeli ihlanganyele ekusesheni kwe-Scout, kumele imakwe ngokusobala njengengaseshekayo ngokungeza uphawu oluthi `Seshable` . Isibonelo, uma unemodeli ethi `Isitimela` emele ithebula lezitimela elinensimu ethi `isihloko`, ungayichaza kanje:

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

Indlela ethi `searchableAs` ikuvumela ukuthi wenze ngokwezifiso igama lenkomba enjinini yokusesha , esikhundleni sokusebenzisa igama elizenzakalelayo elithathwe kumodeli. Ukusuka lapho, i-Scout isingatha ukuvumelanisa imisebenzi yokudala, yokubuyekeza, kanye nokususa ngenkomba ekude noma yendawo, kuye ngokuthi umshayeli okhethiwe.

I-Laravel Scout ene-Algolia: Usesho lwe-SaaS olusheshayo ngombani

I-Algolia iyisevisi ye-SaaS egxile ekuhlinzekeni usesho olusheshayo nolufanele kuyo yonke idatha eminingi . Ifaka iphaneli yewebhu yokuphatha ama-index, imithetho yokufaneleka, amagama afanayo, nokuningi, futhi ihlangana kalula ne-Laravel nge-Scout kanye neklayenti elisemthethweni le-PHP.

Ukuze usebenzise i-Algolia ne-Scout, kuzodingeka ufake iklayenti layo le-PHP usebenzisa i-Composer, ubhalise ubuqiniso bakho kufayela le-.env (i-Application ID kanye ne-Admin API Key), bese ulungiselela i-SCOUT_DRIVER=algolia ukuze utshele i-Scout ukuthi isebenzise le njini. Ungathola kokubili i-application ID kanye ne-admin key kusuka kudeshibhodi ye-Algolia.

Uma indawo isilungisiwe, ungasebenzisa izindlela ezifana ne -Train::search('text')->paginate(6) ngqo kubalawuli bakho ukuze wenze usesho ezinkambeni ezikhonjisiwe, uthole imiphumela ngefomethi ye-Eloquent ebhalwe ngekhasi elungele ukudluliselwa ekubukeni kwe-Blade.

Isibonelo , ungaba nesilawuli senkomba esibala zonke izitimela noma senze usesho uma ipharamitha ye-titlesearch idlulisiwe, kanye nendlela yokudala yokufaka izitimela ezintsha ku-index:

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

Kumbono ohambisanayo, ungahlanganisa ifomu lokwengeza izitimela ezintsha kanye nelinye ifomu le-GET nensimu yokusesha isihloko eqala usesho lapho uthumela. Bese umane uphinda-phinda iqoqo lezitimela bese ubonisa amasimu azo etafuleni, usebenzisa izixhumanisi zamakhasi ezikhiqizwe yiLaravel.

Hlola nge-Meilisearch, isizindalwazi namaqoqo

Uma ukhetha ukugwema izinsizakalo zangaphandle, i-Meilisearch iyinjini yokusesha evulekile ongayisebenzisa endaweni noma kwingqalasizinda yakho. I-Scout ihlangana ne-Meilisearch ngendlela efana kakhulu ne-Algolia, ngokushintsha nje umshayeli bese wengeza iziguquguquki ze-MEILISEARCH_HOST kanye ne-MEILISEARCH_KEY kufayela le-.env.

Ukuze uyisebenzise, ​​faka iklayenti le-Meilisearch PHP, setha i-SCOUT_DRIVER=meilisearch , bese ukhomba i-MEILISEARCH_HOST ku-URL yesibonelo (isibonelo, http://127.0.0.1:7700). Uma usuvele unamarekhodi, ungawafaka ku-index ngomyalo othi php artisan scout:import "App\Models\Train" ukuze injini ibe nawo atholakalayo.

Kuzinhlelo zokusebenza ezincane noma ezinobukhulu obuphakathi, ungakhetha futhi idrayivu yedatha ye-Scout's , esebenzisa izinkomba ezigcwele umbhalo kanye nezitatimende ze-LIKE kudatha yakho ye-MySQL noma ye-PostgreSQL. Kulesi simo, awudingi isevisi yangaphandle; mane usethe i-SCOUT_DRIVER=database ye-Scout ukuze isebenzise idatha uqobo lwayo njengenjini yayo yokusesha.

Enye inketho ethakazelisayo i -collection driver, esebenza ngamaqoqo e-in-memory Eloquent . Le injini ihlunga imiphumela isebenzisa izindlela zokuhlunga ze-`where` kanye ne-collection, futhi iyahambisana nanoma iyiphi i-database esekelwa yi-Laravel. Ungayivula nge-`SCOUT_DRIVER=collection` noma ngokulungisa ifayela lokucushwa kwe-Scout uma ufuna okuthile okucacile.

Ukuhlanganisa ne-Elasticsearch usebenzisa i-Explorer

Uma izidingo zakho zokusesha zihilela ukusebenza ngedatha enkulu kanye nokuhlaziywa kwesikhathi sangempela , i-Elasticsearch iyindlela yakudala. Kuhlelo lwe-Laravel, indlela yesimanje yokuyihlanganisa ne-Scout ukusebenzisa isilawuli se-Explorer, esisebenza njengebhuloho phakathi kwamamodeli akho kanye neqoqo le-Elasticsearch.

Lokhu ngokuvamile kuhilela ukusebenza ne-Docker kanye nefayela elicebile le-docker-compose eliqalayo, ngaphezu kwezinsizakalo ezijwayelekile (i-Laravel, i-MySQL, i-Redis, i-Meilisearch, njll.), iziqukathi ze-Elasticsearch kanye ne-Kibana . Bese ufaka iphakheji ye-jeroen-g/explorer nge-Composer bese ushicilela ifayela layo lokucushwa ukuze ucacise ukuthi yimaphi amamodeli okufanele afakwe ku-index.

Kufayela le-config/explorer.php, ungabhalisa amamodeli akho ngaphansi kwenkinobho yezinkomba, isibonelo ngokwengeza i-App\Models\Train::class . Ngaphezu kwalokho, ushintsha umshayeli kusuka ku-Scout uye ku-Elasticsearch kufayela le-.env eline-SCOUT_DRIVER=elastic ukuze konke kukhombe ku-Elasticsearch.

Ngaphakathi kwemodeli yesitimela, udinga ukusebenzisa i-Explored interface bese ubhala ngaphezulu indlela ye- mappableAs , echaza imephu yezinkambu okufanele zithunyelwe ku-index. Isibonelo esincane kungaba:

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

Ukusuka lapha, ungaqala usesho ku-Elasticsearch usebenzisa isikhombikubona esifanayo se-Scout , uzuze ezikhathini zokuphendula eziphansi kakhulu kanye namandla aphelele ombuzo wale njini, kodwa ngaphandle kokushiya i-ecosystem ye-Laravel.

Ngazo zonke lezi zindlela—kusukela ekuqedeleni okuzenzakalelayo okuyisisekelo nge-fetch noma i-jQuery, kuya ekuhlungeni kwe-frontend nge-Alpine.js, kuya ekusesheni umbhalo ogcwele nge-Laravel Scout kanye nabashayeli abahlukahlukene— i-Laravel ikunikeza izinketho eziningi zokusebenzisa usesho lwesikhathi sangempela oluhambisana nosayizi wephrojekthi yakho, ukusebenza okudingayo, kanye nengqalasizinda ozimisele ukuyigcina.