- Blade kääntää .blade.php-pohjat puhtaaksi PHP:ksi ja tarjoaa selkeitä direktiivejä ehdollisille lausekkeille, silmukoille, asetteluille ja komponenteille.
- Bladen pinot (@stack, @push, @prepend) mahdollistavat skriptien ja tyylien keskittämisen ja pinotun sisällön delegoinnin lapsinäkymille.
- Ympäristö-, valtuutus-, istunto- ja validointidirektiivit integroivat näkymät turvallisesti ja selkeästi muuhun kehykseen.
- Mukautetut direktiivit ja apuohjelmat, kuten Js::from, avaavat oven edistyneisiin malleihin, mukaan lukien hasStack-tyyppisen direktiivin.
Jos työskentelet Laravelin kanssa päivittäin, ennemmin tai myöhemmin törmäät Bladeen, sen direktiiveihin ja tietenkin näkymäpinoihin sekä hypoteettiseen `hasStack`-direktiiviin niiden paremman hallinnan takaamiseksi. Saatat käyttää aiemmin klassisia PHP-malleja tai olet tottunut Reactiin tai Vuehen, mutta kun todella ymmärrät Bladen ja kaiken sen tarjoaman (mukaan lukien pinot), näkymäorganisaatiosi ottaa merkittävän harppauksen eteenpäin.
Tässä artikkelissa perehdymme sen monimutkaisuuksiin: näet yksityiskohtaisesti, miten Blade toimii, mitä ohjausdirektiivit ovat, miten asettelut, komponentit, paikat, attribuutit, valtuutus ja ympäristöt on jäsennelty, ja tässä yhteydessä, miten pinojen ja hasStack-direktiivin käsite sopivat yhteen, jolloin voit tarkistaa pinotun sisällön ennen renderöintiä. Kaikki tämä havainnollistetaan käytännön esimerkeillä ja realistisella lähestymistavalla, joka on suunniteltu nykyaikaisille Laravel-projekteille.
Mikä on Blade ja miksi sen direktiivien ymmärtäminen on tärkeää?
Terä on virallinen Laravel-mallipohjaSe ei pakota sinua lopettamaan PHP:n käyttöä, mutta se antaa sinulle paljon selkeämmän syntaksin esityslogiikan ja HTML:n yhdistämiseen ilman jatkuvaa tagien avaamista ja sulkemista. Koko ajan. Jokainen mallipohja .blade.php Se käännetään puhtaaksi PHP:ksi ja tallennetaan välimuistiin storage/framework/views, joten ajonaikainen ylimääräinen työmäärä on minimaalinen.
Teränäkymät tallennetaan yleensä kohteeseen resurssit/näkemykset ja palautetaan reiteiltä tai ohjaimista apufunktion avulla view()Voit välittää tietoja tälle apufunktiolle toisessa argumentissa (assosiatiivinen taulukko, compact()jne.), ja näkymässä ne kulutetaan merkinnän syntaksin avulla kaksoisavaimet näyttääksesi koodinvaihtomerkinnän sisältävän sisällön tai huutomerkeillä koodinvaihtomerkinnän puuttuvan sisällön.
Bladen merkittävä etu on, että se tarjoaa erityisdirektiivit (ne sanat, jotka alkavat @) käsittelemään ehtoja, silmukoita, valtuutusta, skriptipinoja, komponentteja, paikkoja, validointia, ympäristöjä… Kaikki tämä tekee näkymäkoodista paljon luettavamman ja ylläpidettävämmän kuin kaoottinen sekoitus klassista PHP:tä ja echo ja pelkkää HTML:ää.
Bladen perussyntaksi: kaiku, esc ja sanatarkka
Tyypillisin toiminto näkymässä on datan näyttäminen. Bladessa muuttujan sisällön tulostamiseen käytetään yksinkertaisesti komentoa {{ }}, joka sisäisesti tarkoittaa echo e($variable) ja siksi, Escape HTML-entiteetit XSS:n estämiseksi:
Escaped-muuttujien näyttäminen on yhtä yksinkertaista kuin:
{{ $name }}
Jos haluat näyttää valmiiksi luotua HTML-koodia tai sisältöä, jota ei pitäisi käyttää koodinvaihtomerkkien avulla (esimerkiksi siksi, että hallitset sitä ja tiedät sen olevan turvallista), voit käyttää syntaksia {!!! !!} , joka poistaa automaattisen koodinvaihdon käytöstä ja antaa selaimen tulkita sen sellaisenaan:
{!! $htmlSeguro !!}
Jos työskentelet käyttöliittymäkehysten kanssa, jotka myös käyttävät avaimia (esimerkiksi Vue tai jokin asiakaspuolen mallikirjasto), Blade antaa sinun "pakenemaan" omaa moottoriaan etuliitteellä @. Tällä tavalla @{{ muuttujaJavascript }} Sitä ei tulkita Blade-lausekkeeksi, vaan se jää HTML-koodiin selainkehyksen käsiteltäväksi.
Kun sinulla on suuria lohkoja, joissa sinun on noudatettava täysin kaksoiskaarevia aaltosulkeita ilman, että Blade koskettaa niitä, voit ympäröidä ne direktiivillä @verbatim … @endverbatim . Kaikki niiden sisällä jää koskemattomaksi, mikä on erittäin hyödyllinen työkalu monimutkaisia käyttöliittymämalleja integroitaessa.
Ohjausrakenteet: if, switch, silmukat ja $loop-muuttuja
Blade tarjoaa täydellisen joukon vuonhallintadirektiivejä , jotka paketoivat PHP-syntaksin luettavampaan ja johdonmukaisempaan tapaan. Käytännössä logiikka on lähes identtinen, mutta se selkeyttää ja estää PHP-tagien liikakäytön HTML-koodissa.
Jos-lausekkeet kanssa on kirjoitettu @if, @elseif, @else ja sulje kanssa @endifSinulla on myös pikanäppäimiä, kuten @unless (ehdon negaatio), @isset varmistaa, että muuttuja on määritelty ja @empty tarkistamaan, onko se tyhjä.
Useita mahdollisia arvoja sisältävissä skenaarioissa direktiivi @kytkin kopioi PHP:n kytkinrakenteen @case, @break, @default ja sulje @endswitch, mikä helpottaa useiden helposti luettavien ehtolauseiden käyttöä.
Silmukoiden osalta sinulla on @for, @foreach y @sillä aikaaplus @forelseTämä on erittäin hyödyllistä, kun haluat iteroida kokoelman läpi, mutta sinun on myös käsiteltävä tyhjän listan tapaus kirjoittamatta ylimääräistä if-lausetta. @forelse ... @empty ... @endforelse Voit renderöidä vaihtoehtoista sisältöä, jos elementtejä ei ole.
Kun matkustat läpi @foreachBlade tuo muuttujan käyttöösi $silmukka, objekti, joka sisältää erittäin hyödyllistä tietoa nykyisestä iteraatiosta: indeksin, onko kyseessä ensimmäinen vai viimeinen vuoro, onko indeksi parillinen vai pariton, iteraatioiden kokonaismäärän tai jopa pääsyn pääsilmukkaan sisäkkäisten silmukoiden tapauksessa, jotka käyttävät $loop->parent.
Mallipohjan periytyminen, asettelut ja osiot
Käytännön sovelluksissa et halua toistaa otsikoita, valikoita tai alatunnisteita jokaisessa näkymässä. Blade antaa sinun määrittää pääasettelu (yleensä se on tallennettuna) resources/views/layouts/master.blade.php), jotka kaikki sivut perivät. Asettelun sisällä määrität "tyhjät" alueet, joissa on @yield ja muu osa yleisestä HTML:stä pysyy vakaana.
Käyttääksesi kyseistä asettelua lapsinäkymässä, sinun tarvitsee vain ilmoittaa @extends('layouts.master') ja määritä täytettävät osiot käyttämällä @osio y @endsection. Joka @yield('nombre') maisterin tutkinto vastaa @section('nombre') tyttären silmissä.
Lisäksi @parent- direktiivin avulla voit paitsi ohittaa osion, myös lisätä sisältöä asettelun määrittämän ylä- tai alapuolelle . Tämä on erittäin hyödyllistä sivupalkeissa tai lohkoissa, joita haluat laajentaa, etkä korvata.
Jos sinun on sisällytettävä uudelleenkäytettäviä HTML-katkelmia ilman täyttä periytymistä, Blade tarjoaa @sisältää ja kokonainen joukko siihen liittyviä direktiivejä: @includeIf, @includeWhen, @includeUnless y @includeFirstjoiden avulla voit ehdollisesti sisällyttää alinäkymiä tai valita ensimmäisen mahdollisten reittien luettelosta.
Tapauksissa, joissa toistat pienen fragmentin jokaiselle kokoelman elementille, @each- direktiivi yhdistää foreach + include -metodit yhdelle riville ja voi jopa määrittää vaihtoehtoisen näkymän tapaukselle, jossa kokoelma saapuu tyhjänä.
Terän komponentit, paikat ja ominaisuudet
Blade-komponentit ovat asettelujen luonnollinen kehitysaskel ja sisältävät: niiden avulla voit kapseloida uudelleenkäytettäviä käyttöliittymän osia (painikkeita, hälytyksiä, kortteja, lomakkeita…) omalla logiikallaan, ominaisuuksillaan ja lokeroillaan, joihin voidaan injektoida ulkopuolelta tulevaa sisältöä, kaikki syntaksilla, joka on hyvin lähellä nykyaikaisia JS-kehyskomponentteja.
Komponentteja on kahdenlaisia: luokkapohjainen (sijaitsee app/View/Components, luotu php artisan make:component) ja anonyymijotka näkyvät vain resources/views/components ilman siihen liittyvää luokkaa. Molemmissa tapauksissa ne renderöidään näkymissä, joissa on tyyppiä <x-alert /> o <x-forms.input />.
Luokkapohjaiset komponentit vastaanottavat dataa seuraavien kautta: HTML-attribuutit (jossa kebab-case näköpiirissä ja camelCase konstruktorissa), näkyvät komponenttinäkymässä julkisina ominaisuuksina ja voivat valita metodin shouldRender() ehdollisesti päättää, pitäisikö ne näyttää.
Joustavaa sisältöä varten komponenttien ominaisuudet lähtöPääsisältöön pääsee käsiksi seuraavasti $slot komponenttimallissa ja nimelliset kolikkopelit määritellään käyttämällä <x-slot name="titulo">...</x-slot> Kun käytät komponenttia. Voit kutsua komponentin sisältä metodeja seuraavasti: $component ja jopa tarkistaa, onko paikka tyhjä $slot->isEmpty() tai jos sillä on todellista sisältöä $slot->hasActualContent().
Komponentit hallitsevat myös tyylikkäästi lisäattribuutteja jotka eivät vastaa konstruktorin ominaisuuksia (esimerkiksi class, id, data-*Kaikki tämä on ryhmitelty helppokäyttöiseen ”ominaisuuspussiin” $attributesjota voit renderöidä sellaisenaan tai muokata esimerkiksi seuraavilla menetelmillä: merge(), class(), prepend(), filter(), whereStartsWith(), has() o get().
Lisäksi Blade sisältää erityisiä direktiivejä tyypilliselle HTML-lomakkeelle: @checked , @selected , @disabled , @readonly ja @required , jotka tulostavat vastaavan attribuutin vain, jos niiden vastaanottama ehto on true.
Komponentteja ja klassista periytymistä käyttävät asettelut
Nykyaikaisessa Laravelissa on yhä yleisempää määritellä sovelluksen globaali asettelu muodossa Teräkomponentti (esimerkiksi <x-layout>) sen sijaan, että käytettäisiin vain klassista periytymistä @extendsTällä tavoin asettelu voi vastaanottaa paikkoja, attribuutteja ja ominaisuuksia aivan kuten muutkin komponentit.
Tyypillinen kaava sisältää komponentin luomisen Layout kanssa php artisan make:component LayoutMäärittele HTML-perusrakenne (otsikko, CSS-linkit, navigointi, alatunniste) mallissasi ja käytä sitä {{ $slot }} pääsisällön lisäämiseksi. Valinnaisesti voidaan määritellä nimetty paikka. title niin että jokainen sivu määrittää otsikkonsa deklaratiivisella tavalla.
Toisaalta "klassinen" vaihtoehto on edelleen olemassa mallin periytyminen kautta @extends, @section y @yieldTätä käytettiin laajalti ennen komponenttien yleistymistä. Voit jatkaa molempien lähestymistapojen yhdistämistä käyttämällä komponenttipohjaisia asetteluja kaikessa tai pitäytyä perinteisessä periytymisessä, jos projektisi on jo määritetty niin.
Molemmissa tapauksissa tavoite on sama: välttää HTML-rungon toistamista jokaisessa näkymässä , säilyttää yksi totuus ulkoasussa ja antaa jokaisen sivun keskittyä yksinomaan omaan sisältöönsä.
Istunto, todennus, ympäristö ja valtuutus Bladessa
Blade integroituu erittäin hyvin muuhun kehykseen, joten se ei rajoitu pelkästään HTML:n renderöintiin: se tarjoaa myös korkean tason ohjeita istunnon, todennusjärjestelmän, sovellusympäristön ja valtuutussääntöjen kanssa toimimiseen.
Todennusta varten on olemassa direktiivejä, kuten @auth ja @guest , joiden sisältö näkyy vain, jos käyttäjä on todennettu tai vieras. Lisäksi voit määrittää tietyn vartijan argumentiksi, jolla voit tarkentaa käytettävää todennuskontekstia.
Las ympäristödirektiivit kuten @production o @env('local') Niiden avulla voit ehdollistaa näkymän osia nykyisen Laravel-ympäristön mukaan. Erittäin hyödyllinen esimerkiksi bannerien, debug-jäljitysten tai skriptien näyttämiseen vain paikallisissa tai testiympäristöissä.
Istuntojen osalta @session- direktiivin avulla on helppo tarkistaa, onko istuntoavain olemassa, ja jos on, sen arvo annetaan $value- muuttujan kautta . Tämä ratkaisee tyylikkäästi klassisen flash-viestien tai hälytysten tapauksen.
Blade tarjoaa käytäntö- ja porttityyppistä valtuutusta varten @koira, @ei voi y @cananyNiiden avulla voit näyttää tai piilottaa painikkeita, linkkejä tai kokonaisia lohkoja riippuen siitä, onko käyttäjällä käyttöoikeus tiettyyn toimintoon mallissa tai luokassa. Yhdessä @guest o @authNe mahdollistavat paljon turvallisempien ja selkeämpien rajapintojen rakentamisen.
Lomakkeet, validointi ja virheiden käsittely näkymissä
Kun siirrytään staattisista näkymistä lomakkeisiin, Bladen kätevyys todella huomataan. Laravel vaatii CSRF-tokenin sisällyttämistä kaikkiin lomakkeisiin, jotka muokkaavat dataa, ja piilotetun kentän manuaalisen kirjoittamisen välttämiseksi on olemassa `@csrf` -direktiivi , joka luo syötteen vastaavalla tokenilla.
HTTP-menetelmät, kuten PUT, PATCH tai DELETE Ne simuloidaan piilokentän avulla _method, ja Blade tarjoaa sen sinulle @method('PUT') (tai PATCH/DELETE) luodaksesi sen automaattisesti lomakkeen sisällä.
Näyttää validointivirheet Direktiivi on olemassa @virhejoka liittyy tiettyyn kenttään. Sen sisällä muuttuja on käytettävissä. viesti virhetekstin kanssa. Koska kyseessä on itse asiassa käännetty if-lauseke, voit käyttää @else näyttää vaihtoehtoisen sisällön, kun virheitä ei ole.
Objekti $virheet Se on aina näkymissä ja ryhmittelee kaikki nykyisen pyynnön validointiviestit. Se integroituu saumattomasti apuohjelman kanssa. old(), jonka avulla voit "täyttää" lomakkeen uudelleen käyttäjän lähettämillä arvoilla validointivirheen jälkeen, säilyttäen merkinnät ja näyttäen virheet selkeästi.
Yhdistämällä nämä direktiivit kontrollereiden tai lomakepyyntöjen validointisääntöihin saat vankan palvelinpuolen validointityönkulun , joka täydentää asiakaspuolen validointia ja on paljon suojatumpi haitallista manipulointia vastaan.
Pinot Bladessa: @stack, @push, @prepend ja hasStack-konsepti
Yksi Bladen vähemmän käsitellyistä, mutta hyödyllisimmistä ominaisuuksista suurissa projekteissa on pinot . Pino on pohjimmiltaan kokoelma näkymäfragmentteja, joihin voit lisätä sisältöä alinäkymistä, komponenteista tai sisällytetyistä osista ja sitten renderöidä sen kaikki yhdessä tietyssä kohdassa pääasettelua.
`@stack('name')` -direktiivi määrittää, minne kaikki kyseiseen pinoon liittyvät fragmentit sijoitetaan. Sitä vastoin mistä tahansa muusta näkymästä voit käyttää `@push('name')` -direktiiviä sisällön siirtämiseen pinon loppuun tai `@prepend('name') `-direktiiviä sen siirtämiseen pinon alkuun. Tätä käytetään usein skripteissä ja sivukohtaisissa tyyleissä.
Kuvittele esimerkiksi, että asettelussasi on jotain tällaista <head> ja lopussa <body>:
@stack('styles')
...
@stack('scripts')
Sitten tietyssä näkymässä, joka tarvitsee lisää JS: ää, voisit tehdä seuraavaa:
@push('scripts')
<script src="/js/pagina-especifica.js"></script>
@endpush
Näin asettelun ei tarvitse tietää jokaista skriptiä tai tyyliä jokaisella sivulla ; se määrittelee vain pinot, ja alinäkymät pinoavat tarvitsemansa. Lisäksi on olemassa `@pushIf`- metodi, jolla sisältöä voidaan siirtää totuusarvon perusteella ilman, että koko `if`-lauseketta tarvitsee kirjoittaa.
Tässä yhteydessä monet kehittäjät kaipaavat direktiiviä, kuten `@hasStack` tai vastaavaa , jonka avulla he voisivat tarkistaa, onko tietyssä pinossa sisältöä, ennen sen renderöintiä. Vaikka Blade ei sisälläkään kyseisen nimistä direktiiviä valmiina, idea on selvä: voida tehdä esimerkiksi "jos komentosarjapino on tyhjä, älä tulosta lisätunnisteita" tai "jos metatietopinossa on elementtejä, kääri ne tiettyyn lohkoon".
Vastaavanlaisen käyttäytymisen saavuttamiseksi tänä päivänä on täydennä pinoamisdirektiivit asettelun logiikalla tai mukautetuilla apuohjelmilla tai jopa omilla rekisteröidyillä direktiiveillämme kautta Blade::directive()Tällä tavoin voidaan simuloida hasStack-direktiiviä, joka tekee sisäisesti kyselyn pinolle ennen kuin päättää, mitä HTML-koodia luodaan.
JSON-, JavaScript- ja apudirektiivit Bladessa
Monissa Laravel-näkymissä sinun on välitettävä dataa taustajärjestelmästä JavaScriptiin. Yleensä tämä tarkoittaa seuraavaa: json_encode() taulukosta tai kokoelmasta ja jättää sen inline-skriptin sisään, mutta se ei ole aina turvallista tai kätevää. Laravel helpottaa tätä apufunktiolla Js::from(), joka sarjoittaa ja muuttaa PHP-arvot oikein JSON-muotoon HTML-muotoon upottamista varten.
Kun renderöit monimutkaista dataa selaimelle, Js::from() Se välttää lainausmerkkien tai erikoismerkkien aiheuttamat ongelmat ja palauttaa lausekkeen JSON.parse() Turvallinen sisällyttää attribuutteihin tai skripteihin. Monimutkaisten lausekkeiden välittämistä direktiivin sisällä ei suositella, koska Blade käyttää sisäisesti säännöllisiä lausekkeita kääntäessään niitä, ja tämä voi rikkoa järjestelmän odottamattomilla tavoilla.
Lisäksi Blade antaa sinun määrittää mallipohjakommentteja , joita ei välitetä lopulliseen HTML-koodiin (toisin kuin klassiset HTML-kommentit), ja @php … @endphp -lohkoja , joissa voit suorittaa pieniä puhtaan PHP:n pätkiä tarvittaessa. Voit jopa käyttää @use-käskyä luokkien tuomiseen näkymään tai niille aliasten määrittämiseen, mikä on kätevää työskenneltäessä apuohjelmien tai erittäin tiettyjen komponenttien kanssa.
Jos saavutat pisteen, jossa tarvitset tietyille kohteille erittäin erikoistunutta kaiutustoimintoa, voit rekisteröityä mukautetut kaiunkäsittelijät kanssa Blade::stringable()jotta tiettyä objektia kaiuttaessa Blade kutsuu callback-metodiasi magic-metodin sijaan __toString() luokan.
Virhenäkymät, fragmentit ja mukautetut direktiivit
Laravelin avulla voit mukauttaa virhenäkymät: luo tiedostoja vain resources/views/errors jossa nimenä on HTTP-koodi (esimerkiksi 404.blade.php o 500.blade.phpJoka kerta, kun virhe ilmenee, käytetään omaa mallipohjaasi kehyksen yleisen mallipohjan sijaan.
Tapauksissa, joissa käytät työkaluja, kuten Turbo tai htmx, ja haluat vain palata näkymän tietyt osatBlade tarjoaa direktiivit @fragment … @endfragment yhdistettynä menetelmiin, kuten view('...')->fragment('nombre'), fragmentIf(), fragments() y fragmentsIf()Tällä tavoin voit käyttää samaa koko mallipohjaa uudelleen ja poimia siitä vain tarvitsemasi osat asiayhteydestä riippuen.
Jos direktiivien valikoima ei riitä sinulle, voit aina luoda omasi Blade::direktiivi()Yleinen käytäntö on rekisteröidä ne menetelmällä boot() de AppServiceProvider tai erillisen tarjoajan kautta. Blade-kääntäjä välittää sinulle direktiivissä olevan lausekkeen merkkijonona, ja sinä palautat PHP-koodin, jonka haluat luotavan käännöksen yhteydessä.
Yksinkertaisia räätälöityjä ehtoja varten on myös Terä::jos()joka luo ehdollisia direktiivejä yhdelle riville. Voit esimerkiksi määrittää @disk('s3') tarkistaaksesi, onko sovelluksen oletuslevy S3, ja käyttääksesi sitä sitten missä tahansa näkymässä ikään kuin se olisi natiividirektiivi.
Tämän arsenaalin avulla voit rakentaa käytännössä tarpeisiisi räätälöidyn templaattikielen , joka sisältää halutessasi hasStack-tyyppisen direktiivin, joka toimii syntaktisena sokerina logiikalle, joka tarkistaa sisäisesti, onko pinossa sisältöä vai ei, ennen sen tulostamista.
Bladen syvällinen hallinta – perussyntaksista edistyneisiin komponentteihin, valtuutusdirektiiveihin, validointiin, ympäristöihin ja ennen kaikkea pinonhallintaan – mahdollistaa modulaaristen, turvallisten, yhdenmukaisten ja helposti ylläpidettävien näkymien rakentamisen , joihin tuleva direktiivi, kuten hasStack, sopisi luonnollisesti täydentämään asettelun kuhunkin alueeseen syötettävien tietojen hallintaa.