编写验证相关接口

study-project-backend/pom.xml

@@ -34,6 +34,10 @@
             <artifactId>mybatis-spring-boot-starter</artifactId>
             <version>3.0.0</version>
         </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-validation</artifactId>
+        </dependency>
 
         <dependency>
             <groupId>com.mysql</groupId>

study-project-backend/src/main/java/com/example/config/SecurityConfiguration.java

@@ -40,6 +40,7 @@ public class SecurityConfiguration {
                                            PersistentTokenRepository repository) throws Exception {
         return http
                 .authorizeHttpRequests()
+                .requestMatchers("/api/auth/**").permitAll()
                 .anyRequest().authenticated()
                 .and()
                 .formLogin()

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

@@ -0,0 +1,32 @@
+package com.example.controller;
+
+import com.example.entity.RestBean;
+import com.example.service.AuthorizeService;
+import jakarta.annotation.Resource;
+import jakarta.validation.constraints.Pattern;
+import org.springframework.validation.annotation.Validated;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+
+@Validated
+@RestController
+@RequestMapping("/api/auth")
+public class AuthorizeController {
+
+    private final String EMAIL_REGEX = "^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$";
+
+    @Resource
+    AuthorizeService service;
+
+    @PostMapping("/valid-email")
+    public RestBean<String> validateEmail(@Pattern(regexp = EMAIL_REGEX) @RequestParam("email") String email){
+        if (service.sendValidateEmail(email))
+            return RestBean.success("邮件已发送，请注意查收");
+        else
+            return RestBean.failure(400, "邮件发送失败，请联系管理员");
+    }
+
+
+}

study-project-backend/src/main/java/com/example/service/AuthorizeService.java

@@ -1,31 +1,7 @@
 package com.example.service;
 
-import com.example.entity.Account;
-import com.example.mapper.UserMapper;
-import jakarta.annotation.Resource;
-import org.springframework.security.core.userdetails.User;
-import org.springframework.security.core.userdetails.UserDetails;
 import org.springframework.security.core.userdetails.UserDetailsService;
-import org.springframework.security.core.userdetails.UsernameNotFoundException;
-import org.springframework.stereotype.Service;
 
-@Service
+public interface AuthorizeService extends UserDetailsService {
-public class AuthorizeService implements UserDetailsService {
+    boolean sendValidateEmail(String email);
-
-    @Resource
-    UserMapper mapper;
-
-    @Override
-    public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
-        if(username == null)
-            throw new UsernameNotFoundException("用户名不能为空");
-        Account account = mapper.findAccountByNameOrEmail(username);
-        if(account == null)
-            throw new UsernameNotFoundException("用户名或密码错误");
-        return User
-                .withUsername(account.getUsername())
-                .password(account.getPassword())
-                .roles("user")
-                .build();
-    }
 }

study-project-backend/src/main/java/com/example/service/impl/AuthorizeServiceImpl.java

@@ -0,0 +1,45 @@
+package com.example.service.impl;
+
+import com.example.entity.Account;
+import com.example.mapper.UserMapper;
+import com.example.service.AuthorizeService;
+import jakarta.annotation.Resource;
+import org.springframework.security.core.userdetails.User;
+import org.springframework.security.core.userdetails.UserDetails;
+import org.springframework.security.core.userdetails.UsernameNotFoundException;
+import org.springframework.stereotype.Service;
+
+@Service
+public class AuthorizeServiceImpl implements AuthorizeService {
+
+    @Resource
+    UserMapper mapper;
+
+    @Override
+    public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
+        if(username == null)
+            throw new UsernameNotFoundException("用户名不能为空");
+        Account account = mapper.findAccountByNameOrEmail(username);
+        if(account == null)
+            throw new UsernameNotFoundException("用户名或密码错误");
+        return User
+                .withUsername(account.getUsername())
+                .password(account.getPassword())
+                .roles("user")
+                .build();
+    }
+
+    @Override
+    public boolean sendValidateEmail(String email) {
+        /**
+         * 1. 先生成对应的验证码
+         * 2. 把邮箱和对应的验证码直接放到Redis里面（过期时间3分钟，如果此时重新要求发邮件，
+         * 那么，只要剩余时间低于2分钟，就可以重新发送一次，重复此流程）
+         * 3. 发送验证码到指定邮箱
+         * 4. 如果发送失败，把Redis里面的刚刚插入的删除
+         * 5. 用户在注册时，再从Redis里面取出对应键值对，然后看验证码是否一致
+         */
+
+        return false;
+    }
+}

study-project-frontend/src/components/welcome/RegisterPage.vue

@@ -5,7 +5,7 @@
             <div style="font-size: 14px;color: grey">欢迎注册我们的学习平台，请在下方填写相关信息</div>
         </div>
         <div style="margin-top: 50px">
-            <el-form :model="form" :rules="rules" @validate="onValidate">
+            <el-form :model="form" :rules="rules" @validate="onValidate" ref="formRef">
                 <el-form-item prop="username">
                     <el-input v-model="form.username" type="text" placeholder="用户名">
                         <template #prefix>
@@ -34,7 +34,7 @@
                         </template>
                     </el-input>
                 </el-form-item>
-                <el-form-item>
+                <el-form-item prop="code">
                     <el-row :gutter="10" style="width: 100%">
                         <el-col :span="17">
                             <el-input v-model="form.code" type="text" placeholder="请输入验证码">
@@ -51,7 +51,7 @@
             </el-form>
         </div>
         <div style="margin-top: 80px">
-            <el-button style="width: 270px" type="warning" plain>立即注册</el-button>
+            <el-button style="width: 270px" type="warning" @click="register" plain>立即注册</el-button>
         </div>
         <div style="margin-top: 20px">
             <span style="font-size: 14px;line-height: 15px;color: grey">已有账号? </span>
@@ -64,6 +64,7 @@
 import {EditPen, Lock, Message, User} from "@element-plus/icons-vue";
 import router from "@/router";
 import {reactive, ref} from "vue";
+import {ElMessage} from "element-plus";
 
 const form = reactive({
     username: '',
@@ -108,15 +109,29 @@ const rules = {
     email: [
         { required: true, message: '请输入邮件地址', trigger: 'blur' },
         {type: 'email', message: '请输入合法的电子邮件地址', trigger: ['blur', 'change']}
+    ],
+    code: [
+        { required: true, message: '请输入获取的验证码', trigger: 'blur' },
     ]
 }
 
+const formRef = ref()
 const isEmailValid = ref(false)
 
 const onValidate = (prop, isValid) => {
     if(prop === 'email')
         isEmailValid.value = isValid
 }
+
+const register = () => {
+    formRef.value.validate((isValid) => {
+        if(isValid) {
+            
+        } else {
+            ElMessage.warning('请完整填写注册表单内容！')
+        }
+    })
+}
 </script>
 
 <style scoped>