粤嵌实训医疗项目--day06(Vue + SpringBoot)
往期回顾
- 粤嵌实训医疗项目(小组开发)--day05-CSDN博客
- 粤嵌实训医疗项目--day04(Vue + SpringBoot)-CSDN博客
- 粤嵌实训医疗项目--day03(Vue + SpringBoot)-CSDN博客
- 粤嵌实训医疗项目day02(Vue + SpringBoot)-CSDN博客
- 粤嵌实训医疗项目--day01(Vue+SpringBoot)-CSDN博客
目录
一、预约挂号模块
------------前端实现------------
功能一:面包屑样式
功能二:搜索栏
功能三:功能表格(获取当前列内的参数)
功能四:分页显示
------------后端接口------------
功能一:通过列表查询所有挂号记录
功能二:根据id查找对应的订单
功能三:获取病例订单的详细信息
功能四:实现撤回效果
一、预约挂号模块
业务需求:
------------前端实现------------
1.创建本次模块对应的视图,名称为RegisterList.Vue
2.配置好对应的动态路由
// 配置子路由children: [{path: 'vaccineType',// --> /Layout/vaccineTypename: 'vaccineType',component: () => import('@/type/TypeList')},{path: 'userInfo',// --> /Layout/vaccineTypename: 'userInfo',component: () => import('@/view/UserInfoList')},
// 本次模块使用的路由地址{path:'registration',name:'registration',component: () => import('@/view/RegisterList') }]
配置好后就可以开始实现前端样式了!
功能一:面包屑样式
头部设置导航栏,表明当前导航的地址。
在element官网中找到如下案例:
修改代码后如下:
<div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);height: 30px; padding-top: 1%;"><el-breadcrumb separator="/"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item><a href="/">医生模块</a></el-breadcrumb-item><el-breadcrumb-item>挂号记录查询</el-breadcrumb-item></el-breadcrumb></div>
展示:
功能二:搜索栏
通过搜索预约订单的id查询到对应的订单。
通过element查找对应组件案例有:
修改后代码如下:
<!-- 顶部搜索栏 --><div style="display: flex; align-items: center; margin-left: 40%; margin-top: 2%;"><el-input v-model="input" placeholder="请输入挂号订单编号快速查询"></el-input></div>
但是如此还并不足够,因为只有一段 空白输入框,并没有查询按钮,所以还需要在组件仓库中查找按钮。
查找后插入对应代码如下:
<!-- 顶部搜索栏 --><div style="display: flex; align-items: center; margin-left: 40%; margin-top: 2%;"><el-input v-model="input" placeholder="请输入挂号订单编号快速查询"></el-input><el-button type="primary" icon="el-icon-search">搜索</el-button></div>
展示:
前后端交互:
通过get方法访问后端实现查询功能,目标:通过挂号记录的唯一id,查看数据库是否存在。
1.引入request工具,进行get请求
// 实现根据挂号记录id查询挂号功能queryById(){request// 这里设置功能根据id查询对应的用户.get("/",{params:{id : this.input,}}).then((res)=>{// 将后台数据返回到表单中this.tableData = res.list;if(res.flag == false){this.$message.error("查询失败");}else{this.$message.success("查询成功");}})},
功能三:功能表格(获取当前列内的参数)
首先表格的基础功能在于展示数据,但是额外需要实现功能有
按钮一:实现查询对应挂号的详细病情
按钮二:撤销用户的挂号订单(注意:用户只能撤销自己的挂号)
在仓库表格中找到功能性表格
修改一下代码后放入模板中
<divstyle="margin: 0 auto; width: 63%; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); margin-top: 2%;"><!-- 表格展示数据 --><el-table :data="tableData" border style="width: 100%"><el-table-column fixed prop="id" label="挂号订单编号" width="150"></el-table-column><el-table-column prop="UserName" label="病号名称" width="120"></el-table-column><el-table-column prop="registration_time" label="订单时间" width="120"></el-table-column><el-table-column prop="status" label="病历单状态" width="300"></el-table-column><el-table-column prop="doctorName" label="负责医生" width="120"></el-table-column><el-table-column fixed="right" label="操作" width="250" ><template slot-scope="scope"><!-- 通过按键打开内容 --><el-button type="info" @click="centerDialogVisible = true" style="width: 120px;">病情详细信息</el-button><el-dialog title="病例详细描述" :visible.sync="centerDialogVisible" width="30%" center><span>丁丁太小</span><span slot="footer" class="dialog-footer"><el-button @click="centerDialogVisible = false">取 消</el-button><el-button type="primary" @click="centerDialogVisible = false">确 定</el-button></span></el-dialog><!-- 撤回按钮 --><el-popconfirm title="你确定要撤回预约挂号记录吗?"><el-button type="danger" slot="reference" disabled>撤回</el-button></el-popconfirm></template></el-table-column></el-table></div>
对应的数据案例展示
data() {return {tableData: [{id: '1',UserName: '王小虎',registration_time: '2023-10-22',status: '已处理',doctorName: '陈志平',},],centerDialogVisible: false,}}
展示:
前后端交互
通过生命周期,在创建时候就进行查询所有挂号记录。
设置生命周期:
created() {// 在访问网页时候就进行get请求请求所有挂号记录this.query()},
查询所有数据方法:
// 查询所有挂号记录功能query(){request// 对应后端路径.get("/",{// 发送分页参数params:{pageNum: this.pageNum,pageSize: this.pageSize,}}).then((res)=>{this.tableData = res.list;this.total = res.total;})}},
除了一开始就调用query方法进行返回list之外,这个组件还需要实现两个功能,一个是查看挂号的详细信息,一个是撤回医生自己的表单。
1.查看详细信息
// 查询挂号记录中用户的病情openDetails(val) {request.get("/vaccinum/registration/queryDescription", {params: {id: val}}).then((res) => {this.description = res.description;// this.src = res.src;})},
2.实现撤回功能
在组件上加入confrim函数,意味着当点击是否撤销时候执行函数handleDelete
// 进行撤销操作handleDelete(val) {request.get("/vaccinum/registration/remove", {params: {id: val}}).then((res) => {if (res.flag == false) {this.$message.error("撤回失败");} else {this.$message.success("撤回成功");}this.query();})},
发送参数:id
<!-- 撤回按钮 --><el-popconfirm title="你确定要撤回预约挂号记录吗?" @confirm="handleDelete(scope.row.id)"><el-button type="danger" slot="reference">撤回</el-button></el-popconfirm>
功能四:分页显示
展示的表格不能一次性展示所有数据,所以提供分页功能,并且需要可以多种页面容量显示。
仓库中找到分页组件
修改对应代码后如下:
<!-- 分页标签 --><div class="block"><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange":current-page.sync="currentPage2" :page-sizes="[8, 10, 12]" :page-size="100"layout="sizes, prev, pager, next" :total="100"></el-pagination></div>
实现前端分页函数如下:
// 分页函数处理handleSizeChange(val) {console.log(val);this.pageSize = val;this.query();},handleCurrentChange(val) {console.log(val);this.currentPage = val;this.query();},
展示:
前端代码:
<template><div><div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);height: 30px; padding-top: 1%;"><el-breadcrumb separator="/"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item><a href="/">医生模块</a></el-breadcrumb-item><el-breadcrumb-item>挂号记录查询</el-breadcrumb-item></el-breadcrumb></div><!-- 顶部搜索栏 --><div style="display: flex; align-items: center; margin-left: 40%; margin-top: 2%;"><el-input placeholder="请输入内容" v-model="input" clearable @input="handleInput"></el-input><el-button type="primary" icon="el-icon-search" @click="queryById">搜索</el-button></div><divstyle="margin: 0 auto; width: 63%; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); margin-top: 2%;"><!-- 表格展示数据 --><el-table :data="tableData" border style="width: 100%"><el-table-column fixed prop="id" label="挂号订单编号" width="150"></el-table-column><el-table-column prop="userName" label="病号名称" width="120"></el-table-column><el-table-column prop="registration_time" label="订单时间" width="120"></el-table-column><el-table-column prop="status" label="病历单状态" width="300"></el-table-column><el-table-column prop="doctorName" label="负责医生" width="120"></el-table-column><el-table-column fixed="right" label="操作" width="250"><template slot-scope="scope"><!-- 通过按键打开内容 --><el-button type="info" @click=" centerDialogVisible = true; openDetails(scope.row.id)"style="width: 120px;">病情详细信息</el-button><el-dialog title="病例详细描述" :visible.sync="centerDialogVisible" width="30%" center :modal="false"><div class="block"><span class="demonstration" style="text-align: center;">病情图片展示</span><el-image :src="src"></el-image></div><span>病情详细描述:{{ description }}</span><span slot="footer" class="dialog-footer"><el-button @click="centerDialogVisible = false">取 消</el-button><el-button type="primary" @click="centerDialogVisible = false">确 定</el-button></span></el-dialog><!-- 撤回按钮 --><el-popconfirm title="你确定要撤回预约挂号记录吗?" @confirm="handleDelete(scope.row.id)"><el-button type="danger" slot="reference">撤回</el-button></el-popconfirm></template></el-table-column></el-table></div><!-- 分页标签 --><div class="block"><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange":current-page.sync="currentPage2" :page-sizes="[8, 10, 12]" :page-size="pageSize"layout="sizes, prev, pager, next" :total="tableData.length"></el-pagination></div>``</div>
</template>
<script>
//导入request工具
import request from "@/utils/request";export default {methods: {// -----------------------------------------------------前后端交互区---------------------handleClick(row) {console.log(row);},// 实现根据挂号记录id查询挂号功能queryById() {request// 这里设置功能根据id查询对应的用户.get("/vaccinum/registration/queryById", {params: {id: this.input,}}).then((res) => {// 将后台数据返回到表单中if (res.flag == false) {this.$message.error("查询失败,请检查订单号是否存在");} else {this.$message.success("查询成功");this.tableData = res.list;}})},// 查询所有挂号记录功能query() {request// 对应后端路径.get("/vaccinum/registration/list", {// 发送分页参数params: {currentPageNum: this.currentPageNum,pageSize: this.pageSize,}}).then((res) => {this.tableData = res.list;this.total = res.total;for (let i = 0; i < this.tableData.length; i++) {this.tableData[i].status = this.getStatusText(this.tableData[i].status);}})},// 查询挂号记录中用户的病情openDetails(val) {request.get("/vaccinum/registration/queryDescription", {params: {id: val}}).then((res) => {this.description = res.description;// this.src = res.src;})},// 进行撤销操作handleDelete(val) {request.get("/vaccinum/registration/remove", {params: {id: val}}).then((res) => {if (res.flag == false) {this.$message.error("撤回失败");} else {this.$message.success("撤回成功");}this.query();})},// ----------------------------------------------------------前端功能区-------------------// 使用聚焦,解决无法输入参数的问题handleInput(value) {console.log('输入值:', this.input);},// 分页函数处理handleSizeChange(val) {console.log(val);this.pageSize = val;this.query();},handleCurrentChange(val) {console.log(val);this.currentPage = val;this.query();},// 前端修改status并转为特定的文字显示getStatusText(status) {if (status === 0) {return "处理中";} else if (status === 1) {return "已处理";} else if (status === 2) {return "异常";} else {return "未知状态";}},},// Vue的生命周期周期created() {// 在访问该模块时候就进行get请求请求所有挂号记录this.query()},// Vue 数据存放处data() {return {// 案例数据tableData: [{id: '1',UserName: '王小虎',registration_time: '2023-10-22',status: '已处理',doctorName: '陈志平',},],centerDialogVisible: false,// 存放默认分页currentPageNum: 1,pageSize: 8,// 存放病情描述input: '',// 图片存放处src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',}}
}</script>
<style>
.el-input {width: 25%;
}
</style>
------------后端接口------------
功能一:通过列表查询所有挂号记录
// TODO:实现查询挂号订单的功能@RequestMapping("/list")public String query(@RequestParam(defaultValue = "1") Integer pageNum,@RequestParam(defaultValue = "8") Integer pageSize) throws JsonProcessingException {
// 创建结果集并实现分页HashMap map = new HashMap();Page page = new Page(pageNum,pageSize);
// 获取结果IPage<Registration> iPage = registrationService.page(page);List<Registration> records = iPage.getRecords();List<InfoSummery> summeries = new ArrayList<>();//将筛选后的结果放进表格中for (Registration registration : records){summeries.add(new InfoSummery(registration.getUserId(),userServiceservice.getById(registration.getUserId()).getName(),registration.getRegistrationTime(),registration.getStatus(),doctorService.getById(registration.getDoctorId()).getName()));}map.put("list",summeries);map.put("total",iPage.getTotal());return JSon_Tool.writeValueAsString(map);}// 挂号记录的一般信息类@Valueprivate static class InfoSummery{Integer id;String UserName;LocalDateTime registration_time;Integer status;String doctorName;}
API测试:
前端页面展示:
功能二:根据id查找对应的订单
// TODO:根据id查找对应的订单@RequestMapping("/queryById")public String queryById(@RequestParam("id") Integer id) throws JsonProcessingException {
// 结果集HashMap map = new HashMap();Registration registration;List<InfoSummery> summeryList = new ArrayList<>();
// 默认为falsemap.put("flag",false);try {
// 如果触发异常则说明找不到对应idregistration =registrationService.getById(id);summeryList.add(new InfoSummery(registration.getId(),userServiceservice.getById(registration.getUserId()).getName(),registration.getRegistrationTime(), registration.getStatus(), doctorService.getById(registration.getDoctorId()).getName()));map.put("list",summeryList);map.put("flag",true);}catch (Exception e){
// 查询失败打印信息e.printStackTrace();}finally {return JSon_Tool.writeValueAsString(map);}}
前端展示:
1.正常查询
2.异常查询
功能三:获取病例订单的详细信息
// TODO:获取病例订单的详细信息@RequestMapping("/queryDescription")public String queryDiscription(@RequestParam("id") Integer id) throws JsonProcessingException {HashMap map = new HashMap();map.put("flag",false);
// 创建异常拦截try {String description = registrationService.getById(id).getDescription();
// 返回病情描述,病情图片map.put("description",description);map.put("flag",true);map.put("src",registrationService.getById(id).getDescribeImg());}catch (Exception e){e.printStackTrace();}finally {
// 无论成功与否都返回数据return JSon_Tool.writeValueAsString(map);}}
前端展示:
功能四:实现撤回效果
// TODO:进行挂号记录的撤销操作@RequestMapping("/remove")public String handleDelete(@RequestParam("id") Integer id) throws JsonProcessingException {HashMap map = new HashMap();map.put("flag", false);try {
// 执行删除操作boolean remove = registrationService.removeById(id);map.put("flag",remove);}catch (Exception e){}finally {return JSon_Tool.writeValueAsString(map);}}
前端展示:
模块代码:
@RestController
@RequestMapping("/vaccinum/registration")
@AllArgsConstructor
public class RegistrationController {@AutowiredIRegistrationService registrationService;IUserService userServiceservice;IDoctorService doctorService;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:根据id查找对应的订单@RequestMapping("/queryById")public String queryById(@RequestParam("id") Integer id) throws JsonProcessingException {
// 结果集HashMap map = new HashMap();Registration registration;List<InfoSummery> summeryList = new ArrayList<>();
// 默认为falsemap.put("flag",false);try {
// 如果触发异常则说明找不到对应idregistration =registrationService.getById(id);summeryList.add(new InfoSummery(registration.getId(),userServiceservice.getById(registration.getUserId()).getName(),registration.getRegistrationTime(), registration.getStatus(), doctorService.getById(registration.getDoctorId()).getName()));map.put("list",summeryList);map.put("flag",true);}catch (Exception e){
// 查询失败打印信息e.printStackTrace();}finally {return JSon_Tool.writeValueAsString(map);}}// TODO:实现查询挂号订单的功能@RequestMapping("/list")public String query(@RequestParam(defaultValue = "1") Integer pageNum,@RequestParam(defaultValue = "8") Integer pageSize) throws JsonProcessingException {
// 创建结果集并实现分页HashMap map = new HashMap();Page page = new Page(pageNum,pageSize);
// 获取结果IPage<Registration> iPage = registrationService.page(page);List<Registration> records = iPage.getRecords();List<InfoSummery> summeries = new ArrayList<>();//将筛选后的结果放进表格中for (Registration registration : records){summeries.add(new InfoSummery(registration.getId(),userServiceservice.getById(registration.getUserId()).getName(),registration.getRegistrationTime(),registration.getStatus(),doctorService.getById(registration.getDoctorId()).getName()));}map.put("list",summeries);map.put("total",iPage.getTotal());return JSon_Tool.writeValueAsString(map);}// TODO:获取病例订单的详细信息@RequestMapping("/queryDescription")public String queryDiscription(@RequestParam("id") Integer id) throws JsonProcessingException {HashMap map = new HashMap();map.put("flag",false);
// 创建异常拦截try {String description = registrationService.getById(id).getDescription();
// 返回病情描述,病情图片map.put("description",description);map.put("flag",true);map.put("src",registrationService.getById(id).getDescribeImg());}catch (Exception e){e.printStackTrace();}finally {
// 无论成功与否都返回数据return JSon_Tool.writeValueAsString(map);}}// TODO:进行挂号记录的撤销操作@RequestMapping("/remove")public String handleDelete(@RequestParam("id") Integer id) throws JsonProcessingException {HashMap map = new HashMap();map.put("flag", false);try {
// 执行删除操作boolean remove = registrationService.removeById(id);map.put("flag",remove);}catch (Exception e){}finally {return JSon_Tool.writeValueAsString(map);}}
// 挂号记录的一般信息类@Valueprivate static class InfoSummery{Integer id;String UserName;LocalDateTime registration_time;Integer status;String doctorName;}
}
收获与总结:
前端:
1.url处理请求地址中如果出现%20,说明你的请求地址可能尾部有空格
2.对话表格组件使用时候,如果出现屏幕半黑的情况,那么是屏蔽罩没有关闭。
3.通过表格获取当前列的id只需要在scope作用域中获取对应的值即可,如scope.row.id
后端:
1.在访问数据时候尽量使用异常处理,这样访问时候即使非法访问也能得到一个返回结果。
2.mybatis-plus中设置一个实体集的主键应该按照如下操作
/** * 主键 挂号id* */@TableId(type=IdType.AUTO)private Integer id;