说明:
最近小组在做一个自研的字节码增强工具。因为是预研性质,所以前端的操作界面就自己上手写了。使用了比较亲和后端开发的layui框架。后端采用springboot+thymeleaf
后端配置静态资源和thymeleaf:
application.yml:
静态资源访问:
前端引入layui:
layui的下载可以到官网下载最新版:Layui - 经典开源模块化前端 UI 框架
细节:
1 布局:
采用layui官网给定的栅栏布局,只需要指定div的class=“layui-row”即可表示一行,可以通过设置高度
2 数据表格
a 需要提前加载layui的table模块:layui.use('table',funtion(){})
b 如果接口返回的数据不符合分页数据格式(code,msg,count,data),使用parseData:function(res)处理返回数据即可
c cols是一个数组,html不识别[[]],需要将两个[[]]换行写
d cols的可以使用templet:function(d)定制显示,其中d表示整行数据
e cols可以绑定操作列
其中barDemo是一个段<script>代码如下:
<script type="text/html" id="barDemo"> <a class="layui-btn 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>
通过在js中使用:table.on('tool(test)')触发点击事件,其中test是该数据表格的table的lay-filter属性值
f 数据表格表头工具列采用相似的方式绑定:
只是在js中触发条件如下:
3 弹出层:
layui有很多类型的弹出层,指定type:2,可以弹出具体的html页面
最主要的问题在于:如何在弹出的页面,当调用后台接口之后根据条件关闭弹窗:
4 下拉框选择事件
另外对某个dom元素的显示和隐藏:显示:show(),隐藏:hide()
5 数据回显:
layui有个form.val()数据回显的功能,不过我一直没有实现,采用了最原始的方式回显的。
还有设置dom元素属性值是使用:attr(),这个也耽误了好长时间(一个后端人员做前端是耽误时间)