update

src/api/index.js

@@ -15,6 +15,7 @@ const $axios = axios.create({
 Vue.prototype.$http = axios // 并发请求
 // 在全局请求和响应拦截器中添加请求状态
 const loading = null
+$axios.defaults.withCredentials = true
 
 // 请求拦截器
 $axios.interceptors.request.use(

src/api/user/account.js

@@ -1,15 +1,39 @@
 import $axios from '../index'
 
 const accountApi = {
-  registerApi: '/api/user/account/register',
-  regVerifyCodeApi: '/api/user/account/getcode'
+  checkUsernameApi: '/api/user/account/check/username',
+  selectUsernameApi: '/api/user/account/select/username',
+  checkEmailApi: '/api/user/account/check/email',
+  selectEmailApi: '/api/user/account/select/email',
+  regVerifyCodeApi: '/api/user/verifyCode',
+  registerApi: '/api/user/account/register'
+}
+
+export function getBase64Captcha(captchaUrl) {
+  return $axios.get(captchaUrl)
+}
+
+export function isUsernameExist(username) {
+  return $axios.get(accountApi.checkUsernameApi + '?username=' + username)
+}
+
+export function selectUsername(username) {
+  return $axios.post(accountApi.selectUsernameApi + '/' + username)
+}
+
+export function isEmailRegistered(email) {
+  return $axios.get(accountApi.checkEmailApi + '?email=' + email)
+}
+
+export function selectEmail(email) {
+  return $axios.post(accountApi.selectEmailApi + '/' + email)
 }
 
 // 获取注册验证码
-export function getRegVerifyCode(email) {
-  return $axios.get(accountApi.regVerifyCodeApi + '?email=' + email)
+export function getRegVerifyCode(verifyCode) {
+  return $axios.post(accountApi.regVerifyCodeApi, verifyCode)
 }
 
-export function register(email) {
-  return $axios.post(accountApi.registerApi)
+export function register(userRegistry) {
+  return $axios.post(accountApi.registerApi, userRegistry)
 }

src/components/login-form.vue

@@ -57,6 +57,7 @@ export default {
   data() {
     return {
       captchaUrl: '',
+      captchaBase64: '',
       r: '',
       username: '',
       password: '',

src/components/register-from.vue

@@ -3,23 +3,27 @@
     <v-row justify="center">
       <v-col cols="10">
         <v-text-field
-          v-model="registerUser.username"
+          v-model="userRegistry.username"
           placeholder="请输入用户名"
           label="用户名"
-          :rules="[() => registerUser.username != null || '用户名不能为空']"
+          :rules="[() => userRegistry.username != null || '用户名不能为空']"
           clearable
+          @input="checkUsername"
+          @blur="selectUsername"
         />
       </v-col>
     </v-row>
     <v-row justify="center">
       <v-col cols="10">
         <v-text-field
-          v-model="registerUser.email"
+          v-model="userRegistry.email"
           placeholder="请输入邮箱"
           label="邮箱"
-          :rules="[() => registerUser.email != null || '邮箱不能为空']"
+          :rules="[() => userRegistry.email != null || '邮箱不能为空']"
           type="email"
           clearable
+          @input="checkEmail"
+          @blur="selectEmail"
         />
       </v-col>
     </v-row>
@@ -28,75 +32,43 @@
         <v-row justify="center">
           <v-col cols="5">
             <v-text-field
-              v-model="registerUser.regVerifyCode"
-              placeholder="请输入验证码"
-              label="验证码"
-              :rules="[() => registerUser.regVerifyCode != null || '验证码不能为空']"
+              v-model="userRegistry.regVerifyCode"
+              placeholder="请输入邮件验证码"
+              label="邮件验证码"
+              :rules="[() => userRegistry.regVerifyCode != null || '邮件验证码不能为空']"
               type="email"
               clearable
             />
           </v-col>
           <v-col cols="5">
-            <v-btn color="primary" @click="getVerifyCode">获取验证码</v-btn>
+            <v-btn color="primary" @click="getVerifyCode">获取邮件验证码</v-btn>
           </v-col>
         </v-row>
       </v-col>
-      <!--<v-col cols="10">
-        <v-text-field
-          v-model="registerUser.email"
-          placeholder="请输入验证码"
-          label="验证码"
-          :rules="[() => registerUser.email != null || '验证码不能为空']"
-          type="email"
-          clearable
-        />
-        <v-btn color="primary" @click="getVerifyCode">获取验证码</v-btn>
-      </v-col>-->
     </v-row>
     <v-row justify="center">
       <v-col cols="10">
         <v-text-field
-          v-model="registerUser.password"
+          v-model="userRegistry.password"
           placeholder="请输入密码"
           label="密码"
-          :rules="[() => registerUser.password != null || '密码不能为空']"
+          :rules="[() => userRegistry.password != null || '密码不能为空']"
           clearable
           type="password"
         />
       </v-col>
     </v-row>
-    <!--    <v-row justify="center">
-      <v-col cols="10">
-        <v-text-field
-          v-model="registerUser.mobile"
-          placeholder="请输入你的手机号（系统原因，此项选填）"
-          label="手机号"
-
-          clearable
-        />
-      </v-col>
-    </v-row>-->
-    <!--    <v-row v-if="this.$store.state.webInfo.openInvitationRegister == 1" justify="center">
-      <v-col cols="10">
-        <v-text-field
-          v-model="registerUser.invitationCode"
-          placeholder="邀请码"
-          label="邀请码"
-          clearable
-          :rules="[() => registerUser.invitationCode != null || '邀请码不能为空']"
-        />
-      </v-col>
-    </v-row>-->
     <v-row justify="center">
       <v-col cols="5">
         <img :src="captchaUrl" alt="验证码" title="点击刷新" style="cursor:pointer;" @click="getCaptcha">
+        <!--<img :src="captchaBase64" alt="验证码" title="点击刷新" style="cursor:pointer;" @click="getCaptcha">-->
       </v-col>
       <v-col cols="5">
         <v-text-field
-          v-model="registerUser.captcha"
+          v-model="userRegistry.captcha"
           placeholder="验证码"
           label="验证码"
-          :rules="[() => registerUser.captcha != null || '验证码不能为空']"
+          :rules="[() => userRegistry.captcha != null || '验证码不能为空']"
           clearable
         />
       </v-col>
@@ -109,25 +81,24 @@
 
 <script>
 import { randomString, getCaptchaUrl } from '@/utils'
-import { getRegVerifyCode } from '@/api/user/account'
+import { getRegVerifyCode, isUsernameExist, selectUsername, isEmailRegistered, selectEmail } from '@/api/user/account'
 
 export default {
   name: 'Register',
   data() {
     return {
       captchaUrl: '',
+      captchaBase64: '',
       r: '',
       showMessage: false,
-      registerUser: {
+      userRegistry: {
         regType: 1,
         username: '',
         email: '',
         password: '',
-        // mobile: '',
         regVerifyCode: '',
         captcha: '',
         r: ''
-        // invitationCode: ''
       },
       verifyCode: {
         type: '',
@@ -139,50 +110,102 @@ export default {
     this.getCaptcha()
   },
   methods: {
+    checkUsername() {
+      isUsernameExist(this.userRegistry.username)
+        .then(res => {
+          if (res.code === 0) {
+            console.log(res.msg)
+          } else {
+            alert(res.data)
+          }
+        })
+        .catch(error => {
+          console.error(error.message)
+        })
+    },
+    selectUsername() {
+      selectUsername(this.userRegistry.username).then(res => {
+        if (res.code === 0) {
+          console.log(res.msg)
+        } else {
+          alert(res.data)
+        }
+      })
+        .catch(error => {
+          console.error(error.message)
+        })
+    },
+    checkEmail() {
+      console.log('检查邮箱')
+      isEmailRegistered(this.userRegistry.email)
+        .then(res => {
+          if (res.code === 0) {
+            console.log(res.msg)
+          } else {
+            alert(res.data)
+          }
+        })
+        .catch(error => {
+          console.error(error.message)
+        })
+    },
+    selectEmail() {
+      selectEmail(this.userRegistry.email).then(res => {
+        if (res.code === 0) {
+          console.log(res.msg)
+        } else {
+          alert(res.data)
+        }
+      }).catch(error => {
+        console.error(error.message)
+      })
+    },
     submitRegister() {
       var re = /^(([^()[\]\\.,;:\s@\"]+(\.[^()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
-      if (!re.test(this.registerUser.email)) {
+      if (!re.test(this.userRegistry.email)) {
         console.log('email 字段不符合要求')
         return
-      } else if (this.registerUser.password === '' || this.registerUser.password.length < 6) {
+      } else if (this.userRegistry.password === '' || this.userRegistry.password.length < 6) {
         console.log('password 字段不符合要求')
         return
-      } else if (this.registerUser.captcha === '' || this.registerUser.username === '') {
+      } else if (this.userRegistry.captcha === '' || this.userRegistry.username === '') {
         alert('captcha 或 username 字段不符合要求')
         return
       }
 
-      if (this.$store.state.webInfo.openInvitationRegister === 1 && this.registerUser.invitationCode === '') {
+      if (this.$store.state.webInfo.openInvitationRegister === 1 && this.userRegistry.invitationCode === '') {
         console.log('openInvitationRegister 或 invitationCode 字段不符合要求')
         return
       }
-
-      /* if (this.registerUser.username !== 'admin') {
-                  return
-                }*/
-
-      /* if (this.registerUser.mobile !== '') {
-                  var myreg = /^[1][3,4,5,7,8][0-9]{9}$/
-                  if (!myreg.test((this.registerUser.phone))) {
-                    return
-                  }
-                }*/
       // 返回到父组件
-      this.$emit('register', this.registerUser)
+      this.$emit('register', this.userRegistry)
     },
     getCaptcha() {
       this.r = randomString(10)
       // 图片上发送点击事件时，captchaUrl 的值发生变化，然后才去请求后端
       this.captchaUrl = getCaptchaUrl(this.r)
+      /* getBase64Captcha(this.captchaUrl)
+        .then(res => {
+          if (res.code === 0) {
+            this.captchaBase64 = 'data:image/jpg;base64,' + res.data
+          } else {
+            alert(res.data)
+          }
+        })
+        .catch(error => {
+          console.error(error.message)
+        })*/
     },
     getVerifyCode() {
-      var email = this.registerUser.email
+      const email = this.userRegistry.email
       if (email == null || email === '') {
         alert('请输入邮箱地址')
         return
       }
 
-      getRegVerifyCode(email)
+      this.verifyCode.receiver = email
+      this.verifyCode.type = 1
+      getRegVerifyCode(this.verifyCode)
         .then(res => {
           if (res.code === 0) {
             alert(res.msg)

src/utils/index.js

@@ -11,5 +11,5 @@ export function randomString(len) {
 // 获取 captcha url
 export function getCaptchaUrl(r) {
   // 图片上发送点击事件时，captchaUrl 的值发生变化，然后才去请求后端
-  return process.env.VUE_APP_BASE_API + '/api/user/account/captcha?r=' + r
+  return process.env.VUE_APP_BASE_API + '/api/user/captcha?r=' + r
 }