六、教师管理-列表查询、分页、搜索

一、需求分析

教师管理主要针对充值教师进行管理，首先开发教师管理模块中的列表功能，包含条件查询、下拉框、日期功能、数据列表、分页。

二、教师数据列表

1 nodejs 添加数据列表接口，去node文件，在创建一个teacher.js，创建教师的一个规则：

const mongoose = require('mongoose')mongoose.connect('mongodb://localhost/test') //和test数据库创建连接module.exports = mongoose.model('Teacher', { //数据库的规则jobnumber: {type: String,required: true},name: {type: String,required: true},role: {type: String,required: true},entrydate: {type: String,required: true},phone: {type: String,required: true}
})

2.让路由管理一下他，在router.js中引入

let Teacher = require('./teacher.js')

3.然后在下面写一个接口，在这之前，先把数据存到数据库中，创建出Teacher这个表，打开mongoose

mongo

use 数据库名称

db.createCollection("teachers")

2（教师） 1（班主任）
工号姓名职务入职时间电话

db.teachers.insert([{'jobnumber':'001','name':'申秀莲','role':'1','entrydate':'2015-11-11','phone':'15022221111'},{'jobnumber':'002','name':'周蛋挞','role':'1','entrydate':'2015-11-11','phone':'15022221111'},{'jobnumber':'003','name':'千瑞珍','role':'2','entrydate':'2015-11-11','phone':'15022221111'},{'jobnumber':'004','name':'吴允熙','role':'2','entrydate':'2015-11-11','phone':'15022221111'},{'jobnumber':'005','name':'夏博士','role':'1','entrydate':'2015-11-11','phone':'15022221111'},{'jobnumber':'006','name':'杨狗蛋','role':'1','entrydate':'2015-11-11','phone':'15022221111'},{'jobnumber':'007','name':'麻辣烫','role':'1','entrydate':'2015-11-11','phone':'15022221111'},{'jobnumber':'008','name':'闵雪雅','role':'1','entrydate':'2015-11-11','phone':'15022221111'},{'jobnumber':'009','name':'周锡京','role':'2','entrydate':'2015-11-11','phone':'15022221111'},{'jobnumber':'0010','name':'夏恩星','role':'1','entrydate':'2015-11-11','phone':'15022221111'},{'jobnumber':'0011','name':'下线','role':'1','entrydate':'2015-11-11','phone':'15022221111'},{'jobnumber':'0012','name':'泡菜小锅','role':'2','entrydate':'2015-11-11','phone':'15022221111'},{'jobnumber':'0013','name':'周周','role':'1','entrydate':'2015-11-11','phone':'15022221111'},{'jobnumber':'0014','name':'下班','role':'1','entrydate':'2015-11-11','phone':'15022221111'}])

db.teachers.find()

4.写一个接口，在router.js中添加获取教师列表方法

// 访问教师管理
// 查询所有---获取教师列表
router.get("/teacher/list", (req, res) => {Teacher.find({}).then((data, err) => {if (err) {return res.status(500).json({ //如果err，就是错误就是数据库中没有code: 3000,flag: false,message: "服务器后台错误"})}// 分页需要数据的长度let content = data.lengthreturn res.status(200).json({"code": 2000,"flag": true,"message": "查询成功","data": {content,"rows": data} //把数据返回出去})})
})

三、 Api 调用接口

1. 在 src/api 下创建 teacher.js , 调用接口代码如下:

import request from "@/utils/request";
export function getTeacherList() { //获取教师列表return request({url: "/teacher/list", //和node接口地址一致method: "get",})
}

2. 在 src\views\teacher\index.vue 中, 添加 JS 代码如下：

import { getTeacherList } from "@/api/teacher";export default {name: "Teacher",created() {this.getList()},methods: {getList() {getTeacherList().then(res => {console.log(res);}).catch(err => {console.log(err);})}}
}
</script>

3.点击教师的时候，能拿到下图数据

四、列表模板

1. 修改 src\views\teacher\index.vue ，编写模板代码：

<template><div><el-table :data="tableData" height="400" border style="width: 100%"><el-table-column type="index" label="序号"> </el-table-column><el-table-column prop="jobnumber" label="工号"> </el-table-column><el-table-column prop="name" label="姓名"> </el-table-column><el-table-column prop="role" label="职务"></el-table-column><el-table-column prop="entrydate" label="入职时间"> </el-table-column><el-table-column prop="phone" label="电话"> </el-table-column></el-table></div>
</template><script>
import { getTeacherList } from "@/api/teacher";export default {name: "Teacher",data() {return {tableData: []}},created() {this.getList()},methods: {getList() {getTeacherList().then(res => {this.tableData = res.data.data.rows}).catch(err => {console.log(err);})}}
}
</script><style></style>

五、解决CSS问题

之前的页面有些问题，下面改正：

1.去App.vue

<template><div id="app" v-cloak><router-view /></div>
</template><style >
body,
html {margin: 0 auto;width: 100%;height: 100%;
}
#app {width: 100%;height: 100%;overflow: hidden;
}
[v-cloak] {display: none;
}
</style>

2.layout.vue:

<template><div class="layout"><app-header /><app-main /><app-navbar /></div>
</template><script>
import AppHeader from "./AppHeader/index.vue";
import AppMain from "./AppMain/index.vue";
import AppNavbar from "./AppNavbar/index.vue";
export default {components: {AppHeader,AppMain,AppNavbar,},
};
</script><style scoped>.layout {width: 100%;height: 100%;
}
</style>

3AppHeader的index.vue:

<style scoped>
.header {position: absolute;line-height: 50px;background-color: cornflowerblue;padding: 0;top: 0;width: 100%;
}.logo {vertical-align: middle;width: 30px;padding: 0 10px 0 50px;
}
.company {position:absolute;color: white;
}
a {text-decoration: none;
}
.el-dropdown {float: right;margin-right: 40px;cursor: pointer;color: white;
}
</style>

4.AppNavbar的index.vue:

<style scoped>
.navbar {position: absolute;top: 50px;width: 16%;left: 0;background-color: darkseagreen;overflow: hidden;
}

5.AppMain的index.vue:

<style scoped>
.main {position: absolute;top: 50px;left: 16%;width: 80%;padding: 10px;background-color: pink;overflow: hidden;/* z-index: 99; */
}

六、过滤器实现数据转换

1. 用过滤器在teacher的index.vue中，添加一个规则，然后去组件当中去使用，由于他只需要在当前组件中使用，所以写局部的一个：

<script>
import { getTeacherList } from "@/api/teacher";
let roleOptions = [{ type: "1", name: "班主任" },{ type: "2", name: "教师" },
];
export default {name: "Teacher",data() {return {tableData: [],}},created() {this.getList()},methods: {getList() {getTeacherList().then(res => {console.log(res.data.data.rows);this.tableData = res.data.data.rows}).catch(err => {console.log(err);})}},filters: {roleFilter(val) {// if (val == '1') {//     val = '班主任'// } else {//     val = '教师'// }//   return val// ------------------------------------// obj return出来的是符合条件的那一条数据let obj = roleOptions.find(item => {return item.type === val})return obj ? obj.name : null}}
}
</script>

2.修改模板代码

<el-table-column prop="role" label="职务"><template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.role | roleFilter }</span></template>
</el-table-column>

3.在“电话”后添加删除和修改：

 <el-table-column label="操作"><template slot-scope="scope"><el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-buttonsize="mini"type="danger"@click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column>

4.在方法里添加：

 handleEdit(index, row) {console.log(index, row);},handleDelete(index, row) {console.log(index, row);},

七、分页功能实现

1.为列表数据添加分页功能，使用分页组件完成分页功能，去node文件的router.js中，添加分页模拟接口

// 分页
router.post("/teacher/listPage", (req, res) => {console.log(req.body);
})

2. Api 调用接口，在 src\api 下的 teacher.js ，增加分页查询

export function getListPage(page, size, searchMap) { //分页return request({url: "/teacher/listPage",method: "post",data: {page,size,searchMap}})
}

3.在 src\views\teacher\index.vue 中,引入

import { getTeacherList, getListPage } from "@/api/teacher";

在created 时获取分页数据：

 created() {this.getList()this.ListPage()},methods: {// 1.获取教师列表getList() {getTeacherList().then(res => {console.log(res.data.data.rows);this.tableData = res.data.data.rows}).catch(err => {console.log(err);})},// 分页ListPage() {getListPage(1, 2, 3).then(res => {//先传参数，看后端是否接收到console.log(res);}).catch(err => {console.log(err);})},

后台拿到数据：

现在添加HTML分页的模板，添加代码如下：

<template><div><el-table :data="tableData" height="400" border style="width: 100%"><el-table-column type="index" label="序号"> </el-table-column><el-table-column prop="jobnumber" label="工号"> </el-table-column><el-table-column prop="name" label="姓名"> </el-table-column><el-table-column prop="role" label="职务"><template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.role | roleFilter }}</span></template></el-table-column><el-table-column prop="entrydate" label="入职时间"> </el-table-column><el-table-column prop="phone" label="电话"> </el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage":page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper":total="400"></el-pagination></div>
</template>

现在分页效果：

数据都是假的，我们让他展示从后台拿到的数据

4.在data里：

    data() {return {tableData: [],currentPage: 1,//当前页数pageSize: 5,//每页显示多少条数据pageSizes: [5, 10, 15, 20],// 每页显示个数选择器的选项设置total: 0,searchMap: {}//后面用来搜索查询的数据}},

5.在node终端能拿到页码数，然后在node的router.js中：

// 分页
router.post("/teacher/listPage", (req, res) => {let page = req.body.page || 1; //页数let size = req.body.size || 10; //一页显示多少条let searchMap = req.body.searchMap || {} //用来做条件查询的// console.log(page, size, searchMap);let obj = {} //用来接收？？数据Teacher.find(obj).then((data, err) => { //去数据库中查找if (err) {return res.status(500).json({code: 3000,flag: false,message: "服务器后台错误"})}let content = data.length//skip跳过多少条,limit查询多少个,exec当前面的代码，执行完毕后，产生的回调Teacher.find(obj).skip((page - 1) * parseInt(size)).limit(parseInt(size)).exec().then((data, err) => {if (err) {return res.status(500).json({code: 3000,flag: false,message: "服务器后台错误"})}return res.status(200).json({"code": 2000,"flag": true,"message": "查询成功","data": {content,"rows": data}})})})
})

6.我们获取的列表数据显示在页面上，这次是用分页接口拿到了数据列表，上面的获取教师列表接口和函数，可以不用了，用分页接口返回来的数据就可以，他刚好按分页返回来的数据，代码：

 created() {// this.getList()this.ListPage()},

// 1.获取教师列表// getList() {//     getTeacherList().then(res => {//         this.tableData = res.data.data.rows//     }).catch(err => {//         console.log(err);//     })// },// 分页并获取教师列表ListPage() {getListPage(this.currentPage, this.pageSize, this.searchMap).then(res => {// console.log(res);let resArr = res.datathis.total = resArr.data.contentthis.tableData = resArr.data.rows}).catch(err => {console.log(err);})},

7.运行效果：

八、解决动态页码和当前页

问题：上面当你改变页码后，请求URL的 {page}/{size} 不会变，一直是初始值，那是因为没有监听到改变的值。

解决：在 methods 中添加函数，

 handleSizeChange(val) {this.pageSize = val;this.ListPage()},handleCurrentChange(val) {this.currentPage = val;this.ListPage()},

3. 测试可通过。

九、条件查询实现-----在列表上方添加查询功能。

1. 修改 src\views\teacher\index.vue ，增加条件查询模板代码，并在方法中去调用他们：

<template><div><!-- 搜索区 --><el-form :inline="true" :model="searchMap" ref="searchForm" class="demo-form-inline"><!-- prop 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 --><el-form-item label="工号" prop="jobnumber"><el-input v-model="searchMap.jobnumber" placeholder="工号"></el-input></el-form-item><el-form-item label="姓名" prop="name"><el-input v-model="searchMap.name" placeholder="姓名"></el-input></el-form-item><el-form-item label="职务" prop="role"><el-select v-model="searchMap.role" placeholder="职务"><el-option :key="index" v-for="(item, index) in roleOptions" :label="item.name":value="item.type"></el-option></el-select></el-form-item><el-form-item label="入职时间" prop="entrydate"><el-date-picker type="date" placeholder="选择日期" v-model="searchMap.entrydate"></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button><el-button @click="resetForm('searchForm')">重置</el-button></el-form-item></el-form><!-- 教师列表 --><el-table :data="tableData" height="400" border style="width: 100%"><el-table-column type="index" label="序号"> </el-table-column><el-table-column prop="jobnumber" label="工号"> </el-table-column><el-table-column prop="name" label="姓名"> </el-table-column><el-table-column prop="role" label="职务"><template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.role | roleFilter }}</span></template></el-table-column><el-table-column prop="entrydate" label="入职时间"> </el-table-column><el-table-column prop="phone" label="电话"> </el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table><!-- 分页区 --><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage":page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination></div>
</template>

2.js部分：

<script>
import { getListPage } from "@/api/teacher";
let roleOptions = [{ type: "1", name: "班主任" },{ type: "2", name: "教师" },
];
export default {name: "Teacher",data() {return {tableData: [],//列表——教师列表数据currentPage: 1,//当前页数pageSize: 5,//每页显示多少条数据pageSizes: [5, 10, 15, 20],// 每页显示个数选择器的选项设置total: 0,searchMap: {//搜索栏数据jobnumber: "",name: "",role: "",entrydate: ""},roleOptions//简写形式，=>roleOptions:roleOptions}},created() {this.ListPage()// 页面初始化完成加载分页并获取教师列表},methods: {// 分页并获取教师列表ListPage() {getListPage(this.currentPage, this.pageSize, this.searchMap).then(res => {// console.log(res);let resArr = res.datathis.total = resArr.data.contentthis.tableData = resArr.data.rows}).catch(err => {console.log(err);})},// 编辑handleEdit(index, row) {console.log(index, row);},// 删除handleDelete(index, row) {console.log(index, row);},//element-ui 的控制表格方法handleSizeChange(val) {this.pageSize = val;this.ListPage()},//element-ui 的控制表格方法handleCurrentChange(val) {this.currentPage = val;this.ListPage()},// 查询onSubmit() {// 点击查询，重新分页并获取教师列表this.currentPage = 1;this.ListPage()},//element-ui 的重置方法resetForm(formName) {this.$refs[formName].resetFields();// 点击重置，重新分页并获取教师列表this.currentPage = 1;this.ListPage()}},filters: {roleFilter(val) {// if (val == '1') {//     val = '班主任'// } else {//     val = '教师'// }//   return val// ------------------------------------// obj return出来的是符合条件的那一条数据let obj = roleOptions.find(item => {return item.type === val})return obj ? obj.name : null}}
}
</script>

3.在node文件的router.js中，添加条件查询代码：

// 分页
router.post("/teacher/listPage", (req, res) => {let page = req.body.page || 1; //页数let size = req.body.size || 10; //一页显示多少条let searchMap = req.body.searchMap || {} //用来做条件查询的// console.log(page, size, searchMap);let obj = {} //用来接收搜索栏数据，实现按条件查询// searchMap中是否包含jobnumber、name、role、entrydate，如果有，把他们存到obj里searchMap.jobnumber ? obj["jobnumber"] = searchMap.jobnumber : objsearchMap.name ? obj["name"] = searchMap.name : objsearchMap.role ? obj["role"] = searchMap.role : objsearchMap.entrydate ? obj["entrydate"] = searchMap.entrydate : objconsole.log(searchMap, obj);Teacher.find(obj).then((data, err) => { //去数据库中查找if (err) {return res.status(500).json({code: 3000,flag: false,message: "服务器后台错误"})}let content = data.length//skip跳过多少条,limit查询多少个,exec当前面的代码，执行完毕后，产生的回调Teacher.find(obj).skip((page - 1) * parseInt(size)).limit(parseInt(size)).exec().then((data, err) => {if (err) {return res.status(500).json({code: 3000,flag: false,message: "服务器后台错误"})}return res.status(200).json({"code": 2000,"flag": true,"message": "查询成功","data": {content,"rows": data}})})})
})

注释：searchMap和obj都是能去数据库中查到数据的，直接用searchMap也能查到数据，为什么还要再用obj去查询数据？

原因：先看图：

如图，因为searchMap打印的是所有的条件，而obj打印的是你在搜索栏输入了哪个条件，就会根据哪个条件去查找

4.接下来我们的搜索栏部分就完成了，但是测试的时候发现时间查询查不到数据，我们看看问题出现在哪里，(学会查看问题是开发中很重要的一步)：

我们在后台看到时间打印出来的信息：

而我们存储数据时的格式是这样的：

我们去element-ui官网去查找看有没有控制格式的，我们发现：

所以我们添加value-format="yyyy-MM-dd"就好了：

<el-form-item label="入职时间" prop="entrydate"><el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-                                model="searchMap.entrydate"></el-date-picker>
</el-form-item>

后台时间格式：

查询成功：