README

!!!!!!! 不要在生产环境中使用此包 -- 该包处于开发中 !!!!!!!

LaraVueBuilder

LaraVueBuilder 是一个 Laravel 5.8 的包，用于从 Laravel 生成表单，并轻松获取带有验证、策略、事件等的 VueJS2 动态表单。

它受到 Laravel Nova 的启发，但更轻量级，可定制，适用于前端和后端使用。

摘要

安装
配置
使用部分
由表单生成的路由
授权和策略
在创建/更新之前自定义 PHP 处理
可用的字段类型

安装

安装包

安装 composer 包

composer require k-eggermont/lara-vue-builder

自动发现

该包已配置为 Laravel 自动发现。如果您的项目未启用此功能，请在 config/app.php 文件中添加

return [
    'providers' => [
    
        // (...)        
        Keggermont\LaraVueBuilder\LaraVueBuilderServiceProvider::class,
        // (...)
        
    ]
];

发布资产

之后，您可以发布文件（配置、翻译、js、sass）

php artisan vendor:publish --provider="Keggermont\LaraVueBuilder\LaraVueBuilderServiceProvider"

NPM 依赖项

npm i --save form-backend-validation 

# Not required, but if you don't install this packages, you need to reconfigure the file in resources/js/laravuebuilder.js
npm i --save vue-flatpickr-component vue-m-message vue-sweetalert2

我建议在项目中使用 vue-router

将资源添加到您的资产中

将 require 添加到您的 app.js 文件中

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

配置

PHP

您可以在 config/laravuebuilder.php 中配置 php 文件。

JavaScript

最佳实践是将文件 /js/vendor/laravuebuilder/laravuebuilder.js 复制到您的 /resources/js 文件夹中。然后，您可以调整依赖项或要求（添加新字段、更新字段、表单等）

例如，如果您想更改 InputField.vue

将 resources/js/vendor/laravuebuilder/components/Fields/InputField.vue 复制到 /resources/js/Fields/InputField.vue 您可以删除所有组件或使用基础 mixin，例如

<template>
    <label :class="{ errorClass: isError }">
        {{ field.name }} :
        <input type="text" :value="$parent.form[field.name]" @input="updateField($event.target.value)" v-on:keyup.enter="$parent.onSubmit">
    </label>
</template> 
<script>
    import InputFieldMixin from "../vendor/laravuebuilder/components/Fields/InputField.vue";
    export default {

        props: ["field", "error", "isError"],
        mixins: [ InputField ],
        mounted() {
            console.log("field mounted!");
        }, 
    }
</script>

SASS

在此包中，我将提供一些默认样式的 SASS 文件。使用此样式需要 Tailwindcss。如果已安装和配置 Tailwind，则可以将其添加到主 scss 文件中

@import 'vendor/laravuebuilder/app.scss';

有关 Tailwindcss 的安装和配置的更多信息： https://tailwind.org.cn/docs/installation/

渲染资产

npm i && npm run watch

使用方法

生成器

您可以使用 make:form 命令。例如，我有一个实体 "App\Book"，我想创建表单 "BookForm"。我将使用

php artisan make:form BookForm "App\Book" --policy

这将创建 app/Forms/BookForm.php 中的表单

配置字段

现在您可以打开文件 app/Forms/BookForm.php

    public function fields() {

        /*
        Here you can add your fields.
        */
        return [
            
            // Declare the input "title"
            (new \Keggermont\LaraVueBuilder\App\Fields\InputField("title"))->nullable(),
            
        ];

    }

在字段上，您可以设置一些参数

最小值 => ->min($value) 最大值 => ->max($value) 可空 => ->nullable()

这些设置将为后端验证（Laravel Validator）添加验证规则。

您可以在 Keggermont\LaraVueBuilder\App\Fields\Field.php 文件中探索更多设置。

@todo => 其他字段类型。

路由

表单模型为您提供了一些新的 API 路由。

POST /api/forms/{nameOfForm} => 创建新资源
POST /api/forms/{nameOfForm}/{resourceId} => 更新资源
DELETE /api/forms/{nameOfForm}/{resourceId} => 删除
GET /api/forms/{nameOfForm}/{resourceId} => 获取资源数据 @todo
GET /api/forms/{nameOfForm} => 获取所有资源数据 @todo

显示表单

在视图中，您需要为创建表单执行以下操作

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

对于编辑，我们可以传递资源-id（Book id：1）

<form-field resource="Book" :resource-id="1" :reset-on-submit="false">
    <div slot="submit-text">Edit</div>
</form-field>

您可以使用 slot 定制表单和文本。查看 FormField.vue 的源代码

授权

您可以使用策略设置自定义授权。您可以使用方法 ->can()（在字段上）配置自定义策略闭包。

使访客用户能够执行操作

为了让未认证用户使用表单，在策略中您需要将 (?User $user) 替换为 (User $user)

自定义处理

对于自定义处理（在更新或创建之前），您可以在表单模型中使用方法 executeBeforeProcessing。

事件

Keggermont\LaraVueBuilder\App\Events\LaraVueFormCreated
Keggermont\LaraVueBuilder\App\Events\LaraVueFormCreating
Keggermont\LaraVueBuilder\App\Events\LaraVueFormUpdated
Keggermont\LaraVueBuilder\App\Events\LaraVueFormUpdating
Keggermont\LaraVueBuilder\App\Events\LaraVueFormDeleted
Keggermont\LaraVueBuilder\App\Events\LaraVueFormDeleting

可能需要一些改进！

字段

输入字段
选择字段

TODO => 添加更多字段，例如

可搜索的Select2字段
单选字段
布尔字段
复选框字段
文本区域字段
上传字段 [...]

k-eggermont / lara-vue-builder

维护者

详细信息