验证码功能

src/api/userlogin.js

 import request from '@/utils/request'
 //登录、修改密码
-//const webUrl  = 'http://localhost:168/fyglAPP/';
- const webUrl  = 'http://192.168.3.110:8999/diseaseControlManage/';
+const webUrl  = 'http://localhost:168/fyglAPP/';
+//const webUrl  = 'http://192.168.3.110:8999/diseaseControlManage/';
 // const webUrl  = 'http://195.1.3.38:8999/diseaseControlManage/';
 export function login(loginID, loginPas) {
   return request({
@@ -18,12 +18,17 @@ export function login(loginID, loginPas) {
   })
 }
 //图形码验证
-export function getCode(yzm){
-  var t =  (new Date).getTime(); //每次点击重新取个随机数
+export function getCode(yzm,t){
   return request({
-    url: 'http://192.168.3.110:8999/diseaseControlManage/api/login/verify?t='+t+'&code='+yzm,
+    url: webUrl+'api/login/verify?t='+t+'&code='+yzm,
     method:'post',
-    async:false, //同步
+    headers:{
+      'Content-Type':'application/json',
+      "Accept": "*/*"
+    },
+    data:JSON.stringify({
+
+    })
   })
 }
 
@@ -44,3 +49,9 @@ export function updatePassword(uid,pwdold,pwdnew) {
     })
   })
 }
+
+//更换验证码
+export function changeCode(data) {
+  let imgUrl = webUrl+`api/login/captcha?t=${data}`;
+  return imgUrl
+}

src/components/UserLogin.vue

@@ -18,7 +18,7 @@
           maxlength="8"
           style="width: 130px;display: inline-block;margin: 0px 12px 0px 0px;"
         ></el-input>
-        <img src="" ref="code" @click="changeCode" height="40">
+        <img :src="imgUrl"  @click="changeImg()" height="40">
       </div>
 
       <div class="PassAbout">
@@ -36,7 +36,7 @@
 </template>
 
 <script>
-  import { getCode,login} from '@/api/userlogin.js'
+  import { getCode,login,changeCode} from '@/api/userlogin.js'
 
   export default {
     data() {
@@ -48,7 +48,10 @@
         checked: false,
         captcha_key: "",
         captcha_code: "",
-        value2: ''
+        value2: '',
+        t:(new Date).getTime(),
+        imgUrl:'',
+        imgData:''
       }
     },
     methods: {
@@ -69,14 +72,14 @@
       
         let _this = this
 
-       getCode(this.captcha_code).then( res =>{
-          console.log(res)
-           console.log("登录报错！");
-       }).catch(err => {
-          // console.log("登录报错！");
-         })
+       getCode(this.captcha_code,this.imgData).then(res =>{
+         if(res==undefined){
+           this.$message.error('验证码错误');
+           return false
+         }
          // 用户登录
          login(this.loginID, this.$md5(this.loginPas)).then(res => {
+           console.log(res)
            //login(this.loginID,this.loginPas).then( res=>{
 
            if (res.code == 1) {
@@ -118,22 +121,20 @@
          }).catch(err => {
            console.log("登录报错！");
          })
-      },
-       
-
-      //更换验证码
-      changeCode() {
-        this.$refs.code.setAttribute(
-          "src", 'http://192.168.3.110:8999/diseaseControlManage/api/login/captcha' + '?t=' + (new Date).getTime()
-        );
+         return false
+       }).catch(err => {
+          console.log("登录报错！");
+         })
 
+      },
+      changeImg(){
+        this.imgData = (new Date).getTime();
+        this.imgUrl = changeCode(this.imgData);
       }
-
     },
     mounted() {
-       this.$refs.code.setAttribute(
-        "src", 'http://192.168.3.110:8999/diseaseControlManage/api/login/captcha'
-      );
+      this.imgData = (new Date).getTime()
+      this.imgUrl = changeCode(this.imgData);
 
       if (sessionStorage.getItem('userID') && sessionStorage.getItem('userPas')) {
         // 若 local 存在即自动跳转

src/utils/request.js

@@ -61,10 +61,10 @@ service.interceptors.response.use(
           }
         }
       } else {
-        Notification.error({
-          title: '接口请求失败',
-          duration: 5000
-        })
+        // Notification.error({
+        //   title: '接口请求失败',
+        //   duration: 5000
+        // })
       }