工作需要开发一个记录收费信息项目，我选择了用 Layui 作为前端框架模板，完成开发后记一下一些比较常用或者踩过的小坑： ①样式文件以及JS文件的引入：
//注意这里引入方式除了平常的 href 和 src ，最好再加上 th:href="@{}"，src="@{}" 其中的 @{} 里边必须要以“/”开头，才能正确根据项目路径找到相应的静态资源 <link rel="stylesheet" th:href="@{/layui/css/layui.css}" href="../static/layui/css/layui.css" type="text/css" media="all"> <script th:src="@{/layui/layui.js}" src="../static/layui/layui.js" charset="utf-8"></script>②初始化使用引入JS：
//form：加载form表单模块，需要使用时加载自己需要的模块，具体看官方文档 //$:加载内部的JS layui.use(['form', "jquery"], function() { var form = layui.form, $ = layui.$; /**在这里做要处理的逻辑或者和后端交互，前端赋值，方法定义等**/ });③前端页面间的数据传递：
layui.use(['form', "jquery"], function() { var form = layui.form, $ = layui.$; /**【路径存放】**/ layui.sessionData('pathConfig', { key: 'path', value: 'http://localhost:8080/MavenBoot' }); //layui.sessionData的功能不止如此，还能处理更多的数据类型，具体没用到我就不说明了，有兴趣的看文档 /**【在别的页面可以进行路径获取】**/ var localhostPath = layui.sessionData('pathConfig'); });④form表单提交事件：
<form class="layui-form" lay-filter="example"> <div class="logoHead"> <h2 style="margin-top: 15px;text-align: center;">用户登录</h2> </div> <div class="usernameWrapDiv"> <label>用户名:</label> </div> <div class="usernameDiv"> <i class="layui-icon layui-icon-username adminIcon"></i> <input class="layui-input adminInput" type="text" name="username" id="name" placeholder="用户名" lay-verify="required"> </div> <div class="usernameWrapDiv"> <div class="usernameLabel"> <label>密码:</label> </div> <div class="passwordDiv"> <i class="layui-icon layui-icon-password adminIcon"></i> <input class="layui-input adminInput" type="password" name="password" id="pasd" placeholder="密码" lay-verify="required"> </div> </div> <div class="usernameWrapDiv"> <div class="submitDiv"> <button type="submit" class="layui-btn" lay-submit="" lay-filter="login">登录</button> </div> </div> </form> layui.use(['form', "jquery"], function() { var form = layui.form, $ = layui.$; /**监听提交**/ /**【可以直接拿表单合成的json字符串数据：】参数，updateData 中包含了表单中的数据 var updateData = JSON.stringify(data.field); data: { updateData : updateData , }, **/ form.on('submit(login)', function(data) { var username = $('#name').val(); //【类似于jQuery通过ID单个输入框赋值、取值】 var password = $('#pasd').val(); $.ajax({ type: "POST", url: "http://localhost:8080/MavenBoot/validateUser", //访问路径 data: { //传递参数 username: username, password: password, }, success: function(data) { if (data.result === "success") { var userData = JSON.stringify(data.user); var obj = JSON.parse(userData); if ( obj['stop'] !== "1" ){ layui.sessionData('user',{ key:"userData" , value:{ optCode : obj.optCode, optName : obj.optName, badmin : obj.badmin, optPWD : obj.optPWD } }); layer.msg("用户登录成功"); window.location.href = "/MavenBoot/index"; //跳转路径 }else{ layer.msg("此账户已被冻结，请联系管理员解封！"); return false; } } else if (data.result === "fail"){ layer.msg("请确认用户名和密码是否正确！"); return false; } }, error: function() { layer.msg("用户登录错误"); return false; } }); return false; }); });⑤表格赋值：
//展示数据的表格 <table class="layui-hide" id="LAY_table_charge" lay-filter="user"></table> //赋值 layui.use(['form', 'table', 'laydate','layer'], function() { layui.use(['form', 'table', 'laydate','layer'], function() { var form = layui.form, laydate = layui.laydate, $=layui.$, layer = layui.layer, table = layui.table; var localhostPath = layui.sessionData('pathConfig'); //获得路径 console.log("【监管数据统计路径】" + localhostPath.path); //时间选择器 laydate.render({ //搜索开始时间 elem: '#startTime' }); laydate.render({ //搜索结束时间 elem: '#endTime' }); laydate.render({ //删除开始时间 elem: '#DelSTime' }); laydate.render({ //删除结束时间 elem: '#DelETime' }); //表格方法级渲染 table.render({ elem: '#LAY_table_charge', url: localhostPath.path+'/selectAll', toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板 defaultToolbar: ['filter', 'exports', 'print'], cols: [ [ {field: 'carno' , title: '车牌号'}, {field: 'wj_usetime' , title: '外检耗时'}, {field: 'aj_usetime' , title: '安检耗时'}, {field: 'hj_usetime' , title: '环检耗时'}, {field: 'usetime' , title: '总耗时'}, {field: 'result' , title: '检测(1：完成/0：未完成)'}, {field: 'operator' , title: '开单员'}, ] ], limits: [10,20,50,100,500,1000,5000], limit: 10, page: true }); });⑥比较常用的页面自定义弹窗或者提示框：layer.open
/* 如果是页面层 */ layer.open({ type: 1, content: '传入任意的文本或html' //这里content是一个普通的String，使用字符串拼接 }); /* 官网例子 */ layer.open({ type: 1 ,title: false //不显示标题栏 ,closeBtn: false ,area: '300px;' ,shade: 0.8 ,id: 'LAY_layuipro' //设定一个id，防止重复弹出 ,btn: ['火速围观', '残忍拒绝'] ,btnAlign: 'c' ,moveType: 1 //拖拽模式，0或者1 ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br>layer ≠ layui<br><br>layer只是作为Layui的一个弹层模块，由于其用户基数较大，所以常常会有人以为layui是layerui<br><br>layer虽然已被 Layui 收编为内置的弹层模块，但仍然会作为一个独立组件全力维护、升级。<br><br>我们此后的征途是星辰大海 ^_^</div>' ,success: function(layero){ var btn = layero.find('.layui-layer-btn'); btn.find('.layui-layer-btn0').attr({ href: 'http://www.layui.com/' ,target: '_blank' }); } }); layer.open({ type: 2, content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no'] }); layer.open({ type: 2, //iframe举例 title: '添加用户' , //标题栏 area: ['80%', '85%'], //弹窗大小 btn: ['关闭窗口'], //按钮 btnAlign: 'c', //按钮位置 shade: 0.8, id: 'userAdd' , //设定一个id，防止重复弹出 moveType: 0 , //拖拽模式，0或者1 content: localhostPath.path+'/addEmployeePage' //路径：localhostPath.path从layui.sessionData中拿到 }); //提示框 layer.msg("错误");