Vue+axios获得后端数据并展示

在Vue中利用axios客户端实现对后端数据的处理与展示。
首先，安装axios：
利用npm安装：

npm install axios

打开项目的package.json文件，若“dependencies”中出现axios，证明安装成功

使用axios时，一定要先引入！

import axios from 'axios'

对于获取后端数据，课使用axios的get方法：

axios.get('api').then(res=>{
      //alert("111");
      this.College = res.data.College;
      //将api中College数据读入到此文件中的College数据中
    })
    .catch(erroe=>{
      alert("error");
    })

后端api数据格式：
整体代码：

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import axios from 'axios'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
            College: [],
          }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    axios.get('api').then(res=>{
      //alert("111");
      this.College = res.data.College;
    })
    .catch(erroe=>{
      alert("error");
    })
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: { }
};
</script>