• 尚医通(四)


    视频链接:https://www.bilibili.com/video/BV1V5411K7rT?vd_source=9545770e4a2968c05878ffac8589ec6c
    视频选集:P46— P65
    Java微服务 + 分布式 +全栈项目

    1.目录结构和登录改造

    在登录改造中主要是先将值改为一个固定值,能进行登录操作
    在登录中写一个固定值,不需要请求接口:
    在这里插入图片描述
    用户信息也设置为一个固定值:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    2.框架开发流程介绍

    1. 添加路由【就是左边菜单框】
      编写路由地址:
      在这里插入图片描述
    2. 设置跳转页面路径
      在这里插入图片描述
    3. 在api文件夹创建js文件,定义接口路径
      在这里插入图片描述
    4. 在页面引入js文件,使用axios进行接口调用,把接口返回数据在页面中显示

    3.医院设置前端

    3.1列表

    3.1.1

    1. 添加医院设置路由:
      在这里插入图片描述

    在这里插入图片描述

    1. 创建页面,设置跳转路径
      在这里插入图片描述
      在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    1. 在api创建js文件,定义接口路径
      在这里插入图片描述
      在这里插入图片描述
      修改 接口ip+端口号
      在这里插入图片描述
      在这里插入图片描述

    3.1.2

    使用的时候记得安装分页插件
    跨域问题:三个地方,任何一个不相同产生跨域

    1. 访问协议: http https
    2. 访问地址: 192.128.1.1 172.11.1.1
    3. 端口号:9528 8201

    解决方案:【在controller添加注释,跨域访问】
    在这里插入图片描述

    3.1.3

    利用element-ui中的列表,表单,查询格式在前端中进行修改,最终效果如下:
    在这里插入图片描述

    3.2 删除

    1. 添加删除按钮
      在这里插入图片描述

    2. 编写调用删除的方法,得到删除id值
      在这里插入图片描述
      效果图:
      在这里插入图片描述

    3. 在api文件夹的js文件定义操作的接口路径
      在这里插入图片描述

    4. 调用定义的接口实现功能【使用element-ui中的弹窗功能】

    在这里插入图片描述

    3.3 批量删除

    1. 在src/api/hospset.js中定义批量删除的方法
      在这里插入图片描述
    2. 根据element-ui中代码添加批量删除按钮以及复选框
      在这里插入图片描述

    复选框:
    在这里插入图片描述
    效果图:
    在这里插入图片描述
    给复选框绑定事件:
    在这里插入图片描述
    定义获取选择复选框的id值:

    在这里插入图片描述

    1. 调用定义的接口实现功能
      在这里插入图片描述

    3.4 锁定

    当状态为可用的时候锁定;当状态为不可用的时候取消解锁;

    1. 在src/api/hospset.js中定义锁定
      在这里插入图片描述

    2. 添加按钮【添加判断】
      在这里插入图片描述

    3. 写方法:调用定义的接口实现功能

    在这里插入图片描述

    3.5 添加

    1. 在src/api/hospset.js中定义添加
      在这里插入图片描述

    2. 根据element-ui选择添加界面
      在这里插入图片描述
      模板:
      在这里插入图片描述

    3. 实现保存按钮方法

    3.6 修改

    1. 添加隐藏路由
      在这里插入图片描述
    2. 添加修改按钮
      在这里插入图片描述
    3. 在src/api/hospset.js中定义添加 id查询功能和修改功能
      在这里插入图片描述
      在这里插入图片描述
    4. 获取路由id值,调用接口得到医院设置信息
      先定义方法:
      在这里插入图片描述
      在created中:
      在这里插入图片描述
      展示效果:
      在这里插入图片描述
    5. 修改代码以及修改保存按钮
      在这里插入图片描述
      在这里插入图片描述

    3.7 bug修改

    bug:先点击修改后再点击添加,添加格中内容没有清空
    解决方案:添加else语句
    在这里插入图片描述
    还是没有解决,原因是组件重用问题,当同一个页面create时候,只执行第一次
    正确解决方案:【可以简单的在router-view上加上一个唯一的key,来保证路由切换时都会重新触发生命周期方法,确保组件被重新初始化】
    在这里插入图片描述

    4.数据字典接口

    数据字典就是管理系统常用的分类数据或者一些固定数据,例如:省市区三级联动数据、民族数据、行业数据、学历数据等,由于该系统大量使用这种数据,所以我们要做一个数据管理方便管理系统数据,一般系统基本都会做数据管理。

    数据字典的形式:
    在这里插入图片描述
    在这里插入图片描述

    4.1 需求和准备

    4.1.1 数据字典列表接口

    model模块添加数据字典实体、添加数据字典的mapper、service、controller

    4.2 列表

    根据id查询下面的子数据:
    在controller中编写代码:
    在这里插入图片描述
    接着在service中编写代码创建findChlidData方法:
    在这里插入图片描述
    在实现类中把方法实现:
    在这里插入图片描述

    在这里插入图片描述

    4.3 数据字典前端

    1. 添加路由
      在这里插入图片描述

    2. 修改路径
      在这里插入图片描述

    3. 在api中创建js文件,并写上方法【实现接口】
      在这里插入图片描述

    4. 在页面中调用【初步】
      在这里插入图片描述

    5. 进一步完善
      web页面代码:
      在这里插入图片描述

    层级递归的方法:
    在这里插入图片描述
    展示效果:【如果出问题可能是element-ui版本的问题】
    在这里插入图片描述

    6.EasyExcel

    Java解析、生成Excel比较有名的框架有Apache poi、&l。但他们都存在一个严重的问题就是非常的耗内存,poi有一套SAX模式的API可以一定程度的解决一些内存溢出的问题,但POI还是有一些缺陷,比如07版Excel解压缩以及解压后存储都是在内存中完成的,内存消耗依然很大。easyexcel,重写了poi对07版Excel的解析,能够原本一个3M的excel用POIsax依然需要100M左右内存降低到几M,并且再大的excel不会出现内存溢出,03版依赖POI的 s教模式。在上层做了模型转换的封装,让使用者更加简单方便。
    EasyExcel是一个基于Java的简单、省内存的读写Excel的开源项目。在尽可能节约内存的情况下支持读写百M的Excel。

    文档地址:https://alibaba-easyexcel.github.io/index.html
    github地址: https://github.com/alibaba/easyexcel

    6.1 写操作

    1. 在后端添加依赖
      在这里插入图片描述
    2. 创建实体类
      在对应属性上面添加注解,设置表头内容
      在这里插入图片描述
    3. 写操作
      在这里插入图片描述
      在这里插入图片描述

    效果展示:
    在这里插入图片描述

    6.2 读操作

    1. 实体类
      在这里插入图片描述

    2. 定义监听器【一行行读取excel中的内容】
      在这里插入图片描述

    3. 读操作

    在这里插入图片描述
    在这里插入图片描述

    7.数据字典-导出【写】

    1. 在controller中先定义接口

    在这里插入图片描述

    1. 在service中对方法进行创建
      在这里插入图片描述

    2. 在service实现类中进行实现

    先定义实体类:
    在这里插入图片描述
    在这里插入图片描述

    1. 实现前端
      先添加按钮:
      在这里插入图片描述
      改进一下全端:【让其在一个新的页面中显示弹窗】
      在这里插入图片描述

    定义响应事件:
    在这里插入图片描述
    效果展示:
    在这里插入图片描述
    在这里插入图片描述

    8.数据字典-导入【读】

    1. 在controller中定义导入接口
      在这里插入图片描述
    2. 在service中创建方法
      在这里插入图片描述
    3. 在service实现类中进行实现
      先定义监听器:
      在这里插入图片描述

    在service实现类中进行实现:
    在这里插入图片描述

    1. 前端整合
      添加按钮:
      在这里插入图片描述
      实现响应事件方法:
      在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    效果展示:
    在这里插入图片描述
    添加函数:
    在这里插入图片描述

    9.数据字典-添加缓存

    Spring Cache + Redis缓存数据.
    利用缓存提高查询速度
    适合做缓存:不经常修改数据,固定的数据,经常查询数据


    Spring Cache是一个非常优秀的缓存组件。自Spring 3.1起,提供了类似于@Transactional注解事务的注解Cache支持,且提供了Cache抽象,方便切换各种底层cache (如: redis ) .
    使用Spring Cache的好处:
    1,提供基本的Cache抽象,方便切换各种底层 Cache ;
    2,通过注解Cache可以实现类似于事务一样,缓存逻辑透明的应用到我们的业务代码上,且只需要更少的代码就可以完成;
    3,提供事务回滚时也自动回滚缓存;
    4,支持比较复杂的缓存逻辑;


    1. 添加依赖
      在这里插入图片描述
    2. 添加redis的配置类
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
    3. 在具体服务中添加redis配置、
      在这里插入图片描述
    4. 添加注解
      在这里插入图片描述

    10.配置nginx

    在这里插入图片描述

    在这里插入图片描述

  • 相关阅读:
    SpringCloud——服务网关——GateWay
    网络安全(黑客技术)—自学
    项目启动 | 宏昌电器牵手盘古信息,数字化制造引领企业高质量发展
    模数转换器-ADC基础
    【Harmony OS】【ARK UI】ETS 上下文基本操作
    .NET Core C#系列之XiaoFeng.Threading.JobScheduler作业调度
    Baklib|SaaS产品,实现企业流程数字化
    基于springboot实现学生综合测评系统项目【项目源码+论文说明】
    WebGL HUD(平视显示器)
    在 UltraEdit 和 UEStudio 中开始使用 Perl 正则表达式
  • 原文地址:https://blog.csdn.net/weixin_49883619/article/details/126826387