讲师列表的前端实现

(1)添加前端路由

  {
    path: '/teacher',
    component: Layout,
    redirect: '/teacher/table', //在页面中访问'/teacher'会被重定向到'/teacher/table'
    name: '讲师管理',
    meta: { title: '讲师管理', icon: 'example' },
    children: [
      {
        path: 'table',
        name: '讲师列表',
        component: () => import('@/views/table/index'),
        meta: { title: '讲师列表', icon: 'table' }
      },
      {
        path: 'save',
        name: '添加讲师',
        component: () => import('@/views/tree/index'),
        meta: { title: '添加讲师', icon: 'tree' }
      }
    ]
  },

效果很帅。

(2)替换跳转页面

将component替换成讲师列表与添加讲师的页面，如下所示。

  {
    path: '/teacher',
    component: Layout,
    redirect: '/teacher/table', //在页面中访问'/teacher'会被重定向到'/teacher/table'
    name: '讲师管理',
    meta: { title: '讲师管理', icon: 'example' },
    children: [
      {
        path: 'table',
        name: '讲师列表',
        component: () => import('@/views/edu/teacher/list'),
        meta: { title: '讲师列表', icon: 'table' }
      },
      {
        path: 'save',
        name: '添加讲师',
        component: () => import('@/views/edu/teacher/save'),
        meta: { title: '添加讲师', icon: 'tree' }
      }
    ]
  },

如下图建立目录与跳转文件。

list.vue

<template>
 <div class="app-container">
  讲师列表
  </div>

</template>

save.vue

<template>
 <div class="app-container">
  添加讲师
  </div>

</template>

(3)定义前端接口

在src/api下新建目录edu/teacher.js.模仿login.js,对照后端接口eduserviceController很容易完成前端接口的改造。

import request from '@/utils/request' 

// 讲师列表：多条件查询(带分页)
export function pageTeacherCondition(page, limit, teacherQuery) {
  return request({
    //    url: "eduservice/edu-teacher/pageTeacherCondition/" + page + "/"+ limit,
    url: `eduservice/edu-teacher/pageTeacherCondition/${page}/${limit}`,
    method: 'post',
    // 包装成为json类型的数据传值
    data: teacherQuery
    
  })
}

（4）调用接口

在list.vue中调用前端实现的接口，这样就可以在讲师列表的跳转页面获得后端传过来的数据。

<template>
 <div class="app-container">
  讲师列表
  </div>
</template>

<script>
// 调用teacher.js
import {teacher} from '@/api/edu/teacher'
export default {
  data() { // 定义变量及初始化数据
    return {
      list: null, // 查询返回的记录集
      page: 1, //当前页
      limit: 10,
      teacherQuery: {},
      total: 0 //总记录数
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      teacher.pageTeacherCondition(this.page, this.limit, this.teacherQuery)
      .then(
        response => {
          console.log(response)
      })
      .catch(
        error => {
          console.log(error)
      })
    }
  }
}
</script>