index.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. <html lang="zh">
  2. <head>
  3. <title>登录</title>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  6. <script src="/jquery.min.js"></script>
  7. <script src="/vue.js"></script>
  8. <script src="/elementui.js"></script>
  9. <script src="/js.cookie.min.js"></script>
  10. <link rel="stylesheet" type="text/css" href="/elementui.css">
  11. <style>
  12. .login-card {
  13. width: 350px;
  14. margin: 20px auto 0 auto;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <div id="app">
  20. <div>
  21. <el-card class="box-card login-card">
  22. <div slot="header">
  23. <span>身份验证</span>
  24. </div>
  25. <el-input :disabled="isLoading" minlength="6" maxlength="18" @keydown.native.enter="login" v-model="password" placeholder="验证码" type="password"></el-input>
  26. <el-button @click="login" style="margin-top:20px;display: block;margin-left: auto;margin-right: auto;" type="primary" plain :loading="isLoading">登录</el-button>
  27. </el-card>
  28. </div>
  29. </div>
  30. <script>
  31. var app;
  32. var vue = new Vue({
  33. el: '#app',
  34. data: {
  35. apiUrl: '/api',
  36. isLoading: false,
  37. password: ""
  38. },
  39. methods: {
  40. req(url, method, data) {
  41. data = data ? JSON.stringify(data) : "";
  42. return new Promise(function(resolve, reject) {
  43. $.ajax({
  44. type: method,
  45. url: url,
  46. data: data ? data : "",
  47. contentType: data ? "application/json" : "",
  48. success: function(data) {
  49. resolve(data);
  50. },
  51. error: function(err) {
  52. reject(err);
  53. }
  54. });
  55. });
  56. },
  57. login() {
  58. this.isLoading = true;
  59. this.req(this.apiUrl + "/admin/login", "POST", { "key": this.password }).then((data) => {
  60. this.isLoading = false;
  61. if (data["success"] === 1) {
  62. this.$message.closeAll();
  63. this.$message({
  64. type: 'success',
  65. showClose: true,
  66. message: "验证成功"
  67. });
  68. location.href = "/admin/home.html";
  69. }
  70. else {
  71. this.$message.closeAll();
  72. this.$message({
  73. type: 'error',
  74. showClose: true,
  75. message: data["msg"]
  76. });
  77. }
  78. }).catch((err) => {
  79. this.isLoading = false;
  80. this.$message.closeAll();
  81. this.$message({
  82. type: 'error',
  83. showClose: true,
  84. message: "服务器错误"
  85. });
  86. });
  87. },
  88. },
  89. mounted: function() {
  90. app = this;
  91. var token = Cookies.get("admin_token");
  92. if (token) {
  93. this.isLoading = true;
  94. this.req(this.apiUrl + "/admin/login/cookie", "GET", null).then((data) => {
  95. this.isLoading = false;
  96. if (data && data["success"]) {
  97. location.href = "/admin/home.html";
  98. }
  99. else {
  100. Cookies.set("admin_token", "");
  101. }
  102. }).catch(() => {
  103. this.isLoading = false;
  104. Cookies.set("admin_token", "");
  105. });
  106. }
  107. }
  108. });
  109. </script>
  110. </body>
  111. </html>