Sådan arbejder du med Laravel som en front-end-enhed

Kredit: Laravel

I denne artikel forklarer jeg frontavsnittet ved Laravel. Artiklen forklarer, hvordan man opretter et Laravel-projekt klonet fra et Github-arkiv til at køre på din lokale server, hvordan man opretter en rute, så du kan teste en visning eller en side uafhængigt af hele projektet og indeholder praktiske eksempler på hvert aspekt forklaret .

Krav

  • Komponist: En komponist bruges til at styre Laravels afhængigheder. Hvis du ikke har installeret Composer på din maskine, kan du downloade en her
  • PHP> = 7.1.3 (For at opgradere din PHP i wamp, klik her eller Klik her, hvis du bruger Xamp)

Klik her for flere detaljer om kravene til Laravel 5.6 (som er den seneste version af Laravel ved skrivning af denne artikel)

  • Kommandolinjegrænseflade (CLI)

Introduktion

Laravel er et af de førende PHP-rammer, hvorfor jeg ikke kan forklare her, jeg overlader det for dig at finde ud af det.

Som front-end-udvikler finder du dig selv undertiden samarbejde med et team, der arbejder på et Laravel-projekt, og fordi du ikke forstår de grundlæggende ting, du har brug for for at blande dig med Laravel-arbejdsgangen, har du en tendens til at skabe et ekstra job til Laravel fyre. Ja! ekstra job, fordi når du er færdig med din oprindelige front-end-kodning, ville en anden fyr, der forstår laravel, nødt til at refaktorere din kode for at blandes med Laravel-klingen. Bladet er en speciel gengivelsesteknologi, der bruges af Laravel.

En anden udfordring er, hvordan du opretter projektbasen, du klonede fra repoen, og får den til at køre på din lokale maskine, og hvordan du tester din del og bekræfter, at visningerne vises nøjagtigt.

Følg nu, mens jeg forklarer, hvordan man bringer ovennævnte udfordringer til stopp.

Del I

Opsætning af et klonet Laravel-projekt på lokal maskine

Inden du begynder dette afsnit, skal du sikre dig, at du allerede har opfyldt kravene ovenfor.

Trin 1

Med henblik på praksis skal du klikke her for at klone et testprojekt, som du kan bruge i hele denne artikel.

Den første ting, der skal gøres efter kloning af projektet, er at oprette en .env-fil i projektets rodmappe. Denne fil er de fleste af de gange, hvis ikke altid gitigneret, hvilket betyder, at den er udelukket, mens projektet skubbes til repoen. I stedet er en .env.example inkluderet.

Opret en ny fil i projektets rodmappe og navngiv den .env

Bemærk .envfile har ingen udvidelse.

Kopier derefter indholdet af .env.example og indsæt den .env-fil, du lige har oprettet.

Dernæst er at downloade afhængigheder eller leverandørfiler.

Trin 2

En anden vigtig ressource, der normalt er gitignored, er leverandørmappen. Sælgerkatalog indeholder alle Komponist-afhængigheder, der kræves for at en Laravel-app skal fungere. Det er normalt tilpasset, fordi komponisten.json indeholder alle de nødvendige oplysninger for at installere alle de leverandører, du har brug for.

For at installere leverandørerne skal du åbne din CLI, cd til projektet og køre,

komponist installere

Når installationen er afsluttet, skal du fortsætte til næste trin for at generere APP_KEY.

Trin 3

Uden APP_KEY kan appen ikke fungere, hvilket betyder, at den ikke kan køre på din lokale server.

Kør kommandoen herunder for at generere APP_KEY

php håndværksnøgle: generere

Åbn nu .env-filen. Kontroller, om den genererede nøgle automatisk er tildelt APP_KEY. Hvis ikke, skal du kopiere nøglen, der er genereret fra CLI, og indsætte som værdien for APP_KEY i .env.

Det ser ud som nedenfor:

APP_KEY = base64: RXnnH / y2TNk / kmxkkUYyyCltqIKxxpG + Q5Vpah2bIbg =

Hvis APP_KEY er som den ovenfor, er du god til at gå, fortsæt med at køre din Laravel-app

ved at køre kommandoen nedenfor:

php håndværker tjene

Ved vellykket udførelse af kommandoen ovenfor ser du

Laravel-udviklingsserver startede:

Åbn nu din browser og skriv localhost: 8000.

Fantastisk! projektet kører nu på din lokale maskine.

Del II

Forståelse og interaktion med bladet

Bladet er den typiske motor leveret med Laravel. Blade understøtter normale PHP-koder. Alle bladvisningsfiler bruger .blade.php og gemmes i biblioteket ressourcer / visninger. Læs Laravel-dokumentationen for at få yderligere forklaring om klingen. Dokumentationen indeholder alt hvad du har brug for at vide om klingen.

Følgende er de få ting, du har brug for at vide om Laravel som en frontend-enhed:

  • Laravel Aktiver:

Alle aktiver såsom CSS-filer, Javascript-filer, billeder osv. Gemmes i den offentlige mappe, hvor hver besætter sin egen mappe.

Stilladser af Laravel-aktiver
  • Sådan forbinder du aktiverne til klingen

I modsætning til normale HTML-skabeloner har Blade det en særlig måde at sammenkæde aktiver på. Nedenfor er eksemplerne:

Hvis du antager, at du vil linke public / css / style.css, public / js / script.js og public / images / avartar.jpg til en knivvisning, vises blades måde at gøre det på nedenfor:

// for css-aktiv

// for js aktiv

// for billedaktiv

  • Oprettelse af en enkel rute til en bladvisning

Når du har oprettet din klippevisning, ønsker du måske at se den i browseren, for at opnå det, skal du oprette en rute til den bestemte visning.

Lad os oprette en bladvisning kaldet test.blade.php i biblioteket ressourcer / visninger. Tilføj en HTML-kedelplade i test.blade.php-filen som vist belo:




  Laravel </ title>
</ Head>
<Body>
  <h1> {{"Hej Word!"}} </h1>
</ Body>
</ Html></pre><p>Åbn ruter / web.php, og tilføj koden nedenfor</p><pre>Rute :: få ('/ test', funktion () {
    returvisning ('test'); // test her er test.blade.php
});</pre><p>Du har registreret ruten for adgang til test.blade.php. Åbn nu din browser, og indtast localhost: 8000 / test.</p><p>Fantastisk! du opdager, at din browser viser indholdet af test.blade.php.</p><p>Lad mig nu kort forklare rutekoden ovenfor. Bemærk returneringserklæringen, Laravel sendes med en hjælperfunktionsvisning () til at få adgang til visningsskabeloner. Parameteren, den accepterer, er navnet på bladeskabelonen. I vores tilfælde benævner vi den test.blade.php og dermed videregiver vi test til visningen () -funktionen som visning ('test').</p><p>Bemærk: hvis bladeskabelonen er placeret i en underkatalog med kilder / visninger</p><p>for eksempel ressourcer / visninger / e-mail, så kan vi få adgang til det som visning ('email.test').</p><ul><li>Tilføjelse af en generisk rute</li></ul><p>Da du har brug for mange skabeloner, ville det være kedeligt og tidskrævende at tilføje ruter for hver bladskabelon, du opretter. Det trick, jeg vil vise, giver dig adgang til alle dine skabeloner med en enkelt rute ved hjælp af navnet på skabelonen som ruten. Koden vises nedenfor:</p><pre>Rute :: få (/ {$ rute}, funktion () {
    
     returvisning ($ rute);
});</pre><p>Bemærk: Alle skabeloner skal være i rodkataloget med ressourcer / visninger for koden ovenfor for at fungere, medmindre du ændrer det, så det passer til din katalogstruktur.</p><h3>Resumé</h3><p>Indtil videre har du lært, hvordan du opretter et klonet Laravel-projekt fra Github-arkivet og få det til at køre på din lokale maskine. Du har også lært det grundlæggende i Laravel blade, som du har brug for for at kunne samarbejde med et team af Laravel Devs som frontend Dev.</p><p>Sørg for at besøge Laravel-dokumenterne for at studere mere om bladskabeloner og hvordan du kan bruge Layouts til at minimere unødvendige gentagelser. Klik endnu en gang for at klone et testprojekt til din praksis.</p><p>Jeg håber, at dette hjælper dig.</p></div></div><div class="article-sidebar"><div class="neighbor-articles"><h4 class="ui header">Se også</h4><a href="/item/how-to-build-your-first-joke-telling-chatbot-with-sap-conversational-ai-b80215/" title="Sådan bygger du din første joke-fortællende chatbot med SAP Conversational AI">Sådan bygger du din første joke-fortællende chatbot med SAP Conversational AI</a><a href="/item/how-to-use-innovation-and-technology-to-increase-the-impact-of-microfinance-a-swish-case-study-7669b8/" title="Sådan bruges innovation og teknologi til at øge virkningen af ​​mikrofinans [en Swish case study]">Sådan bruges innovation og teknologi til at øge virkningen af ​​mikrofinans [en Swish case study]</a><a href="/item/how-to-get-young-people-reading-6a0a0a/" title="Sådan får du unge til at læse">Sådan får du unge til at læse</a><a href="/item/how-to-grow-a-massive-following-on-social-media-8d247f/" title="Sådan vokser du massivt efter på sociale medier">Sådan vokser du massivt efter på sociale medier</a><a href="/item/how-to-take-criticism-feedback-a94801/" title="Sådan tages kritik / feedback">Sådan tages kritik / feedback</a><a href="/item/how-to-finish-a-side-project-de445d/" title="Sådan afsluttes et sideprojekt">Sådan afsluttes et sideprojekt</a><a href="/item/how-to-deal-with-change-3475b6/" title="Sådan håndteres ændringer">Sådan håndteres ændringer</a></div></div></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://vi.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="vn flag"></i></a><a href="https://uk.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="ua flag"></i></a><a href="https://tr.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="tr flag"></i></a><a href="https://th.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="th flag"></i></a><a href="https://sv.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="ch flag"></i></a><a href="https://sr.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="rs flag"></i></a><a href="https://sl.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="si flag"></i></a><a href="https://sk.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="sk flag"></i></a><a href="https://ru.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="ru flag"></i></a><a href="https://ro.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="ro flag"></i></a><a href="https://pt.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="pt flag"></i></a><a href="https://pl.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="pl flag"></i></a><a href="https://ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="de flag"></i></a><a href="https://ar.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="sa flag"></i></a><a href="https://bg.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="bg flag"></i></a><a href="https://cs.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="cz flag"></i></a><a href="https://el.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="gr flag"></i></a><a href="https://es.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="es flag"></i></a><a href="https://et.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="ee flag"></i></a><a href="https://fi.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="fi flag"></i></a><a href="https://fr.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="fr flag"></i></a><a href="https://hi.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="in flag"></i></a><a href="https://hr.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="hr flag"></i></a><a href="https://hu.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="hu flag"></i></a><a href="https://id.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="id flag"></i></a><a href="https://it.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="it flag"></i></a><a href="https://ja.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="jp flag"></i></a><a href="https://ko.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="kr flag"></i></a><a href="https://lt.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="lt flag"></i></a><a href="https://lv.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="lv flag"></i></a><a href="https://ms.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="my flag"></i></a><a href="https://nl.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="nl flag"></i></a><a href="https://no.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="no flag"></i></a><a href="https://uz.ramonas-way.org/item/how-to-work-with-laravel-as-a-front-end-dev-2feeda/"><i class="uz flag"></i></a></div>ramonas-way.org<!-- --> © <!-- -->2020<!-- --> </footer></div></div></div></body></html>