Umhlahlandlela ophelele wokusesha kwesikhathi sangempela e-Laravel

Informatec Digital » Izinsiza » Umhlahlandlela ophelele wokusesha kwesikhathi sangempela e-Laravel

Uma uqala ukusebenza noLaravel futhi udinga a injini yokusesha yesikhathi sangempela ephendula ngokusheshaKulula ukulahleka phakathi kwezindlela ezingaba yinkulungwane: I-AJAX enokulanda, i-jQuery, i-Alpine.js, i-Scout nge-Algolia noma i-Meilisearch, ukuhlunga indawo ephambili, njll. Izindaba ezinhle ukuthi i-ecosystem ye-Laravel isivele ikunikeza cishe ngakho konke okudingayo ukuze umise ukusesha okushelelayo nokusheshayo ngaphandle kokushona emzamweni.

Kulesi sihloko uzobona indlela yokuhlanganisa izinhlobo ezahlukene zosesho lwesikhathi sangempela eLaravelKusukela ekuqedeleni ngokuzenzakalela kwe-AJAX yakudala kuya ekusesheni kombhalo ogcwele nge-Laravel Scout nezinjini zokusesha ezifana ne-Algolia, Meilisearch, isizindalwazi ngokwayo, noma i-Elasticsearch. Uzobona nezinye izindlela ezingasindi nge-Alpine.js zokuhlunga idatha ngqo esipheqululini uma umthamo wedatha uyingcosana.

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

Umqondo wokusesha kwesikhathi sangempela ukuthi, njengoba umsebenzisi ethayipha endaweni yombhaloUmbuzo uyacushwa futhi imiphumela ibuyekezwa ngaphandle kokulayisha kabusha ikhasi. Ngobuchwepheshe, lokhu kuhilela izingxenye ezintathu ezibalulekile: i-backend ye-Laravel, i-JavaScript yesiphequluli, kanye nokushintshisana kwedatha ngefomethi ye-JSON.

Ngakolunye uhlangothi, I-Laravel isebenza njengesendlalelo seseva Inesibopho sokwamukela izicelo, ukuhumusha izinhlaka zosesho (umbhalo ofakiwe), ukubuza kusizindalwazi, nokubuyisela impendulo ehlelekile, ngokuvamile ngefomethi ye-JSON. Le mpendulo ingabonisa impumelelo, iphutha, noma ukuthi ayikho imiphumela etholakele.

Ngakolunye uhlangothi, I-JavaScript inesibopho sokulalela imicimbi yabasebenzisi. Kokufakwayo kosesho, thumela izicelo ezingavumelani (i-AJAX) ku-backend futhi ubonise idatha ebuyisiwe ekhasini ngaphandle kokuthi isiphequluli senze ukuvuselela okuphelele. Lokhu kungenziwa ngokulanda komdabu, i-jQuery AJAX, noma amalabhulali amancane asebenzayo afana ne-Alpine.js.

Ngalo mshini oyisisekelo ungakha kusuka ku-a Ukuqedela ngokuzenzakalela okulula ngamarekhodi ambalwa, kuze kufike enjinini yokusesha yombhalo ogcwele ethuthukisiwe ehambisanayo, ukuhlukanisa amagama nezihlungi, esekelwa imitapo yolwazi efana ne-Laravel Scout kanye nezinjini zokusesha zangaphandle ezilungiselelwe ukusesha.

Imodeli, imizila, nesilawuli senjini yokusesha yesikhathi sangempela eyisisekelo

Ngaphambi kokungena kuJavaScript, udinga ukwenza isiqiniseko sokuthi uhlangothi lweLaravel luhleleke kahle: imodeli Ehlakaniphile ongaseshwa kuyo, imizila ecacile, nesilawuli esizinikele ukuphatha logic yosesho ngesikhathi sangempela.

Isinyathelo sokuqala siwukuba nemodeli Eqephuzayo emele ithebula ozosesha kuyo. Cabanga ngethebula lamazwe kanye nemodeli ebizwa Izwe Kulula kakhulu, ngaphandle kwezitembu zesikhathi kanye nomsebenzi omningi ovunyelwe:

Isibonelo semodeli encane Eqephuzayo 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;
}

Kuboniswa lapha ukuthi imodeli I-Pais itholakala endaweni yegama ye-Laravel evamileIzuza kuModel futhi ikuvumela ukuthi unikeze noma iyiphi inkambu nge-create() ngokushiya uhlu olugadiwe lungenalutho. Ngokukhubaza izitembu zesikhathi ngezitembu zesikhathi zomphakathi = amanga, ugwema izinkinga uma ithebula lingenawo amakholomu adaliwe_at kanye nabuyekeziwe_at.

Isinyathelo esilandelayo ukuchaza imizila ezophatha kokubili isibonisi senjini yokusesha kanye nezicelo ze-AJAXUhlelo oluvame kakhulu luhlanganisa umzila we-GET ukuze ubonise ukubuka kanye nomzila we-POST odizayinelwe ukuthola imibuzo yesikhathi 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']);

Umzila owumpande ubuyisela umbono wokwamukela, kuyilapho i-URL /search ligcinelwe ukusebenza yoseshoIndlela ye-index() yesilawuli ibonisa ifomu nokokufaka kokusesha, kuyilapho indlela yosesho() icubungula izicelo ezingavumelaniyo ezithunyelwe zisuka kusiphequluli.

Kusilawuli ungasebenzisa iphethini esebenzayo kakhulu: Lungiselela uhlu lwezimpendulo ezizenzakalelayo uma kwenzeka iphutha futhi uyibhale phezu kwayo kuphela uma kuyisicelo esivumelekile se-AJAX futhi umbuzo ufeza ngaphandle kwezinkinga.

Isilawuli singase sibe ne- isakhiwo esifanayo lokhu:

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 usuvele unayo umjikelezo ophelele we-backend: isicelo se-AJAX esingenayo, sibheka ukuthi i-AJAX, sibuza ukuthi yikuphi okuthandayo nokukhawulela imiphumela enombolweni efanele usebenzisa i-take(10) ukugwema ukulayisha ngokweqile isizindalwazi. Impendulo ihlale ithunyelwa nge-JSON, okwenza umsebenzi we-frontend ube lula.

Ukubuka kwe-Blade nokulanda i-JavaScript ukuze kuseshwe kabusha

Njengoba imodeli, imizila, nesilawuli sekulungile, sekuyisikhathi sokwakha ingxenye ebonakalayo: ifomu elinenkundla yokusesha kanye nebhulokhi yokubonisa imiphumela, kanye ne-JavaScript enesibopho sokwenza izicelo ngemuva.

Ukubuka kwe-Blade kungaba lula kakhulu, kuncike ku- Ithokheni ye-CSRF okuyinto uLaravel ayijovayo ukuze aqinisekise izicelo ze-POST kanye nokokufaka kosesho 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 Lalela umcimbi wokhiye kokokufaka koseshoUkuchofoza kokhiye ngakunye kucupha isicelo sokulanda kundlela /sesha. Umbhalo wamanje wenkambu uthunyelwa ngefomethi ye-JSON, futhi izihloko eziyinhloko ezifana ne-X-Requested-With zifakiwe ukuze zibonise ukuthi i-AJAX, kanye nethokheni ye-CSRF yokudlula ukuvikela komdabu kuka-Laravel.

Lapho impendulo ifika, iguqulelwa ku-JSON futhi yenziwe ngamandla. uhlu oluncane lwe-HTML olunemiphumelanoma umlayezo othi “Ayikho imiphumela etholiwe” uma umbuzo ungabuyi datha. Konke lokhu ngaphandle kokulayisha kabusha ikhasi, ngendlela engokwemvelo yomsebenzisi.

Le phethini ingathuthukiswa ngokuqhubekayo ngemininingwane emincane ye-UX, njengokwengeza a ukubambezela (debounce) phakathi kwama-keystrokes, bonisa isilayishi noma ubambe amaphutha enethiwekhi ukuze uvimbele isixhumi esibonakalayo ukuthi singaveli siqhwa lapho okuthile kwehluleka.

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

Nakuba ukulanda sekuzuze okuningi namuhla, I-jQuery AJAX isalokhu ithandwa kakhulu kumaphrojekthi wefa noma emaqenjini asewasebenzisile. Umbono uyafana ncamashi: thwebula ukuthi umsebenzisi uthayipha ini, yenza isicelo esivumelanayo, futhi uvuselele i-DOM.

Ukugeleza komsebenzi okujwayelekile nge-jQuery ku-Laravel kusesho olubukhoma kuvame ukufaka lezi zinyathelo eziyisisekelo: chaza umzila othile, dala isilawuli esizinikezele, yakha ukubuka kwe-Blade ngokokufaka kosesho Futhi ekugcineni, engeza ikhodi ye-jQuery ecupha i-AJAX njengoba ibhalwa.

Inqubo isebenza kanje: uma umsebenzisi eqala ukuthayipha, I-jQuery ithumela umbuzo kuseva ngochungechunge lokusesha. I-Laravel ihlunga ulwazi kusizindalwazi, ibuyisela i-JSON enemiphumela efanayo, futhi i-jQuery ibuyekeza isiqukathi se-HTML ekhasini ukuze sibonise okufanayo, konke ngendaba yama-millisecond.

Inzuzo yokusebenzisa i-jQuery yilokho Ifingqa kahle i-syntax ye-AJAX Futhi kuqonde kakhulu ukufunda uma usunayo umtapo wezincwadi kuphrojekthi yakho. Kodwa-ke, ungeza ukuncika okwengeziwe okungenzeka kungadingeki uma ungasebenzisa i-JavaScript yesimanje kanye nokulanda komdabu.

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

Lapho idatha ezoboniswa incane ngokuqhathaniswa (isibonelo, izinto ezingaphansi kuka-50), akufanelekile njalo ukusetha i-backend ngosesho oluyinkimbinkimbi. Kulezo zimo, inketho elula kakhulu Hlunga ngqo esipheqululini nge-Alpine.js, ngaphandle kokwenza izicelo kuseva ngenkathi umsebenzisi ethayipha.

Umqondo uwukubala kusengaphambili iyunithi yezinhlamvu yosesho ye-elementi ngayinye (isibonelo, igama, incazelo, kanye nesigaba ngofeleba abancane), igcine kusibaluli sombhalo wokusesha idatha, futhi uvumele i-Alpine.js isingathe okunye. khombisa noma ufihle izakhi ngokombhalo obhaliwe endaweni 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;
},
}

Ngokubuka, ikhadi ngalinye noma umugqa wedatha ungaphatha isibaluli idatha-search-text nombhalo osuvele ulungisiwe ngofeleba abancaneNgakho-ke, isihlungi sehliselwa kumsebenzi ohlanganisa () ku-JavaScript, oshesha 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>

Ukwengeza, ungabonisa indawo engenalutho kuphela uma Ayikho imiphumela yetemu lokusesha lamanje.imema umsebenzisi ukuthi aguqule umbhalo noma asule inkambu ngenkinobho evele imise kabusha usesho lube yiyunithi yezinhlamvu engenalutho.

Le ndlela inezinzuzo ezicacile: Awekho amakholi weseva ngesikhathi sokusesha.Ukusebenzisana cishe kwenzeka khona manjalo, futhi ingqondo ihlala isendaweni futhi kulula ukuyisusa. Ilungele abakhethi abasheshayo, izindlela zokukhetha izinto, noma amakhathalogi amancane ashumekwe ekhasini le-Laravel.

I-Laravel Scout: Usesho lombhalo ogcwele ngezinjini ezikhethekile

Lapho izinto ziba bucayi futhi udinga ukusesha okugcwele okusheshayo, okuhambisanayo, nokwakalekayoIndlela yemvelo eLaravel yiLaravel Scout. I-Scout iyisendlalelo sokuhlanganisa esikuvumela ukuthi uxhume kalula amamodeli akho Anekhono ngezinjini zokusesha ezifana ne-Algolia, Meilisearch, isizindalwazi sakho, amaqoqo enkumbulo, noma i-Elasticsearch ngokusebenzisa izilawuli zangaphandle.

Ukuze uqalise nge-Scout, into evamile dala iphrojekthi entsha ye-Laravel noma uphinde usebenzise ekhonaUkuze uyethule, sebenzisa i-Docker (ngokwesibonelo, nge-Laravel Sail) bese ufaka umtapo wolwazi nge-Composer. Uma lokho sekwenziwe, shicilela ifayela lokumisa le-scout.php futhi ulungise okuguquguqukayo kwemvelo ngokuvumelana nomshayeli ofuna ukumsebenzisa.

Ukugeleza komsebenzi okuvamile kungaba ukufaka i-Scout nge-Composer, ukushicilela ukucushwa kwayo, kanye yenza kusebenze ulayini wokukhomba nge-SCOUT_QUEUE=iqiniso Efayelini le-.env, qinisekisa ukuthi imisebenzi edinga insiza icutshungulwa ngemuva, uthuthukisa izikhathi zokuphendula isicelo. Ukwengeza, kufanele uqinisekise ukuthi i-DB_HOST ikhomba kusizindalwazi osisebenzisayo, okubaluleke kakhulu uma usebenzisa iziqukathi ze-Docker.

Ukuze imodeli ibambe iqhaza ekusesheni kwe-Scout, kuyadingeka Ukumaka ngokusobala njengokuseshekayo ngokungeza isici EsiseshekayoIsibonelo, uma unemodeli Yesitimela emele ithebula lezitimela elinendawo yesihloko, 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 yokuseshaIvumela yenza ngokwezifiso igama lenkomba enjinini yokuseshaEsikhundleni sokusebenzisa igama elizenzakalelayo elisuselwa kumodeli, i-Scout ithatha izintambo. Kusukela lapha, i-Scout iphatha ukuvumelanisa ukudala, ukuvuselela, kanye nemisebenzi yokususa ngenkomba yesilawuli kude noma yendawo, kuye ngomshayeli okhethiwe.

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

I-Algolia iyisevisi ye-SaaS egxile kuyo ukunikela ngosesho olushesha kakhulu noluhlobene kuwo wonke amavolumu amakhulu wedathaInephaneli yewebhu yokuphatha izinkomba, imithetho ehlobene, amagama afanayo, njll., futhi ihlanganisa kahle kakhulu ne-Laravel nge-Scout kanye neklayenti elisemthethweni le-PHP.

Ukuze usebenzise i-Algolia ne-Scout, uzodinga ukufaka iklayenti layo le-PHP noMqambi, ubhalise imininingwane yakho kufayela le-.env (I-ID Yesicelo kanye Nokhiye Wokuphatha we-API), kanye setha SCOUT_DRIVER=algolia ukutshela uScout ukuthi asebenzise le njini. Kuphaneli ye-Algolia ungathola kokubili i-ID yesicelo kanye nokhiye wokuphatha.

Uma imvelo isilungisiwe, ungasebenzisa izindlela ezinjengokuthi Isitimela::sesha('umbhalo')->paginate(6) ngqo kuzilawuli zakho ukwenza ukusesha ezinkambu ezikhonjisiwe, ithola imiphumela ngefomethi ye-Eloquent enamakhasi elungele ukudluliselwa ekubukeni kwe-Blade.

IsiboneloUngaba nesilawuli Inkomba ebala zonke izitimela noma yenza usesho uma ipharamitha yokusesha isihloko yamukelwe, kanye nendlela yokudala yokufaka izitimela ezintsha kunkomba:

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

Ekubukeni okuhambisanayo, ungahlanganisa ifomu lokubhalisa izitimela ezintsha kanye nelinye ifomu elithi THOLA elinenkambu yokusesha isihloko eqalisa ukusesha lapho kuhanjiswa. Khona-ke udinga nje ukuphindaphinda ngeqoqo lezitimela futhi ubonise amasimu azo etafuleni, usebenzisa izixhumanisi zokuhlukanisa ezikhiqizwe nguLaravel.

Hlola nge-Meilisearch, isizindalwazi namaqoqo

Uma ukhetha ukugwema izinsiza zangaphandle, I-Meilisearch iyinjini yokusesha yomthombo ovulekile ongawasa endaweni yangakini noma engqalasizinda yakho. I-Scout ihlanganisa ne-Meilisearch ngendlela efana kakhulu ne-Algolia, ngokumane uguqule umshayeli futhi wengeze okuguquguqukayo kwe-MEILISEARCH_HOST kanye ne-MEILISEARCH_KEY kufayela le-.env.

Ukuyisebenzisa, ufaka iklayenti le-Meilisearch PHP, lungisa SCOUT_DRIVER=meilisearch bese ukhomba i-MEILISEARCH_HOST ku-URL yesibonelo (isibonelo, http://127.0.0.1:7700). Uma ubusuvele unamarekhodi adlule, ungawakhomba ngomyalo othi php artisan scout:import "App\Models\Train" ukuze injini ibe nawo.

Kuzinhlelo zokusebenza ezincane noma ezimaphakathi, ungakhetha futhi Isizindalwazi somshayeli we-ScoutLokhu kusebenzisa izinkomba zombhalo ogcwele kanye nemiyalo ethi LIKE kusizindalwazi sakho se-MySQL noma se-PostgreSQL. Kulokhu, awudingi isevisi yangaphandle; vele usethe i-SCOUT_DRIVER=database ukuze i-Scout isebenzise isizindalwazi ngokwaso njengenjini yokusesha.

Enye inketho ethokozisayo yi- iqoqo lomshayeli, elisebenza emaqoqweni Ahlakaniphile enkumbulweniLe njini ihlunga imiphumela isebenzisa LAPHO izigatshana nokuhlunga iqoqo, futhi iyahambisana nanoma iyiphi imininingo egciniwe esekelwa uLaravel. Ungayivula ngokuthi `SCOUT_DRIVER=iqoqo` noma ngokulungisa ifayela lokumisa le-Scout ukuze uthole izilungiselelo eziqondile.

Ukuhlanganisa ne-Elasticsearch usebenzisa i-Explorer

Uma izidingo zakho zokusesha zibandakanya ukusebenza ngenani elikhulu ledatha kanye nokuhlaziywa kwesikhathi sangempelaI-Elasticsearch ingeyakudala. Ku-ecosystem ye-Laravel, indlela yesimanje yokuyihlanganisa ne-Scout ukusebenzisa isilawuli se-Explorer, esisebenza njengebhuloho phakathi kwamamodeli akho neqoqo le-Elasticsearch.

Ukwenza lokhu, i-Docker ivame ukusetshenziswa, kanye nefayela elicebile lokuqamba i-docker okuthi, ngaphezu kwezinsizakalo ezijwayelekile (Laravel, MySQL, Redis, Meilisearch, njll.), I-Elasticsearch kanye neziqukathi ze-KibanaBese ufaka iphakheji ye-jeroen-g/explorer nge-Composer bese ushicilela ifayela layo lokumisa ukuze ubonise ukuthi imaphi amamodeli okufanele akhonjwe.

Efayeleni elithi config/explorer.php ungabhalisa amamodeli akho ngaphansi kokhiye wezinkomba, isibonelo ngokwengeza Uhlelo lokusebenza\Models\Train::classUkwengeza, ushintsha umshayeli we-Scout ukuze anwebeke kufayela elithi .env elithi SCOUT_DRIVER=elastic ukuze yonke into ibheke ku-Elasticsearch.

Ngaphakathi kwemodeli Yesitimela, isixhumi esibonakalayo Esihloliwe kufanele sisetshenziswe futhi indlela ikhishwe. i-mappableAsechaza imephu yezinkambu ezizothunyelwa kunkomba. Isibonelo esincane singaba:

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

Kusuka manje, Ungaqalisa ukusesha ku-Elasticsearch usebenzisa isixhumi esibonakalayo se-Scout., ezuza ezikhathini eziphansi kakhulu zokuphendula namandla ombuzo aphelele wale njini, kodwa ngaphandle kokushiya i-ecosystem ye-Laravel.

Ngazo zonke lezi zindlela—kusukela ekuqedeleni okuzenzakalelayo okuyisisekelo ngokulanda noma i-jQuery, kuya ekuhlungeni okungaphambili nge-Alpine.js, kuya ekusesheni kombhalo ogcwele nge-Laravel Scout nabashayeli abahlukahlukene— I-Laravel ikunikeza uhla olukhulu lwezinketho zokuqalisa usesho lwesikhathi sangempela yakhelwe usayizi wephrojekthi yakho, ukusebenza okudingayo, nengqalasizinda ozimisele ukuyinakekela.