admin管理员组

文章数量:1516870

尚医通（四）

视频链接：=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.目录结构和登录改造

在登录改造中主要是先将值改为一个固定值，能进行登录操作
在登录中写一个固定值，不需要请求接口：

用户信息也设置为一个固定值：

2.框架开发流程介绍

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

3.医院设置前端

3.1列表

3.1.1

1. 添加医院设置路由：
   

2. 创建页面，设置跳转路径
   
   

3. 在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值：

3. 调用定义的接口实现功能
   

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。

文档地址:.html
github地址:

6.1 写操作

1. 在后端添加依赖
   
2. 创建实体类
   在对应属性上面添加注解，设置表头内容
   
3. 写操作
   
   

效果展示：

6.2 读操作

1. 实体类
   

2. 定义监听器【一行行读取excel中的内容】
   

3. 读操作

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

1. 在controller中先定义接口

2. 在service中对方法进行创建
   

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

先定义实体类：

3. 实现前端
   先添加按钮：
   
   改进一下全端：【让其在一个新的页面中显示弹窗】
   

定义响应事件：

效果展示：

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

1. 在controller中定义导入接口
   
2. 在service中创建方法
   
3. 在service实现类中进行实现
   先定义监听器：
   

在service实现类中进行实现：

4. 前端整合
   添加按钮：
   
   实现响应事件方法：
   

效果展示：

添加函数：

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

本文标签： 尚医通（四）