记spring boot + Layui 数据对接

工作需要开发一个记录收费信息项目，我选择了用 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("错误");