完成用户注册流程

src/api/user/account.js

@@ -4,7 +4,6 @@ const accountApi = {
   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'
 }
@@ -21,12 +20,8 @@ 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 isEmailExist(email) {
+  return $axios.get(accountApi.checkEmailApi + '/' + email)
 }
 
 // 获取注册验证码

src/components/login-form.vue

@@ -4,9 +4,9 @@
       <v-col cols="10">
         <v-text-field
           v-model="username"
-          placeholder="请输入你的邮箱或手机号"
-          label="邮箱或手机号"
-          :rules="[() => username != null || '请输入邮箱或手机号']"
+          placeholder="请输入邮箱"
+          label="邮箱"
+          :rules="[() => username != null || '请输入邮箱']"
           clearable
         />
       </v-col>
@@ -15,7 +15,7 @@
       <v-col cols="10">
         <v-text-field
           v-model="password"
-          placeholder="密码"
+          placeholder="请输入密码"
           label="密码"
           clearable
           :rules="[() => password != null || '密码不能为空']"
@@ -82,8 +82,16 @@ export default {
         r,
         rememberMe
       }
-      if (username === '' || password === '' || captcha === '') {
-        alert('captcha 或 username 字段不符合要求')
+      if (username === '') {
+        alert('username 字段不符合要求')
+        return
+      }
+      if (password === '' || password === null) {
+        alert('password 字段不符合要求')
+        return
+      }
+      if (captcha === '') {
+        alert('captcha 字段不符合要求')
         return
       }
       // 将数据返回给父组件

src/components/register-from.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-row justify="center">
+    <!--<v-row justify="center">
       <v-col cols="10">
         <v-text-field
           v-model="userRegistry.username"
@@ -12,7 +12,7 @@
           @blur="selectUsername"
         />
       </v-col>
-    </v-row>
+    </v-row>-->
     <v-row justify="center">
       <v-col cols="10">
         <v-text-field
@@ -22,8 +22,7 @@
           :rules="[() => userRegistry.email != null || '邮箱不能为空']"
           type="email"
           clearable
-          @input="checkEmail"
-          @blur="selectEmail"
+          @blur="checkEmail"
         />
       </v-col>
     </v-row>
@@ -65,10 +64,10 @@
       </v-col>
       <v-col cols="5">
         <v-text-field
-          v-model="userRegistry.captcha"
+          v-model="userRegistry.captchaCode"
           placeholder="验证码"
           label="验证码"
-          :rules="[() => userRegistry.captcha != null || '验证码不能为空']"
+          :rules="[() => userRegistry.captchaCode != null || '验证码不能为空']"
           clearable
         />
       </v-col>
@@ -81,7 +80,7 @@
 
 <script>
 import { randomString, getCaptchaUrl } from '@/utils'
-import { getRegVerifyCode, isUsernameExist, selectUsername, isEmailRegistered, selectEmail } from '@/api/user/account'
+import { getRegVerifyCode, isUsernameExist, selectUsername, isEmailExist } from '@/api/user/account'
 
 export default {
   name: 'Register',
@@ -89,15 +88,13 @@ export default {
     return {
       captchaUrl: '',
       captchaBase64: '',
-      r: '',
       showMessage: false,
       userRegistry: {
         regType: 1,
-        username: '',
         email: '',
         password: '',
         regVerifyCode: '',
-        captcha: '',
+        captchaCode: '',
         r: ''
       },
       verifyCode: {
@@ -136,8 +133,12 @@ export default {
         })
     },
     checkEmail() {
-      console.log('检查邮箱')
-      isEmailRegistered(this.userRegistry.email)
+      const email = this.userRegistry.email
+      if (email === null || email === '') {
+        return
+      }
+
+      isEmailExist(this.userRegistry.email)
         .then(res => {
           if (res.code === 0) {
             console.log(res.msg)
@@ -149,17 +150,6 @@ export default {
           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.userRegistry.email)) {
@@ -168,8 +158,8 @@ export default {
       } else if (this.userRegistry.password === '' || this.userRegistry.password.length < 6) {
         console.log('password 字段不符合要求')
         return
-      } else if (this.userRegistry.captcha === '' || this.userRegistry.username === '') {
-        alert('captcha 或 username 字段不符合要求')
+      } else if (this.userRegistry.captchaCode === '') {
+        alert('captchaCode 或 username 字段不符合要求')
         return
       }
 
@@ -181,9 +171,10 @@ export default {
       this.$emit('register', this.userRegistry)
     },
     getCaptcha() {
-      this.r = randomString(10)
+      const randomStr = randomString(10)
+      this.userRegistry.r = randomStr
       // 图片上发送点击事件时，captchaUrl 的值发生变化，然后才去请求后端
-      this.captchaUrl = getCaptchaUrl(this.r)
+      this.captchaUrl = getCaptchaUrl(randomStr)
       /* getBase64Captcha(this.captchaUrl)
         .then(res => {
           if (res.code === 0) {

src/store/modules/user.js

@@ -43,7 +43,7 @@ const actions = {
         if (res.code === 0) {
           resolve()
         } else {
-          console.log('用户注册失败')
+          alert(res.data)
         }
       }).catch(error => {
         reject(error)
@@ -63,7 +63,7 @@ const actions = {
           setToken(token)
           resolve()
         } else {
-          console.log('用户登录失败')
+          alert(res.data)
         }
       }).catch(error => {
         reject(error)

src/views/login.vue

@@ -34,13 +34,11 @@
             <v-row justify="center">
               <v-col cols="5">
                 <v-btn text color="primary">忘记密码</v-btn>
-
               </v-col>
               <v-col cols="5" style="text-align:right">
                 <v-btn text @click="moveRegister">{{ moveMessage }}</v-btn>
               </v-col>
             </v-row>
-
           </v-card>
         </v-col>
       </v-row>
@@ -67,7 +65,6 @@
 </template>
 
 <script>
-import { register } from '@/api/user/account'
 import LoginFrom from '@/components/login-form.vue'
 import RegisterFrom from '@/components/register-from.vue'
 
@@ -79,7 +76,6 @@ export default {
   },
   data() {
     return {
-      // captchaUrl: process.env.VUE_APP_BASE_API + '/api/user/account/captcha?r=123456',
       captchaUrl: '',
       r: '',
       user: {},
@@ -103,46 +99,13 @@ export default {
       })
     },
     userRegister(value) {
-      register(value)
-        .then(res => {
-          if (res.code === 0) {
-            console.log(res)
-          } else {
-            this.$notify({
-              title: res.code,
-              message: res.msg,
-              type: 'warning',
-              duration: 500
-            })
-          }
-        })
-        .catch(error => {
-          console.error(error.message)
-        })
-    },
-    register(value) {
-      fetch(`/api/user/account/signup`, {
-        headers: {
-          'Content-Type': 'application/json; charset=UTF-8',
-          'X-XSRF-TOKEN': this.$cookies.get('XSRF-TOKEN')
-        },
-        method: 'POST',
-        credentials: 'include',
-        body: JSON.stringify(value)
-      }).then(response => response.json())
-        .then(json => {
-          if (json.code === 0) {
-            this.message = '注册成功，即将为你跳转到登录页面！'
-            this.showMessage = true
-            this.moveRegister()
-          } else {
-            this.message = json.msg
-            this.showMessage = true
-          }
-        })
-        .catch(e => {
-          return null
-        })
+      this.$store.dispatch('user/register', value).then(() => {
+        this.message = '注册成功，即将为你跳转到登录页面！'
+        this.showMessage = true
+        this.moveRegister()
+      }).catch(() => {
+        alert('用户注册失败')
+      })
     },
     moveRegister() {
       if (this.type === '登录') {