调整验证码校验规则保证前后端配置一致 #794

server/api/v1/system/sys_captcha.go

@@ -34,8 +34,9 @@ func (b *BaseApi) Captcha(c *gin.Context) {
 		response.FailWithMessage("验证码获取失败", c)
 	} else {
 		response.OkWithDetailed(systemRes.SysCaptchaResponse{
-			CaptchaId: id,
-			PicPath:   b64s,
+			CaptchaId:     id,
+			PicPath:       b64s,
+			CaptchaLength: global.GVA_CONFIG.Captcha.KeyLong,
 		}, "验证码获取成功", c)
 	}
 }

server/model/system/response/sys_captcha.go

 package response
 
 type SysCaptchaResponse struct {
-	CaptchaId string `json:"captchaId"`
-	PicPath   string `json:"picPath"`
+	CaptchaId     string `json:"captchaId"`
+	PicPath       string `json:"picPath"`
+	CaptchaLength int    `json:"captchaLength""`
 }

web/src/style/login.scss

-.login-register-box {
-    height: 100vh;
-    .login-box {
-        width: 40vw;
-        position: absolute;
-        left: 50%;
-        margin-left: -22vw;
-        top: 5vh;
-        .logo {
-            height: 35vh;
-            width: 35vh;
-        }
-    }
-}
-
-.link-icon {
-    width: 20px;
-    min-width: 20px;
-    height: 20px;
-    border-radius: 10px;
-}
-
-.vPic {
-    width: 33%;
-    height: 38px;
-    float: right !important;
-    background: #ccc;
-    img {
-        cursor: pointer;
-        vertical-align: middle;
-    }
-}
-
-.logo_login {
-    width: 100px;
-}
-
-#userLayout.user-layout-wrapper {
-    height: 100%;
-    position: relative;
-    &.mobile {
-        .container {
-            .main {
-                max-width: 368px;
-                width: 98%;
-            }
-        }
-    }
-    .container {
-        position: relative;
-        overflow: auto;
-        width: 100%;
-        min-height: 100%;
-        background: #f0f2f5 url(@/assets/background.svg) no-repeat 50%;
-        background-size: 100%;
-        padding: 110px 0 144px;
-        a {
-            text-decoration: none;
-        }
-        .top {
-            text-align: center;
-            margin-top: -40px;
-            .header {
-                height: 44px;
-                line-height: 44px;
-                margin-bottom: 30px;
-                .badge {
-                    position: absolute;
-                    display: inline-block;
-                    line-height: 1;
-                    vertical-align: middle;
-                    margin-left: -12px;
-                    margin-top: -10px;
-                    opacity: 0.8;
-                }
-                .logo {
-                    height: 44px;
-                    vertical-align: top;
-                    margin-right: 16px;
-                    border-style: none;
-                }
-                .title {
-                    font-size: 33px;
-                    color: rgba(0, 0, 0, 0.85);
-                    font-family: Avenir, "Helvetica Neue", Arial, Helvetica, sans-serif;
-                    font-weight: 600;
-                    position: relative;
-                    top: 2px;
-                }
-            }
-            .desc {
-                font-size: 14px;
-                color: rgba(0, 0, 0, 0.45);
-                margin-top: 12px;
-            }
-        }
-        .main {
-            min-width: 260px;
-            width: 368px;
-            margin: 0 auto;
-        }
-        .footer {
-            position: relative;
-            width: 100%;
-            padding: 0 20px;
-            margin: 40px 0 10px;
-            text-align: center;
-            .links {
-                margin-bottom: 8px;
-                font-size: 14px;
-                width: 330px;
-                display: inline-flex;
-                flex-direction: row;
-                justify-content: space-between;
-                padding-right: 40px;
-                a {
-                    color: rgba(0, 0, 0, 0.45);
-                    transition: all 0.3s;
-                }
-            }
-            .copyright {
-                color: rgba(0, 0, 0, 0.45);
-                font-size: 14px;
-                padding-right: 40px;
-            }
-        }
-    }
-}
\ No newline at end of file

web/src/view/login/index.vue

@@ -7,7 +7,7 @@
             class="login_panle_form_title_logo"
             :src="$GIN_VUE_ADMIN.appLogo"
             alt
-          />
+          >
           <p class="login_panle_form_title_p">{{ $GIN_VUE_ADMIN.appName }}</p>
         </div>
         <el-form
@@ -50,19 +50,20 @@
                 :src="picPath"
                 alt="请输入验证码"
                 @click="loginVerify()"
-              />
+              >
             </div>
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" style="width: 46%" @click="checkInit"
-              >前往初始化</el-button
-            >
+            <el-button
+              type="primary"
+              style="width: 46%"
+              @click="checkInit"
+            >前往初始化</el-button>
             <el-button
               type="primary"
               style="width: 46%; margin-left: 8%"
               @click="submitForm"
-              >登 录</el-button
-            >
+            >登 录</el-button>
           </el-form-item>
         </el-form>
       </div>
@@ -70,16 +71,16 @@
       <div class="login_panle_foot">
         <div class="links">
           <a href="http://doc.henrongyi.top/">
-            <img src="@/assets/docs.png" class="link-icon" />
+            <img src="@/assets/docs.png" class="link-icon">
           </a>
           <a href="https://www.yuque.com/flipped-aurora/">
-            <img src="@/assets/yuque.png" class="link-icon" />
+            <img src="@/assets/yuque.png" class="link-icon">
           </a>
           <a href="https://github.com/flipped-aurora/gin-vue-admin">
-            <img src="@/assets/github.png" class="link-icon" />
+            <img src="@/assets/github.png" class="link-icon">
           </a>
           <a href="https://space.bilibili.com/322210472">
-            <img src="@/assets/video.png" class="link-icon" />
+            <img src="@/assets/video.png" class="link-icon">
           </a>
         </div>
         <div class="copyright">
@@ -124,8 +125,6 @@ export default {
         password: [{ validator: checkPassword, trigger: 'blur' }],
         captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' },
           {
-            min: 5,
-            max: 6,
             message: '验证码格式不正确',
             trigger: 'blur',
           }]
@@ -180,6 +179,8 @@ export default {
     },
     loginVerify() {
       captcha({}).then((ele) => {
+        this.rules.captcha[1].max = ele.data.captchaLength
+        this.rules.captcha[1].min = ele.data.captchaLength
         this.picPath = ele.data.picPath
         this.loginForm.captchaId = ele.data.captchaId
       })
@@ -189,9 +190,6 @@ export default {
 
 </script>
 
-
-
-
 <style lang="scss" scoped>
 @import "@/style/newLogin.scss";
 </style>