vue-admin-template实现分页查询功能

搭建前端环境

1. config目录下的index.js文件中，将useEslint改为false
   注：ESLint是语法检查的插件，但是语法检查太严格，故此不用
2. 安装依赖：在项目根目录下执行 npm install ，会根据package.json中的依赖配置进行安装
3. 启动：根目录下执行npm run dev
   如果不报错且弹出默认登录页面，则搭建完成

做一个分页显示讲师列表的功能

后台接口如下

@ApiOperation(value = "多条件组合分页查询讲师")
@PostMapping("/pageTeacherByCondition/{current}/{size}")
public CommonResponseVo pageTeacherByCondition(
        @ApiParam(name = "current",value = "当前页",required = true) @PathVariable int current,
        @ApiParam(name = "size",value = "每页显示条数",required = true) @PathVariable int size,
        @ApiParam(name = "teacherQueryVo",value = "条件") @RequestBody(required = false) TeacherQueryVo teacherQueryVo){
   
}

1. /src/router下的index.js中添加路由

{
   	
  path: '/teacher',
  component: Layout,
  redirect: '/teacher/table',  // 使用/teacher会路由到/teacher/table页面
  name: '讲师管理',
  meta: {
    title: '讲师管理', icon: 'example' },  //左侧栏的信息。title是左侧栏目的名称
  children: [
    {
   
      path: 'table',
      name: '讲师列表',
      component: () => import('@/views/teacher/list'),  //对应views/teacher目录下的list.vue文件
      meta: {
    title: '讲师列表', icon: 'table' }
    },
    {
   
      path: 'save',
      name: '添加讲师',
      component: () => import('@/views/teacher/save'),
      meta: {
    title: '添加讲师', icon: 'tree' }
    }
  ]
},

2. views目录下添加路由对应的页面

list.vue

<template>
	<div>
		讲师列表
	</div><