Form表单使用 - liuyong1352/vue-adminlte4j GitHub Wiki

Form表单使用 , 分以下步骤

  1. 引入标签 其中ajax_url是提供模型与初始化数据api ， submit_url可选，如果存在此属性， 那么页面将添加提交按钮，并且点击提交会自动进行表单验证， 且把表单数据按post方式异步提交到submit_url
<v-form ajax_url="/test/form/get" submit_url="/test/form/add"></v-form>
  1. 提供服务接口

具体实现 ，其中的模型是根据JavaBean注解进行生成， 使用者只需要根据注解配置就可以控制表单的展示， 模型代码点击这

@GetMapping("/test/form/get")
@ResponseBody
public UIModel get(){
    //just for test form
    XModel xModel = XModelStore.findOne() ;
    //xModel可以为null, 如果有数据将自动填充表单
    return  UIModel.success().formData(xModel , XModel.class) ;
}
@PostMapping("/test/form/add")
@ResponseBody
public UIModel add(@RequestBody XModel xModel) throws Exception {
    XModelStore.add(xModel);
    return  UIModel.success().setMsg("保存成功") ;
}
  1. 模型配置属性说明 注解Form ,该注解主要起到了全局配置的作用，如果JavaBean字段没进行配置，自动从该注解继承

注解UIFormItem ,该注解在javabean的field字段上面配置 ， 针对单个字段进行个信息化配置

@Form(span = 3 ,ignore = false , hidden = false)
public class XModel {

    /**
     * Id
     */
    @UIFormItem(hidden = true)
    private int id;

    @UIFormItem(span = 12 , label = "输入框" )
    @Validate
    private String inputName ;

    @Validate(type = ValidateType.NUMBER)
    private int age ;

    @UIFormItem(span = 3 ,label = "姓名")
    private String name ;

    @Validate(type = ValidateType.EMAIL)
    @UIFormItem(label = "联系方式")
    private String contact ;


    @com.alibaba.fastjson.annotation.JSONField(format="yyyy-MM-dd hh:mm:ss") //使用fastjson 格式化
    private Date birthDay ;

    @UIFormItem(type = FormItemType.CHECKBOX)
    @DictData({@DictEntry("写作") ,@DictEntry("阅读"),@DictEntry("听说")})
    private String love ;

    @UIFormItem(type = FormItemType.RADIO)
    @DictData(value = {@DictEntry(code = "1",value ="男") ,@DictEntry(code = "2", value = "女"),@DictEntry(code = "3",value = "中性")})
    private int gender ;

    @UIFormItem(type = FormItemType.SWITCH  , span = 12)
    @DictData({@DictEntry("是") ,@DictEntry("否")})
    private int isAdmin ;

    @UIFormItem(type = FormItemType.SELECT , label = "学历" )
    @DictData({@DictEntry(value = "小学") ,@DictEntry("初中") ,@DictEntry("高中"),@DictEntry("本科")})
    private int educatoin;

    @UIFormItem(type = FormItemType.ICON_SELECTOR , span = 12 , label = "选择图标")
    @Validate
    private String myIcon ;
}

Form属性说明

ajax_url: 模型数据请求地址 ， 如果未配置lazy_init， 组件挂载好，会请求该地址数据进行组件渲染

Form方法说明

refresh ： function(params) , params为json格式， 刷新表单， 使用传入的参数
submit_before: function(url , formData) 该方法为提交前拦截方法， 如果返回值为假，提交逻辑会被终止，如果为真，继续提交
submit_after: function(data) 该方法为提交完成拦截方法 ，data为返回的数据 ，如果返回值为假，提交完成默认逻辑不会继续执行，如果为真，继续执行默认逻辑

https://github.com/liuyong1352/vue-adminlte4j/wiki/1

⚠️ **GitHub.com Fallback** ⚠️