![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
#@layout() #define main() <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>学生添加</legend> </fieldset> <form class="layui-form" action="/student/save" method="post"> <input type="hidden" name="student.id" value="#(student.id??)" /> <div class="layui-form-item"> <label class="layui-form-label">学生账号</label> <div class="layui-input-block"> <input type="text" name="student.account" value="#(student.account??)" lay-verify="title" autocomplete="off" placeholder="请输入姓名" class="layui-input" required> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">学生密码</label> <div class="layui-input-block"> <input type="password" name="student.password" value="#(student.password??)" lay-verify="title" autocomplete="off" placeholder="请输入密码" class="layui-input" required> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">学生姓名</label> <div class="layui-input-block"> <input type="text" name="student.xueName" value="#(student.xueName??)" lay-verify="title" autocomplete="off" placeholder="请输入姓名" class="layui-input" required> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">学生性别</label> <div class="layui-input-block"> <input type="radio" name="student.xueSex" value="男" title="男" #if( student.xueSex?? == '男' ) checked="" #end ><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div>男</div></div> <input type="radio" name="student.xueSex" value="女" title="女" #if( student.xueSex?? == '女' ) checked="" #end ><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>女</div></div> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">学生班级</label> <div class="layui-input-block"> <input type="text" name="student.xueClass" value="#(student.xueClass??)" lay-verify="title" autocomplete="off" placeholder="请输入班级" class="layui-input" required> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">学生身份</label> <div class="layui-input-block"> <input type="radio" name="student.is_admin" value="0" title="普通学生" #if( student.is_admin?? == 0 ) checked="" #end ><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div>普通学生</div></div> <input type="radio" name="student.is_admin" value="1" title="管理员" #if( student.is_admin?? == 1 ) checked="" #end><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>管理员</div></div> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">学生邮箱</label> <div class="layui-input-block"> <input type="text" name="student.xueEmail" value="#(student.xueEmail??)" lay-verify="title" autocomplete="off" placeholder="请输入班级" class="layui-input" required> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> <script src="/static/layui/layui.js"></script> <script> //Demo layui.use('form', function(){ var form = layui.form; //监听提交 form.render(); form.on('submit(formDemo)', function(data){ layer.msg(JSON.stringify(data.field)); return false; }); }); </script> #end
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
#@layout() #define main() <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>静态表格</legend> </fieldset> <div style="margin-left:20px;"> <div> <div> <button class="layui-btn layuiadmin-btn-list" data-type="add" onclick="window.location.href='/student/add'">添加学生</button> </div> </div> <div class="layui-form"> <table class="layui-table"> <colgroup> <col width="150"> <col width="150"> <col width="200"> <col> </colgroup> <thead> <tr> <th>编号</th> <th>账号</th> <th>密码</th> <th>姓名</th> <th>性别</th> <th>班级</th> <th>身份</th> <th>邮箱</th> <th>操作</th> </tr> </thead> <tbody> #for(x : list.getList()) <tr> <td>#(x.id)</td> <td>#(x.account)</td> <td>#(x.password)</td> <td>#(x.xueName)</td> <td>#(x.xueSex)</td> <td>#(x.xueClass)</td> <td> #if ( x.is_admin == 1) 管理员 #else 普通学生 #end </td> <td>#(x.xueEmail)</td> <td> <div class="layui-table-cell laytable-cell-1-action"> <a class="layui-btn layui-btn-normal layui-btn-xs" href="/student/edit/#(x.id)"><i class="layui-icon layui-icon-edit"></i>编辑</a> <a class="layui-btn layui-btn-warm layui-btn-xs" href="/student/delete/#(x.id)"><i class="layui-icon layui-icon-delete"></i>删除</a> </div> </td> </tr> #end </tbody> </table> </div> #@paginate(list.pageNumber, list.totalPage, "/student/list/") </div> #end
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
#@layout() #define main() <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>动态表格</legend> </fieldset> <div style="margin-left:20px;" > <div class="layui-btn-group demoTable"> <button class="layui-btn" data-type="getCheckData">获取选中行数据</button> <button class="layui-btn" data-type="getCheckLength">获取选中数目</button> <button class="layui-btn" data-type="isAll">验证是否全选</button> </div> <table class="layui-table" lay-data="{ url:'/student/lists', page:true, id:'id'}" lay-filter="demo"> <thead> <tr> <th lay-data="{type:'checkbox', fixed: 'left'}"></th> <th lay-data="{field:'id', width:80,sort: true, fixed: true}">编号</th> <th lay-data="{field:'account'}">学生账号</th> <th lay-data="{field:'password'}">学生姓名</th> <th lay-data="{field:'xueName'}">学生密码</th> <th lay-data="{field:'xueSex'}">学生性别</th> <th lay-data="{field:'xueClass'}">学生班级</th> <th lay-data="{field:'is_admin'}">学生身份</th> <th lay-data="{field:'xueEmail'}">学生邮箱</th> <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}">操作</th> </tr> </thead> </table> </div> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-primary 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> #end <script src="/static/layui/layui.js" charset="utf-8"></script> <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 --> <script> layui.use('table', function(){ var table = layui.table; //监听表格复选框选择 table.on('checkbox(demo)', function(obj){ console.log(obj) }); layer.msg('这是动态表格,www.hiai.top'); //监听工具条 table.on('tool(demo)', function(obj){ var data = obj.data; if(obj.event === 'detail'){ layer.msg('ID:'+ data.id + ' 的查看操作'); } else if(obj.event === 'del'){ layer.confirm('真的删除行么', function(index){ obj.del(); layer.close(index); // $.post('/student/delete', {id:id}, function(str){ //}); }); } else if(obj.event === 'edit'){ //$.post("/student/edit",{"id":id} layer.alert('编辑行:<br>'+ JSON.stringify(data)) } }); var $ = layui.$, active = { getCheckData: function(){ //获取选中数据 var checkStatus = table.checkStatus('id') ,data = checkStatus.data; layer.alert(JSON.stringify(data)); } ,getCheckLength: function(){ //获取选中数目 var checkStatus = table.checkStatus('id') ,data = checkStatus.data; layer.msg('选中了:'+ data.length + ' 个'); } ,isAll: function(){ //验证是否全选 var checkStatus = table.checkStatus('id'); layer.msg(checkStatus.isAll ? '全选': '未全选') } }; $('.demoTable .layui-btn').on('click', function(){ var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); }); </script>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
#@layout() #define main() <div style="padding: 15px;"> <fieldset class="layui-elem-field layui-field-title"> <legend>首页</legend> </fieldset> <blockquote class="layui-elem-quote"> 欢迎用户:#(session.loginUser.account) </blockquote> <blockquote class="layui-elem-quote"> 用户姓名:#(session.loginUser.xueName) </blockquote> <blockquote class="layui-elem-quote"> 开发者:<a href="http://www.hiai.top">www.hiai.top</a> </blockquote> </div> #end
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="https://www.hiai.top/usr/themes/HIAI/favicon.ico"> <title>找回密码</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link rel="stylesheet" type="text/css" href="/static/login/vendor/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="/static/login/fonts/font-awesome-4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="/static/login/fonts/iconic/css/material-design-iconic-font.min.css"> <link rel="stylesheet" type="text/css" href="/static/login/css/util.css"> <link rel="stylesheet" type="text/css" href="/static/login/css/main.css"> </head> <body> <div class="limiter"> <div class="container-login100" style="background-image: url('/static/login/images/bg-02.jpg');"> <div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54"> <form class="login100-form validate-form" action="/emailsend" method="post"> <span class="login100-form-title p-b-49">找回密码</span> <div class="wrap-input100 validate-input m-b-23" data-validate="请输入用户邮箱"> <span class="label-input100">用户邮箱</span> <input class="input100" type="text" name="xueEmail" placeholder="请输入用户邮箱" autocomplete="off" > <span class="focus-input100" data-symbol=""></span> </div> <div class="text-right p-t-8 p-b-31"> <a href="/">返回登录</a> </div> <div class="container-login100-form-btn"> <div class="wrap-login100-form-btn"> <div class="login100-form-bgbtn"></div> <button class="login100-form-btn">发送邮件</button> </div> </div> <div class="txt1 text-center p-t-10"> #if(errorMsg) <span style="color: red">#(errorMsg)</span> #end </div> </form> </div> </div> </div> <script src="/static/login/vendor/jquery/jquery-3.2.1.min.js"></script> <script src="/static/login/js/main.js"></script> </body> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?ce0a6af43c652c3267509e86227948e0"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="https://www.hiai.top/usr/themes/HIAI/favicon.ico"> <title>用户登录</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link rel="stylesheet" type="text/css" href="/static/login/vendor/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="/static/login/fonts/font-awesome-4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="/static/login/fonts/iconic/css/material-design-iconic-font.min.css"> <link rel="stylesheet" type="text/css" href="/static/login/css/util.css"> <link rel="stylesheet" type="text/css" href="/static/login/css/main.css"> </head> <body> <div class="limiter"> <div class="container-login100" style="background-image: url('/static/login/images/bg-02.jpg');"> <div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54"> <form class="login100-form validate-form" action="/login" method="post"> <span class="login100-form-title p-b-49">用户登录</span> <div class="wrap-input100 validate-input m-b-23" data-validate="请输入用户名"> <span class="label-input100">用户名</span> <input class="input100" type="text" name="account" placeholder="请输入用户名" autocomplete="off"> <span class="focus-input100" data-symbol=""></span> </div> <div class="wrap-input100 validate-input" data-validate="请输入密码"> <span class="label-input100">密码</span> <input class="input100" type="password" name="password" placeholder="请输入密码"> <span class="focus-input100" data-symbol=""></span> </div> <div class="text-right p-t-8 p-b-31"> <a href="/redme">忘记密码?</a> </div> <div class="container-login100-form-btn"> <div class="wrap-login100-form-btn"> <div class="login100-form-bgbtn"></div> <button class="login100-form-btn">登 录</button> </div> </div> <div class="txt1 text-center p-t-10"> #if(errorMsg) <span style="color: red">#(errorMsg)</span> #end </div> <!-- <div class="flex-col-c p-t-25"> <a href="javascript:" class="txt2">立即注册</a> </div> --> </form> </div> </div> </div> <script src="/static/login/vendor/jquery/jquery-3.2.1.min.js"></script> <script src="/static/login/js/main.js"></script> </body> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?ce0a6af43c652c3267509e86227948e0"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
#define layout() <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>学生管理系统</title> <link rel="stylesheet" href="/static/layui/css/layui.css"> <link rel="shortcut icon" href="https://www.hiai.top/usr/themes/HIAI/favicon.ico"> </head> <body class="layui-layout-body"> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <div class="layui-logo">layui 后台布局</div> <!-- 头部区域(可配合layui已有的水平导航) --> <ul class="layui-nav layui-layout-left"> <li class="layui-nav-item"><a href="/student">首页</a></li> <li class="layui-nav-item"><a href="http://www.hiai.top">www.hiai.top</a></li> </ul> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item"> <a href="javascript:;"> <img src="/static/logo.jpg" class="layui-nav-img">#(session.loginUser.xueName) </a> </li> <li class="layui-nav-item"><a href="/logout">退了</a></li> </ul> </div> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧导航区域(可配合layui已有的垂直导航) --> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li class="layui-nav-item layui-nav-itemed"> <a class="" href="javascript:;">学生管理</a> <dl class="layui-nav-child"> <dd><a href="/student/list">静态列表</a></dd> <dd><a href="/student/listStu">动态列表</a></dd> <dd><a href="/student/add">添加学生</a></dd> </dl> </li> </ul> </div> </div> <div class="layui-body"> <!-- 内容主体区域 --> #@main() </div> <div class="layui-footer"> <!-- 底部固定区域 --> © hiai.top 学生管理系统 </div> </div> <script src="/static/layui/layui.js"></script> <script> //JavaScript代码区域 layui.use('element', function(){ var element = layui.element; }); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?ce0a6af43c652c3267509e86227948e0"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html> #end
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
#define paginate(currentPage, totalPage, link) #if(totalPage <= 0 || currentPage > totalPage) #return #end #setLocal(startPage = currentPage - 4) #if (startPage < 1) #setLocal(startPage = 1) #end #setLocal(endPage = currentPage + 4) #if (endPage > totalPage) #setLocal(endPage = totalPage) #end <div class="pagination" id="demo1" style="text-align: center;"> <div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-2"> #if (currentPage <= 8) #setLocal(startPage = 1) #end #if ((totalPage - currentPage) < 8) #setLocal(endPage = totalPage) #end #if (currentPage == 1) <span class="disabled prev_page">上页</span> #else <a href="#(link)#(currentPage - 1)#(append)" class="prev_page">上页</a> #end #if (currentPage > 8) <a href="#(link)#(1)#(append)">#(1)</a> <a href="#(link)#(2)#(append)">#(2)</a> <span class="gap">…</span> #end #for(i : [startPage..endPage]) #if (currentPage == i) <span class="current">#(i)</span> #else <a href="#(link)#(i)#(append)">#(i)</a> #end #end #if ((totalPage - currentPage) >= 8) <span class="gap">…</span> <a href="#(link)#(totalPage - 1)#(append)">#(totalPage - 1)</a> <a href="#(link)#(totalPage)#(append)">#(totalPage)</a> #end #if (currentPage == totalPage) <span class="disabled next_page">下页</span> #else <a href="#(link)#(currentPage + 1)#(append)" class="next_page" rel="next">下页</a> #end </div> </div> #end