目录
一、医生功能模块
------------前端实现------------
------------后端接口------------
功能一：分页查询医生基础信息（介绍MybatisPlus如何使用分页）
功能二：根据搜索栏名称查找对应医生（讲解自定义查询集）
功能三： 实现获取医生的详细信息
功能四：实现预约功能
功能五：根据医生科室查询医生
收获与反思
一、医生功能模块
模块需求：
本模块设计，我负责后端接口开发，另一位成员负责前端开发。
------------前端实现------------
<template><div><div style="margin: 20px 0px;"><el-row><el-col :span="10" class="center"><!-- 输入标签组件 --><el-input v-model="search" @focus="focus" @blur="blur" @keyup.enter.native="searchHandler"placeholder="搜索医生名称" clearable><el-button slot="append" icon="el-icon-search" id="search" @click="searchHandler"></el-button></el-input><!---设置z-index优先级,防止被走马灯效果遮挡--><el-card @mouseenter="enterSearchBoxHanlder" v-if="isSearch" class="box-card" id="search-box"style="position:absolute;z-index:15"><dl v-if="isHistorySearch"><dt class="search-title" v-show="history">历史搜索</dt><dt class="remove-history" v-show="history" @click="removeAllHistory"><i class="el-icon-delete"></i>清空历史记录</dt><el-tag v-for="search in historySearchList" :key="search.id" closable :type="search.type"@close="closeHandler(search)" @click="searchistory(search)"style="margin-right:5px; margin-bottom:5px;">{{ search.name }}</el-tag><dt class="search-title">热门搜索</dt><dd v-for="search in hotSearchList" :key="search.id">{{ search }}</dd></dl><dl v-if="isSearchList"><dd v-for="search in searchList" :key="search.id">{{ search }}</dd></dl></el-card></el-col></el-row><el-dialog title="简介" :visible.sync="introductionDialog" width="30%"><el-form ref="form" :model="form" label-width="80px"><el-form-item label="头像"><!-- action表示为上传文件的url --><el-upload class="avatar-uploader"><img v-if="imageUrl" :src="imageUrl" class="avatar" /><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload></el-form-item><el-form-item label="姓名"><h2>{{ form.name }}</h2></el-form-item><el-form-item label="个人简介"><p>{{ form.introduction }}</p></el-form-item></el-form></el-dialog><el-dialog title="预约" :visible.sync="appointmentDialog1" width="40%"><el-calendar v-model="value"><div slot="dateCell" slot-scope="{ data }" @click="allcalendar(data)" class="temp"><span>{{ data.day.split("-")[2] }}</span></div></el-calendar></el-dialog><el-dialog title="预约" :visible.sync="appointmentDialog2" width="40%"><el-table :data="bookTime" style="width: 100%"><el-table-column label="日期" width="180"><template slot-scope="scope"><i class="el-icon-time"></i><span style="margin-left: 10px">{{ scope.row.time }}</span></template></el-table-column><el-table-column label="剩余" width="180"><template slot-scope="scope"><el-popover trigger="hover" placement="top"><p>人数: {{ scope.row.Remain }}</p><div slot="reference" class="name-wrapper"><el-tag size="medium">{{ scope.row.Remain }}</el-tag></div></el-popover></template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button size="mini" @click="handleBooktime(scope.$index, scope.row)">预约</el-button></template></el-table-column></el-table></el-dialog></div><el-table :data="tableData" border style="width: 100%"><el-table-column prop="major" label="科室" sortable width="180" column-key="date" :filters="[{ text: '内科', value: '内科' },{ text: '妇科', value: '妇科专业' },{ text: '儿科', value: '儿科' },{ text: '外科', value: '外科手术' }]" :filter-method="filterHandler"></el-table-column><el-table-column prop="host_id" label="医生编号" width="120"></el-table-column><el-table-column prop="name" label="医生名称" width="120"></el-table-column><el-table-column prop="image" label="医生帅照" width="120"></el-table-column><el-table-column prop="phone" label="电话" width="300"></el-table-column><el-table-column fixed="right" label="操作" width="100"><template slot-scope="scope"><el-button @click="handleCheck(scope.row)" type="text" size="small">查看</el-button><el-button @click="handleBook(scope.row)" type="text" size="small">预约</el-button></template></el-table-column></el-table><!-- 定义一个分页标签 --><div><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum":page-sizes="[3, 8, 15, 30]" :page-size="3" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination></div></div>
</template><script>
import RandomUtil from "../utils/randomUtil";
import Store from "../utils/store";
//导入request工具
import request from "@/utils/request";
export default {data() {return {search: "", //当前输入框的值isFocus: false, //是否聚焦hotSearchList: ["暂无热门搜索"], //热门搜索数据historySearchList: [], //历史搜索数据searchList: ["暂无数据"], //搜索返回数据,history: false,bookDoctor: '',bookTime: [{time: "8:00~9:00",Remain: 3,},],introductionDialog: false,appointmentDialog1: false,appointmentDialog2: false,total: 0,pageNum: 1,pageSize: 3,value: new Date(),imageUrl: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',types: ["", "success", "info", "warning", "danger"], //搜索历史tag式样tableData: [],form: {doctorId: '',department: '',name: '',province: '',city: '',address: '',culture: '',phone: '',image: '',sex: '',age: '',introduction: '',},};},// 通过在生命周期创建时候就使用查询方法created() {this.query();},methods: {focus() {this.isFocus = true;this.historySearchList =Store.loadHistory() == null ? [] : Store.loadHistory();this.history = this.historySearchList.length == 0 ? false : true;},blur() {var self = this;this.searchBoxTimeout = setTimeout(function () {self.isFocus = false;}, 300);},enterSearchBoxHanlder() {clearTimeout(this.searchBoxTimeout);},searchHandler() {//随机生成搜索历史tag式样let n = RandomUtil.getRandomNumber(0, 5);//发起一个异步请求，查询分类的数据request// get表示指定请求地址 和 请求参数.get("/vaccinum/doctor/SerchByName", {params: {pageNum: this.pageNum,pageSize: this.pageSize,name: this.search,},})// then表示请求后的回调函数.then((res) => {console.log(res);// 把后台的响应的数据赋值给data中的tableDatathis.tableData = res.list;this.form = res.list;this.total = res.total;});let exist =this.historySearchList.filter(value => {return value.name == this.search;}).length == 0? false: true;if (!exist) {this.historySearchList.push({ name: this.search, type: this.types[n] });Store.saveHistory(this.historySearchList);}this.history = this.historySearchList.length == 0 ? false : true;},closeHandler(search) {this.historySearchList.splice(this.historySearchList.indexOf(search), 1);Store.saveHistory(this.historySearchList);clearTimeout(this.searchBoxTimeout);if (this.historySearchList.length == 0) {this.history = false;}},searchistory(search) {this.search = search.name;},removeAllHistory() {Store.removeAllHistory();},// 执行搜索函数，将后端数据展示出来query() {//发起一个异步请求，查询分类的数据request// get表示指定请求地址 和 请求参数.get("/vaccinum/doctor/list", {params: {pageNum: this.pageNum,pageSize: this.pageSize,},})// then表示请求后的回调函数.then((res) => {console.log(res);// 把后台的响应的数据赋值给data中的tableDatathis.tableData = res.list;this.form = res.list;this.total = res.total;});},handleCheck(row) {console.log(row);this.introductionDialog = true;this.doctorId = row.doctorId;this.form.department = row.department;this.form.name = row.name;this.form.province = row.province;this.form.city = row.city;this.form.address = row.address;this.form.culture = row.culture;this.form.phone = row.phone;this.form.image = row.image;this.form.introduction = row.introduction;},handleBook(row) {console.log(row);this.bookDoctor = row.name;this.appointmentDialog1 = true;},handleBooktime(index,row){// TODO 向后端发送用户提交的预约信息console.log(row.time);this.bookTime[index].Remain=this.bookTime[index].Remain-1;},//筛选功能实现函数resetDateFilter() {this.$refs.filterTable.clearFilter('date');},clearFilter() {this.$refs.filterTable.clearFilter();},formatter(row, column) {return row.address;},filterTag(value, row) {return row.tag === value;},filterHandler(value, row, column) {const property = column['property'];return row[property] === value;},//修改单页数据数量handleSizeChange(val) {this.pageSize = val;this.query();},//跳转页码handleCurrentChange(val) {console.log(val);this.pageNum = val;this.query();},// 日历触发事件allcalendar(data) {const loading = this.$loading({// lock: true, //加上这个 页面点击日历的时候会莫名其妙抖动一下 因为我界面上有滚动条，所以我注释了text: "Loading",spinner: "el-icon-loading",background: "rgba(0, 0, 0, 0.7)",});setTimeout(() => {this.value = data.day; //取到你需要的日期data.day//需要用到这日期做啥事，比如做为调接口的参数request// get表示指定请求地址 和 请求参数.get("/doctor/freetime", {params: {name: this.bookDoctor,date: data.day,},})// then表示请求后的回调函数.then((res) => {console.log(res);});this.appointmentDialog1 = false;this.appointmentDialog2 = true;loading.close();}, 500);},},computed: {isHistorySearch() {return this.isFocus && !this.search;},isSearchList() {return this.isFocus && this.search;},isSearch() {return this.isFocus;}},};</script><style>
.left {margin-left: 200px;
}.center {margin-top: 15px;margin-left: 200px;
}#search {background-color: #616cee;border-radius: 0%;
}.search-title {color: #bdbaba;font-size: 15px;margin-bottom: 5px;
}.remove-history {color: #bdbaba;font-size: 15px;float: right;margin-top: -22px;
}#search-box {width: 555px;height: 300px;margin-top: 0px;padding-bottom: 20px;
}.avatar-uploader .el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;
}.avatar-uploader .el-upload:hover {border-color: #409eff;
}.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;
}.avatar {width: 178px;height: 178px;display: block;
}.temp {padding: 20px;
}
</style>------------后端接口------------
功能一：分页查询医生基础信息（介绍MybatisPlus如何使用分页）
// 接口
// TODO:接口功能：查询医生一般信息
@RequestMapping("/list")
public String query(@RequestParam(defaultValue = "1") Integer pageNum,@RequestParam(defaultValue = "2") Integer pageSize) throws JsonProcessingException {// 创建分页对象Page<Doctor> page = new Page<>(pageNum, pageSize);// 执行分页查询IPage<Doctor> doctorIPage = doctorService.page(page);// 从分页对象中获取分页数据和总记录数List<Doctor> pageInfoList = doctorIPage.getRecords();long total = doctorIPage.getTotal();// 构造返回的医生信息列表List<DoctorSummary> doctorSummaryList = new ArrayList<>();for (Doctor doctor:pageInfoList){doctorSummaryList.add(new DoctorSummary(doctor.getHostId(),doctor.getName(),doctor.getPhone(),doctor.getImage(),doctor.getMajor()));}// 返回医生不敏感信息的信息return JsonTool.writeValueAsString(doctorSummaryList);
}收获：MyBatis-Plus的分页插件与MyBatis的PageHelper的区别和使用。
区别：
使用范围：
- MyBatis-Plus 是一个全面的持久层框架，提供了更多的 CRUD 操作和通用的数据库操作，同时包含了一些方便的工具类和增强功能。
- PageHelper 是一个简单且专注于分页功能的插件，主要用于处理基本的分页查询需求，不包含其他复杂的数据库操作。
使用方式：
- MyBatis-Plus 的分页插件是内置在框架中的，无需额外引入依赖，可以直接使用其中的
Page类进行分页查询，并且提供了丰富的分页查询方法。- PageHelper 需要单独引入依赖，根据具体的项目和需求选择相应的版本。使用 PageHelper 需要在 MyBatis 的配置文件中进行配置，并通过拦截器实现分页功能。
API 和功能支持：
- MyBatis-Plus 提供了更多的 API 和功能，如分页查询、排序、条件查询、自定义查询等。同时也支持 Lambda 表达式来简化条件查询的编写。
- PageHelper 的功能相对较为简单，主要提供了基本的分页功能，可以通过设置分页参数进行分页查询。
使用MyBatisPlus的方法，如下：
1.引入mybatis-plus依赖
<!--mybatis-plus插件--><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.3.1.tmp</version></dependency>2.进行配置，在config包下写对应配置类，按照如下代码进行配置
@Configuration
public class MybatisPlusConfig {@Beanpublic MybatisPlusInterceptor mybatisPlusInterceptor() {// 创建 MybatisPlusInterceptor 对象MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();// 创建并添加 PaginationInnerInterceptor 分页拦截器PaginationInnerInterceptor paginationInnerInterceptor = new PaginationInnerInterceptor();interceptor.addInnerInterceptor(paginationInnerInterceptor);// 返回 MybatisPlusInterceptor 对象，作为一个 Bean 注入到 Spring 容器中return interceptor;}
}3.在控制层使用插件（通过案例代码解析插件使用步骤）
-
创建分页对象
Page<Doctor> page = new Page<>(pageNum, pageSize);：pageNum表示当前页码，指定要查询的页数。pageSize表示每页显示的记录数，指定每页要展示多少条数据。通过这两个参数，可以确定分页查询的起始位置和返回的记录数量。
-
执行分页查询
IPage<Doctor> doctorIPage = doctorService.page(page);：doctorService.page(page)是调用doctorService中的page方法来执行分页查询操作。IPage<Doctor>是 MyBatis-Plus 框架提供的分页结果对象，其中包含了分页查询的结果数据和总记录数。
-
从分页对象中获取分页数据和总记录数：
List<Doctor> pageInfoList = doctorIPage.getRecords();获取当前页的数据列表。long total = doctorIPage.getTotal();获取查询结果的总记录数。
总结：
Page<Doctor>对象是 MyBatis-Plus 提供的分页对象，用于指定当前页码和每页显示的记录数。IPage<Doctor>对象是分页查询的结果对象，包含了分页查询的数据列表和总记录数。- 通过
getRecords()方法可以获取当前页的数据列表。- 通过
getTotal()方法可以获取查询结果的总记录数。
下面介绍IPage的常用方法获取分页信息：
| 方法 | 描述 |
|---|---|
long getTotal() | 获取查询结果的总记录数。 |
List<T> getRecords() | 获取当前页的数据列表。 |
int getCurrent() | 获取当前页码。 |
int getSize() | 获取每页显示的记录数。 |
int getPages() | 获取总页数。 |
default boolean hasPrevious() | 判断是否有上一页。 |
default boolean hasNext() | 判断是否有下一页。 |
List<OrderItem> orders() | 获取排序的字段和排序方式。可以用于在分页查询时设置排序规则。 |
Api接口测试结果：
前端功能显示：
3条每页展示
8条每页展示
功能二：根据搜索栏名称查找对应医生（讲解自定义查询集）
// TODO:根据搜索栏查找对应医生@RequestMapping("/SerchByName")public String SerchByName(@RequestParam("name")String name,@RequestParam(defaultValue = "1") Integer pageNum,@RequestParam(defaultValue = "8") Integer pageSize) throws JsonProcessingException {
// 创建分页对象Page<Doctor> page = new Page<>(pageNum,pageSize);
// 自定义查询QueryWrapper<Doctor> wrapper = new QueryWrapper<>();wrapper.eq("name",name);// 创建分页结果对象IPage<Doctor> iPage = doctorService.page(page,wrapper);List<Doctor> list = iPage.getRecords();List<DoctorSummary> doctorSummaryList = new ArrayList<>();for (Doctor doctor:list){doctorSummaryList.add(new DoctorSummary(doctor.getHostId(),doctor.getName(),doctor.getPhone(),doctor.getImage(),doctor.getMajor()));}return JsonTool.writeValueAsString(doctorSummaryList);}收获：学习查询模块的使用（QueryWrapper）
使用步骤（三层框架）
1.首先创建QueryWrapper对象
2.通过调用对象内部方法完善自定义查询的条件,以下是常用的方法
| 方法名 | 说明 |
|---|---|
| eq | 设置等于条件 |
| ne | 设置不等于条件 |
| gt | 设置大于条件 |
| ge | 设置大于等于条件 |
| lt | 设置小于条件 |
| le | 设置小于等于条件 |
| between | 设置范围条件 |
| like | 设置模糊查询条件 |
| in | 设置包含在列表中的条件 |
| orderByAsc | 设置升序排序字段 |
| orderByDesc | 设置降序排序字段 |
| and | 设置并且连接的条件 |
| or | 设置或者连接的条件 |
| last | 直接拼接在 SQL 语句的最后 |
| select | 设置要查询的字段 |
| groupBy | 设置分组字段 |
| having | 设置聚合条件 |
3.通过自动注入对应的service层，实现对应的操作
MyBatisPlus扩展下service层的所有快捷方法：
| 方法名 | 作用 |
|---|---|
| save | 保存实体对象到数据库 |
| saveBatch | 批量保存实体对象到数据库 |
| removeById | 根据ID删除数据库中的记录 |
| removeByMap | 根据条件删除数据库中的记录 |
| remove | 根据条件删除数据库中的记录 |
| removeByIds | 根据ID列表批量删除数据库中的记录 |
| updateById | 根据ID更新数据库中的记录 |
| update | 根据条件更新数据库中的记录 |
| updateBatchById | 根据ID列表批量更新数据库中的记录 |
| saveOrUpdate | 如果存在则更新，否则保存实体对象到数据库 |
| getById | 根据ID从数据库中查询对应的记录 |
| listByIds | 根据ID列表从数据库中查询对应的记录 |
| listByMap | 根据条件从数据库中查询对应的记录 |
| getOne | 根据条件从数据库中查询一条记录 |
| getMap | 根据条件从数据库中查询一条记录，并返回Map形式的结果 |
| getObj | 根据条件从数据库中查询一条记录，并通过自定义函数进行映射转换 |
| count | 计算数据库中符合条件的记录数量 |
| list | 根据条件从数据库中查询多条记录 |
| page | 根据条件从数据库中分页查询记录 |
| listMaps | 根据条件从数据库中查询多条记录，并以Map形式返回结果 |
| listObjs | 根据条件从数据库中查询多条记录，并返回Object类型的结果列表 |
| pageMaps | 根据条件从数据库中分页查询记录，并以Map形式返回结果 |
| getBaseMapper | 获取基础的Mapper接口，用于执行底层的数据库操作 |
| getEntityClass | 获取实体类的Class对象 |
| query | 创建一个QueryChainWrapper对象，用于构建查询条件 |
| lambdaQuery | 创建一个LambdaQueryChainWrapper对象，用于构建Lambda表达式查询条件 |
| ktQuery | 创建一个KtQueryChainWrapper对象，用于构建Kotlin DSL查询条件 |
| ktUpdate | 创建一个KtUpdateChainWrapper对象，用于构建Kotlin DSL更新条件 |
| update | 创建一个UpdateChainWrapper对象，用于构建更新条件 |
| lambdaUpdate | 创建一个LambdaUpdateChainWrapper对象，用于构建Lambda表达式更新条件 |
| saveOrUpdate | 如果存在则根据条件更新数据库中的记录，否则保存实体对象到数据库 |
api调试结果：
前端功能显示：
功能三： 实现获取医生的详细信息
代码如下：
// TODO：获取医生的详细信息@RequestMapping("/getDetail")public String getDetail(@RequestParam("id") Integer id) throws JsonProcessingException {QueryWrapper<Doctor> wrapper = new QueryWrapper<>();wrapper.eq("id",id);Doctor doctorServiceById = doctorService.getOne(wrapper);DoctorDetailSummary doctorDetailSummary =new DoctorDetailSummary(doctorServiceById.getHostId(),doctorServiceById.getName(),doctorServiceById.getPhone(),doctorServiceById.getImage(),doctorServiceById.getMajor(),doctorServiceById.getSchool());return JsonTool.writeValueAsString(doctorDetailSummary);}
这个功能需要前端在展示医生基础数据时候，还能进行查看更多详细但是不敏感的信息。
api测试结果：
前端功能实现展示：
功能四：实现预约功能
@RestController
@RequestMapping("/vaccinum/registration")
public class RegistrationController {@AutowiredIRegistrationService registrationService;ObjectMapper JSon_Tool = new ObjectMapper();@RequestMapping("/insert")public String register(Registration registration) throws JsonProcessingException {HashMap map = new HashMap();boolean save = registrationService.save(registration);map.put("flag",save);return JSon_Tool.writeValueAsString(map);}
}
功能五：根据医生科室查询医生
// TODO:根据医院的科室查询对应医生@RequestMapping("/SerchByMajor")public String SerchByMajor(@RequestParam("major") String major,@RequestParam(defaultValue = "1") Integer pageNum,@RequestParam(defaultValue = "8") Integer pageSize) throws JsonProcessingException {HashMap map = new HashMap<>();Page<Doctor> page = new Page<>(pageNum,pageSize);QueryWrapper<Doctor> wrapper = new QueryWrapper<>();wrapper.eq("major",major);IPage<Doctor> iPage = doctorService.page(page,wrapper);List<Doctor> list = iPage.getRecords();// 获取信息List<DoctorSummary> doctorSummaryList = new ArrayList<>();for (Doctor doctor:list){doctorSummaryList.add(new DoctorSummary(doctor.getHostId(),doctor.getName(),doctor.getPhone(),doctor.getImage(),doctor.getMajor()));}map.put("list",doctorSummaryList);map.put("total",iPage.getTotal());return JsonTool.writeValueAsString(doctorSummaryList);}Apifox测试:
注意：
由于这里没有和前端沟通好，前端直接使用了elementUi中自带的种类查询，这样会导致一个问题，那就是后端给的数据在前端筛选，导致分页功能无法正常使用。
如图：
3条每页的数据只有两条，甚至一条或者空，这是因为，在前端访问后端并返回数据时候，这个页面是固定数据的3条每一页。而elementUi在此基础上进行筛选，三条数据中major==外科手术的只有两条，那么就保留两条。
收获与反思
收获：
本次我负责后端的接口开发，这次的模块功能开发，
1.让我了解了MybatisPlus的分页是如何实现的，与一般的MyBatis的区别之处。
2.然后就是自定义结果集（QueryWrapper）的基本使用。
3.MyBatisPlus提供的快速方法，进行一些基本的了解
反思：
- 第一，代码需要规范，与前端交接时候，前端代码应该有条理性，前端模块开发中函数设计分区块，即前端自行处理的区块，和后端交互的函数区块需要分开。并且注意在函数前加上注释。否则若只给后端前端的代码，后端只能看到一坨捆绑的线团。不知所云。
- 第二，并且需要基于事实实现对应的功能。根据数据库实际的列去实现，这里前端做的预约功能虽然看似合理，但是缺少了对应的信息填写表格。
- 第三， 后端方面的问题，第一，返回的格式类型应该以map形式传递，这样能保证传输格式的灵活性。这里一开始就仅仅传递一个链表返回，并未考虑可能有其它参数需要返回。
- 第四，如果写好了开发文档，请前端务必按照开发文档中来做，这里我后端其实还实现一个功能，根据科室进行查找对应的医生，但是前端中使用组件的方式，
- 最后，在前后端的开发中一定一定要保持交流，任何的改动都需要跟对方谈好，否则会给双方带来极大的困扰！！！
