关于登陆
首先，返回json数据的时候，需要把状态码，msg，和数据装到map里面，不管你怎么想，你得按照这种格式来返回，token是可以改的，但不建议改，除非你的后台需要多个用户登陆，分开操作，下面是示例：
Map map = new HashMap(); Map map1 = new HashMap(); map.put("code", 0); map.put("msg", "登录成功"); map1.put("access_token", "c262e61cd13ad99fc650e6908c7e5e65b63d2f32185ecfed6b801ee3fbdd5c0a"); map.put("data", map1)； return map;
只有这样返回的才能被layui认可。你自己的登陆验证做完，根据service层的返回值，判断是怎么返回map集合。上面的code的值不能返回200.原因是layui里面很多地方认为成功是0，这个0配置在/src/main/webapp/src/config.js里面。我不建议你改，如果非要改请准备接受出现很多错误的情况。
关于开始从layuiadmin文件夹里取需要的东西
layui的包里面选择src和start文件夹，复制到项目的访问根路径下面。这样来讲，整个准备工作就好了。然后是在src的同级创建一个html或者jsp，这个文件用来在webxml里面设置访问首页。
文件的内容如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link rel="stylesheet" href="start/layui/css/layui.css" media="all"> <script> /^http(s*):\/\//.test(location.href) || alert('请先部署到 localhost 下再访问'); </script> </head> <body> <div id="LAY_app"></div> <script src="start/layui/layui.js"></script> <script> location.href="start/index.html#/user/login" <!--这里东西不能少--> <!--首先在web.xml里面配置访问这个login.html--> <!--进这里之后先加载layui的js文件，在真的登录页面里没加，但是要用--> <!--location.href是做跳转的，先去start/index.html加载配置，然后去配置里面找indPage: ['/user/login' //登入页,'/user/reg' //注册页,'/user/forget' //找回密码,'/template/tips/test' //独立页的一个测试 demo]--> <!--到这里整个跳转就完成了，即将跳往真的登录页面。--> </script> </body>
上面的红字是关键，没这句，不会跳到真的登陆页面。到这里就会正常的跳转到登录了。
在/src/views/user/login.html里面按照你的想法来改登陆页。他接收数据的json示例在/start/json/user/login.js里面。也就是最开头我给你写的map这种格式的。在这个文件的最下面是
//请求登入接口 admin.req({ url: './json/user/login.js' //实际使用请改成服务端真实接口 ,data: obj.field//这里把数据封装成json的了，在springmvc里面会自己解析。 ,done: function(res){ //请求成功后，写入 access_token layui.data(setter.tableName, { key: setter.request.tokenName ,value: res.data.access_token }); //登入成功的提示与跳转 layer.msg('登入成功', { offset: '15px' ,icon: 1 ,time: 1000 }, function(){ location.hash = search.redirect ? decodeURIComponent(search.redirect) : '/'; //这里在重新指向一个新的url，也就是登录成功后指向首页index，到这里整个登录就完成了。 });
登陆请求接口，也是你根据自己的需要进行修改和改善。
更改一个细节参数
/start/index.html这个文件里面改以下的参数，改的原因大概是因为线上和开发的时候加载的配置文件不一样？但是实际上线的时候好像没有影响。这就挠头了。
layui.config({ base: '../src/' //指定 layuiAdmin 项目路径，本地开发用 src，线上用 dist ,version: '1.1.0' }).use('index');
到这里。layuiAdmin应该就可以在你的项目里运行了。
配置左侧边栏
当时找这里的时候，不断的按f12，看源码，然后还是前端的找到的。具体配置在/start/json/menu.js里面，基本你打开这个文件，你就知道该怎么配置了。但是重点在于别忘了逗号。别忘了修改name和jump这两个部分。逗号不加会出错。name相同会产生粘结，对响应不太好。jump就是实际的跳转地址。一般用home/homepage2这样的形式表示具体的跳转页面，因为在config.js里面对后缀和前缀做了定义，你参考springmvc的理解就可以。基本你拿到文件，然后点开view这个文件夹，你就会发现豁然开朗。menu.js后面用得很多，在右侧显示的页面都需要这个来加到单页版里面。算是比较重要的东西了。
layui的增删改查
先放三个文件名，这三个文件会放在下面的百度云链接里。
首先在上面的menu.js添加一个接口，这样你的左侧边栏才能打开你想展示的页面。添加的格式照着他写好的改一下就可以，不带.html后缀名。然后再webapp/src/views这个文件夹下建一个文件夹来存放你的页面。一般来说要写两个页面。我的示例是/Market/src/main/webapp/src/views/product/product.html和/Market/src/main/webapp/src/views/product/product-form.html根据你的需要创建文件和文件名，但是我推荐将文件和文件夹名写成我这种格式的。理由是，你在ecplise里面可以方便的用ctrl+f进行关键词替换，迅速的创建第二个页面。比如说我的文件里面是product，你可以把我的替换成比如money之类的，都随你心意。为了可以访问到，我建议你在menu.js里面也这么写。保持一致，不会出现404视图异常。l另外有一个product.js的文件，这个文件的作用是存储页面的js代码。存放路劲为/Market/src/main/webapp/src/controller/product.js。里面的东西比较多，也比较重要。product.html，这个不多说，就是你点击侧边栏后展示的页面，product-from.html这个是点击添加或者修改后弹出来的一个表单，表单的提交会被监听，然后进行ajax请求。那么第一步就做好了。
在product.html里，里面代码如下：
<title>用户列表</title> <div class="layui-card layadmin-header"> <div class="layui-breadcrumb" lay-filter="breadcrumb"> <a lay-href="">主页</a> <a> <cite>产品管理</cite> </a> </div> </div> <div class="layui-fluid"> <div class="layui-card"> <div class="layui-card-body"> <div style="padding-bottom: 10px;"> <button class="layui-btn product-form" data-type="add">新增</button> </div> <table id="LAY-product-product" lay-filter="LAY-product-product"></table> <script type="text/html" id="icon"> <img style="display: inline-block; width: 33px; height: 33px;" src= {{ d.icon }} onclick="previewImg(this)"> </script> <script type="text/html" id="table-product-product"> <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-del"></i>删除</a> </script> </div> </div> </div> <script> function previewImg(obj) { var img = new Image(); img.src = obj.src; var imgHtml = "<img src='" + obj.src + "' width='500px' height='500px'/>"; //弹出层 layer.open({ type : 1, shade : 0.8, offset : 'auto', area : [ 500 + 'px', 550 + 'px' ], shadeClose : true, scrollbar : false, title : "图片预览", //不显示标题 content : imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响 cancel : function() { //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 }); } }); } layui.use('product', layui.factory('product')).use(['admin', 'product', 'table'], function() { var $ = layui.$, admin = layui.admin, view = layui.view, table = layui.table, form = layui.form; form.render(null, 'layadmin-product-form'); //监听搜索 form.on('submit(LAY-product-back-search)', function(data) { var field = data.field; console.log(field) //执行重载 table.reload('LAY-product-product', { method: "post", url: "/mall/searchWkproduct", where: field }); }); //事件 var active = { add: function () { admin.popup({ title: '添加产品' , area: ['550px', '550px'] , success: function (layero, index) { view(this.id).render('product/product-form').done(function () { //监听提交 form.on('submit(product-form-submit)', function (data) { var field = data.field; //获取提交的字段 console.log(field) $.ajax({ type: "POST", //请求方式 post dataType: 'json', //数据类型 json contentType: "application/json; charset=utf-8", url: "", // 请求地址 data: JSON.stringify(field), //请求附带参数 success: function (data) { console.log(data) layui.table.reload('LAY-product-product'); //重载表格 layer.close(index); //执行关闭 } }); }); }); } }); } } $('.layui-btn.product-form').on('click', function() {var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); }); </script>
