增加验证码功能

QMPlusVuePage/src/api/user.js

@@ -65,4 +65,20 @@ export const setUserAuthority = (data) => {
         method: 'post',
         data: data
     })
-}
+}
+
+// @Tags User
+// @Summary 验证码
+// @Security ApiKeyAuth
+// @accept application/json
+// @Produce application/json
+// @Param data body api.SetUserAuth true "设置用户权限"
+// @Success 200 {string} json "{"success":true,"data":{},"msg":"修改成功"}"
+// @Router /user/setUserAuthority [post]
+export const captcha = (data) => {
+    return service({
+        url: "/base/captcha",
+        method: 'post',
+        data: data
+    })
+}

QMPlusVuePage/src/view/login/login.vue

@@ -16,6 +16,14 @@
             <i :class="'el-input__icon el-icon-' + lock" @click="changeLock" slot="suffix"></i>
           </el-input>
         </el-form-item>
+        <el-form-item>
+          <el-input
+            v-model="loginForm.captcha"
+            name="logVerify"
+            maxlength="10"
+          />
+          <img :src="path + picPath" alt="请输入验证码" @click="loginVefify()" class="vPic">
+        </el-form-item>
         <el-form-item>
           <el-button @click="submitForm" style="width:100%">登 录</el-button>
         </el-form-item>
@@ -27,6 +35,8 @@
 
 <script>
 import { mapActions } from 'vuex'
+import { captcha } from '@/api/user'
+const path = process.env.VUE_APP_BASE_API
 export default {
   name: 'Login',
   data() {
@@ -49,14 +59,22 @@ export default {
       lock: 'lock',
       loginForm: {
         username: '',
-        password: ''
+        password: '',
+        captcha:'',
+        captchaId: '',
       },
       rules: {
         username: [{ validator: checkUsername, trigger: 'blur' }],
         password: [{ validator: checkPassword, trigger: 'blur' }]
-      }
+      },
+      path:path,
+      logVerify:'',
+      picPath:''
     }
   },
+  created() {
+    this.loginVefify()
+  },
   methods: {
     ...mapActions('user', ['LoginIn']),
     async login() {
@@ -78,6 +96,13 @@ export default {
     },
     changeLock() {
       this.lock === 'lock' ? (this.lock = 'unlock') : (this.lock = 'lock')
+    },
+    loginVefify() {
+      console.log(this.logVerify)
+      captcha({}).then(ele=>{
+        this.picPath = ele.data.picPath
+        this.loginForm.captchaId = ele.data.captchaId
+      })
     }
   }
 }
@@ -94,5 +119,9 @@ export default {
     margin-left: -22vw;
     top: 25vh;
   }
+  .vPic{
+    position: absolute;
+    right: 10px;
+  }
 }
-</style>
+</style>

QMPlusVuePage/vue.config.js

@@ -95,4 +95,4 @@ module.exports = {
                 }
             )
     }
-}
+}