提交了登录注册验证码功能

package.json

@@ -19,6 +19,7 @@
 		"md-editor-v3": "^2.11.2",
 		"nprogress": "^0.2.0",
 		"pinia": "^2.1.7",
+		"svg-captcha": "^1.4.0",
 		"vue": "^3.4.5",
 		"vue-cropper": "1.1.1",
 		"vue-echarts": "^6.6.9",

src/types/user.ts

@@ -13,4 +13,5 @@ export interface Register {
     username: string;
     password: string;
     email: string;
+    captcha: string;
 }

src/views/pages/login.vue

@@ -33,8 +33,16 @@
                     <el-checkbox class="pwd-checkbox" v-model="checked" label="记住密码" />
                     <el-link type="primary" @click="$router.push('/reset-pwd')">忘记密码</el-link>
                 </div>
+                <el-form-item prop="captcha">
+                    <el-input v-model="param.captcha" placeholder="验证码">
+                    <template #prepend>
+                        <el-button @click="getCaptcha">换一个</el-button>
+                    </template>
+                    </el-input>
+                    <img :src="captchaSrc" @click="getCaptcha" alt="验证码" />
+                </el-form-item>
                 <el-button class="login-btn" type="primary" size="large" @click="submitForm(login)">登录</el-button>
-                <p class="login-tips">Tips : 用户名和密码随便填。</p>
+                <!-- <p class="login-tips">Tips : 用户名和密码随便填。</p> -->
                 <p class="login-text">
                     没有账号？<el-link type="primary" @click="$router.push('/register')">立即注册</el-link>
                 </p>
@@ -50,10 +58,12 @@ import { usePermissStore } from '@/store/permiss';
 import { useRouter } from 'vue-router';
 import { ElMessage } from 'element-plus';
 import type { FormInstance, FormRules } from 'element-plus';
+import svgCaptcha from 'svg-captcha';
 
 interface LoginInfo {
     username: string;
     password: string;
+    captcha: string;
 }
 
 const lgStr = localStorage.getItem('login-param');
@@ -64,6 +74,7 @@ const router = useRouter();
 const param = reactive<LoginInfo>({
     username: defParam ? defParam.username : '',
     password: defParam ? defParam.password : '',
+    captcha: '',
 });
 
 const rules: FormRules = {
@@ -78,6 +89,16 @@ const rules: FormRules = {
 };
 const permiss = usePermissStore();
 const login = ref<FormInstance>();
+
+const captchaSrc = ref('');
+const captchaText = ref('');
+
+const getCaptcha = () => {
+  const captcha = svgCaptcha.create();
+  captchaSrc.value = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(captcha.data)));
+  captchaText.value = captcha.text;
+};
+
 const submitForm = (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     formEl.validate((valid: boolean) => {
@@ -99,6 +120,9 @@ const submitForm = (formEl: FormInstance | undefined) => {
     });
 };
 
+// 在组件创建时获取第一个验证码
+getCaptcha();
+
 const tabs = useTabsStore();
 tabs.clearTabs();
 </script>
@@ -168,4 +192,12 @@ tabs.clearTabs();
     font-size: 14px;
     color: #787878;
 }
+
+img[src^="data:image"] {
+  /* 设置验证码图片的大小 */
+  width: 100px;
+  height: 40px;
+  cursor: pointer;
+}
+
 </style>

src/views/pages/register.vue

@@ -38,6 +38,16 @@
                         </template>
                     </el-input>
                 </el-form-item>
+
+                <el-form-item prop="captcha">
+                    <el-input v-model="param.captcha" placeholder="验证码">
+                        <template #prepend>
+                            <el-button>换一个</el-button>
+                        </template>
+                    </el-input>
+                    <img :src="captchaSrc" @click="getCaptcha" alt="验证码" />
+                </el-form-item>
+
                 <el-button class="login-btn" type="primary" size="large" @click="submitForm(register)">注册</el-button>
                 <p class="login-text">
                     已有账号，<el-link type="primary" @click="$router.push('/login')">立即登录</el-link>
@@ -52,12 +62,14 @@ import { ref, reactive } from 'vue';
 import { useRouter } from 'vue-router';
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
 import { Register } from '@/types/user';
+import svgCaptcha from 'svg-captcha';
 
 const router = useRouter();
 const param = reactive<Register>({
     username: '',
     password: '',
     email: '',
+    captcha: '',
 });
 
 const rules: FormRules = {
@@ -70,19 +82,36 @@ const rules: FormRules = {
     ],
     password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
     email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
+    captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
 };
 const register = ref<FormInstance>();
-const submitForm = (formEl: FormInstance | undefined) => {
+
-    if (!formEl) return;
+const captchaSrc = ref('');
-    formEl.validate((valid: boolean) => {
+const captchaText = ref('');
-        if (valid) {
+
-            ElMessage.success('注册成功，请登录');
+const getCaptcha = () => {
-            router.push('/login');
+    // 这个函数现在不执行任何操作，因为我们不需要动态生成验证码
-        } else {
+    const captcha = svgCaptcha.create();
-            return false;
+    captchaSrc.value = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(captcha.data)));
-        }
+    captchaText.value = captcha.text;
-    });
 };
+
+const submitForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.validate((valid: boolean) => {
+    if (valid && param.captcha === captchaText.value) {
+      ElMessage.success('注册成功，请登录');
+      router.push('/login');
+    } else {
+      ElMessage.error('验证码错误');
+      getCaptcha(); // 重新生成验证码
+      return false;
+    }
+  });
+};
+
+// 在组件创建时获取第一个验证码
+getCaptcha();
 </script>
 
 <style scoped>
@@ -132,4 +161,10 @@ const submitForm = (formEl: FormInstance | undefined) => {
     font-size: 14px;
     color: #787878;
 }
+
+img[src$=".png"] {
+    width: 100px; /* 根据实际图片大小调整 */
+    height: 40px; /* 根据实际图片大小调整 */
+    cursor: pointer;
+}
 </style>