完善登录注册

2022-06-01 20:12:03 +08:00
parent 601d9c2831
commit 3b6e304977
6 changed files with 257 additions and 9 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,9 +21,9 @@
      "integrity": "sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw=="
    },
    "@element-plus/icons-vue": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-1.1.4.tgz",
-      "integrity": "sha512-Iz/nHqdp1sFPmdzRwHkEQQA3lKvoObk8azgABZ81QUOpW9s/lUyQVUSh0tNtEPZXQlKwlSh7SPgoVxzrE0uuVQ=="
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.0.1.tgz",
+      "integrity": "sha512-a1N6IXw5AZx6JZQDoMBG9E1Pes1BogGTpL192SeI/piMdpEEcm4cn+MkDxhAvA9SuF1dFbdAU54EoS0xKQhjwg=="
    },
    "@floating-ui/core": {
      "version": "0.6.2",
@@ -361,6 +361,13 @@
        "lodash-unified": "^1.0.2",
        "memoize-one": "^6.0.0",
        "normalize-wheel-es": "^1.1.2"
+      },
+      "dependencies": {
+        "@element-plus/icons-vue": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-1.1.4.tgz",
+          "integrity": "sha512-Iz/nHqdp1sFPmdzRwHkEQQA3lKvoObk8azgABZ81QUOpW9s/lUyQVUSh0tNtEPZXQlKwlSh7SPgoVxzrE0uuVQ=="
+        }
      }
    },
    "errno": {
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "@element-plus/icons-vue": "^2.0.1",
    "axios": "^0.27.2",
    "element-plus": "^2.2.0",
    "vue": "^3.2.25",
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="login">
-    <div class="loin_form">
+    <div class="login_form">
      <p>Welcome to SNCTF</p>
      <el-tabs v-model="activeNames"  >
        <el-tab-pane label="登录" name="first">
@@ -13,7 +13,8 @@
                  type="text"
                  autocomplete="off"
                  v-model="loginForm.username"
-                  prefix-icon="el-icon-user-solid"
+                  prefix-icon="User"
+
                  placeholder="请输入用户名"
              ></el-input>
            </el-form-item>
@@ -22,13 +23,13 @@
                  type="password"
                  autocomplete="off"
                  v-model="loginForm.password"
-                  prefix-icon="el-icon-lock"
+                  prefix-icon="Lock"
                  placeholder="请输入密码"
              ></el-input>
            </el-form-item>
            <el-form-item class="btns">
              <el-button type="primary" @click="goToLogin">登录</el-button>
-<!--              <el-button @click="resetLoginForm">重置</el-button>-->
+             <el-button @click="resetLoginForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
@@ -88,7 +89,6 @@ export default {
            message: '欢迎回来',
            type: 'success',
            duration: 3000,
-
          });
          }else{
          ElNotification({
@@ -109,8 +109,44 @@ export default {
        });
        console.log(err)
        })
+    },
+    resetLoginForm(){
+      this.$refs.loginForm.resetFields();
    }
  },
  components: {Register}
 }
-</script>
+</script>
+
+<style scoped lang="less">
+.login{
+  width:100%;
+  height:100vh;
+  overflow: auto;
+  position: relative;
+  .login_form {
+    width: 400px;
+    height: 400px;
+    position: absolute;
+    left: 78%;
+    top: 40%;
+    margin-left: -200px;
+    margin-top: -150px;
+    padding: 10px;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: 0 0 10px #ddd;
+    .btns {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+  p {
+    font-size: 24px;
+    text-align: center;
+    font-weight: 600;
+  }
+}
+
+
+</style>
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -23,6 +23,7 @@

    <el-button  type="primary" class="login" @click="login">登录/注册</el-button>

+
  </el-menu>
 </template>

--- a/src/components/register.vue
+++ b/src/components/register.vue
@@ -0,0 +1,199 @@
+<template>
+  <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      class="demo-ruleForm"
+  >
+    <el-form-item label="" prop="name"
+    ><el-input type="text"
+               autocomplete="off"
+               v-model="ruleForm.name"
+               prefix-icon="User"
+               placeholder="请输入用户名"
+    ></el-input
+    ></el-form-item>
+    <el-form-item label="" prop="pass"
+    ><el-input
+        type="password"
+        autocomplete="off"
+        v-model="ruleForm.pass"
+        prefix-icon="Lock"
+        placeholder="请输入密码"
+    ></el-input
+    ></el-form-item>
+    <el-form-item label="" prop="checkPass"
+    ><el-input
+        type="password"
+        autocomplete="off"
+        v-model="ruleForm.checkPass"
+        prefix-icon="Lock"
+        placeholder="请输入密码"
+    ></el-input
+    ></el-form-item>
+    <el-form-item label="" prop="email">
+      <el-autocomplete
+          type="text"
+          v-model="ruleForm.email"
+          :fetch-suggestions="querySearchEmail"
+          :trigger-on-focus="false"
+          style="width: 100%"
+          prefix-icon="Message"
+          clearable
+          placeholder="请输入邮箱"
+      />
+    </el-form-item>
+    <el-form-item class="btns">
+      <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
+      <el-button @click="resetForm('ruleForm')">重置</el-button>
+    </el-form-item>
+  </el-form>
+
+</template>
+
+<script>
+import axios from "axios";
+import { ElNotification } from 'element-plus';
+import {onMounted, ref } from "vue";
+
+export default {
+
+  data(){
+    var validatePass = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请输入密码'));
+      } else {
+        if (this.ruleForm.checkPass !== '') {
+          this.$refs.ruleForm.validateField('checkPass');
+        }
+        callback();
+      }
+    };
+
+    var validatePass2 = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请再次输入密码'));
+      } else if (value !== this.ruleForm.pass) {
+        callback(new Error('两次输入密码不一致!'));
+      } else {
+        callback();
+      }
+    };
+    return{
+      activeName:"second",
+      ruleForm:{
+        name:"",
+        pass:"",
+        checkPass:"",
+        email: ""
+      },
+      rules:{
+        name:[
+          {required:true,message:"请输入用户名",trigger:"blur"},
+          {min:4,max:12,message:"长度在 4 到 12 个字符",trigger:"blur"}
+        ],
+        pass:[
+          {required:true,validator:validatePass,trigger:"blur"}
+        ],
+        checkPass: [
+          {required: true, validator: validatePass2, trigger: "blur"}
+        ]
+      }
+    }
+  },
+
+  methods:{
+    submitForm(formName){
+      this.$refs[formName].validate((valid) =>{
+        if(valid){
+          axios({
+            method:'post',
+            url:'/api/v1/register',
+            headers:{
+              'Content-Type':'application/json;charset=UTF-8'
+            },
+            data:{
+              username:this.ruleForm.name,
+              password:this.ruleForm.pass,
+              email: this.ruleForm.email,
+              captchaid:"114514",//暂时没写验证码功能，留空
+              solution:"true",//留空
+
+            },
+
+          }).then(res=>{
+            console.log(res.data);
+            if(res.data.code===200) {
+              this.$router.push('/login')
+              ElNotification({
+                title: '注册成功',
+                message: '注册成功，请登录',
+                type: 'success',
+                duration: 3000,
+              });
+            }else{
+              ElNotification({
+                title: '注册失败',
+                message: '注册失败，请重试',
+                type: 'error',
+                duration: 3000,
+              });
+            }
+          }).catch(err=>{
+            ElNotification({
+              title: '注册失败',
+              message: '注册失败',
+              type: 'error',
+              duration: 3000,
+            });
+            console.log(err)
+          })
+        }
+      })
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    // 邮箱自动填充后缀名
+    querySearchEmail(queryString, callback) {
+      const emailList = [
+        { value: '@qq.com' },
+        { value: '@126.com' },
+        { value: '@163.com' },
+        { value: '@sina.com' },
+        { value: '@21cn.com' },
+        { value: '@sohu.com' },
+        { value: '@yahoo.com.cn' },
+        { value: '@tom.com' },
+        { value: '@etang.com' },
+        { value: '@eyou.com' },
+        { value: '@56.com' },
+        { value: '@x.cn' },
+        { value: '@chinaren.comsogou.com' },
+        { value: '@citiz.com' },
+      ]
+      let results = []
+      let queryList = []
+      emailList.map(item => {
+        queryList.push({ value: queryString.split('@')[0] + item.value })
+      })
+      results = queryString ? queryList.filter(this.createFilter(queryString)) : queryList;
+      callback(results);
+    },
+
+    // 邮箱填写过滤
+    createFilter(queryString) {
+      return (item) => {
+        return (item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
+      };
+    },
+
+  }
+}
+</script>
+
+
+<style lang="less" scoped>
+
+</style>
+
--- a/src/main.js
+++ b/src/main.js
@@ -3,9 +3,13 @@ import router from './router'
 import App from './App.vue'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import * as Elicons from '@element-plus/icons-vue';

 const app = createApp(App)

+Object.keys(Elicons).forEach((key) => {
+    app.component(key, Elicons[key]);
+});
 app.use(ElementPlus)
 app.use(router)
 app.mount('#app')