Vue项目使用axios发送http请求

项目结构：

1：npm方式安装axios。

2：安装好后如项目结构图第二步，新建api文件夹，然后建config.js文件，在该文件中import axios.js。

import axios from "axios"==import axios from "axios.js";因为vscode会自动检测.js和.vue后缀文件。

config.js代码：

import axios from "axios";

// 创建一个axios实例
const service = axios.create({
  // 请求超时时间
  timeout: 3000
});

// 添加请求拦截器
// service.interceptors.request.use(
//   config => {
//     //console.log(config);
//     return config;
//   },
//   err => {
//     console.log(err);
//   }
// );
//响应拦截器。
// service.interceptors.response.use(
//   response => {
//     let res = {};
//     //console.log("响应拦截器。" + res);
//     res.status = response.status;
//     res.data = response.data;
//     return res;
//   },
//   err => console.log(err)
// );

export default service;

3：在main.js中引入第二步中的config.js文件(import http from "@/api/config")，然后挂载到Vue原型上(Vue.prototype.$http = http; //挂载到vue原型上)。

代码：

import Vue from "vue";
import App from "./App.vue";
import router from "./router"; //在根目录里找不到router.js的话，会默认去router目录下找对应的路由js文件。2019.12.15
import store from "./store";

// 全局配置
import "@/assets/scss/reset.scss";
import "element-ui/lib/theme-chalk/index.css";
import http from "@/api/config";
import "./mock";

// 第三方包
import ElementUI from "element-ui";
//import JsonExcel from "vue-json-excel";
//Vue.component("downloadExcel", JsonExcel);

Vue.use(ElementUI);
Vue.prototype.$http = http; //挂载到vue原型上。
Vue.prototype.$baseUrl = "https://localhost:5001";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

4:使用挂载好的axios获取数据：

<template>
  <div style="padding: 20px">
    <div class="main">
      <el-form :model="form" label-width="120">
        <el-form-item label="用户名">
          <el-input v-model="form.username" clearable></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" type="password" show-password></el-input>
        </el-form-item>
        <el-form-item align="right">
          <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- <img :src="backgrdImg" /> -->
    <div class="container">
      <div class="battery"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: "",
        password: ""
      },
      backgrdImg: require("../../assets/images/bg.jpg")
    };
  },
  methods: {
    login() {
      this.$http.post("api/permission/getMenu", this.form).then(res => {
        res = res.data;
        if (res.code === 20000) {
          this.$store.commit("clearMenu");
          this.$store.commit("setMenu", res.data.menu);
          this.$store.commit("setToken", res.data.token);
          this.$store.commit("addMenu", this.$router);
          this.$router.push({ name: "home" });
        } else {
          this.$message.warning(res.data.message);
        }
      });
      //console.log("111" + this.$baseUrl);
      this.$http.get(this.$baseUrl + "/weatherforecast").then(res => {
        console.log(res.data);
        res = res.data;
      });
      //请求接口参数类型为[formbody]，且参数为类。Account对应为类中属性。2019.12.30
      this.$http.post(this.$baseUrl + "/weatherforecast", { Account: "longdb", Pw: "123" }).then(res => {
        console.log(res.data);
        res = res.data;
      });
    },
    mounted() {
      console.log("333" + this.$route.path);
    }
  }
};
</script>

<style lang="scss" scoped>
.el-form {
  width: 100%;
  margin: auto;
  padding: 10px;
  height: 300px;
  background-color: rgb(23, 156, 156);
  border-radius: 5%;
}
.main {
  position: absolute;
  z-index: 10;
  right: 10%;
  top: 30%;
}
img {
  width: 100%;
  height: 100%;

  position: relative;
  z-index: 8;
}
.container {
  position: relative;
  width: 100%;
  height: 100%;
  margin: auto;
  // z-index: 9;
}

.battery {
  // height: 220px;
  height: 550px;
  box-sizing: border-box;
  border-radius: 15px 15px 5px 5px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.22));
  background: #fff;
  z-index: 9;

  // &::before {
  //   content: "longdb";
  //   position: absolute;
  //   width: 26px;
  //   height: 10px;
  //   left: 50%;
  //   top: 0;
  //   transform: translate(-50%, -10px);
  //   border-radius: 5px 5px 0 0;
  //   background: rgba(240, 240, 240, 0.88);
  // }

  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 90%;
    background: linear-gradient(to bottom, #7abcff 0%, #00bcd4 44%, #2196f3 100%);
    border-radius: 0px 0px 5px 5px;
    box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08);
    animation: charging 10s linear infinite;
    filter: hue-rotate(90deg);
  }
}

@keyframes charging {
  50% {
    box-shadow: 0 14px 28px rgba(0, 150, 136, 0.83), 0px 4px 10px rgba(9, 188, 215, 0.4);
  }

  95% {
    top: 5%;
    filter: hue-rotate(0deg);
    border-radius: 0 0 5px 5px;
    box-shadow: 0 14px 28px rgba(4, 188, 213, 0.2), 0 10px 10px rgba(9, 188, 215, 0.08);
  }
  100% {
    top: 0%;
    filter: hue-rotate(0deg);
    border-radius: 15px 15px 5px 5px;
    box-shadow: 0 14px 28px rgba(4, 188, 213, 0), 0 10px 10px rgba(9, 188, 215, 0.4);
  }
}
</style>