封装api（登录页面）

• 在项目开发过程中，为了方便统一操作，通常会把API封装到一个文件里，在页面直接使用就可以了，避免后端修改接口的时候在每一个发请求的页面修改。
• 鉴于这个项目对API的封装不同于以往的做法，我决定记录自己封装的每一个API。
• 获取后端图形验证API封装：

const HOST = "http://192.168.0.135";//接口路径
const CAPRCHA = HOST + "/captcha.jpg";//验证码路径

export function getCaptcha(successFn) {
    axios.get(CAPRCHA)
        .then(function(res) {
            if (res.status == 200) {
                var imgUrl = res.config.url
                successFn(imgUrl);//将验证码的路径用函数返回
            }
        })
        .catch(function(error) {
            console.log(error);
        });
}
//将获取验证码API导出
export default {
    getCaptcha: getCaptcha
}

/*在登录页面使用 ,在vue实例被创建的时候发请求，获取图形验证码*/
import { getCaptcha, getUserInfo} from "@/api/index.js";//在登录页面引入

  mounted() {
  //在mounted函数中调用
    const _this = this;
    getCaptcha(_this.showImg);
  },

• 封装登录API

//登录，向后端传参，发post请求

export function getUserInfo(data，successFn) {
  axios.post(LOGIN + "?t=" + new Date().getTime(), data)
      .then(function(response) {
          console.log(response);
          if (response.data.code == 500) {
              getCaptcha()
          }
          if(response.data.code==200){
  				successFn()//登录成功执行的方法
  		}
      })
      .catch(function(error) {
          console.log(error);
      });
}
const LOGIN = HOST + "/login";//定义登录请求的路径
//在登录页面使用
login() {
    var data={loginName:this.form.username,  loginPassword:this.form.password,captcha:this.form.code
    }
      getUserInfo(data,this.toIndex)//获取用户的用户名和密码，传给后端。
，toIndex(){
//登录成功跳转页面
  	this.$router.push("/index");
}