| <!DOCTYPE html> |
| |
| <html xmlns:th="http://www.thymeleaf.org"> |
| |
| <head> |
| <title>用户登录</title> |
| <meta name="_csrf" th:content="${_csrf.token}" /> |
| <!-- default header name is X-CSRF-TOKEN --> |
| <meta name="_csrf_header" th:content="${_csrf.headerName}" /> |
| <link rel="stylesheet" type="text/css" th:href="@{/static/libs/layui/css/layui.css}" /> |
| <link rel="stylesheet" type="text/css" th:href="@{/static/custom/css/login.css}" /> |
| </head> |
| <body> |
| <div class="login-wrapper"> |
| |
| <div class="login-header"> |
| <img th:src="@{/static/custom/images/logo.png}"> logo |
| </div> |
| |
| <div class=" login-body"> |
| <div class="layui-card"> |
| <div class="layui-card-header"> |
| <i class="layui-icon layui-icon-engine"></i> 用户登录 |
| </div> |
| <div class="layui-card-body layui-form layui-form-pane"> |
| <div class="layui-form-item"> |
| <label class="layui-form-label"><i class="layui-icon layui-icon-username"></i></label> |
| <div class="layui-input-block"> |
| <input name="username" type="text" lay-verify="required" placeholder="账号" |
| class="layui-input"> |
| <input type="hidden" |
| th:name="${_csrf.parameterName}" |
| th:value="${_csrf.token}"/> |
| </div> |
| </div> |
| <div class="layui-form-item"> |
| <label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label> |
| <div class="layui-input-block"> |
| <input name="password" type="password" lay-verify="required" placeholder="密码" |
| class="layui-input"> |
| </div> |
| </div> |
| <div class="layui-form-item"> |
| <label class="layui-form-label"><i class="layui-icon layui-icon-vercode"></i></label> |
| <div class="layui-input-block"> |
| <div class="layui-row inline-block"> |
| <div class="layui-col-xs7"> |
| <input name="imageCode" type="text" placeholder="验证码" |
| class="layui-input"> |
| </div> |
| <div class="layui-col-xs5" style="padding-left: 10px;"> |
| <img width="100px" height="35px" class="login-captcha" th:src="@{/code/image}"> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="layui-form-item"> |
| <!--<a href="javascript:;" class="layui-link">帐号注册</a>--> |
| <a href="javascript:;" class="layui-link pull-right">忘记密码？</a> |
| </div> |
| <div class="layui-form-item"> |
| <button lay-filter="login-submit" class="layui-btn layui-btn-fluid" lay-submit>登 录</button> |
| </div> |
| <!--<div class="layui-form-item login-other">--> |
| <!--<label>第三方登录</label>--> |
| <!--<a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a>--> |
| <!--<a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a>--> |
| <!--<a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a>--> |
| <!--</div>--> |
| </div> |
| </div> |
| </div> |
| |
| <div class="login-footer"> |
| <p>© 2019 <a href="javascript:;" target="_blank">上海树维信息科技有限公司 版权所有</a></p> |
| <!--<p>--> |
| <!--<span><a href="javascript:;" target="_blank">前往github</a></span>--> |
| <!--<span><a href="https://gitee.com/andyzy/zy-admin.git" target="_blank">前往gitee</a></span>--> |
| <!--<span><a href="javascript:;" target="_blank">文档说明</a></span>--> |
| <!--</p>--> |
| </div> |
| </div> |
| |
| <script type="text/javascript" th:src="@{/static/libs/layui/layui.js}" ></script> |
| <script> |
| layui.config({ |
| base: 'custom/module/' |
| }).use(['form'], function () { |
| var $ = layui.jquery; |
| var form = layui.form; |
| // 表单提交 |
| form.on('submit(login-submit)', function (obj) { |
| var field = obj.field; |
| layer.load(2); |
| $.ajax({ |
| url: '/login/form', |
| data: field, |
| type: 'POST', |
| success: function (data) { |
| console.log(data); |
| if (200 == data.code) { |
| layer.msg('登录成功', {icon: 1, time: 1500}, function () { |
| location.replace('./'); |
| }); |
| } else { |
| layer.closeAll('loading'); |
| layer.msg(data.msg, {icon: 5}); |
| $('.login-captcha').trigger('click'); |
| } |
| }, |
| error: function (xhr) { |
| console.log(xhr); |
| layer.closeAll('loading'); |
| layer.msg('登录失败', {icon: 5}); |
| } |
| }); |
| }); |
| |
| // 图形验证码 |
| $('.login-captcha').click(function () { |
| this.src = this.src + '?t=' + (new Date).getTime(); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |