login.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Roma</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <link rel="icon" type="image/x-ico" href=""/>
  8. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
  9. <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  10. <link rel="stylesheet" href="./public/static/amis-sdk/helper.css">
  11. <link rel="stylesheet" href="./public/static/amis-sdk/sdk.css">
  12. <!-- 引入自定义样式 -->
  13. <link rel="stylesheet" href="./public/static/css/login.css">
  14. </head>
  15. <body>
  16. <div id="root" class="app-wrapper"></div>
  17. <script type='text/javascript' src='./public/static/amis-sdk/sdk.js'></script>
  18. <!-- 引入语言包 -->
  19. <script src="./lang/en-US.js"></script>
  20. <script src="./lang/zh-CN.js"></script>
  21. <!-- 引入多语言js处理文件,必须先引入语言包 -->
  22. <script src="./public/static/tools/common.js"></script>
  23. <!-- 引入登录页面JSON -->
  24. <script src="./pages/login/login-json.js"></script>
  25. <script type="text/javascript">
  26. (function () {
  27. let amis = amisRequire('amis/embed');
  28. let languageInfo = getLanguageInfo();
  29. // 页面json内容
  30. const amisJSON = getLoginJson()
  31. let amisScoped = amis.embed(
  32. '#root',
  33. amisJSON,
  34. {
  35. locale: languageInfo.lang
  36. },
  37. {
  38. replaceText: languageInfo.langReplaceText,
  39. langReplaceTextIgnoreKeys: languageInfo.langReplaceTextIgnoreKeys,
  40. fetcher: (params) => {
  41. var systemUri = getSystemIp();
  42. var method = params.method;
  43. var data = params.data;
  44. var body = params.body;
  45. var url = systemUri + params.url;
  46. var form = new FormData();
  47. form = JSON.stringify(params.data);
  48. var ContentType = 'application/x-www-form-urlencoded';
  49. // var ContentType = 'application/json';
  50. let header = {
  51. "Content-Type": ContentType,
  52. "Authorization":'Bearer ' + getToken(),
  53. }
  54. let isFormData = (typeof FormData !== 'undefined') && (params['data'] instanceof FormData);
  55. // if (isFormData) {
  56. // delete header['Content-Type'];
  57. // form = data;
  58. // }
  59. let headers = new Headers(header);
  60. return new Promise(function (resolve, reject) {
  61. fetch(url,{
  62. method: method,
  63. body: params.data,
  64. headers: headers
  65. }).then(function (response) {
  66. return response.json();
  67. }).then(function (res) {
  68. // if (isFormData) {
  69. // data['data'] = res.data;
  70. // }
  71. resolve({ "data": res });
  72. });
  73. });
  74. }
  75. },
  76. );
  77. getVerify();
  78. })();
  79. // 刷新验证码
  80. function refresh_code()
  81. {
  82. getVerify();
  83. // document.querySelector('.code_img').src = 'http://localhost:8081/login/verifyCode?' + Math.random();
  84. }
  85. function getVerify() {
  86. var systemUri = getSystemIp();
  87. // 创建请求对象
  88. var request = new XMLHttpRequest()
  89. request.open('post', systemUri+'/login/verifyCode')
  90. request.send()
  91. // 获取网络请求响应的数据
  92. request.onreadystatechange = function () {
  93. // 响应完毕,并且请求成功
  94. if (request.readyState === 4 && request.status === 200) {
  95. var res = JSON.parse(request.responseText)
  96. document.querySelector('.code_img').src = "data:image/jpeg;base64," + res.img;
  97. localStorage.setItem('captchaToken', res.token);
  98. }
  99. }
  100. }
  101. // 获取登录的token-登录请求不需要登录token
  102. function getToken() {
  103. return localStorage.getItem("apiToken");
  104. }
  105. // 获取验证码的token
  106. function getCaptchaCode() {
  107. return localStorage.getItem("captchaToken");
  108. }
  109. </script>
  110. <style>
  111. .amis-scope .cxd-InputGroup .cxd-TextControl-input:not(:last-child) {
  112. border-right-width: -1;
  113. border-top-right-radius: 0;
  114. border-bottom-right-radius: 0;
  115. }
  116. </style>
  117. </body>
  118. </html>