
<div align="center">

基于<a href="https://ant.design/" target="_blank" rel="noopener noreferrer">Ant Design</a> 和 <a href="http://jqueryui.com/" target="_blank" rel="noopener noreferrer"  target="_blank" rel="noopener noreferrer">jQuery UI</a> 的表单设计器
<a href="https://github.com/lumengwei/form-designer">github 地址</a>
![在这里插入图片描述](
https://zidot.oss-cn-beijing.aliyuncs.com/assets/2023/20190424114925711.png)

</div>

### 特性

- [x] React
- [x] Vue 3.x
- [x] Typescript
- [x] 统一的组件定义，对Vue 和React 的实现提供一个统一的组件定义描述

### 概念

- Component 组件
- Layout 布局，一种特殊的Component
- Component Editor 组件属性编辑器
- Component Factory 提供组件定义

### 扩展组件

#### 定义组件属性类型

在src/props.ts 文件中定义组件属性

```
export type RateProps = {
    count: number
}

```

#### 定义一个ComponentFactory

在src/factory目录下定义。 提供了makeFieldId()和makeComponentId()两个方法用于生成id

```
class RateFactory implements FieldFactory<RateProps> {
    readonly type = "Rate"
    readonly group = FactoryGroup.Component;
    title = "评分"

    /**
     * 初始化一个组件定义
     * @returns {{type: string, title: string}}
     */
    createComponentDefinition() {
        return {
            id: makeComponentId(),
            type: this.type,
            title: this.title,
            fieldDef: {
                fieldId: makeFieldId(),
                fieldType: 'varchar' as FieldType,
                fieldName: '',
            },
            props: {
                count: 5
            },
        }
    }
}

export default new RateFactory();
```
#### 创建一个vue组件或布局

- 在src/antdv-designer/src/designer/components目录下添加vue组件
- 在src/antdv-designer/src/designer/layout目录下添加vue布局


#### 创建一个React组件或布局

- 在src/antd-designer/src/designer/components目录下添加React组件
- 在src/antd-designer/src/designer/layout目录下添加React布局


### 相关概念
**Http**：超文本传输协议（Hyper Text Transfer Protocol，HTTP）是一个简单的请求-响应协议，它通常运行在TCP之上，是Web协议族中非常重要的一个协议。协议版本包含**Http1.0**、**Http1.1** 和**Http2.0**.

**Https**：HTTPS （Hypertext Transfer Protocol Secure），是以安全为目标的 HTTP 通道，在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性。

**SSL**：安全套接层（Secure Socket Layer，SSL），是网景公司（Netscape）设计的主要用于Web的安全传输协议，这种协议在Web上获得了广泛的应用。版本包含 SSL1.0（未发布）、SSL2.0（于2011年废弃）、SSL3.0（于2015年废弃）。

**TSL**：传输层安全协议（**Transport Layer Security** （TLS） Protocol）是 互联网工程任务组（**IETF**）组织将SSL标准化后的发布的协议。版本包含 TLS1.0（于2021年弃用）、TLS1.1（于2021年弃用）、TLS1.2、TLS1.3。


### 相关性

![](https://zidot.oss-cn-beijing.aliyuncs.com/assets/2022/20/Snipaste_2022-12-20_13-39-04.png)

![](https://zidot.oss-cn-beijing.aliyuncs.com/assets/2022/20/Snipaste_2022-12-20_13-39-16.png)

### TLS

TLS 包含握手协议（The Handshake Protocol）和记录协议（The Record Protocol）。

#### 记录层协议（The Record Layer Protocol）

记录层接收来自TCP、UDP等更底层的数据。它被划**change_cipher_spec**、**alert**、**handshake**和**application_data** 四种数据类型。

![](https://zidot.oss-cn-beijing.aliyuncs.com/assets/2022/20/Snipaste_2022-12-20_19-28-24.png)

#### 握手协议（The Handshake Protocol）

握手协议比记录层协议更高，对应记录层协议**handshake**类型的数据。

主要作用

- 密钥套件的协商
- 服务器和客户端（可选）的身份验证
- 会话密钥信息交互


握手协议包含以下步骤



1. Client发送**ClientHello**，包含协议版本，随机数(RN)，所有支持的密码套件(CipherSuites)。
2. Server回应**ServerHello** ，包含协议版本，随机数，选择的密钥套件，会话ID。
3. Server发送**Certificate**消息(可选)
4. Server发送 **ServerKeyExchange**消息（可选）
5. Server发送 **CertificateRequest**消息（可选）
6. Server发**送ServerHelloDone**消息
7. Client 发送 **Certificate**消息(可选)
8. Client 发送 **ClientKeyExchange**消息
9. Client 发送 **CertificateVerify**消息(可选)
10. Client 发送 ChangeCipherSpec
11. Client 发送 **Finished**消息
12. Server发送 ChangeCipherSpec
13. Server 发送 **Finished**消息
14. Server 与Client 采用加密通信，发送application_data数据

#### 密码套件（The Cipher Suite）

加密套件是一个算法集合，通常包含秘钥交换算法、数据加密算法、信息校验算法。格式为：

**TLS_KeyExchangeAlg_WITH_CipherAlg_MacAlg**
或
**SSL_KeyExchangeAlg_WITH_CipherAlg_MacAlg**

**秘钥交换算法（KeyExchangeAlg**）：用于两个设备间秘钥的交换

**数据加密算法（CipherAlg）**：用于传输数据的加密

**信息校验算法（MacAlg）**：用于校验传输信息的完整性





**C4** 模型是一种易于学习、对开发人员友好的软件架构图绘制方法。它能帮助软件开发团队在前期设计和回顾性记录现有代码库期间描述和交流软件体系结构。

![](https://zidot.oss-cn-beijing.aliyuncs.com/assets/2022/12/c4-overview.png)

如上图所示C4模型划分了四个级别的视图分别是：系统上下文图、容器图、组件图和代码。



- **系统上下文**：System Context，所表达的是系统和用户以及它所依赖系统之间的关系
- **容器**：Container，系统是由容器组成的，这个容器是一个抽象的概念，代指有自己独立进程空间的一种存在，如果系统设计的好也可以1:1对应Docker
- **组件**：Component，容器是由组件组成的，组件在这里把接口和它的实现类打包成一个概念，组件是映射到代码库中的真实抽象
- **代码**：Code，代码图就是UML里的类图之类很细节的图。一般是不画的，都是代码生成出来。除非非常重要的且还没有写出代码的组件才画代码图。


#### 系统上下文图

系统上下文图展示了系统环境的总体情况，它清晰的展示了软件系统的人员（如用户、参与者等）和外部依赖项，明确了软件系统的边界。

![](https://zidot.oss-cn-beijing.aliyuncs.com/assets/2022/12/SystemContext.png)

**范围**：单个软件系统。
**主要元素**：范围内的软件系统。
**支持元素**：直接连接到范围内的软件系统的人员（例如用户、参与者、角色或角色）和软件系统（外部依赖项）。通常，这些其他软件系统位于您自己的软件系统的范围或边界之外，您不对它们负责或拥有它们。
**目标受众**：软件开发团队内外的每个人，包括技术人员和非技术人员。


#### 容器图

在容器图中容器只是一个抽象的概念，它可能对应到系统中的Web应用程序、单页应用程序、桌面应用程序、移动应用程序、数据库架构、文件系统等。

容器图显示了软件体系结构的高级形状以及职责如何分布在其上。它还显示了主要技术选择以及容器间的通信方式。这是一个简单、高级的以技术为中心的图表，可用于 软件开发人员和支持/运营人员都一样。

![](https://zidot.oss-cn-beijing.aliyuncs.com/assets/2022/12/Containers.png)

**范围**：单个软件系统。
**主要元素**：范围内的软件系统内的容器。
**支持元素**：直接连接到容器的人员和软件系统。
**目标受众**：软件开发团队内外的技术人员;包括软件架构师、开发人员和运营/支持人员。


#### 组件图

组件图显示了容器由哪些“组件”构成的，每个组件中的每一个组件是，它们的职责和技术/实施细节

![](https://zidot.oss-cn-beijing.aliyuncs.com/assets/2022/12/Components.png)

**范围**：单个软件系统。
**主要元素**：范围内容器内的组件。
**支持元素**：容器（在范围内的软件系统内）以及直接连接到组件的人员和软件系统。
**目标受众**：软件架构师和开发人员。


#### 代码

代码视图展示了每个组件的代码实现方式，类似UML类图、实体关图。通常这是一个可选的视图，我们并不一定要每个组件展示详细的代码实现方式

![](https://zidot.oss-cn-beijing.aliyuncs.com/assets/2022/12/class-diagram.png)

**范围**：单个组件。
**主要元素**：作用域中组件中的代码元素（例如类、接口、对象、函数、数据库表等）。
**目标受众**：软件架构师和开发人员。


#### 工具推荐

1. PlantUML
2. Enterprise Architect
3. Gaphor



我们在了解编程范式之前需要知道什么是范式，除了编程范式外你可能还接触过数据库设计范式、科学范式等等概念。本文旨在让大家初步了解编程范式的相关概念。

### 范式


范式（paradigm）的概念和理论是美国著名科学哲学家托马斯·库恩(Thomas Kuhn) 提出并在《科学革命的结构》(The Structure of Scientific Revolutions)（1962）中系统阐述的。库恩认为范式是指“按既定的用法，范式就是一种公认的模型或模式”。“我采用这个术语是想说明，在科学实际活动中某些被公认的范例--包含定律、理论、应用以及一起设备统统在内的范例--为某种科学研究传统的出现提供了模型”。


#### 范式的特点
- 范式在一定程度内具有公认性
- 范式是由一个基本定律、理论、应用以及相关的仪器设备等构成的一个整体，它的存在给科学家提供了一个研究纲领
- 范式还为科学研究提供了可模仿的成功先例。

### 编程范式

简单来说编程范式就是一种编程风格。它不是指某种特定的语言，而是你编程的方式。无论我们使用哪种编程语言，它们在实现时都会遵循一些策略，这种策略就是一种范式。


#### 都有哪些编程范式

- 面向对象编程
- 函数式编程
- 过程式编程
- 结构化编程
- 指令式编程
- 声明式编程

#### 面向对象编程

![](https://zidot.oss-cn-beijing.aliyuncs.com/assets/2022/12/java-oops.png)

描述面向对象编程的关键概念（来源：javatpoint.com）

##### 特点
1. **继承** 使分层关系
1. **多态**
1. **封装**

##### 设计原则

- 开闭原则
- 里氏替换原则
- 迪米特原则（最少知道原则）
- 单一职责原则
- 接口分离原则
- 依赖倒置原则
- 组合/聚合复用原则

#### 函数式编程

##### 特点

1. 纯函数

- 函数始终返回相同的值（对于相同的输入），不管调用多少次
- 自包含（不使用全局变量）
- 它不应该修改程序的状态或引起副作用

2.  递归
    函数式语言中用递归来实现循环，因为它没有命令式语言的循环和跳转语句。
3.  变量是不可变的
4.  函数是”第一等公民“
    函数可以赋值给变量、可以作为传递参数或者可以作为函数的返回值

5. 惰性计算
6. 高阶函数
   参数为函数或返回值为函数的函数。
```
# scala 代码
val salaries = Seq(20000, 70000, 40000)
val doubleSalary = (x: Int) => x * 2

# map 属于高阶函数，接收一个函数作为入参
val newSalaries = salaries.map(doubleSalary) // List(40000, 140000, 80000)


# 这是一个返回函数的高阶函数
def urlBuilder(ssl: Boolean, domainName: String): (String, String) => String = {
  val schema = if (ssl) "https://" else "http://"
  (endpoint: String, query: String) => s"$schema$domainName/$endpoint?$query"
}

val domainName = "www.example.com"
def getURL = urlBuilder(ssl=true, domainName)
val url = getURL("users", "id=1") // "https://www.example.com/users?id=1": String

```
7. 偏函数
   偏函数是指固定部分已知参数，同时返回一个接受剩余参数的函数。目的一方面是为了减少重复传参数；另一方面是为了降低函数的通用性、提高函数的适用性。


```
# python 代码
from functools import partial
 
def mod( n, m ):
  return n % m
 
# 将mod方法的参数n 固定为 100，并返回一个新的函数 
mod_by_100 = partial( mod, 100 )
 
print mod( 100, 7 )  # 2
print mod_by_100( 7 )  # 2
```
8. 柯里化
   把一个多参数的函数转化为单参数函数的方法
```
// javascript 代码

// 原有函数
function plus(x, y){
    return x + y
}


//  柯里化后的函数
function plus_currying(y){
    return function(x){
        return x+y
    }
}

plus(1,2)           // 结果：3
plus_currying(1)(2) // 结果：3
```
9. 闭包

   闭包是一个函数，返回值依赖于声明在函数外部的一个或多个变量。
```
var factor = 3  
val multiplier = (i:Int) => i * factor  
```

10. 函子
    函子是一个特殊的容器,通过一个对象实现,该对象具有map方法,map方法可以运行一个函数,改变传递的值.
```
// 一个容器，包裹一个值
class Container {
  // of 静态方法，可以省略 new 关键字创建对象
  static of(value) {
    return new Container(value)
  }
  constructor(value) {
    this._value = value
  }
  // map 方法，传入变形关系，将容器里的每一个值映射到另一个容器
  map(fn) {
    return Container.of(fn(this._value))
  }
}
// 测试
Container.of(3)
  .map(x => x + 2)
  .map(x => x * x)

```
##### 优点


- 易理解：纯函数不改变状态，完全依赖输入，因此易于理解
- 并发：由于纯函数避免更改变量或其他外部数据，因此并发更容易实现
- 惰性计算：函数式编程鼓励惰性求职，仅在需要时在进行计算
- 调试和测试更轻松：纯函数只接收一次参数并产生不可更改的输出。由于不可变且没有隐藏输出，测试和调试变得更加容易

##### 缺点
- 性能可能较差
- 编码困难：虽然编写纯函数很容易，但将其与应用的其余部分组合可能非常困难


#### 结构化编程
结构化编程采用子程序、块结构、for循环以及while循环等结构，来取代传统的 goto。希望借此来改善计算机程序的明晰性、质量以及开发时间，并且避免写出面条式代码。

#### 过程式编程
过程式编程派生自**指令式编程**，主要要采取过程调用或函数调用的方式来进行流程控制。流程则由包涵一系列运算步骤的过程（Procedures），例程（routines），子程序（subroutines）, 方法（methods），或函数（functions）来控制。在程序执行的任何一个时间点，都可以调用某个特定的程序。任何一个特定的程序，也能被任意一个程序或是它自己本身调用。

#### 指令式编程
是一种描述电脑所需作出的行为的编程范型。指令式编程语言有 Fortran、BASIC 和 C等.

#### 声明式编程

**声明式编程是对与命令式编程不同的编程范型的一种合称。** 它们建造计算机程序的结构和元素，表达计算的逻辑而不用描述它的控制流程。声明式编程是一个笼统的概念，除了一些特定的领域专属语言之外，一些更加知名的编程范型也被归类为其子范型。

#### 结论
编程范式降低了程序的复杂性。每个程序员在实现他们的代码时都必须遵循范式。不过每个范式都有优点和缺点，所以你要先对自己的目标和实现过程中可能遇到的问题有所了解。

不要把编程范式和固定的语言做强制对应，因为有些语言能支持多种范式。



#### 概念
**跨源资源共享（Cross-Origin Resource Sharing，CORS**）是一种基于 HTTP 头的机制，该机制允许服务器指示浏览器应该允许从自身以外的其他源（域、协议和端口）加载资源。

为了安全性，浏览器限制脚本内发起的跨源请求，除非服务器返回的响应中包含正确的CORS响应头。

#### 什么时候需要CORS

- 跨源的Ajax或Fetch Api请求
- WebGL maps.
- 使用 drawImage() 方法
- CSS 中的 Shapes from images

#### CORS协议

CORS 协议由一组标头组成，这些标头指示响应是否可以 跨源共享。
对于涉及需要跨源的请求，将执行CORS 预检请求（**CORS-preflight request** ），以确保请求的当前URL支持CORS。

##### CORS 预检请求（**CORS-preflight request** ）

使用OPTIOS 方法并包含如下的请求头：


`Access-Control-Request-Method` 表示跨域请求使用的方法


`Access-Control-Request-Headers` 表示跨域请求额外携带的请求头


服务器响应：
服务器收到CORS 预检请求后需要反馈包含如下头部的响应

`Access-Control-Allow-Origin` 允许哪些源加载资源

`Access-Control-Allow-Credentials` 是否需要包含凭证信息

`Access-Control-Allow-Methods` 支持的跨源请求的方法

`Access-Control-Allow-Headers` 支持哪些响应请求

`Access-Control-Max-Age` 提供 Access-Control-Allow-Methods 和 Access-Control-Allow-Header可缓存的时间，默认 5秒

`Access-Control-Expose-Headers` 可暴露的响应头部
注：Access-Control-Expose-Headers 暴露的头部，可以通过js脚本获取到对应的值。否则无法通过js获取对应的header（即便在浏览器的network 中可以看到相关头部信息）


##### 浏览器的请求流程

![](
https://zidot.oss-cn-beijing.aliyuncs.com/assets/2022/12/CROS.png)


### 参考

https://fetch.spec.whatwg.org/#cors-protocol




<p>
<a href="http://zidot.cn/" >我的网站</a> | <a href="http://blog.zidot.cn/" >我的博客</a> | 
<a href="http://tools.miyiu.cn/javaDes" >序列化解析工具</a>

</p>

## 概念

Java为我们提供了一种默认的对象序列化机制，通过这种机制可以将一个实例对象写入到IO流中，当然这种IO流可以是文件流、网络流或者其他什么流。


## 代码的写法
``
* ObjectOutputStream 对象输出流，用于序列化一个对象
* ObjectInputStream 对象输入流，用于反序列化一个对象
* Serializable  和 Externalizable 只有实现其中一个接口的类的对象才能被序列化

**注1**：Externalizable 是序列化的一个扩展接口，它本身继承了Serializable接口。实现Externalizable接口的对象在序列化和反序列化时会用 writeExternal  和readExternal 方法替换默认的处理逻辑

**注2**： 反序列化时 serialVersionUID 的值必须和序列化时的一致，否则反序列报错失败

将对象序列化到文件流中
```Java
 String file = "string3.out";
 ObjectOutputStream outputStream = new ObjectOutputStream(new FileOutputStream(file));
 TestObject testObject = new TestObject();
 testObject.setContent("test");
 outputStream.writeObject(testObject);

```

从文件流中反序列化
```Java
String file = "string3.out";
ObjectInputStream in = new ObjectInputStream(new FileInputStream(file));
TestObject responseBean = (TestObject) in.readObject();
System.out.println(responseBean.getContent());

```
### 两种实现方式
#### 1、实现 Serializable 接口

```
@Setter
@Getter
public class TestObject extends UnicodeRequest implements Serializable {
       private static final long serialVersionUID = 5347411908895007509L;
       private String content;
}
```

#### 2、实现 Externalizable 接口

```
@Setter
@Getter
public class TestObject extends UnicodeRequest implements Externalizable {
     private static final long serialVersionUID = 5347411908895007509L;
     private String content;
       
    @Override
    public void writeExternal(ObjectOutput out) throws IOException {
        out.writeUTF(this.content);
    }

    @Override
    public void readExternal(ObjectInput in) throws IOException, ClassNotFoundException {
        this.conent = in.readUTF();
    }
}
```
### 五种特殊的方法

如果被序列化对象实现了以下5种特殊的方法，会影响序列化或反序列化时原有的行为。

以下1个特殊的方法 用于序列化和反序列化的对像替换，常用于单例对象的序列化，保证单例的绝对安全。

```
ANY-ACCESS-MODIFIER Object readResolve() throws ObjectStreamException;

ANY-ACCESS-MODIFIER Object writeReplace() throws ObjectStreamException;
```

以下3个特殊的方法 用于替换默认的序列化行为。

**注**：如果对象实现了Externalizable接口，下边的方法就不在有作用了。
```
private void writeObject(java.io.ObjectOutputStream out) throws IOException;

private void readObject(java.io.ObjectInputStream in) throws IOException, ClassNotFoundException;

private void readObjectNoData() throws ObjectStreamException;

```

## 序列化原理

![](https://zidot.oss-cn-beijing.aliyuncs.com/assets/2022/11/javaSeria.png)

### Type Code

| type code | 说明 |
| --- | --- |
| B | byte |
| C | char |
| D | double |
| F | float |
| I | int |
| J | long |
| L | class or interface |
| S | short |
| Z | boolean |
| [ | array |


### 如果超类没有实现 Serializable 接口则不会被序列化
### 对于ObjectOutputStream 的一个实例来说相同的对象不会重复序列化
### serialVersionUID 不一致 反序列化失败
### serialVersionUID 一致情况下，字段的缺失或者添加 都不会影响 反序列化



### 使用vue2


关键技术点:

[web component](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry)

[vue component ](https://vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue)

参考文档

https://blog.enginaar.com/vue-angular-together-in-one-app/


### 使用vue3

注意:

- 现行vue3版本不支持 web component (vue3 2.x)
- vue的相关特性如事件、双向绑定等特性无法使用vue组件时直接用,需要相关处理放在vue组件内部完成


#### 直接引入文件方式

1. 在angular 项目中找到 index.html 文件,将需要引入的vue 组件的js和css 引入


```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  
  <link
    rel="stylesheet"
    href="https://fastly.jsdelivr.net/npm/vant@3/lib/index.css"
  />

  
  <script src="//unpkg.com/vue@next"></script>
  <script src="https://fastly.jsdelivr.net/npm/vant@3/lib/vant.min.js"></script>
</head>
<body >
  <app-root ></app-root>
</body>
</html>

```

2. 在angular 项目中 @NgModule 制定 schemas: [CUSTOM_ELEMENTS_SCHEMA]


```
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  schemas:[CUSTOM_ELEMENTS_SCHEMA],
 declarations:[]
 })
 
```

3、使用vue 组件


html 文件
```
<div class="homeImgDiv" >
  <img src="../../../assets/default/progress.png">
  <div id="defaultCp">
    <van-button type="primary">Primary</van-button>
    <van-password-input style="width: 250px" v-bind:value="value"
                        v-bind:show="showKeyboard"
                        v-bind:focused="showKeyboard"
                        v-on:focus="onblur"></van-password-input>
    <van-number-keyboard
      v-bind:value="value"
      v-bind:show="showKeyboard"
    ></van-number-keyboard>
  </div>

</div>

```


ts文件
```

// 添加 Vue 的声明
declare var Vue: any;

export class DefaultComponent implements OnInit {

  constructor() {
  }

  ngOnInit(): void {
    
    // 关键代码
    Vue.createApp({
    }).use(vueComponent) // 注册 vue 组件
      .mount('#defaultCp')

  }

}

```




#### npm 方式

注: 现有项目 typescript 和 vue3 、Vant 的typescript 有冲突,升级有点复杂



### 生成自签名证书


#### 生成ca证书


```
## 生成RSA 私钥
openssl genrsa -out ca.key 1024	

# 生成ca.csr
# 如不指定 config，手动输入
openssl req -out ca.csr -key ca.key -new -config ./ca_cert.conf

# 生成ca证书
openssl x509 -req -in ca.csr -out ca.crt -sha1 -days 5000 -signkey ca.key

# 证书格式转换
openssl x509 -in ca.crt -outform DER -out TLS.ca_x509.cer
```

#### 生成server 端证书


```


## 生成Server私钥
openssl genrsa -out server.key 1024

# 生成server.csr
# 如不指定 config，手动输入
openssl req -out server.csr -key server.key -new -config ./server_cert.conf

# 生成server证书
openssl x509 -req -in server.csr -out server.crt -sha1 -CAcreateserial -days 5000 -CA ca.crt -CAkey ca.key
	
```


#### 生成client 端证书


```

## 生成Client私钥
openssl genrsa -out client.key 1024

# 生成client.csr
# 如不指定 config，手动输入
openssl req -out client.req -key client.key -new -config ./client_cert.conf 

# 生成client证书
openssl x509 -req -in client.req -out client.crt -sha1 -CAcreateserial -days 5000 -CA ca.crt -CAkey ca.key

openssl rsa -in client.key -out TLS.key_1024 -outform DER


# crt 转 cer
openssl x509 -in ca.crt -outform DER -out TLS.ca_x509.cer
```


### 格式转换

```
1、合并证书和私钥得到p12格式的个人证书
openssl pkcs12 -export -in alicecert.pem -inkey alicekey.pem -certfile cacert.pem -out alice.p12   

2、从p12文件中提取私钥
openssl pkcs12 -in alice.p12 -nocerts -out alicekey.pem  

openssl rsa -in client.key -out TLS.key_1024 -outform DER

```

可参考：

https://github.com/openssl/openssl/blob/master/demos/certs/mkcerts.sh


### config
#### ca_cert.conf

The sample configuration file to generate the Root CA certificate

```

#
# OpenSSL example configuration file for automated certificate creation.
#

# This definition stops the following lines choking if HOME or CN
# is undefined.
HOME			= .
CN			= "Not Defined"

# Comment out the next line to ignore configuration errors
config_diagnostics = 1

[ ca ]
default_ca = CA_LOC

[ CA_LOC ]
prompt            = no
dir               = /home/myuser/ca
certs             = $dir/certs
crl_dir           = $dir/crl
new_certs_dir     = $dir/newcerts
database          = $dir/index.txt
serial            = $dir/serial
RANDFILE          = $dir/private/.rand
private_key       = $dir/private/myrootCA.key
certificate       = $dir/certs/myrootCA.crt
crlnumber         = $dir/crlnum
crl               = $dir/crl/mycrl.pem
default_crl_days  = 30
preserve          = no
policy            = policy
default_days      = 365

[ policy ]
commonName              = supplied
stateOrProvinceName     = supplied
countryName             = supplied
emailAddress            = supplied
organizationName        = supplied
organizationalUnitName  = supplied

[ req ]
default_bits        = 4096
distinguished_name  = req_distinguished_name

string_mask         = utf8only
default_md          = sha256
x509_extensions     = v3_ca

[ req_distinguished_name ]
countryName                     = AB
stateOrProvinceName             = CD
localityName                    = EF_GH
organizationName              = myorg
organizationalUnitName          = myorgunit
commonName                      = mycn
emailAddress                    = myemail@example.com

[ v3_ca ]
subjectKeyIdentifier = hash
authorityKeyIdentifier = keyid:always,issuer
basicConstraints = critical, CA:true
keyUsage = critical, digitalSignature

```

#### server.conf

The sample configuration file to generate the CSR for a server certificate


```
[ req ]
prompt                 = no
days                   = 365
distinguished_name     = req_distinguished_name
req_extensions         = v3_req


[ req_distinguished_name ]
countryName            = AB
stateOrProvinceName    = CD
localityName           = EFG_HIJ
organizationName       = MyOrg
organizationalUnitName = MyOrgUnit
commonName             = mycommname.com
emailAddress           = emailaddress@myemail.com

[ v3_req ]
basicConstraints       = CA:false
extendedKeyUsage       = serverAuth
subjectAltName         = @sans

[ sans ]
DNS.0 = localhost
DNS.1 = myexampleserver.com
```

#### client.conf
The sample configuration file to generate the CSR for a Client certificate


```
[ req ]
prompt                 = no
days                   = 365
distinguished_name     = req_distinguished_name
req_extensions         = v3_req


[ req_distinguished_name ]
countryName            = AB
stateOrProvinceName    = CD
localityName           = EFG_HIJ
organizationName       = MyOrg
organizationalUnitName = MyOrgUnit
commonName             = mycommname.com
emailAddress           = emailaddress@myemail.com

[ v3_req ]
basicConstraints       = CA:false
extendedKeyUsage       = clientAuth
subjectAltName         = @sans

[ sans ]
DNS.0 = localhost
DNS.1 = myexampleclient.com
```

### openssl 文件配置
该文件主要设置了证书请求、签名、crl相关的配置。主要相关的伪命令为ca和req。对于x509不用该配置文件。

该文件从功能结构上分为4个段落：默认段、ca相关的段、req相关的段、tsa相关的段。每个段中都以name=value的格式定义。

该文件中没有被引用的段被视为忽略段，不会起到任何作用。

每个段中可以书写哪些name以及它们的意义，可以man相关命令，如man ca可以查看ca相关段可以书写的name，man req可以查看req相关段可以书写的name。

该文件主要设置了证书请求、签名、crl相关的配置。主要相关的伪命令为ca和req。对于x509不用该配置文件。

该文件从功能结构上分为4个段落：默认段、ca相关的段、req相关的段、tsa相关的段。每个段中都以name=value的格式定义。

该文件中没有被引用的段被视为忽略段，不会起到任何作用。

每个段中可以书写哪些name以及它们的意义，可以man相关命令，如man ca可以查看ca相关段可以书写的name，man req可以查看req相关段可以书写的name。

#### 默认段

```
# This definition stops the following lines choking if HOME isn't
# defined.
HOME			= .

 # Use this in order to automatically load providers.
openssl_conf = openssl_init

# Comment out the next line to ignore configuration errors
config_diagnostics = 1

# Extra OBJECT IDENTIFIER info:
# oid_file       = $ENV::HOME/.oid
oid_section = new_oids

# To use this configuration file with the "-extfile" option of the
# "openssl x509" utility, name here the section containing the
# X.509v3 extensions to use:
# extensions		=
# (Alternatively, use a configuration file that has only
# X.509v3 extensions in its main [= default] section.)

[ new_oids ]
# We can add new OIDs in here for use by 'ca', 'req' and 'ts'.
# Add a simple OID like this:
# testoid1=1.2.3.4
# Or use config file substitution like this:
# testoid2=${testoid1}.5.6

# Policies used by the TSA examples.
tsa_policy1 = 1.2.3.4.1
tsa_policy2 = 1.2.3.4.5.6
tsa_policy3 = 1.2.3.4.5.7

# For FIPS
# Optionally include a file that is generated by the OpenSSL fipsinstall
# application. This file contains configuration data required by the OpenSSL
# fips provider. It contains a named section e.g. [fips_sect] which is
# referenced from the [provider_sect] below.
# Refer to the OpenSSL security policy for more information.
# .include fipsmodule.cnf

[openssl_init]
providers = provider_sect

# List of providers to load
[provider_sect]
default = default_sect
# The fips section name should match the section name inside the
# included fipsmodule.cnf.
# fips = fips_sect

# If no providers are activated explicitly, the default one is activated implicitly.
# See man 7 OSSL_PROVIDER-default for more details.
#
# If you add a section explicitly activating any other provider(s), you most
# probably need to explicitly activate the default provider, otherwise it
# becomes unavailable in openssl.  As a consequence applications depending on
# OpenSSL may not work correctly which could lead to significant system
# problems including inability to remotely access the system.
[default_sect]
# activate = 1

```

#### ca相关

```
####################################################################
[ ca ]
default_ca	= CA_default		# The default ca section

####################################################################
[ CA_default ]

dir		= ./demoCA		# Where everything is kept
certs		= $dir/certs		# Where the issued certs are kept
crl_dir		= $dir/crl		# Where the issued crl are kept
database	= $dir/index.txt	# database index file.
#unique_subject	= no			# Set to 'no' to allow creation of
					# several certs with same subject.
new_certs_dir	= $dir/newcerts		# default place for new certs.

certificate	= $dir/cacert.pem 	# The CA certificate
serial		= $dir/serial 		# The current serial number
crlnumber	= $dir/crlnumber	# the current crl number
					# must be commented out to leave a V1 CRL
crl		= $dir/crl.pem 		# The current CRL
private_key	= $dir/private/cakey.pem# The private key

x509_extensions	= usr_cert		# The extensions to add to the cert

# Comment out the following two lines for the "traditional"
# (and highly broken) format.
name_opt 	= ca_default		# Subject Name options
cert_opt 	= ca_default		# Certificate field options

# Extension copying option: use with caution.
# copy_extensions = copy

# Extensions to add to a CRL. Note: Netscape communicator chokes on V2 CRLs
# so this is commented out by default to leave a V1 CRL.
# crlnumber must also be commented out to leave a V1 CRL.
# crl_extensions	= crl_ext

default_days	= 365			# how long to certify for
default_crl_days= 30			# how long before next CRL
default_md	= default		# use public key default MD
preserve	= no			# keep passed DN ordering

# A few difference way of specifying how similar the request should look
# For type CA, the listed attributes must be the same, and the optional
# and supplied fields are just that :-)
policy		= policy_match

# For the CA policy
[ policy_match ]
countryName		= match
stateOrProvinceName	= match
organizationName	= match
organizationalUnitName	= optional
commonName		= supplied
emailAddress		= optional

# For the 'anything' policy
# At this point in time, you must list all acceptable 'object'
# types.
[ policy_anything ]
countryName		= optional
stateOrProvinceName	= optional
localityName		= optional
organizationName	= optional
organizationalUnitName	= optional
commonName		= supplied
emailAddress		= optional
```

#### req

```
####################################################################
[ req ]
default_bits		= 2048
default_keyfile 	= privkey.pem
distinguished_name	= req_distinguished_name
attributes		= req_attributes
x509_extensions	= v3_ca	# The extensions to add to the self signed cert

# Passwords for private keys if not present they will be prompted for
# input_password = secret
# output_password = secret

# This sets a mask for permitted string types. There are several options.
# default: PrintableString, T61String, BMPString.
# pkix	 : PrintableString, BMPString (PKIX recommendation before 2004)
# utf8only: only UTF8Strings (PKIX recommendation after 2004).
# nombstr : PrintableString, T61String (no BMPStrings or UTF8Strings).
# MASK:XXXX a literal mask value.
# WARNING: ancient versions of Netscape crash on BMPStrings or UTF8Strings.
string_mask = utf8only

# req_extensions = v3_req # The extensions to add to a certificate request

[ req_distinguished_name ]
countryName			= Country Name (2 letter code)
countryName_default		= AU
countryName_min			= 2
countryName_max			= 2

stateOrProvinceName		= State or Province Name (full name)
stateOrProvinceName_default	= Some-State

localityName			= Locality Name (eg, city)

0.organizationName		= Organization Name (eg, company)
0.organizationName_default	= Internet Widgits Pty Ltd

# we can do this but it is not needed normally :-)
#1.organizationName		= Second Organization Name (eg, company)
#1.organizationName_default	= World Wide Web Pty Ltd

organizationalUnitName		= Organizational Unit Name (eg, section)
#organizationalUnitName_default	=

commonName			= Common Name (e.g. server FQDN or YOUR name)
commonName_max			= 64

emailAddress			= Email Address
emailAddress_max		= 64

# SET-ex3			= SET extension number 3

[ req_attributes ]
challengePassword		= A challenge password
challengePassword_min		= 4
challengePassword_max		= 20

unstructuredName		= An optional company name

[ usr_cert ]

# These extensions are added when 'ca' signs a request.

# This goes against PKIX guidelines but some CAs do it and some software
# requires this to avoid interpreting an end user certificate as a CA.

basicConstraints=CA:FALSE

# This is typical in keyUsage for a client certificate.
# keyUsage = nonRepudiation, digitalSignature, keyEncipherment

# PKIX recommendations harmless if included in all certificates.
subjectKeyIdentifier=hash
authorityKeyIdentifier=keyid,issuer

# This stuff is for subjectAltName and issuerAltname.
# Import the email address.
# subjectAltName=email:copy
# An alternative to produce certificates that aren't
# deprecated according to PKIX.
# subjectAltName=email:move

# Copy subject details
# issuerAltName=issuer:copy

# This is required for TSA certificates.
# extendedKeyUsage = critical,timeStamping

[ v3_req ]

# Extensions to add to a certificate request

basicConstraints = CA:FALSE
keyUsage = nonRepudiation, digitalSignature, keyEncipherment

[ v3_ca ]


# Extensions for a typical CA


# PKIX recommendation.

subjectKeyIdentifier=hash

authorityKeyIdentifier=keyid:always,issuer

basicConstraints = critical,CA:true

# Key usage: this is typical for a CA certificate. However since it will
# prevent it being used as an test self-signed certificate it is best
# left out by default.
# keyUsage = cRLSign, keyCertSign

# Include email address in subject alt name: another PKIX recommendation
# subjectAltName=email:copy
# Copy issuer details
# issuerAltName=issuer:copy

# DER hex encoding of an extension: beware experts only!
# obj=DER:02:03
# Where 'obj' is a standard or added object
# You can even override a supported extension:
# basicConstraints= critical, DER:30:03:01:01:FF

[ crl_ext ]

# CRL extensions.
# Only issuerAltName and authorityKeyIdentifier make any sense in a CRL.

# issuerAltName=issuer:copy
authorityKeyIdentifier=keyid:always

[ proxy_cert_ext ]
# These extensions should be added when creating a proxy certificate

# This goes against PKIX guidelines but some CAs do it and some software
# requires this to avoid interpreting an end user certificate as a CA.

basicConstraints=CA:FALSE

# This is typical in keyUsage for a client certificate.
# keyUsage = nonRepudiation, digitalSignature, keyEncipherment

# PKIX recommendations harmless if included in all certificates.
subjectKeyIdentifier=hash
authorityKeyIdentifier=keyid,issuer

# This stuff is for subjectAltName and issuerAltname.
# Import the email address.
# subjectAltName=email:copy
# An alternative to produce certificates that aren't
# deprecated according to PKIX.
# subjectAltName=email:move

# Copy subject details
# issuerAltName=issuer:copy

# This really needs to be in place for it to be a proxy certificate.
proxyCertInfo=critical,language:id-ppl-anyLanguage,pathlen:3,policy:foo

```


#### 参考

1.  https://www.ibm.com/docs/en/hpvs/1.2.x?topic=reference-openssl-configuration-examples
2.  https://www.cnblogs.com/ezgod/p/14271541.html
3.  https://www.ibm.com/docs/en/hpvs/1.2.x?topic=servers-creating-ca-signed-certificates-monitoring-infrastructure
4.  https://node-security.com/posts/openssl-creating-a-ca/
5.  https://github.com/openssl/openssl/blob/master/demos/certs/ca.cnf
6.  https://github.com/openssl/openssl/blob/master/apps/openssl.cnf
7.  https://www.cnblogs.com/ezgod/p/14271541.html




#### 环境
* DEV 开发环境
* FAT 测试环境,相当于alpha环境(功能测试)
* UAT 集成环境,相当于beta环境(回归测试)
* PRO 生产环境


#### 配置

* Java 环境变量 (System.getProperty)
* 系统环境变量 (System.getenv)
* server.properties 文件
   * Window /opt/settings/server.properties
   * Linux /opt/settings/server.properties
* META-INF/app.properties


##### Java 环境变量

变量名 | 说明
---|---
env | 所属环境
app.id | 应用ID
apollo.accesskey.secret| 访问秘钥
apollo.configService | 配置服务，多个逗号分隔
apollo.cacheDir | 缓存根目录
apollo.cluster | 集群，默认值default
apollo.connectTimeout| 连接超时时间，默认 1000（毫秒）
apollo.refreshInterval| 刷新时间， 默认 5 （分钟）
apollo.readTimeout | 默认 5000 （毫秒）
apollo.meta| 元数据中心地址
apollo.cluster | 集群，默认default
apollo.loadConfigQPS | 每秒几次，默认 2
apollo.longPollQPS | 每秒几次，默认 2
apollo.configCacheSize | 最大缓存key个数，默认 500
apollo.longPollingInitialDelayInMills | 默认 2000（毫秒）
apollo.autoUpdateInjectedSpringPropertie | 自动更新spring propertie，默认true
apollo.property.order.enable| 属性排序，默认false
idc| Data Center
local_meta|
dev_meta|
fat_meta|
uat_meta|
lpt_meta|
pro_meta|



##### 系统环境变


变量名 | 说明
---|---
ENV | 所属环境
APP_ID | 应用ID
APOLLO_ACCESSKEY_SECRET| 访问秘钥
APOLLO_CONFIGSERVICE| 配置服务，多个逗号分隔
APOLLO_CACHEDIR | 缓存根目录
APOLLO_META| 元数据中心地址
IDC| Data Center
LOCAL_META|
DEV_META|
FAT_META|
UAT_META|
LPT_META|
PRO_META|



##### server.properties 文件

变量名 | 说明
---|---
env | 所属环境
apollo.configService | 配置服务，多个逗号分隔
apollo.cacheDir | 缓存根目录
apollo.meta| 元数据中心地址
idc| Data Center

##### META-INF/app.properties

变量名 | 说明
---|---
app.id | 应用ID
apollo.accesskey.secret| 访问秘钥
apollo.configService | 配置服务，多个逗号分隔
apollo.meta| 元数据中心地址
apollo.cacheDir | 缓存根目录
apollo.autoUpdateInjectedSpringPropertie | 自动更新spring propertie，默认true
apollo.property.order.enable| 属性排序，默认false



####  spring boot 配置

```
app.id=
apollo.meta=
apollo.cluster=
apollo.cacheDir=
apollo.accesskey.secret=

# Configuration to keep properties order as same as line order in .yml/.yaml/.properties file.
apollo.property.order.enable=false
apollo.bootstrap.enabled= true

# EnvironmentPostProcessor should not be triggered if you don't want Apollo Loading before Logging System Initialization
apollo.bootstrap.eagerLoad.enabled= true

# 需要加载namespces
apollo.bootstrap.namespaces= application,application-dev
```


#### 本地配置文件(apollo.cacheDir)

本地配置目录位于：

**Mac/Linux:** /opt/data/{appId}/config-cache

**Windows:** C:\opt\data\{appId}\config-cache


文件名：

{appId}+{cluster}+{namespace}.properties


#### apollo-env.properties

文件位置

* user.dir 目录
   * config/
   * ./
* classpath:/


内容

```
local.meta=
dev.meta=
fat.meta=
uat.meta=
lpt.meta=
pro.meta
```



### mysql 5.7 下载安装

```bash
# 下载 mysql Yum Repository rpm 文件
wget -i -c http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm

# 安装  mysql Yum Repository rmp
yum install mysql57-community-release-el7-10.noarch.rpm

# 查找安装包名称
yum search mysql

# 安装mysql
# Error: Unable to find a match: mysql-community-server
# 先执行 yum module disable mysql，然后再执行yum -y install mysql-community-server
yum install mysql-community-server
```

### 初始

```
/usr/sbin/mysqld --initialize --user=mysql --lower-case-table-names=1 --defaults-file=/etc/mysql/my.cnf
```

### 启动参数配置

```yaml
[client]
port	= 16300
socket	= /var/lib/mysql/mysql.sock

[mysqld]
# 关闭 密码强度校验 
validate_password = off
port	= 16300
skip-extenal-locking
socket	= /var/lib/mysql/mysql.sock
key_buffer_size	=	16M
max_allowed_packet	=4M
log-error=/var/log/mysqld.log
```

### 启动或重启

```bash

# 启动
service mysqld start
# 重启
service mysqld restart

systemctl start  mysqld.service

systemctl status  mysqld.service

# 调用 mysql.server，默认使用/etc/my.cnf配置文，调用 mysqld_safe

mysql.server start
mysql.server stop

# mysqld_safe，调用mysqld_safe的时候要把-datadir、-pid-file，调用mysqld

mysqld_safe --defaults-file=file_name --port=port_num

# mysqld

mysqld --daemonize --pid-file=/var/run/mysqld/mysqld.pid


```

### 重置root账户密码
root 初始密码 会在 错误日志或者console 中打印出来。
```bash
 # 用初始密码登录
 mysql -uroot -p
 
 # 修改root 密码
 ALTER USER 'root'@'localhost' IDENTIFIED BY 'MyNewPass4!';
 
 # 修改root 密码
 SET PASSWORD = PASSWORD('root-123.');
```

### 用户创建和授权
```bash
# 创建用户
# 指定host 时，localhost 和 127.0.0.1 不太一样
create user 'username'@'host' identified by 'password'

# 登录权限
grant usage on *.* to 'username'@'host';

# 授权
grant select,delete,update,create,drop,references on <db>.<table> to 'username'@'host';
```

### 参考文档

[mysql 安装说明] https://dev.mysql.com/doc/mysql-yum-repo-quick-guide/en/#repo-qg-yum-installing
[mysql 配置说明] https://dev.mysql.com/doc/refman/5.7/en/server-configuration-defaults.html
[主从配置] https://dev.mysql.com/doc/refman/5.7/en/replication.html

### 资源下载
[mysql 5.7 Yum Repository rpm] http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm


Form Designer V2

Http和Https和SSL工作原理

软件架构-C4模型

编程范式-浅谈

跨源资源共享（Cross-Origin Resource Sharing，CORS）

Java 序列化原理

angular中混用vue的解决方案

自签名证书

Apollo 配置说明

Mysql5.7 安装手册