pembangunan bahagian belakang
tutorial php
Cara Memasukkan JavaScript dalam Laravel Panduan Langkah demi Langkah untuk Semua Senario
Cara Memasukkan JavaScript dalam Laravel Panduan Langkah demi Langkah untuk Semua Senario
Cara Memasukkan JavaScript dalam Laravel 11: Panduan Langkah demi Langkah untuk Semua Senario
Dalam Laravel 11, menambahkan JavaScript pada projek anda boleh menjadi mudah, terima kasih kepada Vite, pengikat aset lalai. Berikut ialah cara untuk menyediakan JavaScript anda untuk semua jenis senario, daripada kemasukan global kepada pemuatan bersyarat dalam paparan tertentu.
1. Termasuk JavaScript dalam Semua Fail
Dalam banyak kes, anda mungkin mahu memasukkan JavaScript secara global merentas aplikasi Laravel anda. Begini cara menyusun dan menggabungkan JavaScript untuk kemasukan universal.
Langkah 1: Letakkan Fail JavaScript Anda
- Lokasi: Simpan fail JavaScript dalam direktori sumber/js. Contohnya, jika fail anda dinamakan custom.js, simpan ia sebagai resources/js/custom.js.
- Atur: Untuk projek kompleks dengan berbilang fail JavaScript, anda boleh menyusunnya dalam subdirektori dalam sumber/js, seperti resources/js/modules/custom.js.
Langkah 2: Susun JavaScript dengan Vite
Laravel 11 menggunakan Vite untuk mengurus aset. Untuk mengkonfigurasinya untuk menggabungkan JavaScript anda:
- Sertakan dalam app.js: Buka sumber/js/app.js dan import fail tersuai anda:
import './custom.js';
- Import Terus dalam Paparan: Sebagai alternatif, jika anda hanya mahu JavaScript dalam paparan tertentu, anda boleh menggunakan arahan @vite dalam templat Blade:
@vite('resources/js/custom.js')
Langkah 3: Konfigurasikan vite.config.js
Pastikan vite.config.js ditetapkan untuk mengendalikan import @vite dengan betul. Secara lalai, ia sepatutnya kelihatan seperti ini:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/js/app.js'],
refresh: true,
}),
],
});
Langkah 4: Jalankan Vite
Untuk menyusun aset anda dengan Vite:
- Untuk pembangunan: jalankan npm run dev
- Untuk pengeluaran: jalankan npm run build
Langkah 5: Muatkan JavaScript dalam Templat Blade
Untuk memasukkan fail JavaScript dalam templat anda, gunakan arahan @vite:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Laravel App</title>
@vite('resources/js/app.js')
</head>
<body>
<!-- Content here -->
</body>
</html>
Ringkasan
- Simpan fail JavaScript dalam sumber/js.
- Import dalam app.js untuk kemasukan global atau sertakan terus dalam templat Blade mengikut keperluan.
- Kompilkan aset menggunakan Vite.
- Gunakan @vite dalam templat Blade untuk memuatkan JavaScript.
Dengan persediaan ini, JavaScript akan tersedia di seluruh tapak dalam projek Laravel 11.
2. Memahami Perintah Rendering Bilah
Apabila menyertakan JavaScript secara bersyarat dalam paparan khusus, adalah penting untuk memahami susunan templat Blade dipaparkan.
Dalam Laravel, reka letak diproses dahulu, diikuti dengan pandangan individu dan separa. Berikut ialah proses pemaparan:
- Reka letak dipaparkan dahulu, dengan pemegang tempat (@hasil dan @bahagian) dicipta untuk suntikan kandungan.
- Paparan atau separa kanak-kanak diproses seterusnya, dengan kandungannya dimasukkan ke dalam ruang letak reka letak.
Disebabkan oleh perintah ini, jika anda ingin menambahkan fail JavaScript secara bersyarat dalam reka letak berdasarkan kandungan paparan kanak-kanak, semakan pembolehubah standard tidak akan berfungsi. Anda perlu menggunakan arahan @stack dan @push Blade untuk pengendalian JavaScript khusus halaman yang lebih fleksibel.
3. Secara Bersyarat Termasuk JavaScript dalam Paparan Tertentu Menggunakan Tindanan dan Tekan
Untuk menambahkan JavaScript pada paparan tertentu, arahan @stack dan @push Laravel menawarkan penyelesaian yang cekap, membolehkan anda memasukkan skrip secara bersyarat dalam reka letak.
Langkah 1: Tentukan Tindanan dalam Reka Letak Anda
Dalam reka letak anda, buat tindanan untuk skrip khusus halaman:
import './custom.js';
Langkah 2: Push Skrip daripada Child Views
Dalam fail Blade khusus yang memerlukan JavaScript, tolak ke timbunan skrip:
@vite('resources/js/custom.js')
Dengan persediaan ini, custom.js hanya akan disertakan apabila paparan khusus itu dimuatkan. Kaedah ini menyediakan penyelesaian bersih yang berfungsi dengan susunan pemaparan Laravel, memastikan fail JavaScript disertakan secara bersyarat seperti yang diperlukan.
Di Mana Untuk Mengisytiharkan @push?
Penempatan pernyataan @push dalam paparan Blade penting terutamanya untuk kebolehbacaan dan susunan pelaksanaan. Begini cara menggunakan @push dengan berkesan:
- Peletakan dalam Paparan: Walaupun anda boleh meletakkan @push di mana-mana sahaja dalam paparan Blade, adalah amalan terbaik untuk meletakkannya di hujung fail, biasanya selepas kandungan @bahagian. Ini memastikan kod berkaitan skrip berasingan daripada kandungan utama, meningkatkan kebolehbacaan dan kebolehselenggaraan.
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/js/app.js'],
refresh: true,
}),
],
});
- Susunan Berbilang Pernyataan @push: Jika anda mempunyai berbilang perisytiharan @push untuk tindanan yang sama (cth., @push('skrip')), ia akan dilampirkan dalam susunan yang dipaparkan dalam paparan. Contohnya:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Laravel App</title>
@vite('resources/js/app.js')
</head>
<body>
<!-- Content here -->
</body>
</html>
Dalam kes ini, script1.js akan dimuatkan sebelum script2.js kerana @push menambahkan kandungan pada tindanan mengikut susunan yang diisytiharkan.
- Menggunakan @push dalam Partials dan Komponen: @push juga boleh digunakan dalam bahagian Blade (cth., @include) atau komponen Blade. Ini berguna untuk memasukkan skrip atau gaya khusus paparan secara langsung dalam komponen boleh guna semula, menjadikannya mudah untuk mengurus kebergantungan.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Laravel App</title>
@vite('resources/js/app.js')
@stack('scripts') <!-- Define a stack for additional scripts -->
</head>
<body>
@yield('content')
</body>
</html>
Apabila bahagian ini disertakan dalam paparan, partial-specific.js akan ditambahkan pada tindanan skrip dalam fail reka letak.
- Kawal Pesanan dengan @prepend: Jika skrip tertentu perlu dimuatkan sebelum yang lain dalam tindanan yang sama, anda boleh menggunakan @prepend dan bukannya @push. @prepend meletakkan kandungan pada permulaan tindanan, membenarkan kawalan yang lebih besar ke atas susunan pemuatan.
import './custom.js';
Di sini, critical.js akan dimuatkan sebelum non_critical.js, tanpa mengira penempatannya dalam fail Blade.
Pengambilan Utama
- Letakkan @push di penghujung paparan untuk kejelasan dan kebolehselenggaraan.
- Pesanan ditentukan oleh peletakan dalam paparan, dengan penyataan @push awal dimuatkan dahulu.
- @push berfungsi dalam separa dan komponen, menjadikannya mudah untuk memasukkan kebergantungan khusus paparan.
- Gunakan @prepend untuk skrip yang perlu dimuatkan dahulu dalam tindanan yang sama.
4. Alternatif: Menggunakan Pernyataan Syarat Sebaris dalam Reka Letak
Jika anda memerlukan kawalan yang lebih baik apabila JavaScript disertakan, pernyataan bersyarat Laravel membenarkan logik berasaskan laluan atau pembolehubah terus dalam reka letak.
Sertakan Bersyarat Berdasarkan Laluan
Anda boleh menggunakan semakan laluan terus dalam reka letak untuk memasukkan JavaScript berdasarkan laluan semasa:
@vite('resources/js/custom.js')
Sertakan Bersyarat Berdasarkan Pembolehubah
Untuk memuatkan skrip secara bersyarat berdasarkan pembolehubah, anda boleh menetapkan bendera dalam pengawal atau paparan anak, kemudian semaknya dalam reka letak:
- Dalam pengawal anda:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/js/app.js'],
refresh: true,
}),
],
});
- Dalam reka letak:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Laravel App</title>
@vite('resources/js/app.js')
</head>
<body>
<!-- Content here -->
</body>
</html>
Pendekatan ini membolehkan anda mengawal pemuatan JavaScript berdasarkan pembolehubah atau laluan tertentu, memberikan fleksibiliti untuk persediaan halaman tersuai.
Ringkasan
Berikut ialah ikhtisar ringkas kaedah yang dibincangkan:
- Kemasukan Global: Letakkan JavaScript dalam app.js dan sertakan secara global menggunakan @vite.
- Kemasukan Bersyarat dengan Tindanan dan Tekan: Gunakan arahan @stack dan @push untuk pengendalian skrip modular yang fleksibel, yang memastikan skrip hanya dimuatkan dalam paparan di mana ia diperlukan.
- Pernyataan Bersyarat dalam Reka Letak: Gunakan semakan berasaskan laluan atau pembolehubah pengawal untuk memuatkan JavaScript secara bersyarat terus dalam reka letak.
Pilihan ini membolehkan anda mengawal pemuatan JavaScript dengan tepat, menjadikan projek Laravel 11 anda cekap dan boleh diselenggara.
Atas ialah kandungan terperinci Cara Memasukkan JavaScript dalam Laravel Panduan Langkah demi Langkah untuk Semua Senario. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1673
14
1429
52
1333
25
1278
29
1257
24
Terangkan hashing kata laluan yang selamat di PHP (mis., Password_hash, password_verify). Mengapa tidak menggunakan MD5 atau SHA1?
Apr 17, 2025 am 12:06 AM
Dalam php, kata laluan_hash dan kata laluan 1) password_hash menjana hash yang mengandungi nilai garam untuk meningkatkan keselamatan. 2) Kata Laluan_verify Sahkan kata laluan dan pastikan keselamatan dengan membandingkan nilai hash. 3) MD5 dan SHA1 terdedah dan kekurangan nilai garam, dan tidak sesuai untuk keselamatan kata laluan moden.
Bagaimanakah jenis membayangkan jenis PHP, termasuk jenis skalar, jenis pulangan, jenis kesatuan, dan jenis yang boleh dibatalkan?
Apr 17, 2025 am 12:25 AM
Jenis PHP meminta untuk meningkatkan kualiti kod dan kebolehbacaan. 1) Petua Jenis Skalar: Oleh kerana Php7.0, jenis data asas dibenarkan untuk ditentukan dalam parameter fungsi, seperti INT, Float, dan lain -lain. 2) Return Type Prompt: Pastikan konsistensi jenis nilai pulangan fungsi. 3) Jenis Kesatuan Prompt: Oleh kerana Php8.0, pelbagai jenis dibenarkan untuk ditentukan dalam parameter fungsi atau nilai pulangan. 4) Prompt jenis yang boleh dibatalkan: membolehkan untuk memasukkan nilai null dan mengendalikan fungsi yang boleh mengembalikan nilai null.
PHP dan Python: Paradigma yang berbeza dijelaskan
Apr 18, 2025 am 12:26 AM
PHP terutamanya pengaturcaraan prosedur, tetapi juga menyokong pengaturcaraan berorientasikan objek (OOP); Python menyokong pelbagai paradigma, termasuk pengaturcaraan OOP, fungsional dan prosedur. PHP sesuai untuk pembangunan web, dan Python sesuai untuk pelbagai aplikasi seperti analisis data dan pembelajaran mesin.
PHP dan Python: Contoh dan perbandingan kod
Apr 15, 2025 am 12:07 AM
PHP dan Python mempunyai kelebihan dan kekurangan mereka sendiri, dan pilihannya bergantung kepada keperluan projek dan keutamaan peribadi. 1.PHP sesuai untuk pembangunan pesat dan penyelenggaraan aplikasi web berskala besar. 2. Python menguasai bidang sains data dan pembelajaran mesin.
Bagaimana anda menghalang suntikan SQL di PHP? (Penyataan yang disediakan, PDO)
Apr 15, 2025 am 12:15 AM
Menggunakan penyataan preprocessing dan PDO dalam PHP secara berkesan dapat mencegah serangan suntikan SQL. 1) Gunakan PDO untuk menyambung ke pangkalan data dan tetapkan mod ralat. 2) Buat kenyataan pra -proses melalui kaedah menyediakan dan lulus data menggunakan ruang letak dan laksanakan kaedah. 3) Hasil pertanyaan proses dan pastikan keselamatan dan prestasi kod.
PHP: Pengendalian pangkalan data dan logik sisi pelayan
Apr 15, 2025 am 12:15 AM
PHP menggunakan sambungan MySQLI dan PDO untuk berinteraksi dalam operasi pangkalan data dan pemprosesan logik sisi pelayan, dan memproses logik sisi pelayan melalui fungsi seperti pengurusan sesi. 1) Gunakan MySQLI atau PDO untuk menyambung ke pangkalan data dan laksanakan pertanyaan SQL. 2) Mengendalikan permintaan HTTP dan status pengguna melalui pengurusan sesi dan fungsi lain. 3) Gunakan urus niaga untuk memastikan atomik operasi pangkalan data. 4) Mencegah suntikan SQL, gunakan pengendalian pengecualian dan sambungan penutup untuk debugging. 5) Mengoptimumkan prestasi melalui pengindeksan dan cache, tulis kod yang sangat mudah dibaca dan lakukan pengendalian ralat.
Tujuan PHP: Membina Laman Web Dinamik
Apr 15, 2025 am 12:18 AM
PHP digunakan untuk membina laman web dinamik, dan fungsi terasnya termasuk: 1. Menjana kandungan dinamik dan menghasilkan laman web secara real time dengan menyambung dengan pangkalan data; 2. Proses Interaksi Pengguna dan Penyerahan Bentuk, Sahkan Input dan Menanggapi Operasi; 3. Menguruskan sesi dan pengesahan pengguna untuk memberikan pengalaman yang diperibadikan; 4. Mengoptimumkan prestasi dan ikuti amalan terbaik untuk meningkatkan kecekapan dan keselamatan laman web.
Memilih antara php dan python: panduan
Apr 18, 2025 am 12:24 AM
PHP sesuai untuk pembangunan web dan prototaip pesat, dan Python sesuai untuk sains data dan pembelajaran mesin. 1.Php digunakan untuk pembangunan web dinamik, dengan sintaks mudah dan sesuai untuk pembangunan pesat. 2. Python mempunyai sintaks ringkas, sesuai untuk pelbagai bidang, dan mempunyai ekosistem perpustakaan yang kuat.
