feat:登录添加验证码校验

portal-manager-ui/admin/src/api/user.js

 import http from "../request/http";
-let baseURL = process.env.VUE_APP_API_BASE_URL
+let baseURL = process.env.VUE_APP_API_BASE_URL;
 // 1.2.1. 登录
 export function LoginInterface(params) {
   return http.post(`${baseURL}/zwfw/login/login`, params);
@@ -20,3 +20,9 @@ export function changePassword(params) {
 export function editPassword(params) {
   return http.post(`${baseURL}/zwfw/user/reset/password`, params);
 }
+// 获取图形验证码
+export function createCode(params) {
+  return http.post(`${baseURL}/zwfw/securitycode/createCode`, params, {
+    responseType: "blob",
+  });
+}

portal-manager-ui/admin/src/views/signIn/signIn.vue

@@ -18,7 +18,7 @@
               placeholder="请输入用户名"
               onfocus="this.placeholder=''"
               onblur="this.placeholder='请输入用户名'"
-              style="width: 520px; height: 50px"
+              style="width: 520px; height: 52px"
               class="user"
               v-model="form.loginName"
             />
@@ -33,16 +33,19 @@
               v-model="form.password"
               @pressEnter="handleSubmit"
             />
-            <!-- <a-input
-              type="password"
-              placeholder="请输入密码"
-              onfocus="this.placeholder=''"
-              onblur="this.placeholder='请输入密码'"
-              style="width: 520px; height: 52px"
-              class="password"
-              v-model="form.password"
-              @pressEnter="handleSubmit"
-            /> -->
+          </a-form-model-item>
+          <a-form-model-item prop="code">
+            <div class="code" style="width: 520px; height: 52px">
+              <a-input
+                placeholder="请输入验证码"
+                onfocus="this.placeholder=''"
+                onblur="this.placeholder='请输入验证码'"
+                style="height: 52px"
+                v-model="form.code"
+                @pressEnter="handleSubmit"
+              />
+              <img :src="imgCode" @click="createCode" />
+            </div>
           </a-form-model-item>
           <a-form-model-item>
             <a-button
@@ -65,17 +68,22 @@ import { LoginInterface } from "@/api/user.js";
 export default {
   data() {
     return {
+      api: process.env.VUE_APP_API_BASE_URL,
+      imgCode: "",
       form: {
         loginName: "",
         password: "",
+        code: "",
       },
       rules: {
         loginName: [{ required: true, message: "请输入账号", trigger: "blur" }],
         password: [{ required: true, message: "请输入密码", trigger: "blur" }],
+        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
       },
     };
   },
   created() {
+    this.createCode();
     let token = this.$Storage.get(2, "Authorization");
     if (token) {
       this.$router.push("/home/dataManagement/dataAdmin");
@@ -84,6 +92,13 @@ export default {
   methods: {
     // ...mapMutations("user", ["SET_USERDATA"]),
     // ...mapActions("user", ["getCensusList", "getAppsList"]),
+    // 获取验证码
+    createCode() {
+      // 加时间戳印记用于刷新gif
+      let mark = new Date().getTime();
+      this.imgCode =
+        this.api + "/zwfw/securitycode/createCode" + `?mark=${mark}`;
+    },
     handleSubmit() {
       this.$refs.formData.validate(async (valid) => {
         if (valid) {
@@ -133,8 +148,6 @@ export default {
       padding-top: 30px;
       .user,
       /deep/.password {
-        text-align: center;
-        border-color: #dadada;
         margin: auto;
         margin-bottom: 5px;
         margin-top: 8px;
@@ -144,7 +157,6 @@ export default {
             color: rgb(111, 164, 227);
             font-size: 16px;
           }
-          border: 1px solid #dadada !important;
         }
       }
       /deep/.ant-col-offset-4 {
@@ -169,6 +181,20 @@ export default {
       }
     }
   }
+  .code {
+    display: flex;
+    align-items: center;
+    .ant-input {
+      height: 100%;
+      border-radius: 4px 0px 0px 4px;
+      flex: 1;
+    }
+    img {
+      height: 52px;
+      border-radius: 0px 4px 4px 0px;
+      cursor: pointer;
+    }
+  }
 }
 input::-webkit-input-placeholder {
   /* WebKit browsers */