修改

package.json

@@ -14,7 +14,7 @@
     "test:ci": "npm run lint && npm run test:unit"
   },
   "dependencies": {
-    "axios": "0.18.1",
+    "axios": "^1.1.2",
     "core-js": "3.6.5",
     "element-ui": "2.13.2",
     "js-cookie": "2.2.0",

src/main.js

@@ -23,10 +23,10 @@ import '@/permission' // permission control如果
  * Currently MockJs will be used in the production environment,
  * please remove it before going online ! ! !
  */
-if (process.env.NODE_ENV === 'production') {
+// if (process.env.NODE_ENV === 'production') {
-  const { mockXHR } = require('../mock')
+//   const { mockXHR } = require('../mock')
-  mockXHR()
+//   mockXHR()
-}
+// }
 
 // set ElementUI lang to EN
 //Vue.use(ElementUI, { locale })

src/views/login/index.vue

@@ -40,6 +40,25 @@
           <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
         </span>
       </el-form-item>
+      <div class="captcha_k">
+            <el-form-item prop="captcha">
+                <span class="svg-container">
+                <svg-icon icon-class="user" />
+                </span>
+                <el-input
+                ref="captcha"
+                v-model="loginForm.captcha"
+                placeholder="验证码"
+                name="用户名"
+                type="text"
+                tabindex="3"
+                auto-complete="on"
+                />        
+            </el-form-item>
+            <div class="captcha_main" v-loading="captcha_loading">
+                <img class="captcha_img" :src="captchaimg" alt="验证码"/>
+            </div>        
+      </div>
       
       <el-button class="bt_login" :loading="loading" type="primary" @click.native.prevent="handleLogin">登入</el-button>
       <el-button class="bt_rest bt_login" @click="resetForm('loginForm')">重置</el-button>
@@ -53,19 +72,141 @@
 
 </template>
 
+<script>
+//import { validUsername } from '@/utils/validate'
+import axios from 'axios'
+export default {
+  
+  mounted: function () {
+    this.getCustomers();
+  },
+  data() {
+    
+    const validateUsername = (rule, value, callback) => {
+      if (value.length < 3) {
+        callback(new Error('请输入正确的用户名'))
+      } else {
+        callback()
+      }
+    }
+    const validatePassword = (rule, value, callback) => {
+      if (value.length < 6) {
+        callback(new Error('请输入正确的密码'))
+      } else {
+        callback()
+      }
+    }
+    const validateCaptcha = (rule, value, callback) => {
+      if (value.length < 5) {
+        callback(new Error('请输入正确的验证码'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      loginForm: {
+        username: '',
+        password: '',
+        captcha: ''
+      },
+      captchaimg: '',  // 验证码图片
+      loginRules: {
+        username: [
+            { required: true, trigger: 'blur', validator: validateUsername }
+        ],
+        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
+        captcha: [{ required: true, trigger: 'blur', validator: validateCaptcha }]
+      },
+      loading: false,
+      captcha_loading: false,
+      passwordType: 'password',
+      redirect: undefined
+    }
+  },
+  watch: {
+    $route: {
+      handler: function(route) {
+        this.redirect = route.query && route.query.redirect
+      },
+      immediate: true
+    }
+  },
+  methods: {
+
+    // 页面数据
+    getCustomers() {
+        let thiss = this;
+        axios.post('/api/captcha', 'refresh').then(function (response) {
+            let datamain = response.data;
+            thiss.captchaimg = datamain.data;
+            console.log(response);
+        }).catch(function (error) {
+            //console.log(error);
+            this.$message({
+                showClose: true,
+                message: error,
+                type: 'error'
+            });
+        });
+    },
+    showPwd() {
+      if (this.passwordType === 'password') {
+        this.passwordType = 'text'
+      } else {
+        this.passwordType = 'password'
+      }
+      this.$nextTick(() => {
+        this.$refs.password.focus()
+      })
+    },
+    handleLogin() {
+      this.$refs.loginForm.validate(valid => {
+        // console.log(valid);
+        if (valid) {
+            this.loading = true
+            let thiss = this;
+            axios.post('/api/login', this.loginForm, {
+                headers: {
+                    'Content-Type': 'multipart/form-data'
+                }
+            }).then(function (response) {
+                console.log(thiss.$router)
+                thiss.$router.push({path: '/usermange'})
+                console.log('6666');
+            }).catch(function (error) {
+                //console.log(error);
+                this.$message({
+                    showClose: true,
+                    message: error,
+                    type: 'error'
+                });
+            });
+            // this.$store.dispatch('user/login', this.loginForm).then(() => {
+            //     this.$router.push({ path: this.redirect || '/' })
+            //     this.loading = false
+            // }).catch(() => {
+            //     this.loading = false
+            // })
+
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    resetForm(formName) {
+        this.$refs[formName].resetFields();
+    }
+  }
+}
+</script>
 <style lang="scss">
 
 $bg:#283443;
 $light_gray:#fff;
 $cursor: #3c3535;
-
-// @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
-//   .login-container .el-input input {
-//     color: $cursor;
-//   }
-// }
-
 /* reset element-ui css */
+//input::placeholder{color:#5a5252 !important;}
 .login-container {
   .el-input {
     display: inline-block;
@@ -98,7 +239,7 @@ $cursor: #3c3535;
 }
 </style>
 
-<style lang="scss" scoped>
+<style lang="scss">
 
 .login-container {
   min-height: 100%;
@@ -158,106 +299,9 @@ $cursor: #3c3535;
     cursor: pointer;
     user-select: none;
   }
+  .captcha_k{display:flex;}
+  .captcha_k .captcha_main{width:100px;height:54px;margin: 0 0 0 15px;}
+  .captcha_k .captcha_img{border-radius:6px;display:block;max-width:100%;height:100%;}
+  .captcha_k>.el-form-item{flex:1;}
 }
 </style>
-
-<script>
-//import { validUsername } from '@/utils/validate'
-import axios from 'axios'
-export default {
-
-  data() {
-    const validateUsername = (rule, value, callback) => {
-      if (value.length < 3) {
-        callback(new Error('请输入正确的用户名'))
-      } else {
-        callback()
-      }
-    }
-    const validatePassword = (rule, value, callback) => {
-      if (value.length < 6) {
-        callback(new Error('请输入正确的密码'))
-      } else {
-        callback()
-      }
-    }
-    return {
-      loginForm: {
-        username: '',
-        password: ''
-      },
-      loginRules: {
-        username: [
-            { required: true, trigger: 'blur', validator: validateUsername }
-        ],
-        
-        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
-      },
-      loading: false,
-      passwordType: 'password',
-      redirect: undefined
-    }
-  },
-  watch: {
-    $route: {
-      handler: function(route) {
-        this.redirect = route.query && route.query.redirect
-      },
-      immediate: true
-    }
-  },
-  methods: {
-    showPwd() {
-      if (this.passwordType === 'password') {
-        this.passwordType = 'text'
-      } else {
-        this.passwordType = 'password'
-      }
-      this.$nextTick(() => {
-        this.$refs.password.focus()
-      })
-    },
-    handleLogin() {
-      this.$refs.loginForm.validate(valid => {
-        // console.log(valid);
-        if (valid) {
-          this.loading = true
-          let thiss = this;
-            // axios.post('/api/mkdir', {
-            //     firstName: 'Fred',
-            //     lastName: 'Flintstone'
-            // })
-            // .then(function (response) {
-            //     console.log(thiss.$router)
-            //     thiss.$router.push({ path: '/usermange'})
-            //     console.log(response + 'ffef');
-            // })
-            // .catch(function (error) {
-            //     console.log(error);
-            // });
-            // this.$message({
-            //     showClose: true,
-            //     message: '错了哦，这是一条错误消息',
-            //     type: 'error'
-            // });
-          this.$store.dispatch('user/login', this.loginForm).then(() => {
-            this.$router.push({ path: this.redirect || '/' })
-            this.loading = false
-          }).catch(() => {
-            this.loading = false
-          })
-            
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
-    },
-
-    resetForm(formName) {
-        this.$refs[formName].resetFields();
-      }
-  }
-}
-</script>
-

vue.config.js

@@ -41,7 +41,7 @@ module.exports = {
     //before: require('./mock/mock-server.js'),
     proxy: {
         '/api': {
-              target: 'http://192.168.1.8:1080',// 你要请求的后端接口ip+port
+            target: 'https://dev.filesite.io',// 你要请求的后端接口ip+port
             changeOrigin: true,// 允许跨域，在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
             ws: true,// 开启webSocket
             pathRewrite: {