尚医通(四)

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

文章目录

  • 1.目录结构和登录改造
  • 2.框架开发流程介绍
  • 3.医院设置前端
    • 3.1列表
      • 3.1.1
      • 3.1.2
      • 3.1.3
    • 3.2 删除
    • 3.3 批量删除
    • 3.4 锁定
    • 3.5 添加
    • 3.6 修改
    • 3.7 bug修改
  • 4.数据字典接口
    • 4.1 需求和准备
      • 4.1.1 数据字典列表接口
    • 4.2 列表
    • 4.3 数据字典前端
  • 6.EasyExcel
    • 6.1 写操作
    • 6.2 读操作
  • 7.数据字典-导出【写】
  • 8.数据字典-导入【读】
  • 9.数据字典-添加缓存
  • 10.配置nginx

1.目录结构和登录改造

在登录改造中主要是先将值改为一个固定值,能进行登录操作
在登录中写一个固定值,不需要请求接口:
尚医通(四)_第1张图片
用户信息也设置为一个固定值:
尚医通(四)_第2张图片
尚医通(四)_第3张图片
尚医通(四)_第4张图片
在这里插入图片描述

2.框架开发流程介绍

  1. 添加路由【就是左边菜单框】
    编写路由地址:
    尚医通(四)_第5张图片
  2. 设置跳转页面路径
    尚医通(四)_第6张图片
  3. 在api文件夹创建js文件,定义接口路径
    尚医通(四)_第7张图片
  4. 在页面引入js文件,使用axios进行接口调用,把接口返回数据在页面中显示

3.医院设置前端

3.1列表

3.1.1

  1. 添加医院设置路由:
    尚医通(四)_第8张图片

尚医通(四)_第9张图片

  1. 创建页面,设置跳转路径
    在这里插入图片描述
    尚医通(四)_第10张图片

尚医通(四)_第11张图片
尚医通(四)_第12张图片

  1. 在api创建js文件,定义接口路径
    尚医通(四)_第13张图片
    尚医通(四)_第14张图片
    修改 接口ip+端口号
    尚医通(四)_第15张图片
    尚医通(四)_第16张图片

3.1.2

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

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

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

3.1.3

利用element-ui中的列表,表单,查询格式在前端中进行修改,最终效果如下:
尚医通(四)_第17张图片

3.2 删除

  1. 添加删除按钮
    尚医通(四)_第18张图片

  2. 编写调用删除的方法,得到删除id值
    尚医通(四)_第19张图片
    效果图:
    尚医通(四)_第20张图片

  3. 在api文件夹的js文件定义操作的接口路径
    尚医通(四)_第21张图片

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

尚医通(四)_第22张图片

3.3 批量删除

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

复选框:
尚医通(四)_第24张图片
效果图:
尚医通(四)_第25张图片
给复选框绑定事件:
尚医通(四)_第26张图片
定义获取选择复选框的id值:

尚医通(四)_第27张图片

  1. 调用定义的接口实现功能
    尚医通(四)_第28张图片

3.4 锁定

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

  1. 在src/api/hospset.js中定义锁定
    尚医通(四)_第29张图片

  2. 添加按钮【添加判断】
    尚医通(四)_第30张图片

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

尚医通(四)_第31张图片

3.5 添加

  1. 在src/api/hospset.js中定义添加
    尚医通(四)_第32张图片

  2. 根据element-ui选择添加界面
    尚医通(四)_第33张图片
    模板:
    尚医通(四)_第34张图片

  3. 实现保存按钮方法

3.6 修改

  1. 添加隐藏路由
    尚医通(四)_第35张图片
  2. 添加修改按钮
    尚医通(四)_第36张图片
  3. 在src/api/hospset.js中定义添加 id查询功能和修改功能
    尚医通(四)_第37张图片
    尚医通(四)_第38张图片
  4. 获取路由id值,调用接口得到医院设置信息
    先定义方法:
    尚医通(四)_第39张图片
    在created中:
    尚医通(四)_第40张图片
    展示效果:
    尚医通(四)_第41张图片
  5. 修改代码以及修改保存按钮
    尚医通(四)_第42张图片
    尚医通(四)_第43张图片

3.7 bug修改

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

4.数据字典接口

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

数据字典的形式:
尚医通(四)_第46张图片
尚医通(四)_第47张图片

4.1 需求和准备

4.1.1 数据字典列表接口

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

4.2 列表

根据id查询下面的子数据:
在controller中编写代码:
尚医通(四)_第48张图片
接着在service中编写代码创建findChlidData方法:
尚医通(四)_第49张图片
在实现类中把方法实现:
尚医通(四)_第50张图片

尚医通(四)_第51张图片

4.3 数据字典前端

  1. 添加路由
    尚医通(四)_第52张图片

  2. 修改路径
    尚医通(四)_第53张图片

  3. 在api中创建js文件,并写上方法【实现接口】
    尚医通(四)_第54张图片

  4. 在页面中调用【初步】
    尚医通(四)_第55张图片

  5. 进一步完善
    web页面代码:
    尚医通(四)_第56张图片

层级递归的方法:
尚医通(四)_第57张图片
展示效果:【如果出问题可能是element-ui版本的问题】
尚医通(四)_第58张图片

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. 在后端添加依赖
    尚医通(四)_第59张图片
  2. 创建实体类
    在对应属性上面添加注解,设置表头内容
    尚医通(四)_第60张图片
  3. 写操作
    尚医通(四)_第61张图片
    尚医通(四)_第62张图片

效果展示:
尚医通(四)_第63张图片

6.2 读操作

  1. 实体类
    尚医通(四)_第64张图片

  2. 定义监听器【一行行读取excel中的内容】
    尚医通(四)_第65张图片

  3. 读操作

尚医通(四)_第66张图片
尚医通(四)_第67张图片

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

  1. 在controller中先定义接口

尚医通(四)_第68张图片

  1. 在service中对方法进行创建
    尚医通(四)_第69张图片

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

先定义实体类:
尚医通(四)_第70张图片
尚医通(四)_第71张图片

  1. 实现前端
    先添加按钮:
    尚医通(四)_第72张图片
    改进一下全端:【让其在一个新的页面中显示弹窗】
    尚医通(四)_第73张图片

定义响应事件:
尚医通(四)_第74张图片
效果展示:
尚医通(四)_第75张图片
尚医通(四)_第76张图片

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

  1. 在controller中定义导入接口
    尚医通(四)_第77张图片
  2. 在service中创建方法
    尚医通(四)_第78张图片
  3. 在service实现类中进行实现
    先定义监听器:
    尚医通(四)_第79张图片

在service实现类中进行实现:
尚医通(四)_第80张图片

  1. 前端整合
    添加按钮:
    在这里插入图片描述
    实现响应事件方法:
    尚医通(四)_第81张图片

尚医通(四)_第82张图片
尚医通(四)_第83张图片
效果展示:
尚医通(四)_第84张图片
添加函数:
尚医通(四)_第85张图片

9.数据字典-添加缓存

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


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


  1. 添加依赖
    尚医通(四)_第86张图片
  2. 添加redis的配置类
    尚医通(四)_第87张图片
    尚医通(四)_第88张图片
    尚医通(四)_第89张图片
  3. 在具体服务中添加redis配置、
    尚医通(四)_第90张图片
  4. 添加注解
    尚医通(四)_第91张图片

10.配置nginx

尚医通(四)_第92张图片

尚医通(四)_第93张图片

你可能感兴趣的:(JAVA项目,前端,javascript,html5)