| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211 |
- <html lang="zh">
- <head>
- <title>注册</title>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- <script src="jquery.min.js"></script>
- <script src="vue.js"></script>
- <script src="elementui.js"></script>
- <script src="js.cookie.min.js"></script>
- <link rel="stylesheet" type="text/css" href="elementui.css">
- <!--<script src="vconsole.min.js"></script>
- <script>
- window.vConsole = new window.VConsole({
- defaultPlugins: ['system', 'network', 'element', 'storage'], // 可以在此设定要默认加载的面板
- maxLogNumber: 1000,
- // disableLogScrolling: true,
- onReady: function() {
- console.log('vConsole is ready.');
- },
- onClearLog: function() {
- console.log('on clearLog');
- }
- });
- </script>-->
- </head>
- <body>
- <div id="app">
- <div>
- <el-card class="box-card register-card">
- <div slot="header" class="clearfix">
- <span>注册</span>
- <el-button style="float: right; padding: 3px 0;" type="text" @click="toLogin">
- 登录
- </el-button>
- </div>
- <el-input :disabled="isLoading" minlength="1" maxlength="18" @keydown.native.enter="register" style="margin-top:20px;" v-model="userInfo.name" placeholder="用户名"></el-input>
- <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>
- <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>
- <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>
- <el-button @click="register" style="margin-top:20px;display: block;margin-left: auto;margin-right: auto;" type="primary" plain :loading="isLoading">注册</el-button>
- </el-card>
- </div>
- </div>
- <script>
- var app;
- var vue = new Vue({
- el: '#app',
- data: {
- apiUrl: '/api',
- visible: false,
- isLoading: false,
- userInfo: {
- name: "",
- password: "",
- password2: ""
- }
- },
- methods: {
- req(url, method, data) {
- data = data ? JSON.stringify(data) : "";
- return new Promise(function(resolve, reject) {
- $.ajax({
- type: method,
- url: url,
- data: data ? data : "",
- contentType: data ? "application/json" : "",
- success: function(data) {
- resolve(data);
- },
- error: function(err) {
- reject(err);
- }
- });
- });
- },
- toLogin() {
- location.href = "/";
- },
- register() {
- var name = this.userInfo.name;
- var password = this.userInfo.password;
- var password2 = this.userInfo.password2;
- if (name === "") {
- this.$message.closeAll();
- this.$message({
- type: 'error',
- showClose: true,
- message: "用户名不能为空"
- });
- return;
- }
- if (password === "") {
- this.$message.closeAll();
- this.$message({
- type: 'error',
- showClose: true,
- message: "密码不能为空"
- });
- return;
- }
- if (name.length < 1 || name.length > 18) {
- this.$message.closeAll();
- this.$message({
- type: 'error',
- showClose: true,
- message: "用户名长度需在1-18位"
- });
- return;
- }
- if (password.length < 6 || password.length > 18) {
- this.$message.closeAll();
- this.$message({
- type: 'error',
- showClose: true,
- message: "密码长度需在6-18位"
- });
- return;
- }
- if (password2 === "") {
- this.$message.closeAll();
- this.$message({
- type: 'error',
- showClose: true,
- message: "重复密码不能为空"
- });
- return;
- }
- if (password !== password2) {
- this.$message.closeAll();
- this.$message({
- type: 'error',
- showClose: true,
- message: "重复密码输入不一致"
- });
- return;
- }
- this.isLoading = true;
- this.req("/api/auth/register", "POST", { "name": name, "password": password, "password2": password2, "key": this.userInfo.key }).then((data) => {
- if (data["success"] === 0) {
- this.$message.closeAll();
- this.$message({
- type: 'error',
- showClose: true,
- message: data["msg"]
- });
- this.isLoading = false;
- }
- else if (data["success"] === 1) {
- this.$message.closeAll();
- this.$message({
- type: 'success',
- showClose: true,
- message: "注册成功"
- });
- this.isLoading = false;
- location.href = "/home.html";
- }
- else {
- this.$message.closeAll();
- this.$message({
- type: 'error',
- showClose: true,
- message: "未知错误1"
- });
- this.isLoading = false;
- }
- }).catch((err) => {
- this.$message.closeAll();
- this.$message({
- type: 'error',
- showClose: true,
- message: "服务器错误1"
- });
- this.isLoading = false;
- });
- }
- },
- mounted: function() {
- app = this;
- var token = Cookies.get("token");
- if (token) {
- this.isLoading = true;
- this.req(this.apiUrl + "/auth/login/cookie", "GET", null).then((data) => {
- console.log(data);
- this.isLoading = false;
- if (data && data["success"]) {
- location.href = "/home.html";
- Cookies.set("token", "");
- }
- }).catch(() => {
- this.isLoading = false;
- Cookies.set("token", "");
- });
- }
- }
- });
- </script>
- <style>
- .register-card {
- width: 350px;
- margin: 20px auto 0 auto;
- }
- </style>
- </body>
- </html>
|