关于表单构建

Question

比如后台管理界面，有没有那种直接根据一个字段名来生成表单的插件，看过一些cms系统，数据库存入该表单类型，就可以直接出来表单，其原理如何，或者说有没有专门干这个，htmlbuilder什么的

Answer 1

这个插件还没注意到，但是一般框架都支持，根据模型（数据库表）配置来直接生成表单的，比如Yii2框架就有这个类，是基于Bootstrap框架改造的，你可以自己去借鉴。

类似这样，当然这个改了一下，不是默认的样子了。

<?php

/* @var $this \yii\web\View */
/* @var $form \yii\widgets\ActiveForm */
/* @var $model \common\models\Article */

use yii\helpers\Html;
use yii\widgets\ActiveForm;

$this->registerCss('
    .text {
        width : 100%;
        height : 500px;
    }
');

?>
<div class="site-form">
    <?php $form = ActiveForm::begin(['options' => [' name' => 'frm']]); ?>

    <?php echo $form->field($model, 'title')->textInput()->label('文章标题'); ?>

    <?php echo $form->field($model, 'type')->radioList(\common\base\Navigation::getInstance()->getNavigationKV())->label('文章类型'); ?>

    <?php echo $form->field($model, 'content')->textarea(['class' => 'text'])->label('文章内容'); ?>

    <?php echo $form->field($model, 'summary')->textarea()->label('摘要'); ?>

    <?php echo $form->field($model, 'remark')->textarea(['rows' => 4])->label('备注'); ?>

    <?php echo $form->field($model, 'status')->radioList(\common\base\Article::getInstance()->getStatusKV())->label('状态'); ?>

    <div class="form-group">
        <?php echo Html::submitButton($model->isNewRecord ? '添加' : '编辑', ['class' => 'btn btn-success']); ?>
    </div>

    <?php $form->end(); ?>
</div>

Answer 2

form-builder

php 表单生成器: FormBuilder 是一个开源的php表单生成插件,可以快速生成现代化的form表单。还可以配合开源项目 xaboy/form-create 生成任何 Vue 组件. 文档地址

form-create

vue 表单生成器: form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单动态生成组件。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。github地址

目前以支持如下 UI

ElementUI 版本

npm i @form-create/element-ui

Iview 版本 2.x|3.x

npm i @form-create/iview

Iview 版本 4.x

npm i @form-create/iview4

Ant-design-vue 版本 1.5.3+

npm i @form-create/ant-design-vue