一、讲师列表功能
1.更改路由
点击index.js
2.更改内容
然后在view下新建文件夹叫edu,再新建一个文件夹叫teacher,创建两个vue文件
并且更改路由的index.js
接下来我们在list.vue和save.vue中添加信息,看看是否正确
<template> <div class="app-container"> 讲师列表 </div> </template>
成功显示:
3.更改api
在api文件中添加,如图文件
import request from '@/utils/request'
export default{
//1.讲师列表条件(分页查询)
getTeacherListPage(current,limit,teacherQuery){
return request({
url: `/eduservice/edu-teacher/PageFindCondition/${current}/${limit}`,
method: 'post',
//data表示把对象转换成json进行传递
data: teacherQuery
})
}
}
4. 书写list.vue
<template> <div class="app-container"> 讲师列表 </div> </template> <script> import teacher from '@/api/teacher/teacher' export default { //书写核心代码 data(){//d定义变量 return { list:null,//查询之后接口返回集合 page:1,//当前页 limit:10,//每页记录数 total:0, teacherQuery:{}//条件封装对象 } }, created(){//页面渲染前执行 this.getList() }, methods:{ getList(){ teacher.getTeacherListPage(this.page,this.limit,this.teacherQuery) .then(response=>{ console.log(response) })//请求成功 .catch(error=>{ console.log(error) })//请求失败 } } } </script>
5.测试
可以看到我们前端拿到了数据
6.完善页面
加上索引、表格、分页,
<template> <div class="app-container"> 讲师列表 <!--查询表单--> <el-form :inline="true" class="demo-form-inline"> <el-form-item> <el-input v-model="teacherQuery.name" placeholder="讲师名"/> </el-form-item> <el-form-item> <el-select v-model="teacherQuery.level" clearable placeholder="讲师头衔"> <el-option :value="1" label="高级讲师"/> <el-option :value="2" label="首席讲师"/> </el-select> </el-form-item> <el-form-item label="添加时间"> <el-date-picker v-model="teacherQuery.begin" type="datetime" placeholder="选择开始时间" value-format="yyyy-MM-dd HH:mm:ss" default-time="00:00:00" /> </el-form-item> <el-form-item> <el-date-picker v-model="teacherQuery.end" type="datetime" placeholder="选择截止时间" value-format="yyyy-MM-dd HH:mm:ss" default-time="00:00:00" /> </el-form-item> <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button> <el-button type="default" @click="resetData()">清空</el-button> </el-form> <!-- 表格 --> <el-table v-loading="listLoading" :data="list" element-loading-text="数据加载中" border fit highlight-current-row> <el-table-column label="序号" width="70" align="center"> <template slot-scope="scope"> {{ (page - 1) * limit + 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="'/edu/teacher/edit/'+scope.row.id"> <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> <!-- 分页 --> <el-pagination :current-page="page" :page-size="limit" :total="total" style="padding: 30px 0; text-align: center;" layout="total, prev, pager, next, jumper" @current-change="getList" /> </div> </template> <script> import teacher from '@/api/teacher/teacher' export default { //书写核心代码 data(){//d定义变量 return { list:null,//查询之后接口返回集合 page:1,//当前页 limit:6,//每页记录数 total:0, teacherQuery:{}//条件封装对象 } }, created(){//页面渲染前执行 this.getList() }, methods:{ getList(page=1){ this.page=page teacher.getTeacherListPage(this.page,this.limit,this.teacherQuery) .then(response=>{ this.list=response.data.rows this.total=response.data.total console.log(this.list) console.log(this.total) })//请求成功 .catch(error=>{ console.log(error) })//请求失败 }, resetData(){ this.teacherQuery = {} this.getList() } } } </script>
最终效果: