尚医通简介
尚医通可以网上预约挂号。
核心技术
SpringBoot : 简化新 Spring 应用的初始搭建以及开发过程
SpringCloud : 基于 Springboot 实现的云原生的开发工具,SpringCloud 使用的技术:(Spring Cloud Gateway , Spring Cloud Alibaba Nacos, Spring Cloud Alibaba Sentinel, Spring Cloud Task , Spring Cloud Feign等)
MyBatis-Plus : 持久层框架
Redis : 内存缓存
RabbitMQ : 消息中间件
HTTPClient : http 协议客户端
Swgger2 : Api 接口文档
Nginx :负载均衡
Lombok
Mysql : 关系型数据库
MongoDB : 面向文档的 NoSQL 数据库
Vue.js : web 界面的渐进式框架
Node.js JavaScript 运行环境
Axios : Axios 是一个基于 promise 的 HTTP 库
NPM : 包管理器
Babel : 转码器
Wepack : 打包工具
Docker : 容器技术
Git : 代码管理工具
DockerFile : 管理 Docker 镜像命令文本
Jenkins : 持续集成工具
项目功能
管理员系统
数据管理- 数据字典
医院管理- 医院设置
- 医院列表
会员管理- 会员列表
- 认证审批列表
订单管理 - 订单列表
统计管理 - 预约统计
用户系统
1. 首页数据显示
2. 预约挂号
3. 支付挂号订单
4. 登录
手机号登录
微信登录
MyBatis-Plus
是MyBatis 的增强工具,在Mybatis 的基础上只做增强不做改变,为简化开发,提高效率而生。
MyBatis-Plus 主键生成策略
@TableId(type=IdType.类型)
ASSIGN_ID 19 位
ASSIGN_UUID
AUTO 自动增长
INPUT
NONE
雪花算法
MyBatis-Plus 修改和自动填充
自动填充
注解: @TableField(fill = FieldFill.INSERT)
@TableField(fill = FieldFill.INSERT_UPDATE)
实现 MetaObjectHandler 的 insertFill 和 updateFill 方法
MyBatis-plus 乐观锁
场景:
主要适用场景:当要更新一条记录的时候,希望这条记录没有被别人更新,也就是说实现线程安全的数据更新
乐观锁实现方式:
取出记录时,获取当前version
更新时,带上这个version
执行更新时, set version = newVersion where version = oldVersion
如果version 不对,就更新失败
实现方式
修改实体类
添加 @Version
@Version
private Integer version;
添加乐观锁配置类
加入乐观锁插件
@Bean
public OptimisticLockerInterceptor optimsticLockerInterceptor(){
return new OptimisticLockerInterceptor();
}
MyBatis-plus 查询
简单查询
selectByMap(Map map)
selectBatchIds(Collection collection)
分页查询
配置分页插件
@Bean
public PaginationInterceptor paginationInterceptor(){
return new PaginationInterceptor();
}
编写分页代码
插入Page 对象,传入两个参数
当前页
每页记录数
调用mp 的方法实现分页
Mybatis-plus 删除
根据id 删除记录
批量删除 deleteBatchIds
简单条件删除 deleteByMap
逻辑删除和物理删除
物理删除:真实删除,将对应数据从数据库种删除,之后查询不到此条被删除数据。
逻辑删除:假删除,将对应数据中代表是否被删除字段状态修改为“被删除状态”,之后在数据库中仍旧能看到此条数据记录。
逻辑删除
在表添加字段,作为逻辑删除标志,每次删除时候,修改标志位
0 没有删除
1 删除
注解: TableLogic
MyBatis-Plus 条件构造器和常用接口
ge,gt,le,lt,isNull,isNotNull
ne,ne
between, notBetween
like,notlike likeLeft,likeRight
orderBy, orderByDesc, orderByAsc
搭建项目后端环境
common 包
model 包
service 包
maven 中 pom, jar, war 三种打包方式的区别
1、pom是maven依赖文件
2、jar是java普通项目打包文件
3、war是javaweb项目打包文件
具体应用
1、pom打包方式可以作为其他项目的maven依赖,构建maven项目时可用在父级工程或者聚合工程中,用来做jar包的版本控制;
2、jar包通常是开发时需要应用的类,当需要某些功能时就导入相应的jar包,在构建maven时作为子类;
3、war包用来发布服务,打成war包后部署到服务器访问。
开发医院设置的基本功能
整合swagger2
@Api
@ApiOperation
@ApiParam
统一返回结果 Result
分页查询
参数 @RequestBody(required = false) 加上了之后,不允许使用@GetMapping, 需要修改成@PostMapping . 效果从原来从单个属性传值变成了方便的json 传值,方便前端。
统一异常处理
自定义异常类
添加全局异常处理类
注解 @ControllerAdvice
@ExceptionHandler(Exception.class)
自定义异常需要手动抛出
日志打印
日志记录器的行为是分等级的
分为: OFF, FATAL, ERROR, WARN, INFO, DEBUG, ALL
默认情况下,spring boot 从控制台打印出来的日志级别只有 INFO 及以上级别,可以配置日志级别
logging.level.root = WARN
这种方式只能将日志打印到控制台上。
Logback 日志
spring boot 内部使用 Logback 作为日志实现框架
Logback 和 log4j 非常相似,如果你对 log4j 很熟悉,那对 logback 很快就会熟悉
直接配置 Logback-spring.xml 配置文件
ES6
ES6 是一种规范,JavaScripe 是一种具体实现
1. let 声明变量
var 可以声明多次 全局用
let 只能声明一次 定义块中使用
2. const 声明常量
声明之后不允许改变
一旦声明必须初始化,否则会报错
3. 解构赋值
解构赋值是对赋值运算符的扩展
他是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值
4. 模板字符串
模板字符串相当于加强版的字符串,用反引号` ,除了作为普通字符串,还可以用来定义多行字符串,还可以在字符串中加入变量和表达式
5. 声明对象简写
6. 对象拓展运算符
拓展运算符(...)用于取出参数对象所有可遍历属性然后拷贝到当前对象。
7. 箭头函数
箭头函数提供了一种更加简洁的函数书写方式,基本语法是:
参数 => 函数体
箭头函数多用于匿名函数的定义
Vue
声明式渲染:
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 地系统。这里地核心思想就是没有繁琐地 DOM 操作,例如 JQuery 中,我们需要先找到 div 节点,获取到 DOM 对象,然后进行一系列的节点操作。
代码片段
快捷自动生成代码片段
新建以 code-snippets 类型的文件, 直接敲出 perfix 属性就可以打印出对应的代码片段
Vue 单向和双向绑定指令
单向绑定
v-bind : 用在标签属性上面,通过指令获取 data 定义变量值
例如:
颜色也可以直接省略 v-bind
例如:
颜色双向绑定
v-model
当数据发生变化的时候,视图也会跟着发生变化
数据模型发生了改变,会直接显示在页面上
当视图发生变化的时候,数据也会跟着同步变化
用户在页面上的修改,会自动同步到数据模型中去
Vue 绑定事件
v-on : 事件名称=“调用方法”
例如
事件绑定简写
事件绑定
Vue 条件指令
v-if : 条件判断
v-else
Vue 循环指令
v-for
Vue 实例声明周期
created() : 在页面渲染之前执行
mounted() : 在页面渲染之后执行
axios 实例
axios 是独立于 vue 的一个项目,可用于浏览器和 node.js 中发送 ajax 请求
例如:
axios.get("json 文件的路径")
.then(response => { // 请求成功
this.userList = response
}).catch(error => {
console.log(error)
})
element-ui
是 饿了吗 前端出品的基于 Vue.js 的后台组件库,方便程序员进行页面快速布局和构建
Node.js
JavaScript 引擎
浏览器的内核包括两部分核心:
DOM 渲染引擎
JavaScript 解析引擎
Chrome 浏览器内置 V8 引擎
什么是 Node.js
脱离浏览器环境也可以运行 JavaScript , 只要有 JavaScript 引擎就可以。
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境: 即 Node.js 内置了 Chrome 的 V8 引擎, 可以在Node.js 环境直接运行 JavaScript 程序
Node.js 作用
1. JavaScript 运行环境
2. 模拟服务端效果
npm 包管理工具
什么是 npm
全称 Node Package Manager , 是 Node.js 包管理工具,是全球最大的模块生态系统,里面所有的模块都是开源免费的;也是 Node.js 的包管理工具,相当于前端的 Maven.
npm 初始化
npm init -y
修改 npm 镜像
修改成淘宝镜像
npm install
npm install 依赖名称
ES6 模块化
export default {
list(){}
save(){}
}
import user from '01.js'
user.list();
user.save();
注意: ES6 的模块化无法在 Node.js 中执行,需要用 Babel 编辑成 ES5 后再执行
babel 转码器
安装命令
npm install -g babel-cli
配置
.babelrc
安装转码器
Webpack
什么是 Webpack
Webpack 是一个前端资源加载/打包工具。他将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少页面请求。
安装
npm install -g webpack webpack-cli
搭建前端环境
vue-element-admin
基于 element-ui 的一套后台管理系统继承方案
1. 解压文件到项目工作区
2. 根据 package.json 下载需要依赖 npm install
3. 启动搭建好前端项目 npm run dev
目录改造和登录改造
修改 src/store/modules/user.js
框架开发流程
1. 添加路由
2. 设置跳转页面路径
3. 在 api 文件夹创建 js 文件,定义接口路径
4. 在页面中引入 js 文件,使用 axios 进行接口调用,把接口返回的数据在页面显示
医院设置前端
跨域问题
三个地方,任何一个不相同产生跨域
访问协议 : http https
访问地址 : 192.128.2.21 172.11.1.1
端口号 : 9528 8201
解决方式:
1. Controller 加上 @CrossOrign
===
代表值和类型都相同
功能点
分页查询
删除
批量删除
锁定与取消锁定
添加医院设置
显示医院设置
更新医院设置
组件重用问题
问题: vue-router 导航切换时,如果两个路由都渲染同个组件,组件的声明周期方法(created 或者 mounted)不会再被调用,组件会被重用,显示上一个路由渲染出来的自建
解决方案:可以简单的在 router-view 上加上一个唯一的key , 来保证路由切换时都会重新触发声明周期方法,确保组件被重新初始化。
数据字典需求
数据字典就是管理系统中常用的分类数据或者一些固定数据。
注解
@TableField(exist=false)
类似与 JPA 里面的 @Transient
EasyExcel
Java 解析、生成 Excel 比较有名的框架有 Apache poi、jxl。但是都有严重的消耗内存问题
easyExcel 重写了 poi 对 07 版 Excel 的解析。
easyExcel 是一个基于 Java 的简单、省内存的读写 Excel 的开源项目。在尽可能地节约内存地情况下支持读写 大于 100 M 地 Excel
添加缓存
Spring Cache + Redis 缓存数据
Spring Cache 是一个非常优秀地缓存组件。自 Spring 3.1 起,提供了类似于 @Transactional 注解事务地注解 Cache 支持,且提供了 Cache 抽象,方便切换各种底层 Cache (Redis)
使用 Spring Cache 的好处
1. 提供基本的 Cache 抽象,方便切换各种底层 Cache .
2. 通过注解 Cache 可以实现类似于事务一样,缓存逻辑透明的应用到我们的业务代码上,且只需要更少的代码就可以完成。
3. 提供事务回滚时也自动回滚缓存
4. 支持比较复杂的逻辑缓存
常用缓存标签
缓存 @Cacheable
根据方法对其返回结果进行缓存,下次请求时,如果缓存存在,则直接读取缓存数据返回,如果缓存不存在,则执行方法,并把返回的结果存入缓存中,一般用在查询方法上。
缓存 @CachePut
使用该注解标志的方法,每次都会执行,并将结果存入指定的缓存中。其他方法可以直接从响应的缓存中读取缓存数据,而不需要再去查询缓存库。一般用字新增方法上
缓存 @CacheEvict
使用该注解标志的方法,会清空指定的缓存。一般用在更新或者删除方法上。
配置Nginx
由于我们后端有很多服务模块,每个服务模块都有对应的访问路径与端口,为了提供统一的api 接口,所以使用 nginx 作为反向代理服务器。
反向代理,其实客户端对代理是无感知的,因为客户端不需要任何配置就可以访问,我们只需要将请求发送到反向代理服务器,由反向代理服务器去选择目标服务器获取数据后,在返回给客户端,此时反向代理服务器和目标服务器就是一个服务器,暴露的是代理服务器地址,隐藏了真实服务器 IP 地址。
MongoDB
MongoDB 是由 C++ 编写的,是一个基于分布式文件存储的开源数据库系统。
在高负载的情况下,添加更多的节点,可以保证服务器性能。
MongoDB 旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。
MongoDB 将数据存储为一个文档,数据结构由键值(key=>value)对组成。MongoDB 文档类似于 JSON 对象。字段值可以包含其他文档,数组及文档数组。
MongoDB 中的基本概念是文档、集合、数据库
spring-data-mongodb 提供了 MongoTemplate 与 MongoRepository 两种方式访问 mongodb, MongoRepository操作简单,MongoTemplate 操作灵活,我们在项目中可以灵活适用这两种操作 Mongodb.
常用操作:
添加操作
查询所有
根据id查询
条件查询
模糊查询
分页查询
修改操作
删除操作
基于MongoTemplate 开发 CRUD
基于MongoRepository 开发 CRUD
上传医院接口
预约挂号平台-----------------------------医院1
-----------------------------医院2
医院1系统---------------------------上传科室接口-----------------------连接到预约挂号平台系统
医院1系统---------------------------上传医院接口-----------------------连接到预约挂号平台系统
医院1系统---------------------------上传排班接口-----------------------连接到预约挂号平台系统
图片 base64 说明
图片的 base64 编码就是可以将一张图片数据编码成一串字符串,使用该字符串代替图像地址 url
在前端页面中常见的 base64 图片的引用方式: