axios封装

第一步项目中安装 npm install --save axios

第二步项目中创建api文件夹。api文件夹中创建api.js封装文件

import axios from "axios"; //导入axiso
let baseUrl = "http://47.94.4.201/index.php"

// get请求
export function getCode() {
  return new Promise((resolve, reject) => {
    axios.get(baseUrl+'/index/index/getcode',)
    .then((res) => {
      resolve(res.data);
    })
    .catch((err) => {
      reject(err);
    });
  });
}

// post请求
export function getlogin(obj) {
  return new Promise((resolve, reject) => {
    axios.post(baseUrl+"/index/index/login",obj)
    // axios({
    //   method: "post",
    //   url: "地址",
    //   data: obj,
    // })
      .then((res) => {
        resolve(res);  
      })
      .catch((err) => {
        reject(err);
      });
  });
}

第三步页面中使用

<template>
      <input type="text" v-model="name" placeholder="用户名" />
      <input type="password" v-model="pwd" placeholder="密码" /> 
      <input type="text" v-model="yan" placeholder="验证码" />
      {{ vercode }}
    <button @click="login()">登录</button>
  </div>
</template>
<script>
import { getCode, getlogin } from "../api/api"; //导入api.js封装文件
export default {
  data() {
    return {
      name: "",
      pwd: "",
      yan: "",
      vercode: "",
    };
  },

  created() {
    this.code();
  },
methods: {
   // 验证码
    code() {
      getCode().then((res) => {
        this.vercode = res.msg;
      });
    },
    // 登录
    login() {
      let obj = {
        name: this.name,
        pwd: this.pwd,
        vercode: this.yan,
      };
      getlogin(obj).then((res) => {
        console.log(res);
      });
    },
}}

</script>