axios是什么？是干什么的？(就是从后台调取数据的功能)

Axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

axios：前端通信框架，因为vue的边界很明确，就是为了处理DOM，所以并不具备通信功能，此时就需要额外使用一个通信框架与服务器交互；当然也可以使用jQuery提供的AJAX通信功能。

1.安装axios

查看是否在正确的目录下下载的，在终端输入dir看见package.json ，那你的目录就是对的。

终端输入npm install axios 安装

安装后打开 package.json

看见多了axios就成功了

2.在main.js全局路由里面写入。

（aixos的引入；定义一个全局变量，存放路径，这样就不需要每一个网页都重复的敲这个路径，可以直接省略，避免冗余。）

1.import axios from 'axios'//1.aixos的引入

2.axios.defaults.baseURL = "http://www.**.com:8761";//2.定义要成为全局变量的路径

 3.创建一个.vue的文件，通过axios获取服务器的内容

（1.template：div）

<template>
  <div>
      <div>点击下面按钮，通过axios调出内容</div>
      <button @click="onclick">点我</button> <!-- 1.点击调取功能 -->
     
        <div v-for="(category,index) in categorys" :key="index"> <!-- 2.循环输出内容 -->
      {{category.id}}
      {{category.name}}
    </div>
  </div>
</template>

（2.script：axios调用内容）

<script>
import axios from "axios";//导入axios
//没有定义全局变量，没有引入axios的时候，要自己在每个文档引入这段话，如果有第二步，就不需要了
export default {
  data() {
    return {
      name: "abc",//变量，可以{{abc}}在网址输出内容
      categorys: [],//定义一个数组，来输出内容
    };
  },

  methods: {
    onclick() {
      var that = this;
      this.axios
        .get("http://www.yhjtp.com:8761/category/list", {})
//连接服务器的功能网址，没有把网址定义成全局变量，则需要完整在每一个网页敲网址，如果有第二步，//就不需要。 
        .then(function(response) {
          console.log(response);
          that.categorys = response.data.data;//这里是调用，在网页显示。
          // .data.data，有几个data，要看服务器调用出来的时候有几个data，
          //有时候有一个或者多个。
        });
    }
    }
  
}
</script>

(ps:单纯从服务器调用到控制台看信息)

<script>
import axios from "axios";//导入axios
export default {
  data() {
    return {
      name: "abc",//变量，可以{{abc}}在网址输出内容
     // categorys: [],//定义一个数组，来输出内容
    };
  },

  methods: {
    onclick() {
      axios
         .get("http://www.yhjtp.com:8761/category/list") //get路径
         .then(function(response) {
           console.log(response);  //服务端调用的信息返回过来 打印出来
        // 【这一段的内容是从服务器调用出来，在控制台显示】
         })
         .catch(function(error) {
           console.log(error); 
//catch 异常捕获 当出了错会执行这段，当然，你觉得不可能出错可以删除这一段
    }
    }
  
}
</script>

3.VUE路由的配置

import second  from "../components/second"
const routes = [  
 { path: "/second", component: second},]