php FormBuilder的使用

https://github.com/xaboy/form-builder

php formbuilder是一个很好用的工具，有了它，我们有时候可以省略去写 view层的代码，只需要在 controller 中使用 formbuilder

然后 echo  $form->view() 就可以了

然而github上面写的使用方法很简略 有很多的细节没有说到

先写一个使用方法吧

比如，我们要向 我的服务器提交一个表单，表单中要上传一些数据和几张图片

是这样样的

use FormBuilder\Form;

$filed = [

    Form::input("name","名称")->autofocus(true)->placeholder("请填写名字")->value("hahah"),

         Form::uploadImages("hahah","上传图片",Url::build("routine/shop/mytest"))

];

$html = Form::create(Url::build("routine/shop/mytest2"))->components($fileds)->setMethod("get")->setTitle("我的表单");
echo $html->view();

这样就可以显示一个表单了，但是有两个细节要注意，一个是在 uploadimages中，一个是在表单提交的时修

formbuilder 的upload有好几个写法  upload()   uploadfiles()  uploadimages()   uploadImageOne () 等等

当使用 带有images字样的方法时  可以自动回显上传的图片的

同样这里有个问题，上传图片的这个接口 Url::build("routine/shop/mytest")  返回的数据格式是什么呢？怎样才可以把上传过后的图片地址传回给 frombuilder 让其回显呢，文档中并没有写

之后我们了下 formbuilder的 js代码，才大至了解了它的数据的返回格式

 

                    upload: {
                            onExceededSize: function (file) {
                            vm.$Message.error(file.name + '超出指定大小限制');
                        },
                        onFormatError: function () {
                            vm.$Message.error(file.name + '格式验证失败');
                        },
                        onError: function (error) {
                            vm.$Message.error(file.name + '上传失败,(' + error + ')');
                        },
                        onSuccess: function (res) {
                            if (res.code == 200) {
                                return res.data.filePath;
                            } else {
                                vm.$Message.error(res.msg);
                            }
                        }
                    },

从上面的代码可以看到， 上传图片的接口返回的数据格式应该是   （）

{
    code:200,
    msg:"上传成功"
    data:{
        filePath:{
            "http://上传图片1的地址(由服务器生成)",
            "http://上传图片2的地址（由服务器生成）"
        }
    }
}

同样的，formbuilder的提交表单也是一个ajax提交方式，所以也为有 返回值，那很返回值的格式是什么样子的呢，同样文档中也没有写   方法不变，我们看 js 的代码

//表单提交事件
                    onSubmit: function (formData) {
                        $f.submitStatus({loading: true});
                        $.ajax({
                            url: '<?=$form->getAction()?>',
                            type: '<?=$form->getMethod()?>',
                            dataType: 'json',
                            data: formData,
                            success: function (res) {
                                if (res.code == 200) {
                                    vm.$Message.success(res.msg);
                                    $f.submitStatus({loading: false});
                                    formCreate.formSuccess && formCreate.formSuccess(res, $f, formData);
                                    callback && callback(0, res, $f, formData);
                                    //TODO 表单提交成功!
                                } else {
                                    vm.$Message.error(res.msg || '表单提交失败');
                                    $f.btn.finish();
                                    callback && callback(1, res, $f, formData);
                                    //TODO 表单提交失败
                                }
                            },
                            error: function () {
                                vm.$Message.error('表单提交失败');
                                $f.btn.finish();
                            }
                        });

可以看到表单的提返回的数据格式应方是

{
    code:200,
    msg:"提交成功",
}

还有一个TP要注意的问题，tp的return 语句，在ajax的前端接收的时候，会变成一个字符串而不会自动转成对象，这个时候我们不能改前端的代码，  我的解决方法是 在ajax方法的返回中直接 echo json_encode([数组数据])