login.html 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>业务审批系统</title>
  6. <meta name="renderer" content="webkit">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8. <meta name="viewport"
  9. content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  10. <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
  11. <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
  12. <link rel="stylesheet" href="../../layuiadmin/style/login.css" media="all">
  13. <style>
  14. .registerContent {
  15. display: flex;
  16. justify-content: space-between;
  17. flex-direction: row;
  18. }
  19. .registerStyle {
  20. font-size: 16px;
  21. display: inline-block;
  22. padding: 0 15px;
  23. color: #009688;
  24. cursor: pointer;
  25. }
  26. .registerStyle:hover {
  27. text-decoration: underline #009688;
  28. color: #009688;
  29. cursor: pointer;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
  35. <div class="layadmin-user-login-main">
  36. <div class="layadmin-user-login-box layadmin-user-login-header">
  37. <h2>业务审批系统</h2>
  38. </div>
  39. <form class="layui-form" action="" lay-filter="component-form-element">
  40. <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
  41. <div class="layui-form-item">
  42. <label class="layadmin-user-login-icon layui-icon layui-icon-username"
  43. for="LAY-user-login-username"></label>
  44. <input type="text" name="username" id="LAY-user-login-username" placeholder="用户名"
  45. lay-verify="required" autocomplete="off" class="layui-input">
  46. </div>
  47. <div class="layui-form-item">
  48. <label class="layadmin-user-login-icon layui-icon layui-icon-password"
  49. for="LAY-user-login-password"></label>
  50. <input type="password" name="password" id="LAY-user-login-password" autocomplete="off"
  51. lay-verify="required" placeholder="密码" class="layui-input">
  52. </div>
  53. <div class="layui-form-item">
  54. <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="component-form-element">登 录
  55. </button>
  56. </div>
  57. </div>
  58. </form>
  59. </div>
  60. <div class="layui-trans layadmin-user-login-footer">
  61. <p>© 2021 业务审批系统 <a href="http://www.zzliaoyuan.com/" target="_blank">郑州燎原计算机技术有限公司</a></p>
  62. </div>
  63. </div>
  64. <script src="../../layuiadmin/layui/layui.js"></script>
  65. <script>
  66. layui.config({
  67. base: '../../layuiadmin/' //静态资源所在路径
  68. }).extend({
  69. index: 'lib/index' //主入口模块
  70. }).use(['index', 'user'], function () {
  71. var $ = layui.$
  72. , setter = layui.setter
  73. , admin = layui.admin
  74. , form = layui.form
  75. , router = layui.router()
  76. , search = router.search;
  77. if (layui.data(setter.tableName)[setter.request.tokenName]) {
  78. admin.req({
  79. url: '/account/token_refresh/'
  80. , data: {token: layui.data(setter.tableName)[setter.request.tokenName].substr(4)}
  81. , type: 'post'
  82. , done: function (res) {
  83. if (!res.data.error) {
  84. //请求成功后,写入 access_token
  85. layui.data(setter.tableName, {
  86. key: setter.request.tokenName
  87. , value: 'JWT ' + res.data.token
  88. });
  89. location.href = '../index.html'; //后台主页
  90. } else {
  91. layui.data(setter.tableName, {
  92. key: setter.request.tokenName
  93. , value: ''
  94. });
  95. }
  96. }
  97. });
  98. }
  99. form.render();
  100. //提交
  101. form.on('submit(component-form-element)', function (obj) {
  102. //请求登入接口
  103. admin.req({
  104. url: '/account/login/'
  105. , data: obj.field
  106. , type: 'post'
  107. , done: function (res) {
  108. //请求成功后,写入 access_token
  109. layui.data(setter.tableName, {
  110. key: setter.request.tokenName
  111. , value: 'JWT ' + res.data.token
  112. });
  113. layui.data(setter.tableName, {
  114. key: setter.request.userId
  115. , value: res.data.user_id
  116. });
  117. layui.data(setter.tableName, {
  118. key: 'name'
  119. , value: res.data.username
  120. });
  121. layui.data(setter.tableName, {
  122. key: 'permissions'
  123. , value: res.data.permissions
  124. });
  125. //登入成功的提示与跳转
  126. layer.msg('登入成功', {
  127. offset: '15px'
  128. , icon: 1
  129. , time: 1000
  130. }, function () {
  131. location.href = '../index.html'; //后台主页
  132. });
  133. }
  134. });
  135. return false;
  136. });
  137. });
  138. </script>
  139. </body>
  140. </html>