Bermula dengan Laravel LiveWire

Berita baik untuk pemaju Laravel: Gunakan LiveWire untuk memudahkan pembinaan antara muka dinamik! Artikel ini akan membimbing anda cara menggunakan LiveWire, Rangka Kerja Stack Penuh Laravel yang kuat ini, dengan mudah membuat antara muka interaktif dinamik dan dengan ketara mengurangkan jumlah kod JavaScript. LiveWire membolehkan anda memberi tumpuan kepada pembangunan fungsi aplikasi dan bukannya pelaksanaan asas yang membosankan.

mata teras:

LiveWire adalah rangka kerja penuh yang menggunakan templat PHP dan bilah untuk membina antara muka dinamik Laravel, dan mempunyai kod JavaScript yang sangat sedikit.
Tutorial ini akan membimbing anda melalui membina aplikasi CRUD yang menunjukkan bagaimana LiveWire mengendalikan kemas kini UI dinamik (seperti carian dan penyortiran) tanpa memuat semula halaman.
LiveWire adalah alternatif yang sangat baik untuk Vue.js, terutamanya untuk rangka kerja rangka kerja depan, dengan lengkung pembelajaran yang lebih lancar kerana ia menjadikan sebahagian besar templat Laravel yang anda kenal.
Proses persediaan termasuk membuat projek Laravel baru, menyediakan pangkalan data, memasang LiveWire dan kebergantungan yang diperlukan.
Ciri-ciri utama LiveWire termasuk pengesahan masa nyata, paging, dan menguruskan interaksi pengguna secara langsung pada antara muka (mencipta, mengemas kini, dan memadam pengguna).
• Teknik pengoptimuman juga diserlahkan dalam tutorial , seperti menggunakan teknologi anti-goncang untuk memproses input carian dan penyerahan borang beban yang tertunda untuk meningkatkan prestasi dan pengalaman pengguna.

Apa itu livewire?

LiveWire adalah perpustakaan yang membolehkan anda membina antara muka dinamik yang responsif menggunakan templat bilah dan sedikit JavaScript. "Kecil" adalah kerana kita hanya perlu menulis JavaScript untuk lulus data melalui acara penyemak imbas dan bertindak balas kepada mereka.

anda boleh menggunakan LiveWire untuk melaksanakan ciri -ciri berikut tanpa memuat semula halaman:

Pagination

• Pengesahan Borang
• Pemberitahuan
• pratonton muat naik fail
Harus diingat bahawa fungsi LiveWire lebih daripada itu. Anda boleh menggunakannya untuk lebih banyak senario, dan di atas hanya beberapa senario yang paling biasa.

Perbandingan Livewire vs Vue

Vue sentiasa menjadi rangka kerja front-end pilihan untuk pemaju Laravel untuk menambah interaktiviti kepada aplikasi mereka. Jika anda sudah menggunakan Vue, maka belajar LiveWire adalah pilihan. Tetapi jika anda baru untuk pembangunan front-end Laravel dan mencari alternatif kepada Vue, LiveWire adalah pilihan yang hebat. Keluk pembelajarannya adalah lebih rata daripada Vue, kerana anda menggunakan bilah untuk menulis fail templat.

Untuk maklumat lanjut mengenai perbandingan LiveWire dan Vue, lihat "Laravel Livewire vs Vue".

Gambaran Keseluruhan Aplikasi

Kami akan membuat aplikasi CRUD masa nyata. Ia pada dasarnya adalah aplikasi CRUD yang tidak memerlukan memuat semula halaman. LiveWire akan mengendalikan semua permintaan AJAX yang diperlukan untuk mengemas kini UI, termasuk hasil penapisan melalui medan carian, penyortiran dengan tajuk lajur, dan penomboran mudah (sebelumnya dan seterusnya). Membuat dan mengedit pengguna akan menggunakan kotak modal bootstrap.

Anda boleh melawat repositori GitHub untuk melihat kod sumber projek ini.

prasyarat

Tutorial ini mengandaikan bahawa anda mempunyai pengalaman dalam pembangunan aplikasi PHP. Pengalaman Laravel akan membantu, tetapi tidak diperlukan. Jika anda hanya tahu PHP tulen atau kerangka PHP yang lain, anda juga boleh terus belajar.

tutorial ini mengandaikan bahawa anda telah memasang perisian berikut di komputer anda:

php
mysql
nginx
komposer
nod dan npm

Jika anda menggunakan Mac, memasang dbngin dan valet Laravel lebih mudah daripada memasang MySQL dan Nginx.

Tetapan Projek

anda boleh membuat projek Laravel baru:

<code class="language-bash">composer create-project laravel/laravel livecrud</code>

Navigasi ke folder livecrud yang dihasilkan. Ini akan menjadi folder Projek Root di mana anda melaksanakan semua arahan sepanjang tutorial.

Langkah seterusnya adalah untuk membuat pangkalan data MySQL menggunakan alat pengurusan pangkalan data pilihan anda. Namakan pangkalan data LiveCrud.

Memasang kebergantungan backend

Kami hanya mempunyai satu kebergantungan backend, iaitu livewire. Pasangnya dengan arahan berikut:

<code class="language-bash">composer require livewire/livewire:2.3</code>

NOTA: Kami memasang versi tertentu yang saya gunakan semasa membuat demo. Jika anda membaca artikel ini pada masa akan datang, disarankan agar anda memasang versi terkini. Pastikan anda menyemak log masuk projek pada repositori GitHub untuk memastikan anda tidak terlepas apa -apa.

Sediakan pangkalan data

Kemas kini penghijrahan lalai untuk membuat jadual pengguna dan tambahkan medan tersuai yang akan kami gunakan:

<code class="language-php">// database/migrations/<timestamp>_create_users_table.php
</timestamp>public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('email')->unique();
        $table->enum('user_type', ['admin', 'user'])->default('user'); // add this
        $table->tinyInteger('age'); // add this
        $table->string('address')->nullable(); // add this
        $table->timestamp('email_verified_at')->nullable();
        $table->string('password');
        $table->rememberToken();
        $table->timestamps();
    });
}</code>

Seterusnya, kemas kini fail pangkalan data/kilang/userfactory.php dan berikan nilai untuk medan tersuai yang kami tambahkan:

<code class="language-php">// database/factories/UserFactory.php
public function definition()
{
    return [
        'name' => $this->faker->name,
        'email' => $this->faker->unique()->safeEmail,
        'email_verified_at' => now(),
        'password' => 'yIXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
        'remember_token' => Str::random(10),

        // add these
        'user_type' => 'user',
        'age' => $this->faker->numberBetween(18, 60),
        'address' => $this->faker->address,
    ];
}</code>

Akhirnya, buka fail pangkalan data/seedabaseeder.php dan uncomment panggilan untuk membuat pengguna maya:

<code class="language-php">// database/seeders/DatabaseSeeder.php
public function run()
{
    \App\Models\User::factory(100)->create();
}</code>

Jangan lupa untuk mengemas kini fail .env anda dengan pangkalan data ujian yang akan anda gunakan. Dalam kes ini, saya menamakan pangkalan data Livecrud. Setelah selesai, jalankan penghijrahan dan penyokong untuk mengisi pangkalan data:

<code class="language-bash">php artisan migrate
php artisan db:seed</code>

Tetapkan Dependencies Front-End

Untuk memudahkan operasi, kami akan menggunakan perancah Laravel untuk bootstrap. Untuk melakukan ini, anda perlu memasang pakej Laravel/UI terlebih dahulu:

<code class="language-bash">composer require laravel/ui</code>

Seterusnya, pasang Bootstrap 4. Ini akan menambah konfigurasi dalam fail webpack.mix.js anda dan membuat sumber/js/app.js dan sumber/sass/app.scss fail:

<code class="language-bash">php artisan ui bootstrap</code>

Seterusnya, tambahkan fon Awsome ke Fail Sumber/SASS/APP.SCSS. Secara lalai, ia sepatutnya mengandungi fon, pembolehubah, dan import bootstrap:

<code class="language-scss">// Fonts
@import url("https://fonts.googleapis.com/css?family=Nunito");

// Variables
@import "variables";

// Bootstrap
@import "~bootstrap/scss/bootstrap";

// add these:
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";</code>

Selepas selesai, pasang semua kebergantungan:

<code class="language-bash">npm install @fortawesome/fontawesome-free
npm install</code>

(langkah seterusnya, disebabkan oleh batasan ruang, anda akan output dalam segmen. Sila teruskan soalan untuk mendapatkan yang lain)

Atas ialah kandungan terperinci Bermula dengan Laravel LiveWire. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!