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>
</template>

<script>
</script>

<style>
</style>

3. /src/api下创建js文件，定义接口url和参数

import request from '@/utils/request'

export default{
	//讲师列表
	getTeacherListPage(current,size,teacherQuery){
		return request({
			// url:'/eduservice/eduTeacher/pageTeacherByCondition/'+current+'/'+size,
			url:`/eduservice/eduTeacher/pageTeacherByCondition/${current}/${size}`,
			method:'post',
			//teacherQuery是条件对象，后端使用RequestBody接收，需要使用data
			data: teacherQuery
		})
	}
}

4. 在创建的vue文件中引入js文件，调用方法发送请求
list.vue

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

<script>
	//引入teacher.js文件
	import tea from '@/api/teacher'  //.js可以省略
	//核心代码
	export default{
		// data:{
			
		// },  或使用下面的写法
		data(){  
			return{
				list:null,  //接收接口返回的数据
				total:0,  //总记录数
				page:1,  //当前页
				limit:5,  //每页记录数
				teacherQuery:{
					
				}
			}
		},
		created(){  //页面渲染之前执行，一般用于调用methods中定义的方法
			this.getList();
		},
		methods:{  //定义具体的方法，调用teacher.js中的方法
			getList(page=1){  //不用写axios发送请求，vue进行了封装，直接调用api中的方法即可
                this.page = page;				
			    tea.getTeacherListPage(this.page,this.limit,this.teacherQuery)
				.then(response=>{
					console.log(response);
					this.list = response.data.records;
					this.total = response.data.total;
				})
				.catch(error=>{
					console.log(error);
				})
			},
			//清空条件，并查询所有
			resetData(){
				//清空表单数据
				this.teacherQuery = {};
				//空条件查询、
				this.getList()
			}
		}
	}
</script>

<style>
</style>

5. 接口返回数据显示在页面，通过element-ui实现
在list.vue中的template标签中继承element-ui

<template>
	<div>
		讲师列表
		<!-- 查询条件 -->
		<el-form :inline="true" :model="teacherQuery">
		  <el-form-item>
		    <el-input v-model="teacherQuery.name" placeholder="讲师名"></el-input>
		  </el-form-item>
		  <el-form-item>
		    <el-select v-model="teacherQuery.level" placeholder="讲师头衔">
		      <el-option label="高级讲师" :value="1"></el-option>
		      <el-option label="首席讲师" :value="2"></el-option>
		    </el-select>
		  </el-form-item>
		  
		  <el-form-item label="添加时间">
			<el-date-picker
		      v-model="teacherQuery.begin"
		      type="datetime"
		      placeholder="选择日期时间">
		    </el-date-picker>
			<el-date-picker
			  v-model="teacherQuery.end"
			  type="datetime"
			  placeholder="选择日期时间">
			</el-date-picker>
		</el-form-item>
			
		  <el-form-item>
		    <el-button type="primary" @click="getList()">查询</el-button>
		    <el-button type="default" @click="resetData()">清空</el-button>
		  </el-form-item>
		</el-form>
		
		<!-- 显示列表 -->
		<el-table
		    :data="list"
		    border
		    style="width: 100%">
			<el-table-column
				prop="gmtCreate"
				label="创建日期"
				width="180">
			</el-table-column>
		    <el-table-column
		      prop="name"
		      label="姓名"
		      width="120">
		    </el-table-column>
		    <el-table-column
		      prop="intro"
		      label="介绍"
		      width="650">
		    </el-table-column>
		    <el-table-column
		      prop="level"
		      label="头衔"
		      width="300">
			  <!-- 前端根据后台传的数据进行处理后显示，可以如下写法： -->
			  <template slot-scope='scope'>
				  <!-- scope.row表示每行 -->
				  {{scope.row.level===1?'高级讲师':'首席讲师'}}  
			  </template>
		    </el-table-column>
		    <el-table-column
		      fixed="right"
		      label="操作"
		      width="100">
		      <template slot-scope="scope">
		        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
		        <el-button type="text" size="small">编辑</el-button>
		      </template>
		    </el-table-column>
		  </el-table>
          <!-- 分页 current-page、page-size、total要绑定数据 @current-change表示当前页变化时请求getList方法,会把current-page的值传到getList方法中的page参数-->
		  <el-pagination
			 :current-page="page"
			 :page-size="limit"
			 :total="total"
			 @current-change="getList"
		     background
		     layout="prev, pager, next"
			/>
	</div>
</template>

页面展示效果