layui已经提供了一整套的UI布局及相关組件并且有相当完善的api文档,本文重点在于thymeleaf中如何使用layui包括公用部分的提取,而非简单的layui的用法
这个可以根据个人喜好或者项目实际情况自己定义
整个html除了头部的引入整体分为三部分: 1.上面form为搜索内容部分 2.中间一个table为主窗口 3.注意一个id="toolBars"的js,为工具条用于追加在每一列的后面 4.可以看到下面页面初始化等都调用了Common.js中的对应方法
列表出來之后表单就更简单了,只需要去layui官网找个表单根据自己的实际情况布局即可,特别说明的是校验即verify.js,用于自己对验证方法的扩展 form.html
其怹小技巧: idea使用thymeleaf模板时页面取值总提示无法解析变量,但是又不影响实际应用据说idea2017.3已经解决了,但是我现在用的2017.2没有更新,但是同樣可以解决错误提示如图
去掉波浪线提示.png
导入完毕这些之后我们还需要導入我们的前端页面,及静态资源文件!
发现我们的日期顯示不完美,可以使用日期工具进行日期的格式化!
数据回显OK,我们继续完成数据修改问题!
发现页面提交的没有id;我们在前端加一个隱藏域提交id;
重启,修改信息测试OK!
list页面编写提交地址
我们只需要在模板目录下添加一个error文件夹,文件夹中存放我们相应的错误页面比如404.html 或者 4xx.html 等等,SpringBoot就会帮我们自动使用了!
发现页面提交的没有id;我们在前端加一个隐藏域提交id;
重启,修改信息测试OK!
list页面编写提茭地址
我们只需要在模板目录下添加一个error文件夹,文件夹中存放我们相应的错误页面比如404.html 或者 4xx.html 等等,SpringBoot就会帮我们自动使用了!