Laravel hat als auf PHP basierendes Webanwendungs-Framework herausragende Fähigkeiten in Bezug auf elegantes Design und leistungsstarke Funktionen im Backend bewiesen. Allerdings haben viele Einsteiger bei der Verwendung von Laravel möglicherweise noch Zweifel am Design und Layout des Frontends. In diesem Artikel erfahren Sie, wie Sie ein Frontend in Laravel einrichten.
1. Das Konzept des Frontends in Laravel
In Laravel kann sich das Frontend auf das Schreiben von HTML-, CSS- und JavaScript-Code in der Ansichtsvorlage beziehen und auch die Verwendung von Ressourcenkonstruktionstools wie z als Laravel Mix. Durch Front-End-Einstellungen können wir die Projektanforderungen in Bezug auf Schnittstellendesign, Funktionsanzeige und Benutzerinteraktion besser erfüllen.
2. Verwenden Sie die Blade-Vorlagen-Engine.
Blade ist die Ansichtsvorlagen-Engine, die mit dem Laravel-Framework geliefert wird. Sie ermöglicht es uns, HTML-Code bequemer im Projekt zu schreiben. Durch die Verwendung von Blade können wir die Verwendung von viel PHP-Code auf der Seite vermeiden und Probleme wie die Vererbung und Wiederverwendung von Vorlagen einfacher bewältigen.
Zuerst müssen wir eine neue Vorlagendatei im Ansichtenordner des Projekts erstellen. Die Benennung und der Speicherort der Vorlagendateien können entsprechend den Anforderungen des Projekts festgelegt werden. In der Vorlagendatei können wir die von Blade bereitgestellte Syntax verwenden, um PHP-Code und HTML-Code einzubetten.
Zum Beispiel können wir in unserer Vorlagendatei die @foreach-Schleife verwenden, um die Datensammlung zu durchlaufen und die Informationen zu jedem Datenelement anzuzeigen:
<ul>
@foreach ($users as $user)
<li>{{ $user->name }}</li>
@endforeach
</ul>Im obigen Code ist die Variable $users eine Datensammlung, die Benutzerinformationen enthält. Sie können die @foreach-Schleife der Blade-Syntax verwenden, um jeden Benutzer in der Sammlung zu durchlaufen, und die {{ }}-Syntax verwenden, um PHP-Variablen in den HTML-Code einzubetten. Mithilfe der Blade-Vorlagen-Engine können wir problemlos dynamischen HTML-Code generieren, um die Grundlage für das Schnittstellendesign des Projekts zu legen.
3. Verwenden Sie CSS und JavaScript
Neben HTML sind auch CSS und JavaScript wichtige Komponenten beim Aufbau des Frontends des Projekts. In Laravel-Projekten können wir CSS- und JavaScript-Code einbetten, indem wir die Tags
Zum Beispiel können wir in unserer Vorlagendatei den folgenden Code hinzufügen, um CSS- und JavaScript-Code einzubetten:
<!DOCTYPE html>
<html>
<head>
<title>@yield('title')</title>
<link href="/css/app.css" rel="stylesheet">
</head>
<body>
<div class="container">
@yield('content')
</div>
<script src="/js/app.js"></script>
</body>
</html>Im obigen Code kann das -Tag zum Einbetten von CSS-Dateien verwendet werden, und wir können das platzieren CSS-Dateien im öffentlichen /css-Verzeichnis und verweisen auf den relativen Pfad zur Datei. Ebenso kann das
