使用 Composer 解決 Laravel 和 Vue.js 表單構建的挑戰

可以通過以下地址學習 composer：學習地址

遇到的挑戰

在開發過程中，我發現手動創建和管理表單的過程非常繁瑣，特別是當需要在 laravel 后端定義表單結構，并在 vue.JS 前端生成動態表單時。這種方法不僅容易出錯，還需要大量的時間來維護和更新表單。我嘗試了多種現有的解決方案，但它們要么過于復雜，要么無法滿足我的需求。

使用 composer 解決問題

在研究過程中，我發現了 k-eggermont/lara-vue-builder 這個庫，它是一個為 Laravel 5.8+ 設計的表單生成器，可以輕松地在 Laravel 后端定義表單結構，并在 Vue.js 前端生成動態表單。它的安裝非常簡單，只需通過 Composer 即可：

composer require k-eggermont/lara-vue-builder

安裝后，你需要發布資源文件并配置 npm 依賴：

php artisan vendor:publish --provider="KeggermontLaraVueBuilderLaraVueBuilderServiceProvider" npm i --save form-backend-validation vue-flatpickr-component vue-m-message vue-sweetalert2

然后，將生成的 JavaScript 文件添加到你的 app.js 中：

立即學習“前端免費學習筆記（深入）”；

require('./vendor/laravuebuilder/laravuebuilder.js');

實際應用

使用 k-eggermont/lara-vue-builder，我能夠通過簡單的命令生成表單。例如，創建一個用于 AppBook 實體的表單：

php artisan make:form BookForm "AppBook" --policy

然后，在生成的 BookForm.php 文件中定義字段：

public function fields() {     return [         (new KeggermontLaraVueBuilderAppFieldsInputField("title"))->nullable(),     ]; }

在前端，我可以輕松地使用這些表單：

<form-field resource="Book" :resource-id="null" :reset-on-submit="true">     <div slot="submit-text">Create</div> </form-field>

優勢和效果

使用 k-eggermont/lara-vue-builder 后，我的開發流程變得更加高效和靈活。以下是它的幾個主要優勢：

• 簡化表單管理：通過 Laravel 后端定義表單結構，并在 Vue.js 前端自動生成動態表單，減少了手動編碼的工作量。
• 靈活性和可定制性：可以輕松地添加自定義字段、驗證規則和處理邏輯，滿足不同項目的需求。
• 集成方便：通過 Composer 安裝和管理依賴，簡化了項目的設置和維護。

雖然 k-eggermont/lara-vue-builder 目前仍在開發中，不建議在生產環境中使用，但它已經在我的開發過程中展現了巨大的潛力。隨著它的進一步完善，我相信它將成為 Laravel 和 Vue.js 開發者的強大工具。