# 尚医通

**Repository Path**: liuchaokele/yygh

## Basic Information

- **Project Name**: 尚医通
- **Description**: 预约挂号系统（Java微服务+分布式+全栈项目）
- **Primary Language**: Java
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 3
- **Created**: 2022-03-15
- **Last Updated**: 2023-01-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 尚医通

![尚医通业务流程](尚医通.assets/尚医通业务流程-16460493778361.png)

项目结构（yygh）

- common：工具模块
- hospital-manage：医院内部管理系统
- model：POJO、枚举
- **service**：服务
- service_client：服务调用
- service_gateway：网关

JavaBean分类

- 封装数据

  - **P**lain **O**rdinary **J**ava **O**bject：普通对象

  - **V**iew **O**bject：表现层对象
  - **D**ata **T**ransfer **O**bject：数据传输对象

  - **P**ersistant **O**bject：持久化对象

- 封装方法

  - **D**omain **O**bject：域对象
  - **B**usiness **O**bject：业务对象
  - **D**ata **A**ccess **O**bject：数据访问对象

![POJO](尚医通.assets/POJO.jpg)



# 后端

Swagger：http接口的文档生成与接口测试，用于开发阶段

> 2.0：`/swagger-ui.html`
>
> 3.0：`/swagger-ui/index.html`

EasyExcel：简单、省内存的读写Excel工具。[官方文档](https://alibaba-easyexcel.github.io/index.html)



**Mysql8.0驱动**

```properties
driverClassName=com.mysql.cj.jdbc.Driver
```



**公共模块导入**

问题：启动类默认扫描**当前项目根路径下**的内容（`ml.asdw.yygh.servcie_hosp. *`），无法扫描上一级 公共模块根路径下的内容（`ml.asdw.yygh.common.*`）

解决：在启动类上，指定扫描路径

```java
@SpringBootApplication
@ComponentScan("ml.asdw.yygh")	//加载ml.asdw.yygh下的所有内容
public class  ServiceHospApplication {
    public static void main(String[] args) {
        SpringApplication.run(ServiceHospApplication.class, args);
    }
}
```

> 所有依赖的相同目录会合并



**全局异常处理**

```java
@RestControllerAdvice
public class GlobalExceptionHandler {

    @ExceptionHandler(Exception.class)
    public Result<Object> error(Exception e) {
        e.printStackTrace();
        return Result.fail();
    }
}
```

- @RestControllerAdvice：@ResponseBody + @ControllerAdvice
- @ExceptionHandler：监听的异常类型

> 当出现异常时，执行方法内容，而非返回错误信息



**日志输出到文件**

springboot配置文件

```properties
#加载配置文件
logging.config=classpath:logback-spring.xml
```

[日志配置文件](尚医通.assets/application/logback-spring.xml)



**允许跨域**

- 方式一：注解（每个Controller都需添加注解）

  ```java
  @CrossOrigin	//允许跨域请求
  public class Controller {}
  ```

- 方式二：Gateway网关，添加[配置类](尚医通.assets/application/CorsConfig.java)



**MyBatisPlus**

无需手动注入Mapper，直接使用baseMapper即可

```java
@Service
public class ServiceImpl extends ServiceImpl<Mapper, Entity> implements Service {
    public void test(){
        //父类ServiceImpl的属性
    	baseMapper.selectList(null);	
    }
}
```

```java
//ServiceImpl源码
public class ServiceImpl<M extends BaseMapper<T>, T> implements IService<T> {
    //泛型确定类型，并自动注入指定Mapper
    @Autowired
    protected M baseMapper;
}
```



## 工具

**spring工具类**

```java
//bean的属性值 复制给 另一个bean（对应属性名）
BeanUtils.copyProperties(来源, );
```

> 覆盖所有相同的属性，即使来源属性为null也会覆盖



**StringUtils**

概念：字符串工具类，通常判断字符串是否为空（避免空指针异常）

```java
StringUtils.isEmpty(str);	//是否为空（过时）
StringUtils.hasLength(str);	//为null，长度为0，返回false
StringUtils.hasText(str);	//为null，长度为0，所有字符由空格组成，返回 
```



**Joda-Time**

概念：处理日期时间的工具

使用步骤

1. pom

   ```xml
   <dependency>
       <groupId>joda-time</groupId>
       <artifactId>joda-time</artifactId>
       <version>2.10.13</version>
   </dependency>
   ```

2. [使用方法](尚医通.assets/application/JodaTimeTests.java)



**fastjson**

概念：json 与 对象 之间互相转换

使用步骤：

1. pom

   ```xml
   <dependency>
       <groupId>com.alibaba</groupId>
       <artifactId>fastjson</artifactId>
       <version>1.2.29</version>
   </dependency>
   ```

2. 转换

   ```java
   //对象/集合 转 JSON字符串
   String str = JSONObject.toJSONString(paramMap);
   
   //JSON字符串 转 实体类
   Entity bean = JSONObject.parseObject(str, Entity.class);
   //JSON字符串 转 对象/集合
   JSONObject Obj = JSONObject.parseObject(str);	// 	
   obj.getString("key");	//取出的值转为指定类型（obj.get类型）
   Map<String,Object> map = JSONObject.parseObject(str);	//用于传参
   ```
   
   

**String格式化**

```java
String.format(String 格式模板,Object... 参数)
String.format("姓名：%s 年龄：%d","张三",20)	//姓名：张三 年龄：20
```

![k5h0ipimxo](尚医通.assets/k5h0ipimxo.png)

![k3l5p45mdv](尚医通.assets/k3l5p45mdv.png)

![2u7d7lxmeb](尚医通.assets/2u7d7lxmeb.png)

![hv7vim3izm](尚医通.assets/hv7vim3izm.png)



### Stream

概念：对集合元素的处理，使用链式编程与Lambda表达式编写

> 将集合转换成流对象，流对象对元素进行 消费、转换、排序、过滤 等

分类

- Intermediate：中间方法。筛选元素（返回新流，继续执行中间方法 或 执行终端方法）
- Terminal：终端方法。处理所有元素（返回非流对象）
- Short-circuiting：短路方法。处理部分元素（当流的元素数量巨大时使用）

> 当执行终端方法时，才会执行中间方法

获取Stream对象

```java
// 手动设置元素
Stream.of("a", "b", "c");
// 数组
String [] array = new String[];
Stream.of(array);
Arrays.stream(array);
// 集合
List<String> list = new ArrayList<>();
list.stream();
```

```java
//针对数值类型
IntStream.of(new int[]);
LongStream.of();
DoubleStream.of();
```

Intermediate方法

```java
Stream.concat(流1,流2)	//合并两个流，元素按参数顺序排列
    
list.stream()
    .distinct()	//去除重复元素
    .filter(str->!str.isEmpty())	//筛选。去除不满足条件的元素（保留非空元素）
    .map(String::toUpperCase)	//处理元素。自定义方法的返回值为新元素（元素转成大写）
    .peek(System.out::println)	//消费元素。返回原流（打印元素）
    .skip(N)	//去除前N个元素
    .sorted()	//元素排序
    .终端方法();
```

Terminal方法

```java
list.stream()
    .中间方法()
    .count()	//返回元素个数
    .forEach()	//消费元素。无返回值（类似peek）
    .collect(Collectors.toList())	//转换成集合（配合集合工具类使用）
```

```java
//Collectors工具类

Collectors.toList()
Collectors.toSet()
//转 指定集合 [new LinkedList(元素)]
Collectors.toCollection(LinkedList::new)
//转 Map集合（key元素，value元素）
Collectors.toMap(str->str,String::length)
//二次转换（第一次转换，第二次转换）
Collectors.collectingAndThen(Collectors.toList(),Collectors.toSet())

//转 Map集合（key元素，value转集合）
Collectors.groupingBy(str->str,Collectors.toSet())
//转 Map集合，只有2个元素 满足与不满足（key布尔值，value元素）结果：false=["a","b"]，true=
Collectors.partitioningBy(str->str.isisEmpty())
    
//拼接元素（）直接拼接，（"-"）添加间隔符，（"-"，"开头","结尾"）前后两端添加字符
Collectors.joining()
    
//返回统计信息（包含以下方法结果）
Collectors.summarizingDouble/Long/Int()
//统计元素个数
Collectors.counting()
//平均值
Collectors.averagingDouble/Long/Int()
//总和
Collectors.summingDouble/Long/Int()
//最大值/最小值
Collectors.maxBy()/minBy()
```

Short-circuiting方法

```java
list.stream()
    .allMatch(str->!str.isEmpty())	//当元素全部满足条件时返回true
    .noneMatch()	//当元素全部不满足条件时返回true
    .anyMatch()	//只要有一个元素满足条件时返回true
    .findAny()	//返回任意一个元素
    .findFirst()	//返回第一元素
    .limit(N)	//保留前N个元素
```



## 缓存

概念：Spring Cache + Redis 以Json格式缓存Bean对象

> Spring Cache：使用注解操作Redis
>
> Redis：缓存数据

实现步骤

1. pom（service-util）

   ```xml
   <!-- redis -->
   <dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-data-redis</artifactId>
   </dependency>
   
   <!-- spring2.X集成redis所需common-pool2-->
   <dependency>
   <groupId>org.apache.commons</groupId>
   <artifactId>commons-pool2</artifactId>
   <version>2.6.0</version>
   </dependency>
   ```

2. [配置类](尚医通.assets/application/RedisConfig.java)（service-util/config）

3. 配置文件（service-cmn）

   ```properties
   #redis配置
   spring.redis.host=192.168.44.165
   spring.redis.port=6379
   spring.redis.database= 0
   spring.redis.timeout=1800000
   
   spring.redis.lettuce.pool.max-active=20
   spring.redis.lettuce.pool.max-wait=-1
   #最大阻塞等待时间(负数表示没限制)
   spring.redis.lettuce.pool.max-idle=5
   spring.redis.lettuce.pool.min-idle=0
   ```

4. 注解（service-cmn）

   ```java
   @Service
   public class ServiceImpl extends ServiceImpl<Mapper, Entity> implements Service {
       //缓存不存在，则存入；存在，则使用（查询方法）
       @Cacheable(value = "entity",keyGenerator = "keyGenerator")
       public List<Entity> select(){}
       //存入缓存（添加方法）
       @CachePut(value = "entity",keyGenerator = "keyGenerator")
       public List<Entity> insert(){}
       //删除缓存（修改和删除方法）
       @CacheEvict(value = "entity", allEntries=true)
       public void update(){}
   }
   ```

   - value / cacheNames：缓存名称（缓存存放的命名空间）
   - [key]：手动设置key（支持SpEL）
   - [keyGenerator]：通过生成器自动设置key
   - @CacheEvict
     - [allEntries]：是否清空所有缓存（默认false）
     - [beforeInvocation]：true方法执行前清空（默认false）

> `@EnableCaching`：启用缓存（定义在启动类上或配置类上）



## MongoDB

概念：基于分布式文件存储的开源数据库系统。是非关系数据库当中功能最丰富，最像关系数据库的。数据以文档格式储存，数据结构为`key:value`（类似JSON）[菜鸟教程](https://www.runoob.com/mongodb/mongodb-tutorial.html)、[中文网](https://www.mongodb.org.cn/)、[官网](https://www.mongodb.com/)

![img](尚医通.assets/crud-annotated-document.png)

docker安装

```sh
docker run -d --name=mongo -p 27017:27017 --restart=always \
-v /home/mongodb/db:/data/db \
mongo
```

数据结构

| SQL术语/概念 | MongoDB术语/概念 | 解释/说明                           |
| :----------- | :--------------- | :---------------------------------- |
| database     | database         | 数据库                              |
| table        | collection       | 数据库表/集合                       |
| row          | document         | 数据记录行/文档                     |
| column       | field            | 数据字段/域                         |
| index        | index            | 索引                                |
| table joins  |                  | 表连接,MongoDB不支持                |
| primary key  | primary key      | 主键,MongoDB自动将_id字段设置为主键 |

![img](尚医通.assets/Figure-1-Mapping-Table-to-Collection-1.png)

常用数据库操作

```sh
# 帮助
db.help()
# 切换/创建数据库(如果数据库不存在，则创建；否则切换到指定数据库)
use test
# 查询 所有数据库 
show dbs
# 删除 当前使用的数据库 
db.dropDatabase()
# 查询 当前使用的数据库
db.getName()
# 查询 当前使用的数据库状态 
db.stats()
# 查询 当前MongoDB版本 
db.version()
# 查询 当前MongoDB连接地址 
db.getMongo〇
```

> 默认数据库：admin、config、local
>
> 查询所有数据库，当数据库内没有集合时，则不显示

### 集成SpringBoot

实现步骤

1. pom

   ```xml
   <dependency>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-data-mongodb</artifactId>
       <version>2.6.3</version>
   </dependency>
   ```

2. yaml

   ```yaml
   spring:
     data:
       mongodb:
         uri: mongodb://192.168.50.130/test #操作test数据库
   ```

3. 集合实体类（表）

   ```java
   @Data
   @Document //指定操作的集合（表），默认值为类名
   public class User {
       @Id //指定_id
       private String id;
       private String name;
       private Integer age;
       private String email;
       private String date;
   }
   ```

4. 操作数据库的对象

   - [MongoTemplate](尚医通.assets/application/MongoDB/MongoTemplateTests.java)：灵活。基于spring-boot-starter，直接注入

   - [MongoRepository](尚医通.assets/application/MongoDB/MongoRepositoryTests.java)：简单。基于Spring Data，需创建Repository接口，注入创建的接口

     ```java
     @Repository
     public interface EntityRepository extends MongoRepository<Entity,String> {
         
         //根据命名规范，自动生成实现类（查询方法以find | read | get开头）
         //查询集合Entity中，属性name值中包含参数的文档
         //select * from entity where name like ?
         List<Entity> findEntityByNameLike(String name);
     }
     ```
     
     ![image-20220204112306775](尚医通.assets/image-20220204112306775.png)
     
     ![image-20220204112316880](尚医通.assets/image-20220204112316880.png)

​	

## Salt盐值

概念：一串随机字符，用于加密明文密码

散列：对明文密码使用固定算法生成字符串的方式（简单散列：`MD5('明文') = '字符串'）`

> 得到的唯一字符串叫做 签名

```mysql
#每个用户的盐值唯一
用户名					Salt						暗文密码
zhangsan	1ck12b13k1jmjxrg1h0129h2lj 	6c22ef52be70e11b6f3bcf0f672c96ce
lisi		1h029kh2lj11jmjxrg13k1c12b 	7128f587d88d6686974d6ef57c193628 
```

```java
//假设zhangsan的明文密码为：123 则暗文密码为：6c22ef52be70e11b6f3bcf0f672c96ce
MD5('123' + '1ck12b13k1jmjxrg1h0129h2lj') = '6c22ef52be70e11b6f3bcf0f672c96ce'
```



## JWT

**J**SON **W**eb **T**oken：令牌（认证授权机制）[官网](https://jwt.io/)

> 认证授权机制：记录用户信息，根据用户拥有的权限来限制访问的资源

特点

- 定义在任何位置进行传递（cookie、uri、参数）
  - 跨域传递

- 无状态：服务端不存储JWT生成的暗文
  - 无需查询数据库进行校验


认证流程

![jwt](尚医通.assets/jwt.png)

组成：`Header.Payload.Signature`

- Header：头部

  ```json
  {
    "alg": "HS256",	//签名算法
    "typ": "JWT"		//token类型
  }
  ```

- Payload：负载

  ```json
  {
      "iss"："zhangsan",	//签发人
      "iat": 1516239022,	//签发时间（时间戳）
  	"nbf": 1516239023,	//生效时间
      "exp": 1516239024,	//到期时间
      "jti": 33,			//唯一标识（存数字）
      "sub": "Payload",	//主题（不常用）
      "aud": 2,			//听众数量（不常用）
      
      "属性": 值			  //任意数量的自定义属性值（需要至少设置一个）
  }
  ```

- Signature：签名

  ```java
  //(头部Base64编码.负载Base64编码)通过HMAC SHA256算法，使用secret密钥进行加密
  HMACSHA256( 
      Base64Url.encode(header) + "." + Base64Url.encode(payload),
      secret
  )
  ```

![image-20220213153237528](尚医通.assets/image-20220213153237528.png)

**签名算法**

对称算法（单密钥）

- `HS256`: HMAC using SHA-256
- `HS384`: HMAC using SHA-384
- `HS512`: HMAC using SHA-512

非对称算法（双密钥）

- `ES256`: ECDSA using P-256 and SHA-256
- `ES384`: ECDSA using P-384 and SHA-384
- `ES512`: ECDSA using P-521 and SHA-512
- `RS256`: RSASSA-PKCS-v1_5 using SHA-256
- `RS384`: RSASSA-PKCS-v1_5 using SHA-384
- `RS512`: RSASSA-PKCS-v1_5 using SHA-512
- `PS256`: RSASSA-PSS using SHA-256 and MGF1 with SHA-256
- `PS384`: RSASSA-PSS using SHA-384 and MGF1 with SHA-384
- `PS512`: RSASSA-PSS using SHA-512 and MGF1 with SHA-512

> HSxxx、ESxxx：xxx表示密钥的最小**bit**长度
> RSxxx、PSxxx：xxx 表示密钥的最小**Byte**长度（1Byte=8bit）



### Java实现

1. pom

   ```xml
   <dependency>
       <groupId>io.jsonwebtoken</groupId>
       <artifactId>jjwt</artifactId>
       <version>0.9.1</version>
   </dependency>
   ```

2. [使用方法](尚医通.assets/application/JWTTests.java)



## 短信验证

平台：[容联云](https://www.yuntongxun.com/)（[官方文档](http://doc.yuntongxun.com/pe/5f0299f4a80948a1006e775e)）

实现步骤

1. pom

   ```xml
   <dependency>
       <groupId>com.cloopen</groupId>
       <artifactId>java-sms-sdk</artifactId>
       <version>1.0.3</version>
   </dependency>
   ```

2. [使用方法](尚医通.assets/application/SmsTests.java)



## 微信扫描登录(OAuth2)

概念：身份验证协议，代表用户获取第三方应用的token令牌。[官方文档](https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html)

作用：获取用户在第三方平台拥有的身份

![img](尚医通.assets/D0wkkHSbtC6VUSHX4WsjP5ssg5mdnEmXO8NGVGF34dxS9N1WCcq6wvquR4K_Hcut.png)

[验证步骤](尚医通.assets/application/WeiXinLogin/WXLoginController.java)

1. 获取code

   1. 获取二维码

      ```
      https://open.weixin.qq.com/connect/qrconnect?
      appid=wxed9954c01bb89b47
      &redirect_uri=http://localhost:8160/callback
      &response_type=code&scope=snsapi_login#wechat_redirect
      ```

      - appid：应用ID（在微信开放平台提交应用审核通过后获得）
      - redirect_uri：回调地址（我方提供，接收code获取token）
      - 固定值：response_type、scope作用域
      - 可选值：state签名

   2. 扫码授权

   3. 允许登录后，带着code参数重定向回调地址：`http://localhost:8160/callback?code=001ktEll2bqHE84XLwll2jsyWE0ktElw&state=`

2. 回调方法（获取token）

   1. 请求

      ```
      https://api.weixin.qq.com/sns/oauth2/access_token?
      appid=wxed9954c01bb89b47
      &secret=a7482517235173ddb4083788de60b90e
      &code=001ktEll2bqHE84XLwll2jsyWE0ktElw
      &grant_type=authorization_code
      ```

      - secret：应用密钥（在微信开放平台提交应用审核通过后获得）
      - code：用于获取token的临时密钥
      - 固定值：grant_type

   2. 响应

      - access_token：用户令牌
      - expires_in：令牌剩余有效时间（单位：秒）
      - refresh_token：用于刷新access_token的令牌
      - openid：用户的唯一ID（我方应用内）
      - unionid：用户的唯一ID（所有应用内）

> token做缓存，id做持久

****

调用基本接口

- 刷新access_token

  ```
  https://api.weixin.qq.com/sns/oauth2/refresh_token?
  appid=wxed9954c01bb89b47
  &grant_type=refresh_token
  &refresh_token=54_UUccK9zpNQDOk6csTEm2MGUPyl7U2Znk56xC682mscB80_fGL_09d66bYtRf_yy7JPJqHX8-cgm5Fo0O5qXZDbWto3SAYWJCCmJYjl8UpYs
  ```

- 验证access_token

  ```
  https://api.weixin.qq.com/sns/auth?
  access_token=54_lk9qBriy7CuCKc5ugoGx_Ad-LbianXG3Q_pUWo3SCF4nJMp0L4IwdwWc5dOAhp46oju0Esdn09JogpZUSPgd7klArw7SFkUcs0xdvPJcr8Q
  &openid=o3_SC5wThog5MKYtAyXmk9W3cRFk
  ```

- 获取用户信息

  ```
  https://api.weixin.qq.com/sns/userinfo?
  access_token=54_lk9qBriy7CuCKc5ugoGx_Ad-LbianXG3Q_pUWo3SCF4nJMp0L4IwdwWc5dOAhp46oju0Esdn09JogpZUSPgd7klArw7SFkUcs0xdvPJcr8Q
  &openid=o3_SC5wThog5MKYtAyXmk9W3cRFk
  ```

| 参数          | 描述                                     | session中的值                                                |
| ------------- | ---------------------------------------- | ------------------------------------------------------------ |
| appid         | 应用唯一标识（固定域名：localhost:8160） | wxed9954c01bb89b47                                           |
| secret        | 应用密钥                                 | a7482517235173ddb4083788de60b90e                             |
| access_token  | 接口调用凭证                             | 54_lk9qBriy7CuCKc5ugoGx_Ad-LbianXG3Q_pUWo3SCF4nJMp0L4IwdwWc5dOAhp46oju0Esdn09JogpZUSPgd7klArw7SFkUcs0xdvPJcr8Q |
| expires_in    | access_token到期时间                     | 2022-02-18 21:49:59                                          |
| refresh_token | 用于刷新access_token                     | 54_UUccK9zpNQDOk6csTEm2MGUPyl7U2Znk56xC682mscB80_fGL_09d66bYtRf_yy7JPJqHX8-cgm5Fo0O5qXZDbWto3SAYWJCCmJYjl8UpYs |
| openid        | 授权用户唯一标识                         | o3_SC5wThog5MKYtAyXmk9W3cRFk                                 |
| unionid       | 用户唯一标识                             | oWgGz1GM3r5VNSR5sxLwwGwdsv9c                                 |



## 微信扫描支付V3

概念：Native基础支付。[开发文档](https://pay.weixin.qq.com/wiki/doc/apiv3/open/pay/chapter2_7_2.shtml)、[API文档](https://pay.weixin.qq.com/wiki/doc/apiv3/apis/chapter3_4_1.shtml)

![img](尚医通.assets/5_0.png)

[操作方法](尚医通.assets/application/WeiXinNative/WXNativeService.java)

- 下单流程
  1. 生成订单
  2. 返回二维码
  3. 扫描支付，支付完成
  4. 执行回调方法

- 查询订单状态
- 关闭订单（无效二维码）
- 申请退款
- 查询退款状态

> 回调方法：官方访问我方回调接口，必须是https且外网可直接访问的地址（可手动查询订单状态）



## 定时任务

按cron表达式定时执行方法。[Cron表达式在线生成](http://cron.ciding.cc/)

```java
@Component
@EnableScheduling	//启用定时任务
public class Task {
    
    //每天8点执行该方法
    @Scheduled(cron = "0 0 8 * * ? ")
    public void task() {}
}
```

> SpringBoot内置功能
>
> 只支持6位表达式，第7位为年



# 前端

Element-ui：基于Vue的ui组件库，利用提供的组件快速搭建页面。[官方文档](https://element.eleme.cn/#/zh-CN/component/installation)



## ES6

**E**CMA**S**cript **6**.0：是 JavaScript 的下一个版本标准，2015.06发版。[菜鸟教程](https://www.runoob.com/w3cnote/es6-tutorial.html)

```javascript
//定义变量
let name="张三"
//定义常量
const PI="3.14"
```

```javascript
//解构赋值

//数组（右侧数组的元素，按顺序给左侧定义的变量赋值）
let [a,b,c]=[1,2,3]

//对象（右侧对象的属性，按属性名给左侧定义的变量赋值）
let {a,b,c}={a:"1",b:"2",c"3"}

let abc={a:"1",b:"2",c"3"}
let {a,b,c}=abc
```

```javascript
//模板字符串（引用变量）
let name="张三"
let info="我的名字叫${name}"		//我的名字叫张三
```

```javascript
//定义对象
let name="张三"
let age=20
let info={name,age}		//name:'张三',age:20
```

```javascript
//对象拓展运算符
let a={name:"张三"}
let b={age:20}
let c={...a,...b}	//拼接变量a，b的值：name:'张三',age:20

```

```javascript
//函数定义：箭头函数（类似lambda表达式，省略function关键字）
let a = 参数 => 方法体	//方法体一条代码，则省略return

let b=1
let a = b => b+1	//a = 2
```



## Vue

概念：通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。[菜鸟教程](https://www.runoob.com/vue2/vue-tutorial.html)、[官方文档](https://vuejs.org/v2/guide/index.html)

```vue
<!--基本格式-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.26/vue.global.min.js"></script>

<p id="app">{{ message }}</p>
<!-- 
	<p id="app">Hello Vue.js!</p>
-->

<script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      }
    })
</script>
```

- el：定位元素（作用范围：所有子元素）
- data：属性值
  - message：对应`{{message}}`

```vue
<!--单向绑定-->
<p v-bind:style='msg'>颜色</p>
<p :style='msg'>颜色</p>		<!--简略写法-->
<!--
	<p style='color:red'>颜色</p>
-->

<script>
    new Vue({
      el: '#app',
      data: {
        msg:'color:red'
      }
    })
</script>
```

```vue
<!--双向绑定-->
<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">	<!-- v-model为value属性 -->
</div>
<!--
	监听input、select、textarea、checkbox、radio的value值
	message属性会改变表单的值，也会被表单的值改变
	表单输入：文本		<p>文本</p>
-->

<script>
    new Vue({
      el: '#app',
      data: {
        message: '输入内容'
      }
    })
</script>
```

```vue
<!--绑定事件-->
<div id="app">
    <button v-on:click="fun()">按钮</button>
    <button @click="fun()">按钮</button>		<!--简略写法-->
</div>
	
<script>
    new Vue({
      el: '#app',
      data: {},
      methods: {
        fun() {
          console.log('绑定事件')
        }
      }
    })
</script>
```

```vue
<!--条件指令-->
<div id="app">
    <input type='checkbox' v-model='ok' />
	<div v-if='ok'>选中</div>		<!--如果值为true，则插入-->
	<div v-else>没有选中</div>		<!--否则插入该元素-->
</div>
<!--
双向绑定：当单选框勾选时，value的值为true；ok属性绑定value属性，所以ok的值也为true
-->    

<script>
    new Vue({
      el: '#app',
      data: {
        ok:'false'
      }
    })
</script>
```

```vue
<!--循环语句-->
<div id="app">
	<div v-for="user in userList">		<!--userList集合，user元素-->
      {{ user.name }}
    </div> 
    <div v-for="(user,index) in userList">	<!--index索引-->
      {{index}}--{{ user.name }}
    </div> 
</div>
<!--
    <div>张三</div>
    <div>李四</div>

	<div>0--张三</div>
    <div>1--李四</div>
-->


<script>
    new Vue({
      el: '#app',
      data: {
        userList: [
          { name: '张三' },
          { name: '李四' }
        ]
      }
    })
</script>
```

```vue
<!--生命周期方法-->
<script>
    new Vue({
      el: '#app',
      data: {},
      created(){
          //在页面渲染之前执行
      },
      mounted(){
          //在页面渲染之后执行
      }
    })
</script>
```

### axios

概念：vue中发送ajax请求的工具

```vue
<!--基本格式-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.26/vue.global.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.min.js"></script>

<script>
    new Vue({
      el: '#app',
      data: {
        userList:[]
      },
      created(){
          
      }，
      methods:{
          getList(){	//ajax方法
              axios.get("uri")	//get请求方式	uri请求路径
              	.then(response=>{	//then请求成功	response响应json对象
                  this.userList=response.data	//方法体：响应对象赋值给属性
              	})
              	.catch(error=>{		//catch请求失败	/error错误信息json对象
                	console.log("错误信息："+error)  //方法体：打印错误信息
              	})
          }
      }
    })
</script>
```



## Node.js

概念：运行在服务端的JavaScript，基于Chrome的V8引擎。[菜鸟教程](https://www.runoob.com/nodejs/nodejs-tutorial.html)、[官网](https://nodejs.org/en/)

```shell
node *.js	#运行js文件
#进入交互模式（直接输入js代码，回车运行）
node			
> console.log("hello")
```

```js
//引入http模块
const http = require('http');

//创建服务器
http.createServer(function (request, response) {
	// 设置响应头
	response.writeHead(200, {'Content-Type': 'text/html;charset=utf-8'});
	// 设置响应体
	response.end('<h1>Node.js web模块</h1>');
}).listen(8888);

// 运行成功后在终端控制台打印的内容
console.log('请访问：http://127.0.0.1:8888/');
```

模块化

- 入口.js（调用依赖.js的方法，作为HTML引用的js）
- 依赖.js（提供实现功能的方法）

### NPM

**N**ode **P**ackage **M**anager：与node.js一同安装的包管理器，相当于前端的Maven。[菜鸟教程](https://www.runoob.com/nodejs/nodejs-npm.html)

```shell
npm init	#输入项目信息，生成package.json
npm init -y #直接生成package.json
```

```shell
#修改远程仓库地址，使用淘宝镜像
#临时
npm i --registry=https://registry.npm.taobao.org
# 
npm config set registry https://registry.npm.taobao.org
npm config list		#查看配置信息
```

```sh
#例：npm install jquery
npm install 模块	 #安装模块（简写：npm i）
npm install 模块@版本	#指定版本
npm install --save-dev 模块	#模块添加到devDependencies（简写：npm i -D）
npm install --global 模块		#全局安装（简写：npm i -g）

npm install	#根据package.json安装模块
```

```shell
#更新包（更新到最新版本）
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名
```

- 目录结构
  - package.json（相当于Maven的POM.xml）
  - package-lock.json（锁定版本）
  - node_modules（存放模块的根目录）
    - .bin（模块在终端执行的文件）

> `devDependencies`：只在开发环境中使用，打包项目时不添加模块
>
> 局部安装：项目根目录/node_modules
>
> 全局安装：安装的模块可以作为命令直接在终端使用
>
> - C:\Users\Administrator\AppData\Roaming\npm\node_modules（win）
> - /usr/local/lib/node_modules（linux）



### Babel

概念：node.js不支持最新的ES语法，需使用Babel进行转码（将任意ES版本的js源码 转换成 Node.js支持的版本格式）

```shell
#cli：转化器	es2015：ES6规则
npm install -g babel-cli
npm install -D babel-preset-es2015
```

```json
//创建babel配置文件

{
"presets": ["es2015"],		//目标文件的语法，对应babel-preset-*
"plugins": []
}
```

```shell
#转码
babel 目标路径 -d 存放路径
```



### Webpack

概念：前端资源加载/打包工具。将模块化的文件合并成一个独立文件（减少页面的请求）[菜鸟教程](https://www.runoob.com/w3cnote/webpack-tutorial.html)

![image-20220122205338002](尚医通.assets/image-20220122205338002.png)

```sh
#安装
npm install -g webpack webpack-cli
#处理css依赖（不同类型的依赖使用不同的 *-loader）
npm install css-loader style-loader	
#打包
webpack 入口.js 存放目录		#webpack2
webpack 入口.js -o 存放目录	#webpack4
```



# vue-element-admin

概念：基于vue和element-ui的后台管理界面。[GitHub](https://github.com/PanJiaChen/vue-element-admin)

部署：IDEA克隆仓库 》回退3.8.0版本 》安装模块`npm i` 》运行`npm run dev`

> 进入`package.json`修改element-ui版本为 2.12.0

**目录结构（src）**

脚本

- config/`dev.env.js`：运行配置文件
- api：调用http接口
- utils/`request.js`：使用axios发送异步请求的工具类

页面

- router/`index.js`：侧边栏
- views：展示内容

****



# nuxt.js

概念：基于Vue.js的轻量级应用框架，用于创建SSR应用。[官网](https://nuxtjs.org/)、[GitHub](https://github.com/nuxt/nuxt.js)

特征：代替浏览器请求数据与渲染页面，充当静态文件服务器

> **S**erver **S**ide **R**ender：服务端渲染。在服务端完成页面内容，直接返回渲染好的静态页面

下载：[旧模板](https://github.com/nuxt-community/starter-template/archive/master.zip)

运行：`npm run dev`

**目录结构**

页面

- pages：页面目录 

脚本

- assets：静态资源
- components：Vue组件
- layouts：布局组件
- plugins：Vue插件
- nuxt.config.js：配置文件

****

动态路由：

```js
//页面文件命名格式：_参数
//param无论是多少都指向_param
show(param) {
    window.location.href = '/a/' + param
}
//访问uri：/a/1	响应文件：pages/a/_
```





# 打包部署

## vue-element-admin

修改请求地址：config/prod.env.js，`BASE_API: '"https://yygh.asdw.ml:3000"'`

命令：`npm run build:prod`

部署内容：`dist`

访问：`dist/index.html`

问题

- 空白页。进入文件config/index.js，代码块build
  - 修改属性值 `assetsSubDirectory: ''`	`assetsPublicPath: './'`
- 图标路径错误。进入文件webpack.prod.conf.js
  - 修改属性值 `extract: false`

## nuxt.js

命令：`npm run build`

部署内容：.nuxt、static、nuxt.config.js、package.json

npm操作：打包`npm i`，运行`npm run start`

问题

- 设置cookie：`cookie.set('token', '', {domain: location.hostname})`

- 客户端渲染。进入layouts/default.vue

  - 使用`<no-ssr>`包裹`<div id="main">`（表示包裹的内容在浏览器中加载）

- 服务端加载插件。进入nuxt.config.js，代码块plugins

  - `ssr:true`

- 不验证ssl证书。进入utils/request.js，代码块`axios.create`

  - ```js
    httpsAgent: new https.Agent({
        rejectUnauthorized: false
    })
    ```

## Java

定位mapper映射文件

```properties
mybatis-plus.mapper-locations=classpath*:/ml/asdw/yygh/service_order/mapper/xml/*.xml
```

**build**

```xml
<!--springboot打包插件-->
<plugin>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
```

> 定义在含有启动类的springboot项目模块中，无启动类的公共模块不要添加

```xml
<resources>
    <!--            需要导入到jar包内的文件-->
    <resource>
        <!--设置目录-->
        <directory>src/main/java</directory>
        <includes>
            <include>**/*.yml</include>
            <include>**/*.properties</include>
            <include>**/*.xml</include>
            <include>**/*.p12</include>
        </includes>
        <!--                是否过滤-->
<!--                <filtering>false</filtering>-->
    </resource>
    <resource>
        <directory>src/main/resources</directory>
        <includes>
            <include>**/*.yml</include>
            <include>**/*.properties</include>
            <include>**/*.xml</include>
            <include>**/*.p12</include>
        </includes>
    </resource>
</resources>
```

> directory固定写法

修改微信登录固定回调

1. 修改wxLogin.js中的https://open.weixin.qq.com/connect/qrconnect为https://yygh.asdw.ml:4433/api/ucenter/wx/qrconnect
2. 使用java替代请求https://open.weixin.qq.com/connect/qrconnect
3. 替换响应的关键内容：
   - http://localhost:8160 》https://yygh.asdw.ml:4433
   - /connect/qrcode 》https://open.weixin.qq.com/connect/qrcode
4. 响应结果为二维码，让前端接收

## nginx

```sh
    # 证书文件地址
    ssl_certificate "/etc/nginx/conf.d/https/cert.cer";
    # 私钥文件地址
    ssl_certificate_key "/etc/nginx/conf.d/https/cert.key";

    ssl_session_timeout 10m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;

server {
    listen 9527 ssl http2 default_server;
    server_name yygh.asdw.ml;

	error_page 497 https://$server_name:9527$request_uri;
    root  /usr/share/nginx/html/yygh-admin;
}
server {
    listen 3344 ssl http2 default_server;
    server_name yygh.asdw.ml;

	error_page 497 https://$server_name:3344$request_uri;
    location / {
    	proxy_pass http://192.168.50.130:3000;
    }
}
server {
    listen 4433 ssl http2 default_server;
    server_name yygh.asdw.ml;

    error_page 497 https://$server_name:4433$request_uri;

    location /certificates {
    	proxy_pass http://192.168.50.130:8160;
    }
    location / {
    	proxy_pass http://192.168.50.130:8080;
    }
}
server {
    listen 9999 ssl http2 default_server;
    server_name yygh.asdw.ml;

    error_page 497 https://$server_name:9999$request_uri;
    location / {
    	proxy_pass http://192.168.50.130:9998;
    }
}
```



# IDEA

**TODO**

概念：注释中的关键字（不区分大小写，左右两边只能是符号）

作用：标记某处代码，暂时无法实现 或 有问题待解决

生成：`输入todo` 》`按tab`

```java
// TODO: 2022/2/12 描述问题
```