app登录界面

<template>
<div class='box'>
      <div><input type="text" placeholder="请输入用户名" v-model="user" maxlength="11"></div>
      <div><input type="password" placeholder="请输入密码" v-model="password" maxlength="6"></div>
      <div><input type="text" placeholder="输入验证码" v-model="code"><img :src="imgSrc" alt=""></div>
      <button type="submit" @click="denglu">登录</button>
</div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
      user:'',
      password:'',
      code:'',
      imgSrc:''
    }
  },
  mounted () {
    this.$axios.post('http://elm.cangdu.org/v1/captchas').then(res=>{
       this.imgSrc=res.code;
      console.log(res)
    })
   },
  methods: {
   denglu(){
      let phoneRegs = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/;
       // 第一步验证手机号的正确性
            if(phoneRegs.test(this.user)) {
                // 第二步，密码验证不得小于6位
                if(this.password.length>=6) {
                    if(this.code.length == 4) {
                        let obj = {
                            username:this.user,
                            password:this.password,
                            captcha_code:this.code
                        }                       this.$axios.post("http://elm.cangdu.org/v2/login",obj).then((res)=>{
                            console.log(res)
                        })
                        
                    }
                } else {
                    
                }
            } else {
                console.log("验证失败")
            }
   }
  }
}
</script>

<style scoped >
  input{
    border: 1px solid #ddd;
    margin: 5px;
    padding: 10px 10px;
  }
  button{
    margin-left: 60px;
  }
</style>

验证码失效涉及跨域问题
vue脚手架解决跨域问题-------配置反向代理

1.打开config/index.js

2.在dev配置对象中找到proxyTable:{}

3.添加如下配置

复制代码
// 配置反向代理，解决跨域请求

proxyTable: {
‘/api’: {
target: ‘http://www.ajax.cn’, 跨域的地址
changeOrigin: true,
pathRewrite: {
‘^/api’: ‘/api’
}
}
},

复制代码
4.重启开发服务器npm run dev

发送请求示例

// 导入axios import axios from ‘axios’
axios.defaults.baseURL=‘http://localhost:8080’
axios.get(’/api/json.php’).then(function(res){
console.log(res); });