注册前后端连接

ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/SysLoginController.java

@@ -48,6 +48,8 @@ public class SysLoginController
     @PostMapping("/login")
     public AjaxResult login(@RequestBody LoginBody loginBody)
     {
+        System.out.println("==============="+loginBody.getUuid());
+
         AjaxResult ajax = AjaxResult.success();
         // 生成令牌
         String token = loginService.login(loginBody.getUsername(), loginBody.getPassword(), loginBody.getCode(),

ruoyi-framework/src/main/java/com/ruoyi/framework/web/service/SysLoginService.java

@@ -63,6 +63,7 @@ public class SysLoginService
      */
     public String login(String username, String password, String code, String uuid)
     {
+        System.out.println("======"+uuid);
         // 验证码校验
         validateCaptcha(username, code, uuid);
         // 登录前置校验

vue2/vue/src/components/Login.vue

@@ -13,7 +13,7 @@
         </div>
         <div class="input-group captcha-group">
           <i class="fas fa-shield-alt"></i>
-          <input type="text" v-model="captcha" placeholder="验证码" required />
+          <input type="text" v-model="code" placeholder="验证码" required />
           <!-- 显示验证码图片 -->
           <img :src="captchaUrl" @click="refreshCaptcha" alt="验证码" class="captcha-image" style="margin-top: 5px"/>
         </div>
@@ -33,8 +33,9 @@ export default {
     return {
       username: '',
       password: '',
-      captcha: '', // 存储用户输入的验证码
+      code: '', // 存储用户输入的验证码
-      captchaUrl: '' // 验证码图片的 URL
+      captchaUrl: '' ,// 验证码图片的 URL
+      uuid: ''
     };
   },
   methods: {
@@ -45,6 +46,7 @@ export default {
             if (data.code === 200) {
               // 将 Base64 编码的图像转换为数据 URL
               this.captchaUrl = `data:image/jpeg;base64,${data.img}`;
+              this.uuid = data.uuid; // 存储 uuid
             } else {
               console.error('获取验证码失败:', data.msg);
             }
@@ -54,20 +56,35 @@ export default {
           });
     },
     async login() {
-      try {
+        try {
-        const response = await axios.post('http://localhost:8081/login', {
+          const response = await axios.post('http://localhost:8081/login', {
-          username: this.username,
+            username: this.username,
-          password: this.password,
+            password: this.password,
-          captcha: this.captcha // 将验证码传递给后端
+            code: this.code,// 将验证码传递给后端
-        });
+            uuid: this.uuid
-        // 处理成功登录的逻辑，比如存储 token
+          }, {
-        console.log('登录成功', response.data);
+            headers: {
-      } catch (error) {
+              'Content-Type': 'application/json' // 指定内容类型为 JSON
-        console.error('登录失败', error);
+            }
-        // 登录失败时可以选择刷新验证码
+          });
-        this.refreshCaptcha();
+          console.log('用户名',this.username);
-      }
+          console.log('密码',this.password);
-    },
+          console.log('验证码',this.code);
+          console.log('uuid',this.uuid);
+
+          if (response.data.code === 200) {
+            console.log('登录成功', response.data);
+            window.location.href = 'http://localhost:8080'; // 登录成功后跳转
+          } else {
+            console.error('登录失败', response.data.msg);
+            this.refreshCaptcha(); // 登录失败时刷新验证码
+          }
+        } catch (error) {
+          console.error('登录失败', error);
+          // 登录失败时可以选择刷新验证码
+          this.refreshCaptcha();
+        }
+      },
     // 刷新验证码
     refreshCaptcha() {
       this.fetchCaptcha();