三、vue脚手架使用axios

一、绑定表格数据（已安装element-ui）

<template>
  <div class="student">
    <button @click="$router.go(-1)">返回</button>
    学生管理模块
    {{ msg }}
    <el-button type="primary">主要按钮</el-button>
    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="栏目名称"></el-table-column>
        <el-table-column prop="description" label="简介"></el-table-column>
        <el-table-column prop="no" label="序号"></el-table-column>
        <el-table-column prop="parentId" label="父栏目Id"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
// 导入第三方模块
import axios from "axios";
export default {
  data() {
    return {
      msg: "我是学生模块",
      tableData: [],
    };
  },
  methods: {
    findAllCategories() {
      axios({
        method: "get",
        url: "http://121.199.29.84:8001/index/category/findAll",
      }).then((res) => {
        this.tableData = res.data.data;
      });
    },
  },
  // vue的生命周期钩子函数
  // created是最早能够访问vue实例this的阶段
  created() {
    this.findAllCategories();
  },
};
</script>