springboot 整合flowable springboot整合layui

新建一个SpringBoot项目

导包

<parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.4.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <java.version>1.9</java.version>

    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>

        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.21</version>
        </dependency>


        <!--  fastjson-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.47</version>
        </dependency>

        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.2</version>
        </dependency>

        <!--mybatisplus代码生成-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.4.1</version>
        </dependency>


        <!--模板-->
        <dependency>
            <groupId>org.apache.velocity</groupId>
            <artifactId>velocity-engine-core</artifactId>
            <version>2.2</version>
        </dependency>

        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>2.9.2</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/io.springfox/springfox-swagger-ui -->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>2.9.2</version>
        </dependency>


        <!-- 引入swagger-bootstrap-ui包 /doc.html-->
        <dependency>
            <groupId>com.github.xiaoymin</groupId>
            <artifactId>swagger-bootstrap-ui</artifactId>
            <version>1.9.1</version>
        </dependency>

    </dependencies>

配置文件

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/mybatis-plus01?useSSL=false&useUnicode=true&characterEncoding=utf-8&serverTimezone=GMT%2B8
    username: root
    password: root
    driver-class-name: com.mysql.cj.jdbc.Driver
    type: com.alibaba.druid.pool.DruidDataSource
mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  global-config:
   db-config.id-type: auto

启动类

 

编写 controller，entity，mapper，service层

实体类

@Data
@TableName("user")
@ApiModel(value="User对象", description="")
public class User implements Serializable {
    private static final long serialVersionUID = 1L;
    @ApiModelProperty(value = "主键ID")

    @TableId(value = "id", type = IdType.AUTO)
    private Long id;

    @ApiModelProperty(value = "姓名")
    private String name;

    @ApiModelProperty(value = "年龄")
    private Integer age;

    @ApiModelProperty(value = "邮箱")
    private String email;

    @ApiModelProperty(value = "逻辑删除")
    private Integer deleted;

    @ApiModelProperty(value = "乐观锁")
    private Integer version;

    @ApiModelProperty(value = "创建时间")
    @TableField(fill = FieldFill.INSERT)
    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private Date createTime;

    @ApiModelProperty(value = "修改时间")
    @TableField(fill = FieldFill.INSERT_UPDATE)
    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private Date updateTime;


}

UserController

@RestController
@Api("UserController操作user的：crud")

public class UserController {


    @Autowired
    UserService userService;

    @GetMapping({"/","list"})
    public ModelAndView listPage(){
        ModelAndView mv = new ModelAndView();
        mv.setViewName("list");
        return mv;
    }

    @GetMapping("/add")
    public ModelAndView addPage(){
        ModelAndView mv = new ModelAndView();
        mv.setViewName("add");
        return mv;
    }


    @PostMapping("/insertUser")
    public JsonData insertUser(User user){

        System.out.println("添加的user信息："+user);

        JsonData jsonData = new JsonData();

        boolean b = userService.save(user);


        Long id = user.getId();
        System.out.println("添加的ID："+id);

        if(b){

            jsonData.setCode(200);
            jsonData.setMsg("添加成功！");

        }else{
            jsonData.setCode(0);
            jsonData.setMsg("添加失败！");
        }


        return  jsonData;


    }


    @PostMapping("/updateUser")
    public JsonData updateUser(User user){

        System.out.println("修改的user："+user);

        JsonData jsonData = new JsonData();

        boolean b = userService.updateById(user);


        if(b){
            jsonData.setCode(200);
            jsonData.setMsg("修改成功！");

        }else{
            jsonData.setCode(0);
            jsonData.setMsg("修改失败！");
        }


        return  jsonData;


    }



    @GetMapping("/edit")
    public ModelAndView editPage( Long id){

        ModelAndView mv = new ModelAndView();

        User user = userService.getById(id);

        System.out.println("user:"+user);
//        model.addAttribute("user",user);

        mv.addObject("user",user);
        mv.setViewName("edit");
        return mv;
    }


    @PostMapping("/deleteUser")
    public JsonData deleteUser(Long id){

        System.out.println("删除的ID为："+id);

        JsonData jsonData = new JsonData();

        boolean b = userService.removeById(id);


        if(b){
            jsonData.setCode(200);
            jsonData.setMsg("删除成功！");

        }else{
            jsonData.setCode(0);
            jsonData.setMsg("删除失败！");
        }


        return  jsonData;


    }



    @ApiOperation("查询所有user数据")
//    @ApiImplicitParams({
//            @ApiImplicitParam("createTime"),
//            @ApiImplicitParam("name")
//    })


    @GetMapping("/userAllInfo")
    public JsonData userAllInfo(PageUserJson pageUserJson,
                                @RequestParam(value = "createTime",defaultValue = "") String createTime,
                                @RequestParam(value = "name",defaultValue = "") String name) throws ParseException {

        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
//
//        Date date = simpleDateFormat.parse(createTime);
//
//        System.out.println(date);
        JsonData jsonData = new JsonData();

        IPage<User> page = new Page<>(pageUserJson.getPage(),pageUserJson.getLimit());

        QueryWrapper<User> queryWrapper = new QueryWrapper<>();

        if(!StringUtils.isEmpty(createTime)){
            queryWrapper.eq("create_time",createTime);
        }
        if(!StringUtils.isEmpty(name)){
            queryWrapper.like("name",name);
        }

       IPage<User> users = userService.page(page,queryWrapper);

        System.out.println(users);

        jsonData.setCount(page.getTotal());
        jsonData.setData(users.getRecords());

        System.out.println(jsonData);


        return jsonData;

    }

}

还有相关的config 配置类

@Configuration
@ConditionalOnClass(value = {PaginationInterceptor.class})
public class MybatisPlusConfig {

    @Bean
    public PaginationInterceptor paginationInterceptor() {
        PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
        return paginationInterceptor;
    }



}

在配置文件中 加入

jackson:
  date-format: yyyy-MM-dd HH:mm:ss

使用使用swagger的配置

@Configuration

@EnableSwagger2

public class SwaggerConfig {

    //配置多个分组
    @Bean
    public Docket docket1(){
        return new Docket(DocumentationType.SWAGGER_2).groupName("group1");
    }
    @Bean
    public Docket docket2(){
        return new Docket(DocumentationType.SWAGGER_2).groupName("group2");
    }




    //配置了swagger的Docket
    @Bean //配置docket以配置Swagger具体参数

    public Docket docket(Environment environment) {

        // 设置要显示swagger的环境
        Profiles of = Profiles.of("dev", "test");

        // 判断当前是否处于该环境
        // 通过 enable() 接收此参数判断是`否要`显示
        boolean b = environment.acceptsProfiles(of);

        System.out.println("profile的环境 ==》b:"+b);

        return new Docket(DocumentationType.SWAGGER_2)

                .apiInfo(apiInfo())  //通过apiInfo()属性配置文档信息
//                .enable(false) //配置是否启用Swagger，如果是false，在浏览器将无法访问

                //分组
                .groupName("group")

                //
                .enable(b)


                // 通过.select()方法，去配置扫描接口,RequestHandlerSelectors配置如何扫描接口
                .select()
                // RequestHandlerSelectors 配置要扫描接口的方式
                //basePackage 要扫描的包   扫描com.example.controller 下的包
//                .apis(RequestHandlerSelectors.basePackage("com.example.controller"))

                //any()  扫描全部
                //none()   不扫描
                .apis(RequestHandlerSelectors.basePackage("com.example.springbootlayui01"))
//               withClassAnnotation 扫描类上的注解  是 @RestController  修饰的
//                .apis(RequestHandlerSelectors.withClassAnnotation(RestController.class))

                // withMethodAnnotation 扫描方法上的注解  是 @GetMapping  修饰的
//                .apis(RequestHandlerSelectors.withMethodAnnotation(GetMapping.class))

                //过滤扫描路径
                .paths(PathSelectors.any())
//                .paths(PathSelectors.ant("/example/**"))

//                any //全扫描，不过滤
//                ant //扫描以 antPattern开头的
//                none //不扫描，全过滤
//                regex //正则表达扫描
//                开放所有
//                .paths(PathSelectors.any())

                .build();
    }


    //配置文档信息
    private ApiInfo apiInfo() {
        //作者信息
        Contact contact = new Contact("hjj",
                "http://xxx.xxx.com/联系人访问链接", "联系人邮箱");

        return new ApiInfo(
                "swagger学习", // 标题
                "学习演示如何配置Swagger", // 描述
                "v1.0", // 版本
                "http://terms.service.url/组织链接", // 组织链接
                contact, // 联系人信息
                "Apach 2.0 许可", // 许可
                "许可链接", // 许可连接
                new ArrayList<>()// 扩展
        );
    }



}

还有 自动填充

@Component
@Slf4j

public class MyMetaObjectHandler implements MetaObjectHandler {

    // 插入时的填充策略
    @Override
    public void insertFill(MetaObject metaObject) {

        log.info("start insert fill....");

        // setFieldValByName(String fieldName,
        // Object fieldVal, MetaObject metaObject)

         this.setFieldValByName("createTime",new Date(),metaObject);

         this.setFieldValByName("updateTime",new Date(),metaObject);

    }

    // 更新时的填充策略
    @Override
    public void updateFill(MetaObject metaObject) {

        log.info("start update fill.....");

        this.setFieldValByName("updateTime",new Date(),metaObject);

    }



}

json返回的结果数据

 

前台layUI

去官方文档中下载layUI的静态文件，还有下载jQuery，都放到resources下面的static/public 中，当然也可以自己自定义。

 页面都放在templates 下面

list.html

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>layui在线调试</title>

	<base th:href="@{/}">

  <link rel="stylesheet" href="layui/css/layui.css" media="all">

  <style>
    body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
  </style>

	<script src="js/jquery-1.12.2.js"></script>

	<script src="layui/layui.js"></script>


</head>
<body>
<div class="weadmin-nav">
			<span class="layui-breadcrumb">
				<a href="javascript:;">首页</a> <a href="javascript:;">会员管理</a>
				<a href="javascript:;"> <cite>会员列表</cite></a>
			</span>
			<a class="layui-btn layui-btn-sm" style="margin-top:3px;float:right" href="javascript:location.replace(location.href);"
			 title="刷新">
				<i class="layui-icon layui-icon-refresh"></i>
				<!-- <i class="layui-icon" style="line-height:30px">ဂ</i> -->
			</a>
		</div>

		<div class="weadmin-body">
			<div class="layui-row">
				<form class="layui-form layui-col-md12 we-search">
					会员搜索：
					<div class="layui-inline">
<!--						<input type="text" class="layui-input" placeholder="创建时间" name="createTime" id="createTime" />-->

						<input type="text" name="createTime" id="date"  placeholder="yyyy-MM-dd HH:mm:ss"  class="layui-input">

					</div>

<!--					<div class="layui-inline">-->
<!--						<input class="layui-input" placeholder="截止日" name="end" id="end" />-->
<!--					</div>-->
					<div class="layui-inline">
						<input type="text" name="name" placeholder="请输入用户名" autocomplete="off" class="layui-input" />
					</div>

					<button class="layui-btn" lay-submit="" lay-filter="sreach">
						<i class="layui-icon layui-icon-search"></i>
					</button>
				</form>
			</div>
</div>
</div>

<table class="layui-hide" id="demo" lay-filter="test"></table>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>




<script>
layui.config({
  version: '1573378444586' //为了更新 js 缓存，可忽略
});

layui.use(['laydate', 'laypage', 'layer', 'form','table', 'carousel', 'upload', 'element', 'slider'], function(){
  var laydate = layui.laydate //日期
  ,laypage = layui.laypage //分页
	,form=layui.form
  ,layer = layui.layer //弹层
  ,table = layui.table //表格
  ,carousel = layui.carousel //轮播
  ,upload = layui.upload //上传
  ,element = layui.element //元素操作
  ,slider = layui.slider //滑块

  //向世界问个好
  // layer.msg('Hello World');

  //监听Tab切换
  element.on('tab(demo)', function(data){
    layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
      tips: 1
    });
  });

	//日期
	// laydate.render({
	// 	elem: '#date'
	// });
	//日期时间选择器
	laydate.render({
		elem: '#date'
		,type: 'datetime'
	});



	//执行一个 table 实例
	var tableIns = table.render({

    elem: '#demo'
    ,height: 420
    ,url: '/userAllInfo' //数据接口
    ,title: '用户表'
    ,page: true //开启分页

	, limit: 5
	, limits: [3, 5, 7,9]

    ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
    // ,totalRow: true //开启合计行
    ,cols: [ [ //表头
      {type: 'checkbox', fixed: 'left'}

       ,{field: 'id', title: 'id', width:80, fixed: 'left'}
      ,{field: 'name', title: '用户名', width:100}
      ,{field: 'age', title: '年龄', width: 100, sort: true, totalRow: true}
      ,{field: 'email', title: '邮箱', width:180, sort: true}

      ,{fixed: 'right', title:'操作', width: 170, align:'center', toolbar: '#barDemo'}
    ] ]
  });


	//模糊查询
	form.on("submit(sreach)",function (data) {
		console.log(data.field);

		tableIns.reload({
			where: data.field
			,page: {
				curr: 1
			}
		});

		return false;

	});


  //监听头工具栏事件
  table.on('toolbar(test)', function(obj){

    var checkStatus = table.checkStatus(obj.config.id)
    ,data = checkStatus.data; //获取选中的数据

    switch(obj.event){
      case 'add':
        //layer.msg('添加');
		//弹出添加窗体,加载添加页面
		//ShowLay(标题,加载页面,宽,高)
		ShowLay('添加','/add',600,600);

      break;

      case 'update':
        if(data.length === 0){
          layer.msg('请选择一行');
        } else if(data.length > 1){
          layer.msg('只能同时编辑一个');
        } else {
          layer.alert('编辑 [id]：'+ data[0].id);
		  //修改操作
		  EditLay('修改','/edit',data[0].id,600,600);
        }
      break;

      case 'delete':

        if(data.length === 0){
          layer.msg('请选择一行');
        } else {

			layer.confirm('你确定要删除【'+data[0].name+'】这个用户吗？', {icon: 3, title:'提示'},
					function(index){
						$.post("/deleteUser",
								{id:data[0].id},
								function(res){

									if(res.code==200){

										//重新刷新表格
										tableIns.reload();

									}
									layer.msg(res.msg);
								});

						layer.close(index);
					});


        }
      break;
    };
  });

  //监听行工具事件
  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"

    var data = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === 'detail'){
      layer.msg('查看操作');

    } else if(layEvent === 'del'){

				  layer.confirm('你确定要删除【' + data.name + '】这个用户吗？', {icon: 3, title: '提示'},
						  function (index) {
							  $.post("/deleteUser",
									  {id: data.id},
									  function (res) {

										  if (res.code == 200) {
											  //重新刷新表格
											  tableIns.reload();

										  }
										  layer.msg(res.msg);
									  });

							  layer.close(index);	//关闭窗口
						  });



    }else if(layEvent === 'edit'){
      layer.msg('编辑操作');
	  //修改操作
	  EditLay('修改','/edit?id='+data.id,10,600,600);
    }

  });

  //将日期直接嵌套在指定容器中
  var start = laydate.render({
      elem: '#start'
      /* ,position: 'static'
      ,calendar: true //是否开启公历重要节日
      ,mark: { //标记重要日子
        '0-10-14': '生日'
        ,'2018-08-28': '新版'
        ,'2018-10-08': '神秘'
      }
      ,done: function(value, date, endDate){
        if(date.year == 2017 && date.month == 11 && date.date == 30){
          dateIns.hint('一不小心就月底了呢');
        }
      }
      ,change: function(value, date, endDate){
        layer.msg(value)
      } */
    });

   var end = laydate.render({
	   elem: '#end'
   });



  //分页
  laypage.render({
    elem: 'pageDemo' //分页容器的id
    ,count: 100 //总页数
    ,skin: '#1E9FFF' //自定义选中色值
    //,skip: true //开启跳页
    ,jump: function(obj, first){
      if(!first){
        layer.msg('第'+ obj.curr +'页', {offset: 'b'});
      }
    }
  });

  /*
   * @todo 弹出层，弹窗方法
   * layui.use 加载layui.define 定义的模块，当外部 js 或 onclick调用 use 内部函数时，需要在 use 中定义 window 函数供外部引用
   * 
   */
  /*
      参数解释：
      title   标题
      url     请求的url
      id      需要操作的数据id
      w       弹出层宽度（缺省调默认值）
      h       弹出层高度（缺省调默认值）
  */

	var tableForm;
  function ShowLay(title, url, w, h) {
	console.log('aa');

  	if(title == null || title == '') {
  		title = false;
  	};
  	if(url == null || url == '') {
  		url = "/list";
  	};
  	if(w == null || w == '') {
  		w = ($(window).width() * 0.9);
  	};
  	if(h == null || h == '') {
  		h = ($(window).height() - 50);
  	};
	  tableForm = layer.open({
  		type: 2,
  		area: [w + 'px', h + 'px'],
  		fix: false, //不固定
  		maxmin: true,
  		shadeClose: true,
  		shade: 0.4,
  		title: title,
  		content: url,

		success: function(layero, index) {
			//
			// tableIns.reload();
			//
			// layer.close(tableForm);
		},


  	});
  }


  var editForm;
  /*弹出层+传递ID参数*/
  function EditLay(title, url, id, w, h) {
	console.log(id);

  	if(title == null || title == '') {
  		title = false;
  	};
  	if(url == null || url == '') {
  		url = "/list";
  	};
  	if(w == null || w == '') {
  		w = ($(window).width() * 0.9);
  	};
  	if(h == null || h == '') {
  		h = ($(window).height() - 50);
  	};
	  editForm = layer.open({
  		type: 2,
  		area: [w + 'px', h + 'px'],
  		fix: false, //不固定
  		maxmin: true,
  		shadeClose: true,
  		shade: 0.4,
  		title: title,
  		content: url,

  		success: function(layero, index) {
  			//向iframe页的id=house的元素传值  // 参考 https://yq.aliyun.com/ziliao/133150

  			// var body = layer.getChildFrame('body', index);
  			// body.contents().find("#id").val(id);
  			// console.log(id);


			// tableIns.reload();
			//
			// layer.close(editForm);

  		},

  		error: function(layero, index) {
  			alert("异常错误！");
  		}
  	});
  }



});
</script>
</body>
</html>

 add.html

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <base th:href="@{/}">
  <link rel="stylesheet" href="layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
  <script src="js/jquery-1.12.2.js"></script>
  <script src="layui/layui.js" charset="utf-8"></script>

</head>
<body style="padding:15px;">
 
<form class="layui-form" action="" lay-filter="example">

  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="name" lay-verify="title" required autocomplete="off" placeholder="请输入用户名" class="layui-input">
    </div>

  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">年龄</label>
    <div class="layui-input-block">
      <input type="number" name="age" lay-verify="title" required autocomplete="off" placeholder="请输入年龄" class="layui-input">
    </div>

  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">邮箱</label>
    <div class="layui-input-block">
      <input type="email" name="email" lay-verify="title" required autocomplete="off" placeholder="请输入邮箱" class="layui-input">
    </div>

  </div>


  <div class="layui-form-item">
    <div class="layui-input-block">
<!--      <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-setval">赋值</button>-->
<!--      <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-getval">取值</button>-->
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>

      <button type="reset" class="layui-btn layui-btn-normal">重置</button>
    </div>
  </div>

</form>


<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;
  
  //日期
  laydate.render({
    elem: '#date'
  });
  laydate.render({
    elem: '#date1'
  });
  
  //创建一个编辑器
  var editIndex = layedit.build('LAY_demo_editor');
 
  

  form.on('submit(demo1)', function(data){
    $.post(
            "/insertUser",
            data.field,
            function (res) {

              // layer.msg("添加成功", {icon: 6});
              layer.msg(res.msg);


              parent.location.reload(); // 父页面刷新

              var index = parent.layer.getFrameIndex(window.tableForm); //获取窗口索引

              parent.layer.close(index);//关闭弹出的子页面窗口


              // layer.closeAll(); //关闭所有的弹出层
            });


    // layer.alert(JSON.stringify(data.field), {
    //   title: '最终的提交信息'
    // })


    return false;

  });


  
});

</script>


</body>
</html>

edit.html

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <base th:href="@{/}">
  <link rel="stylesheet" href="layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
  <script src="js/jquery-1.12.2.js"></script>
  <script src="layui/layui.js" charset="utf-8"></script>
</head>
<body style="padding:15px;">
 
 
<form class="layui-form" action="" lay-filter="example">

  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="hidden" name="id" id="id" th:value="${user.id}">
      <input type="text" name="name" th:value="${user.name}" required lay-verify="title" autocomplete="off" placeholder="请输入用户名" class="layui-input">
    </div>

  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">年龄</label>
    <div class="layui-input-block">
      <input type="number" name="age" th:value="${user.age}" required lay-verify="title" autocomplete="off" placeholder="请输入年龄" class="layui-input">
    </div>

  </div>
  <div class="layui-form-item">

    <label class="layui-form-label">邮箱</label>

    <div class="layui-input-block">
      <input type="email" name="email" th:value="${user.email}" required lay-verify="title" autocomplete="off" placeholder="请输入邮箱" class="layui-input">
    </div>

  </div>
 
  <div class="layui-form-item">
    <div class="layui-input-block">
<!--      <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-setval">赋值</button>-->
<!--      <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-getval">取值</button>-->
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">提交</button>
      <button type="reset" class="layui-btn layui-btn-normal">重置</button>
    </div>
  </div>
</form>

</form>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;
  
  //日期
  laydate.render({
    elem: '#date'
  });
  laydate.render({
    elem: '#date1'
  });
  
  //创建一个编辑器
  var editIndex = layedit.build('LAY_demo_editor');

  //监听指定开关
  form.on('switch(switchTest)', function(data){
    layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
      offset: '6px'
    });
    layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
  });


  //监听提交表单
  form.on('submit(demo1)', function(data){

    $.post(
            "/updateUser",
            data.field,
            function (res) {

              // if(res.code==200){
              //   tableIns.reload();//刷新页面  使页面重新加载一遍
              // }

            // layer.msg("添加成功", {icon: 6});
            layer.msg(res.msg);

            parent.location.reload(); // 父页面刷新

              var index = parent.layer.getFrameIndex(window.editForm); //获取窗口索引

              parent.layer.close(index);//关闭弹出的子页面窗口

            // layer.closeAll(); //关闭所有的弹出层
    });

    return false;
  });

});
</script>

</body>
</html>

测试效果为