Terokai cara menyediakan bahagian hadapan dalam Laravel-Laravel-php.cn

Terokai cara menyediakan bahagian hadapan dalam Laravel

PHPz

Lepaskan： 2023-04-06 14:46:20

asal

908 orang telah melayarinya

Sebagai rangka kerja aplikasi web yang dibangunkan berdasarkan PHP, Laravel telah menunjukkan keupayaan yang luar biasa dari segi reka bentuk yang elegan dan fungsi berkuasa di bahagian belakang. Walau bagaimanapun, ramai pemula mungkin masih mempunyai keraguan tentang reka bentuk dan susun atur bahagian hadapan apabila menggunakan Laravel. Dalam artikel ini, kami akan meneroka cara menyediakan bahagian hadapan dalam Laravel.

1. Konsep front-end dalam Laravel

Dalam Laravel, front-end boleh merujuk kepada penulisan kod HTML, CSS dan JavaScript dalam templat paparan, dan juga boleh melibatkan alat pembinaan sumber seperti Laravel Mix. Melalui tetapan bahagian hadapan, kami boleh merealisasikan keperluan projek dengan lebih baik dari segi reka bentuk antara muka, paparan fungsi dan interaksi pengguna.

2. Gunakan enjin templat Blade

Blade ialah enjin templat paparan yang disertakan dengan rangka kerja Laravel, yang membolehkan kami menulis kod HTML dengan lebih mudah dalam projek. Menggunakan Blade boleh membantu kami mengelak daripada menggunakan banyak kod PHP dalam halaman dan mengendalikan isu seperti pewarisan templat dan penggunaan semula dengan lebih mudah.

Pertama, kita perlu mencipta fail templat baharu dalam folder pandangan projek. Penamaan dan lokasi fail templat boleh ditentukan mengikut keperluan projek. Dalam fail templat, kita boleh menggunakan sintaks yang disediakan oleh Blade untuk membenamkan kod PHP dan kod HTML.

Sebagai contoh, dalam fail templat kami, kami boleh menggunakan gelung @foreach untuk melintasi pengumpulan data dan memaparkan maklumat setiap item data:

<ul>
@foreach ($users as $user)
    <li>{{ $user->name }}</li>
@endforeach
</ul>

Salin selepas log masuk

Dalam kod di atas, $users variable Merupakan koleksi data yang mengandungi maklumat pengguna, kita boleh menggunakan sintaks Blade @foreach gelung untuk lelaran melalui setiap pengguna dalam koleksi, dan menggunakan sintaks {{ }} untuk membenamkan pembolehubah PHP dalam HTML. Dengan menggunakan enjin templat Blade, kami boleh menjana kod HTML dinamik dengan mudah untuk meletakkan asas bagi reka bentuk antara muka projek.

3. Gunakan CSS dan JavaScript

Selain HTML, CSS dan JavaScript juga merupakan komponen penting dalam membina bahagian hadapan projek. Dalam projek Laravel, kami boleh membenamkan kod CSS dan JavaScript dengan menggunakan teg

Sebagai contoh, dalam fail templat kami, kami boleh menambah kod berikut untuk membenamkan kod CSS dan JavaScript:

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

Salin selepas log masuk

Dalam kod di atas, teg untuk membenamkan fail CSS, kami boleh meletakkan fail CSS dalam direktori awam/css dan merujuk laluan relatif kepada fail tersebut. Begitu juga, teg boleh digunakan untuk membenamkan fail JavaScript. Kami boleh meletakkan fail JavaScript dalam direktori awam/js dan merujuk laluan relatif kepada fail.

4. Menggunakan Laravel Mix

Sebagai tambahan kepada CSS asas dan pembenaman JavaScript, Laravel juga menyediakan Laravel Mix, alat pembinaan sumber, untuk membantu kami mengendalikan pemasangan dan pemampatan bahagian hadapan dengan lebih baik sumber dan lain-lain soalan. Laravel Mix ialah alat yang dibangunkan berdasarkan Webpack yang boleh membina sumber hadapan secara automatik melalui konfigurasi mudah.

Pertama, kita perlu memasang persekitaran Node.js, dan kemudian laksanakan arahan berikut dalam direktori akar projek untuk memasang Laravel Mix:

npm install --save-dev laravel-mix

Salin selepas log masuk

Selepas pemasangan selesai, kami boleh Buat fail konfigurasi webpack.mix.js Fail konfigurasi ini boleh digunakan untuk menentukan peraturan binaan Laravel Mix.

Sebagai contoh, dalam fail webpack.mix.js kami, kami boleh menentukan bahawa semua fail CSS akan digabungkan dan dikeluarkan ke fail app.css dalam direktori awam/css:

mix.styles([
    'public/css/bootstrap.css',
    'public/css/main.css'
], 'public/css/app.css');

Salin selepas log masuk

Begitu juga, kami juga boleh menentukan untuk menggabungkan semua fail JavaScript dan mengeluarkannya ke fail app.js dalam direktori awam/js:

mix.scripts([
    'public/js/jquery.js',
    'public/js/bootstrap.js'
], 'public/js/app.js');

Salin selepas log masuk

Dengan menggunakan Laravel Mix, kami boleh mengendalikannya dengan lebih fleksibel. pembinaan dan pengoptimuman sumber hadapan memberikan prestasi dan pengalaman yang lebih baik untuk aplikasi bahagian hadapan projek.

Ringkasan

Di atas ialah beberapa kaedah dan teknik untuk menyediakan bahagian hadapan dalam rangka kerja Laravel. Dengan menggunakan alatan seperti enjin templat Blade, CSS dan pembenaman JavaScript, dan pembinaan sumber Laravel Mix, kami boleh mereka bentuk dan susun atur aplikasi bahagian hadapan projek dengan lebih mudah. Pada masa yang sama, kita juga perlu memberi perhatian kepada prestasi bahagian hadapan dan keperluan pengalaman untuk memastikan kejayaan pelaksanaan projek.

Atas ialah kandungan terperinci Terokai cara menyediakan bahagian hadapan dalam Laravel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!