完成第一个设置页面

my-project-backend/src/main/java/com/example/controller/AccountController.java

@@ -4,6 +4,7 @@ import com.example.entity.RestBean;
 import com.example.entity.dto.Account;
 import com.example.entity.dto.AccountDetails;
 import com.example.entity.vo.request.DetailsSaveVO;
+import com.example.entity.vo.request.ModifyEmailVO;
 import com.example.entity.vo.response.AccountDetailsVO;
 import com.example.entity.vo.response.AccountVO;
 import com.example.service.AccountDetailsService;
@@ -45,4 +46,11 @@ public class AccountController {
         boolean success = detailsService.saveAccountDetails(id, vo);
         return success ? RestBean.success() : RestBean.failure(400, "此用户名已被其他用户使用，请重新更换！");
     }
+
+    @PostMapping("/modify-email")
+    public RestBean<Void> modifyEmail(@RequestAttribute(Const.ATTR_USER_ID) int id,
+                                      @RequestBody @Valid ModifyEmailVO vo){
+        String result = service.modifyEmail(id, vo);
+        return result == null ? RestBean.success() : RestBean.failure(400, result);
+    }
 }

my-project-backend/src/main/java/com/example/controller/AuthorizeController.java

@@ -39,7 +39,7 @@ public class AuthorizeController {
     @GetMapping("/ask-code")
     @Operation(summary = "请求邮件验证码")
     public RestBean<Void> askVerifyCode(@RequestParam @Email String email,
-                                        @RequestParam @Pattern(regexp = "(register|reset)")  String type,
+                                        @RequestParam @Pattern(regexp = "(register|reset|modify)")  String type,
                                         HttpServletRequest request){
         return this.messageHandle(() ->
                 accountService.registerEmailVerifyCode(type, String.valueOf(email), request.getRemoteAddr()));

my-project-backend/src/main/java/com/example/entity/vo/request/ModifyEmailVO.java

@@ -0,0 +1,13 @@
+package com.example.entity.vo.request;
+
+import jakarta.validation.constraints.Email;
+import lombok.Data;
+import org.hibernate.validator.constraints.Length;
+
+@Data
+public class ModifyEmailVO {
+    @Email
+    String email;
+    @Length(max = 6, min = 6)
+    String code;
+}

my-project-backend/src/main/java/com/example/listener/MailQueueListener.java

@@ -40,6 +40,10 @@ public class MailQueueListener {
                     createMessage("您的密码重置邮件",
                             "你好，您正在执行重置密码操作，验证码: "+code+"，有效时间3分钟，如非本人操作，请无视。",
                             email);
+            case "modify" ->
+                    createMessage("您的邮件修改验证邮件",
+                            "您好，您正在绑定新的电子邮件地址，验证码: "+code+"，有效时间3分钟，如非本人操作，请无视。",
+                            email);
             default -> null;
         };
         if(message == null) return;

my-project-backend/src/main/java/com/example/service/AccountService.java

@@ -5,6 +5,7 @@ import com.example.entity.dto.Account;
 import com.example.entity.vo.request.ConfirmResetVO;
 import com.example.entity.vo.request.EmailRegisterVO;
 import com.example.entity.vo.request.EmailResetVO;
+import com.example.entity.vo.request.ModifyEmailVO;
 import org.springframework.security.core.userdetails.UserDetailsService;
 
 public interface AccountService extends IService<Account>, UserDetailsService {
@@ -14,4 +15,5 @@ public interface AccountService extends IService<Account>, UserDetailsService {
     String registerEmailAccount(EmailRegisterVO info);
     String resetEmailAccountPassword(EmailResetVO info);
     String resetConfirm(ConfirmResetVO info);
+    String modifyEmail(int id, ModifyEmailVO vo);
 }

my-project-backend/src/main/java/com/example/service/impl/AccountServiceImpl.java

@@ -6,6 +6,7 @@ import com.example.entity.dto.Account;
 import com.example.entity.vo.request.ConfirmResetVO;
 import com.example.entity.vo.request.EmailRegisterVO;
 import com.example.entity.vo.request.EmailResetVO;
+import com.example.entity.vo.request.ModifyEmailVO;
 import com.example.mapper.AccountMapper;
 import com.example.service.AccountService;
 import com.example.utils.Const;
@@ -143,6 +144,23 @@ public class AccountServiceImpl extends ServiceImpl<AccountMapper, Account> impl
         return null;
     }
 
+    @Override
+    public String modifyEmail(int id, ModifyEmailVO vo) {
+        String email = vo.getEmail();
+        String code = getEmailVerifyCode(email);
+        if(code == null) return "请先获取验证码！";
+        if(!code.equals(vo.getCode())) return "验证码错误，请重新输入";
+        this.deleteEmailVerifyCode(email);
+        Account account = this.findAccountByNameOrEmail(email);
+        if(account != null && account.getId() != id)
+            return "该电子邮件已经被其他账号绑定，无法完成此操作！";
+        this.update()
+                .set("email", email)
+                .eq("id", id)
+                .update();
+        return null;
+    }
+
     /**
      * 移除Redis中存储的邮件验证码
      * @param email 电邮

my-project-frontend/src/views/settings/UserSetting.vue

@@ -42,8 +42,6 @@ const rules = {
     ], email: [
         { required: true, message: '请输入邮件地址', trigger: 'blur' },
         {type: 'email', message: '请输入合法的电子邮件地址', trigger: ['blur', 'change']}
-    ], code: [
-        { required: true, message: '请输入获取的验证码', trigger: 'blur' },
     ]
 }
 
@@ -68,7 +66,6 @@ function saveDetails() {
         }
     })
 }
-
 get('/api/user/details', data => {
     baseForm.username = store.user.username
     baseForm.gender = data.gender
@@ -76,8 +73,42 @@ get('/api/user/details', data => {
     baseForm.wx = data.wx
     baseForm.qq = data.qq
     baseForm.desc = desc.value = data.desc
+    emailForm.email = store.user.email
     loading.form = false
 })
+
+const coldTime = ref(0)
+const isEmailValid = ref(true)
+const onValidate = (prop, isValid) => {
+    if(prop === 'email')
+        isEmailValid.value = isValid
+}
+function sendEmailCode() {
+    emailFormRef.value.validate(isValid => {
+        coldTime.value = 60
+        get(`/api/auth/ask-code?email=${emailForm.email}&type=modify`, () => {
+            ElMessage.success(`验证码已成功发送到邮箱：${emailForm.email}，请注意查收`)
+            const handle = setInterval(() => {
+                coldTime.value--
+                if(coldTime.value === 0) {
+                    clearInterval(handle)
+                }
+            }, 1000)
+        }, (message) => {
+            ElMessage.warning(message)
+            coldTime.value = 0
+        })
+    })
+}
+function modifyEmail() {
+    emailFormRef.value.validate(isValid => {
+        post('/api/user/modify-email', emailForm, () => {
+            ElMessage.success('邮件修改成功')
+            store.user.email = emailForm.email
+            emailForm.code = ''
+        })
+    })
+}
 </script>
 
 <template>
@@ -114,7 +145,7 @@ get('/api/user/details', data => {
         </el-form>
       </card>
       <card style="margin-top: 10px" :icon="Message" title="电子邮件设置" desc="您可以在这里修改默认绑定的电子邮件地址">
-        <el-form :rules="rules" :model="emailForm" ref="emailForm" label-position="top" style="margin: 0 10px 10px 10px">
+        <el-form :rules="rules" @validate="onValidate" :model="emailForm" ref="emailFormRef" label-position="top" style="margin: 0 10px 10px 10px">
           <el-form-item label="电子邮件" prop="email">
             <el-input v-model="emailForm.email"/>
           </el-form-item>
@@ -124,12 +155,15 @@ get('/api/user/details', data => {
                 <el-input placeholder="请获取验证码" v-model="emailForm.code"/>
               </el-col>
               <el-col :span="6">
-                <el-button type="success" style="width: 100%" plain>获取验证码</el-button>
+                <el-button type="success" style="width: 100%" :disabled="!isEmailValid || coldTime > 0"
+                           @click="sendEmailCode" plain>
+                    {{ coldTime > 0 ? `请稍后 ${coldTime} 秒` : '获取验证码'}}
+                </el-button>
               </el-col>
             </el-row>
           </el-form-item>
           <div>
-            <el-button :icon="Refresh" type="success">更新电子邮件</el-button>
+            <el-button :icon="Refresh" type="success" @click="modifyEmail">更新电子邮件</el-button>
           </div>
         </el-form>
       </card>

my-project-frontend/src/views/welcome/LoginPage.vue

@@ -7,7 +7,7 @@
     <div style="margin-top: 50px">
       <el-form :model="form" :rules="rules" ref="formRef">
         <el-form-item prop="username">
-          <el-input v-model="form.username" maxlength="10" type="text" placeholder="用户名/邮箱">
+          <el-input v-model="form.username" maxlength="20" type="text" placeholder="用户名/邮箱">
             <template #prefix>
               <el-icon>
                 <User/>