Vue实现前端实现数据查询

前端我们这里采用模板为：【vue-admin-template-master】

1、添加路由

在 router/index.js文件中
成功显示页面如下：

2、修改文件的路径

测试list.vue文件中代码如下：

显示成功之后效果如下：

3、在api文件夹创建 teacher.js 定义访问的接口地址

4、在list.vue文件中获取后端返回的数据

代码如下：

<script>
//引入
import teacher from '@/api/edu/teacher/teacher'

//核心代码
export default {
  data() {  // 定义当前数据变量和初始值
    return {
      list: null, // 查询之后返回的数据集合
      current: 1, // 当前页
      size: 10, // 每页显示的数据条数
      teacherQuery: { // 条件封装的对象

      }
    }
  },
  created() { // 页面渲染之前执行，一般调用methods中定义的方法
    this.getList()
  },
  methods: {  // 创建具体的方法，调用 teacher.js 定义的方法
    // 讲师列表的方法
    getList() {
      teacher.pageTeacherCondition(this.current, this.size, this.teacherQuery)

        // 请求成功返回数据
      .then(response => {
        console.log(response);
      })

        // 请求失败
      .catch(error => {
        console.log(error);
      })
    }
  }
}
</script>

显示效果如下：

5、编写显示前端代码

<template>
  <div class="app-container">
    讲师列表
    <!-- 表格 -->
    <el-table
      :data="teacherList"
      border
      fit
      highlight-current-row>

      <el-table-column
        label="序号"
        width="70"
        align="center">
        <template slot-scope="scope">
          {{ (current - 1) * size + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="name" label="名称" width="80" />

      <el-table-column label="头衔" width="80">
        <template slot-scope="scope">
          {{ scope.row.level === 1 ? '高级讲师' : '首席讲师' }}
        </template>
      </el-table-column>

      <el-table-column prop="intro" label="资历" />

      <el-table-column prop="gmtCreate" label="添加时间" width="160"/>

      <el-table-column prop="sort" label="排序" width="60" />

      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <router-link :to="'/teacher/edit/'">
            <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
          </router-link>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

显示结果如下：