register.html 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  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. <!--<script src="vconsole.min.js"></script>
  12. <script>
  13. window.vConsole = new window.VConsole({
  14. defaultPlugins: ['system', 'network', 'element', 'storage'], // 可以在此设定要默认加载的面板
  15. maxLogNumber: 1000,
  16. // disableLogScrolling: true,
  17. onReady: function() {
  18. console.log('vConsole is ready.');
  19. },
  20. onClearLog: function() {
  21. console.log('on clearLog');
  22. }
  23. });
  24. </script>-->
  25. </head>
  26. <body>
  27. <div id="app">
  28. <div>
  29. <el-card class="box-card register-card">
  30. <div slot="header" class="clearfix">
  31. <span>注册</span>
  32. <el-button style="float: right; padding: 3px 0;" type="text" @click="toLogin">
  33. 登录
  34. </el-button>
  35. </div>
  36. <el-input :disabled="isLoading" minlength="1" maxlength="18" @keydown.native.enter="register" style="margin-top:20px;" v-model="userInfo.name" placeholder="用户名"></el-input>
  37. <el-input :disabled="isLoading" minlength="6" maxlength="18" @keydown.native.enter="register" style="margin-top:20px;" v-model="userInfo.password" placeholder="密码" type="password"></el-input>
  38. <el-input :disabled="isLoading" minlength="6" maxlength="18" @keydown.native.enter="register" style="margin-top:20px;" v-model="userInfo.password2" placeholder="重复密码" type="password"></el-input>
  39. <el-input :disabled="isLoading" minlength="6" maxlength="18" @keydown.native.enter="register" style="margin-top:20px;" v-model="userInfo.key" placeholder="注册码" type="password"></el-input>
  40. <el-button @click="register" style="margin-top:20px;display: block;margin-left: auto;margin-right: auto;" type="primary" plain :loading="isLoading">注册</el-button>
  41. </el-card>
  42. </div>
  43. </div>
  44. <script>
  45. var app;
  46. var vue = new Vue({
  47. el: '#app',
  48. data: {
  49. apiUrl: '/api',
  50. visible: false,
  51. isLoading: false,
  52. userInfo: {
  53. name: "",
  54. password: "",
  55. password2: ""
  56. }
  57. },
  58. methods: {
  59. req(url, method, data) {
  60. data = data ? JSON.stringify(data) : "";
  61. return new Promise(function(resolve, reject) {
  62. $.ajax({
  63. type: method,
  64. url: url,
  65. data: data ? data : "",
  66. contentType: data ? "application/json" : "",
  67. success: function(data) {
  68. resolve(data);
  69. },
  70. error: function(err) {
  71. reject(err);
  72. }
  73. });
  74. });
  75. },
  76. toLogin() {
  77. location.href = "/";
  78. },
  79. register() {
  80. var name = this.userInfo.name;
  81. var password = this.userInfo.password;
  82. var password2 = this.userInfo.password2;
  83. if (name === "") {
  84. this.$message.closeAll();
  85. this.$message({
  86. type: 'error',
  87. showClose: true,
  88. message: "用户名不能为空"
  89. });
  90. return;
  91. }
  92. if (password === "") {
  93. this.$message.closeAll();
  94. this.$message({
  95. type: 'error',
  96. showClose: true,
  97. message: "密码不能为空"
  98. });
  99. return;
  100. }
  101. if (name.length < 1 || name.length > 18) {
  102. this.$message.closeAll();
  103. this.$message({
  104. type: 'error',
  105. showClose: true,
  106. message: "用户名长度需在1-18位"
  107. });
  108. return;
  109. }
  110. if (password.length < 6 || password.length > 18) {
  111. this.$message.closeAll();
  112. this.$message({
  113. type: 'error',
  114. showClose: true,
  115. message: "密码长度需在6-18位"
  116. });
  117. return;
  118. }
  119. if (password2 === "") {
  120. this.$message.closeAll();
  121. this.$message({
  122. type: 'error',
  123. showClose: true,
  124. message: "重复密码不能为空"
  125. });
  126. return;
  127. }
  128. if (password !== password2) {
  129. this.$message.closeAll();
  130. this.$message({
  131. type: 'error',
  132. showClose: true,
  133. message: "重复密码输入不一致"
  134. });
  135. return;
  136. }
  137. this.isLoading = true;
  138. this.req("/api/auth/register", "POST", { "name": name, "password": password, "password2": password2, "key": this.userInfo.key }).then((data) => {
  139. if (data["success"] === 0) {
  140. this.$message.closeAll();
  141. this.$message({
  142. type: 'error',
  143. showClose: true,
  144. message: data["msg"]
  145. });
  146. this.isLoading = false;
  147. }
  148. else if (data["success"] === 1) {
  149. this.$message.closeAll();
  150. this.$message({
  151. type: 'success',
  152. showClose: true,
  153. message: "注册成功"
  154. });
  155. this.isLoading = false;
  156. location.href = "/home.html";
  157. }
  158. else {
  159. this.$message.closeAll();
  160. this.$message({
  161. type: 'error',
  162. showClose: true,
  163. message: "未知错误1"
  164. });
  165. this.isLoading = false;
  166. }
  167. }).catch((err) => {
  168. this.$message.closeAll();
  169. this.$message({
  170. type: 'error',
  171. showClose: true,
  172. message: "服务器错误1"
  173. });
  174. this.isLoading = false;
  175. });
  176. }
  177. },
  178. mounted: function() {
  179. app = this;
  180. var token = Cookies.get("token");
  181. if (token) {
  182. this.isLoading = true;
  183. this.req(this.apiUrl + "/auth/login/cookie", "GET", null).then((data) => {
  184. console.log(data);
  185. this.isLoading = false;
  186. if (data && data["success"]) {
  187. location.href = "/home.html";
  188. Cookies.set("token", "");
  189. }
  190. }).catch(() => {
  191. this.isLoading = false;
  192. Cookies.set("token", "");
  193. });
  194. }
  195. }
  196. });
  197. </script>
  198. <style>
  199. .register-card {
  200. width: 350px;
  201. margin: 20px auto 0 auto;
  202. }
  203. </style>
  204. </body>
  205. </html>