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>

显示结果如下：