做网站要用到什么,秦皇岛房产信息网官网,江门app开发,昆山建设网站医院信息化与智能化系统(9)
这里只描述对应过程#xff0c;和可能遇到的问题及解决办法以及对应的参考链接#xff0c;并不会直接每一步详细配置 如果你想通过文字描述或代码画流程图#xff0c;可以试试PlantUML#xff0c;告诉GPT你的文件结构#xff0c;让他给你对应的…医院信息化与智能化系统(9)
这里只描述对应过程和可能遇到的问题及解决办法以及对应的参考链接并不会直接每一步详细配置 如果你想通过文字描述或代码画流程图可以试试PlantUML告诉GPT你的文件结构让他给你对应的代码
预约挂号微服务模块搭建
前端知识点补充此章节不会详细讲具体前端的每个知识点
1、Bug修改
Bug:当点击修改按钮后跳转到添加页面再点击医院设置添加医院的数据并不会清空。
这里涉及到vue中组件重用问题vue-router导航切换时如果两个路由都渲染同个组件组件的生命周期方法created或者mounted不会再被调用, 组件会被重用显示上一个路由渲染出来的自建。
解决方案可以简单的在 router-view上加上一个唯一的key来保证路由切换时都会重新触发生命周期方法确保组件被重新初始化。·
修改 src/views/layout/components/AppMain.vue 文件如下
通过生成动态 key每次路由发生变化时router-view都会重新渲染。这种方法可以避免因为路由名称相同导致的缓存问题从而确保页面在切换时正确刷新。
router-view:keykey/router-view
...
computed: {
key() {
returnthis.$route.name ! undefined? this.$route.name newDate(): this.$route newDate()}}接着之前在add.vue的created方法中在判断完是否存在id值(if)后添加一个else语句即如果执行的是添加操作则表单数据清空将hospitalSet属性赋值为空。
2、数据字典介绍
数据字典就是管理系统常用的分类数据或者一些固定数据例如省市区三级联动数据、民族数据、行业数据、学历数据等由于该系统大量使用这种数据所以我们要做一个数据管理方便管理系统数据一般系统基本都会做数据管理。
表设计及分析
创建yygh_cmn数据库里面创建dict表以下除了(创建时间、更新时间、是否删除字段外)
字段名含义id自身id每一个name都对应不同的idparent_id上级 ID通过 id 与 parent_id 构建上下级关系name名称用于数据字典中的名称展示value值用于标识数据字典的具体值dict_code编码全局唯一的自定义编码
全部分类是级别最高的所以它的id是1并且没有上级对应省、医院等级、证件类型...他们属于其下属级别。
value值对应用户填写的信息。1表示医院等级是三级甲等
dict_code的作用是对应医院等级、学历...这一分类因为它们的parent_id都为1不好单独区分所以可以根据编码来获取指定类型数据(比如医院等级都为一级的医院)。
3、搭建service-cmn模块
和搭建service-hosp类似
在后端创建service-cmn模块首先仿照service-hosp创建application.properties配置文件
创建启动类ServiceCmnApplication。添加好SpringBootApplication和ComponentScan注释和main方法
再创建mapper、controller、service、config文件夹
其中config中创建CmnConfig配置类用于指定MyBatis Mapper接口所在的包路径以及组件集中声明管理
在model模块已经创建了对数据字典实体类的封装(Dict)对应其表结构(id、paren_id...)所以在mapper接口(DictSetMapper)创建时继承BaseMapper指定泛型为它即可
封装类的额外操作
如果希望在前端使用element-ui创建的表格中呈现多级效果类似于下拉选项则必须提供hasChildren 字段来指定哪些行是包含子节点所以在实体类的创建中需要多添加一个boolean类型属性hasChildren来表示是否有子节点但是在数据库中并无该字段所以需要在该属性上添加注解TableField(exist false)其是 MyBatis-Plus 框架中的一个注解用于在实体类的字段上标记该字段不与数据库表中的任何字段对应
紧接着在service文件夹创建DictService接口和对应的DictServiceImpl
在controller文件夹创建DictController实例化DictService类设置RestController、CrossOrigin等注解
4、数据字典接口-列表功能
在DictController创建对应接口函数
根据数据id查询子数据列表
思路是设置请求方式为get在url中获取id值再根据id查找对应paren_id id的ListDict集合
其中根据id查询对应集合的功能需要在DictService中声明该方法并在DictServiceImpl中实现该方法逻辑是创建QueryWrapper对象构建条件判断利用wrapper.eq()方法实现paren_id id效果并根据wrapper返回集合List。
这里还需要一个功能是判断id下是否有子节点这关系到hasChildren字段的值设置。
接着在findChildData中调用该方法利用集合遍历并根据集合中的id再次查询它们作为别人的子节点是否自己也有子节点。 //根据数据id查询子数据列表Overridepublic ListDict findChildData(Long id) {QueryWrapperDict wrapper new QueryWrapper();wrapper.eq(parent_id,id);ListDict dictList baseMapper.selectList(wrapper);//向list集合每个dist对象中设置hasChildrenfor (Dict dict :dictList){Long dictId dict.getId();boolean isChildren this.isChildren(dictId);dict.setHasChildren(isChildren);}return dictList;}//判断id下面是否有子节点private boolean isChildren(Long id){QueryWrapperDict wrapper new QueryWrapper();wrapper.eq(parent_id,id);Integer count baseMapper.selectCount(wrapper);return count0;}在测试时需要注意两个问题
运行时运行的是8202的配置运行类而不是之前8201的了否则开启的是8201的端口打不开对应的swagger页面在两个模块同时声明同一个mybatis-plus插件时即Spring Boot 应用中定义了两个同名的 Bean,由于 Spring Boot 默认不允许 Bean 名称冲突因此应用启动失败。解决方法:可以选择在一个配置类中重命名 以避免命名冲突。
Bean(name customPaginationInterceptor)
public PaginationInterceptor paginationInterceptor() {return new PaginationInterceptor();
}前端配置
第一步是在路由router/index.js添加配置主要包括定义路径、名称、跳转路径等。
其中跳转路径定义为views/dict/list.vue在api/dict定义接口调用方法
在list.vue中依旧跟之前一致在return中初始化变量list:[]作为数据字典列表数组在method中创建getDictList方法内部调用dict.js中的dictList方法在created中页面渲染前调用getDictList方法并传id值为1
在前端展示代码中结合element-ui标签解释下方内容
:datalist: 绑定了一个名为 list 的数据源表格会根据这个数据源动态渲染行数据。
:loadgetChildrens: 指定当需要加载子节点时调用的函数这个函数会在懒加载模式下被触发通常用于获取子节点的数据。
:tree-props{children: children, hasChildren: hasChildren}: 用于定义树形结构的数据属性children 表示子节点的字段名hasChildren 表示是否有子节点的字段名。 el-table:dataliststylewidth: 100%row-keyidborderlazy:loadgetChildrens:tree-props{children: children, hasChildren: hasChildren}el-table-column label名称 width230 alignlefttemplate slot-scopescopespan{{ scope.row.name }}/span/template/el-table-column.../el-table这里getChildrens函数
tree当前树节点的数据对象。tree.id 表示当前节点的唯一标识treeNodeElement UI 树形表格组件传递的节点信息对象。这里并未使用但可以包含节点的层级、状态等信息。resolve一个回调函数用于通知 el-table 加载完成的数据。将异步请求的数据通过 resolve 返回给表格进行渲染。
getChildrens(tree, treeNode, resolve) {dict.dictList(tree.id).then(response {resolve(response.data)})}在测试时需要把dev.env.js中的BASE_API修改为8202并且修改后需要重新启动npm run dev
还碰到一个问题是在前端路由定义时是分为了数据管理和数据字典两个部分的但是在显示过程中并没有下拉菜单所以在router/index.js添加alwaysShow:true 在医院等级等下面并没有下滑按钮显示更下一层级的数据这里考虑更换element-ui依赖版本在package.json中将原有的element-ui: 2.4.6改为2.12.0并在vue-admin-template-master文件夹中找到element-ui文件夹删除(好像不删也可以直接下载覆盖)
如果报错需要来自administrator的权限才能对此文件夹进行更改参照此处
并且注意把项目关了再删除随后npm install即可。
