README 文档更新；websocket可以连上了

2023-03-22 15:01:41 +08:00
parent 02daa81924
commit 0253a8b750
12 changed files with 533 additions and 405 deletions
--- a/README.md
+++ b/README.md
@@ -32,31 +32,11 @@



-## 使用技术栈
-
-项目开发环境：Windows 11 / Ubuntu Desktop 22.04 LTS、OpenJDK 11、MySQL 8.0.12、Node 14.18.0、Git（暂定）
-
-项目部署环境：Linux、MySQL 8.0.x、nacos（暂定）
-
-| 板块     | 技术栈                                                       | 开发工具                                                     | 依赖管理    | 备注 |
-| -------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ----------- | ---- |
-| 前端     | Vue 3（JavaScript框架）、Element Plus（UI组件库）            | VS Code（代码编辑器）                                        | npm 8.19.2  | 暂定 |
-| 后端     | Java 11（开发语言）、SpringCloud（微服务）、nacos-server-2.1.2（服务注册与发现）、Redis（缓存） | Intellij IDEA Ultimate（集成开发环境）、<br />Postman（接口测试） | Maven 3.6.3 |      |
-| 小程序端 | Taro 3.x（小程序跨端解决方案）、Vue 3（JavaScript框架）      | VS Code（代码编辑器）、<br />微信开发者工具（微信小程序打包工具）、<br />小程序开发工具（支付宝小程序打包工具） | npm 8.19.2  |      |
-| 门禁端   | Electron（跨平台桌面GUI应用开发）、Nodejs（JavaScript 运行时环境） | VS Code（代码编辑器）                                        | npm 8.19.2  |      |
-| 数据库   | MySQL 8.0.12（数据存储）                                     | Navicat                                                      | -           |      |
-
-
-
-## 数据库设计
+## 数据库字典

 > 微服务：一个服务对应一个数据库，同一个信息可能存在不同的数据库

-用户表
-
-人员进出日志表
-
-体温上报表
+TODO



@@ -83,188 +63,44 @@

 ### 一些说明

-微信小程序支付功能如果没有微信支付商户号无法开发&测试，我没有商户号，所以微信小程序的支付功能没有做兼容。
-
-支付宝小程序在沙箱环境下，可以测试完整的支付流程，所以支付宝小程序的开发全部在沙箱环境下进行（没有在线上支付宝环境测试过）。
+微信小程序支付功能如果没有微信支付商户号无法开发&测试，我没有商户号，所以微信小程序的支付功能是假的支付。



-## 启动项目
+## 环境配置（使用技术栈）

-### Step0. 启动前的准备
+### 安装运行环境

-#### 1.安装运行环境
+项目运行需要如下环境。[检查环境是否安装成功及国内镜像源配置](./docs/EnvCheck.md)

-##### 概览
-
-需要准备如下项目运行环境
-
-代码管理：[Git](https://git-scm.com/download)
-
-前端：[**Nodejs**](https://nodejs.org/zh-cn/)，**npm**（安装node时会自带npm），[**Taro CLI**](https://taro-docs.jd.com/docs/GETTING-STARTED)，Vue 3[ ](https://cn.vuejs.org/guide/quick-start.html)
-
-后端：[**OpenJDK 11**](https://jdk.java.net/java-se-ri/11)、[**Maven**](https://maven.apache.org/download.cgi)（需要配置JDK、Maven环境变量及Maven国内镜像源），[**nacos**](https://github.com/alibaba/nacos/releases/tag/2.1.2)
-
-数据库：[**MySQL 8.0.x**](https://downloads.mysql.com/archives/community/)、[Navicat](http://www.navicat.com.cn/products/navicat-premium)（需要激活，可使用其他数据库管理工具代替）
-
-小程序端：[**Taro**](https://taro-docs.jd.com/docs/GETTING-STARTED)
-
-门禁端：[**Electron**](https://www.electronjs.org/)，[**cnpm**](https://npmmirror.com/)
-
-开发工具：[VSCode](https://code.visualstudio.com/#alt-downloads)（建议安装扩展：[EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)；[Vue Language Features (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.volar)）、[IDEA Ultimate](https://www.jetbrains.com/zh-cn/idea/download/)（需要激活）、[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)、[小程序开发工具](https://opendocs.alipay.com/mini/ide/download)（需要安装 `沙箱环境切换插件` 扩展并重启工具）
-
-手机应用：[微信](https://weixin.qq.com/)（用于测试微信小程序）、[支付宝客户端沙箱版](https://open.alipay.com/develop/sandbox/tool/alipayclint)（用于测试支付宝小程序）
-
-接口测试工具：[Postman](https://www.postman.com/downloads/)
-
-> 如果希望查看环境变量是否配置成功，可以使用以下命令：
->
-> （下面以 Windows 下命令说明，Linux 系统下 `echo %变量名%` 需要改成 `echo $变量名`）
->
-> ```bash
-> echo %PATH%
-> # 您会看到以;分隔的很多路径，其中应该包括：
-> # JDK 所在文件夹下的 bin 目录：...\openjdk-11\bin
-> # Maven 所在文件夹下的 bin 目录：...\apache-maven-3.6.3\bin
->
-> echo %JAVA_HOME%
-> # 您会看到 JDK 所在文件夹
->
-> echo %MAVEN_HOME%
-> # 您会看到 Maven 所在文件夹
-> ```
->
-> 如果希望查看环境是否安装成功或安装的环境版本，可以使用以下命令：
->
-> ```bash
-> # 查看 Git 版本
-> git --version
-> # 您应该看到类似如下输出👇
-> # git version 2.35.1.windows.2
->
-> # 查看 MySQL 版本（如果 MySQL 的 bin 目录没有配在环境变量中，则需要先 cd 切换到 bin 目录下）
-> mysql --version
-> # 您应该看到类似如下输出👇
-> # mysql  Ver 8.0.12 for Win64 on x86_64 (MySQL Community Server - GPL)
->
-> # 查看 JDK 版本
-> java -version
-> # 您应该看到类似如下输出👇
-> # openjdk version "11" 2018-09-25
-> # OpenJDK Runtime Environment 18.9 (build 11+28)
-> # OpenJDK 64-Bit Server VM 18.9 (build 11+28, mixed mode)
->
-> # 查看 Maven 版本
-> mvn -v
-> # 您应该看到类似如下输出👇
-> # Apache Maven 3.6.3 (cecedd343002696d0abb50b32b541b8a6ba2883f)
-> # Maven home: xxxxxx\apache-maven-3.6.3\bin\..
-> # Java version: 11, vendor: Oracle Corporation, runtime: xxxxxx\openjdk-11
-> # Default locale: zh_CN, platform encoding: GBK
-> # OS name: "windows 10", version: "10.0", arch: "amd64", family: "windows"
->
-> # 查看 node 版本
-> node -v
-> # 您应该看到类似如下输出👇
-> # v14.18.0
->
-> # 查看 npm 版本
-> npm -v
-> # 您应该看到类似如下输出👇
-> # 8.19.2
->
-> # 查看 cnpm 版本
-> cnpm -v
-> # 您应该看到类似如下输出👇
-> # cnpm@8.4.0 (C:\Users\Coz\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
-> # npm@8.19.2 (C:\Users\Coz\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\index.js)
-> # node@14.18.0 (D:\Program\Development\Environment\nodejs\node.exe)
-> # npminstall@6.5.2 (C:\Users\Coz\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
-> # prefix=C:\Users\Coz\AppData\Roaming\npm
-> # win32 x64 10.0.22621
-> # registry=https://registry.npmmirror.com
-> ```
->
-> Maven 镜像源配置（下面以阿里云镜像为例，其他镜像可自行替换）：
->
-> 用编辑器打开 maven 目录下 conf/settings.xml 文件，找到如下位置，将 `<mirror></mirror>` 部分粘贴进去：
->
-> ```xml
->   <!-- mirrors
->    | This is a list of mirrors to be used in downloading artifacts from remote repositories.
->    |
->    | It works like this: a POM may declare a repository to use in resolving certain artifacts.
->    | However, this repository may have problems with heavy traffic at times, so people have mirrored
->    | it to several places.
->    |
->    | That repository definition will have a unique id, so we can create a mirror reference for that
->    | repository, to be used as an alternate download site. The mirror site will be the preferred
->    | server for that repository.
->    |-->
->   <mirrors>
->     <!-- mirror
->      | Specifies a repository mirror site to use instead of a given repository. The repository that
->      | this mirror serves has an ID that matches the mirrorOf element of this mirror. IDs are used
->      | for inheritance and direct lookup purposes, and must be unique across the set of mirrors.
->      |
->     <mirror>
->       <id>mirrorId</id>
->       <mirrorOf>repositoryId</mirrorOf>
->       <name>Human Readable Name for this Mirror.</name>
->       <url>http://my.repository.com/repo/path</url>
->     </mirror>
->      -->
->     <!-- ######## 👇👇👇将以下部分粘贴进去👇👇👇 ######## -->
->     <mirror>
->       <id>alimaven</id>
->       <name>aliyun maven</name>
->       <url>https://maven.aliyun.com/repository/public</url>
->       <mirrorOf>central</mirrorOf>
->     </mirror>
->     <!-- ######## 👆👆👆将以上部分粘贴进去👆👆👆 ######## -->
->   </mirrors>
-> ```
->
-> npm 镜像源配置（下面以淘宝镜像为例，其他镜像可自行替换）：
->
-> ```bash
-> # 配置镜像源
-> npm config set registry https://registry.npm.taobao.org/
-> # 配置后可通过以下命令查看是否配置成功
-> npm config get registry
-> ```
->
+| 类型       | 项目        | 名称及版本                                                   | 部署环境  | 说明                                                         |
+| ---------- | ----------- | ------------------------------------------------------------ | --------- | ------------------------------------------------------------ |
+| 系统       |             | Windows 10/11 或<br />Ubuntu Desktop 22.04 LTS               | 开发      |                                                              |
+| 系统       |             | Ubuntu Server 22.04 LTS                                      | 生产      |                                                              |
+| 环境       | 代码管理    | [Git](https://git-scm.com/download)                          | 开发      | 代码管理                                                     |
+| 环境       | 前端 门禁端 | [**Node.js 14.18.0**](https://nodejs.org/zh-cn/)             | 开发 生产 | 一个开源、跨平台的 JavaScript 运行时环境                     |
+| 依赖管理   | 前端 门禁端 | **npm 9.5.1**                                                | 开发      | 安装 node 时会自带 npm                                       |
+| 环境       | 前端        | [Vue 3](https://cn.vuejs.org/guide/quick-start.html)         | 开发      | 渐进式 JavaScript 框架                                       |
+| UI 组件库  | 前端        | [Element Plus](https://element-plus.gitee.io/zh-CN/)         | 开发      | 一个Vue 3 UI 框架                                            |
+| 环境       | 门禁端      | [**cnpm**](https://npmmirror.com/)                           | 开发      |                                                              |
+| 环境       | 门禁端      | [**Electron**](https://www.electronjs.org/)                  | 开发      | 跨平台桌面 GUI 应用开发                                      |
+| 环境       | 后端        | [**OpenJDK 11**](https://jdk.java.net/java-se-ri/11)         | 开发 生产 | **需要配置 JDK 环境变量**；Java 11                           |
+| 依赖管理   | 后端        | [**Maven 3.6.3**](https://maven.apache.org/download.cgi)     | 开发 生产 | **需要配置 Maven 环境变量、国内镜像源**                      |
+| 微服务框架 | 后端        | SpringCloud                                                  | 开发 生产 | 微服务                                                       |
+| 环境       | 后端        | [**nacos server 2.2.0**](https://github.com/alibaba/nacos/releases/tag/2.2.0) | 开发 生产 | 微服务注册中心（服务注册与发现）                             |
+| 环境       | 服务端      | Nginx                                                        | 开发 生产 | 可选                                                         |
+| 环境       | 数据库      | [**MySQL 8.0.x**](https://downloads.mysql.com/archives/community/) | 开发 生产 | 数据存储                                                     |
+| 管理工具   | 数据库      | [Navicat](http://www.navicat.com.cn/products/navicat-premium) | 开发      | 可选；需要激活，可使用其他数据库管理工具代替                 |
+| 开发工具   | 小程序端    | [微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html) | 开发      | 微信小程序打包工具（小程序端为原生开发）                     |
+| 开发工具   | 前端 后端   | [VSCode](https://code.visualstudio.com/#alt-downloads)       | 开发      | 代码编辑器。建议安装扩展：<br />[EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)；<br />[Vue Language Features (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) |
+| 开发工具   | 后端        | [Intellij IDEA Ultimate](https://www.jetbrains.com/zh-cn/idea/download/) | 开发      | 集成开发环境。需要激活                                       |
+| 小程序测试 | 手机应用    | [微信](https://weixin.qq.com/)                               | 开发      | 用于测试微信小程序                                           |
+| 接口测试   | 接口测试    | [Postman](https://www.postman.com/downloads/)                | 开发      | 接口测试工具                                                 |
+|            | 后端        | Redis                                                        |           | 缓存（待定）                                                 |



-##### cnpm
-
-```bash
-# electron 需要使用 cnpm 安装依赖
-npm install -g cnpm --registry=https://registry.npmmirror.com
-```
-
-
-
-##### Taro
-
-```bash
-npm install -g @tarojs/cli
-```
-
-
-
-##### Electron
-
-```bash
-cd client-entrance-guard
-cnpm install --save-dev electron
-cnpm install --save-dev @electron-forge/cli 
-```
-
-
-
-#### 2.克隆项目代码到本地
+### 克隆项目代码到本地

 ```bash
 # 克隆项目代码到本地
@@ -278,32 +114,43 @@ cd epp



-#### 3.数据库
+### 项目配置
+
+#### 导入数据库

 导入数据库SQL（SQL文件在 `database` 目录下）



-#### 4.后端依赖
+#### 安装依赖
+
+代码克隆下来后，第一次需要安装依赖

 ```bash
+# ############
+# 后端依赖
+# ############
 # 进入 backend 目录
 cd backend
 mvn clean install
 # 回到项目根目录下
 cd ../
-```

+# ############
+# 门禁端依赖
+# ############
+# Electron
+cd client-entrance-guard
+cnpm install
+# 回到项目根目录下
+cd ../

-
-#### 5.前端依赖
-
-代码克隆下来后，第一次需要安装依赖
-
-```bash
+# ############
+# 前端依赖
+# ############
 # 进入 frontend 目录
 cd frontend
-# 建议使用 cnpm 安装依赖，如果没有安装 cnpm，可以通过 npm i cnpm进行安装
+# 建议使用 cnpm 安装依赖，如果没有安装 cnpm，可以通过 npm i cnpm 进行安装
 cnpm install
 # npm install --legacy-peer-deps
 # 回到项目根目录下
@@ -312,28 +159,20 @@ cd ../



-#### 6.小程序依赖
-
-```bash
-# 进入 miniprogram 目录
-cd miniprogram
-npm install
-# 回到项目根目录下
-cd ../
-```
-
-
-
-#### 7.小程序配置
+#### 小程序配置 & 打包

 ##### 配置业务域名

-1.修改 `miniprogram/src/app.js` 文件
+1.修改 `weixin-miniprogram/app.js` 文件

 ```javascript
-App.use(setGlobalDataPlugin, {
+// app.js
+App({
+  ...
  globalData: {
-    baseUrl: "⚠此处修改为你自己的后端地址。注意需要https://开头，最后不带/",
+    ...
+    baseUrl: "⚠此处修改为你的 Api 请求域名(不带最后的/)",
+    ...
  }
 })
 ```
@@ -342,9 +181,6 @@ App.use(setGlobalDataPlugin, {

 - 小程序：在[微信小程序后台](https://mp.weixin.qq.com/) - 左侧最下方**开发** - **开发管理** - 右侧上方**开发设置** - **服务器域名** 添加 `https://` 开头的**request合法域名**
 - 小程序测试号：在[微信小程序后台](https://mp.weixin.qq.com/) - **服务器域名** 添加 `https://` 开头的**request合法域名**（注意不是业务域名）
- 支付宝沙箱应用：在[支付宝开放平台](https://open.alipay.com/develop/sandbox/app) - 左侧**沙箱应用** - **服务端域名白名单** 添加 `https://` 开头的**httpRequest接口请求域名白名单**
-
-

 ##### 配置微信小程序appid

@@ -354,7 +190,7 @@ App.use(setGlobalDataPlugin, {
 >
 > 如果已经注册过小程序，可以在此处微信扫码登录：https://mp.weixin.qq.com/ ，然后左侧菜单最后一项【设置】，滑到最下面【帐号信息】，<u>AppID(小程序ID)</u>一栏就是appid

-修改 `miniprogram/project.config.json` 文件
+修改 `weixin-miniprogram/project.config.json` 文件

 ```json
 {
@@ -364,48 +200,34 @@ App.use(setGlobalDataPlugin, {
 }
 ```

+##### 设置小程序最低基础库

+> 参考：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html

-#### 8.小程序打包
+设置小程序最低基础库为 2.21.3 或更高

 ##### 打包微信小程序

-```bash
-cd miniprogram
-npm run build:weapp
+打开**微信开发者工具**，小程序目录选择 `weixin-miniprogram` 目录，按照正常的小程序发布流程进行发布即可。发布前记得测试小程序各功能是否正常。
+
+
+
+#### 门禁端配置 & 打包
+
+##### 配置业务域名
+
+修改 `client-entrance-guard/html/index.html` 文件
+
+```html
+...
+<body>
+    <iframe src="https://【⚠此处修改为你的 Api 请求域名】/access/index.html?inElectron=true" frameborder="0"></iframe>
+    ...
+</body>
+...
 ```

-打开**微信开发者工具**，小程序目录选择 `miniprogram` 目录
-
-接下来按照正常的小程序发布流程进行发布即可。发布前记得测试小程序各功能是否正常。
-
-##### 打包支付宝小程序
-
-```bash
-cd miniprogram
-npm run build:alipay
-```
-
-打开**小程序开发者工具**，小程序目录选择 `miniprogram/dist` 目录
-
-**重点：点开右上角【详情】，勾选【小程序配置】下的 `启用小程序基础库2.0构建` 和 `编译node_modules模块（ES6转ES5）`。**
-
-需要注意的是，支付宝小程序打包很慢，需要等比较长的时间。
-
-接下来按照正常的小程序发布流程进行发布即可。发布前记得测试小程序各功能是否正常。
-
-
-
-#### 9.门禁端依赖
-
-```bash
-cd client-entrance-guard
-cnpm install
-```
-
-
-
-#### 10.门禁端打包
+##### 打包

 > 参考文档：https://www.electronjs.org/docs/latest/tutorial/tutorial-packaging

@@ -420,87 +242,66 @@ npm run package



-### Step1. 启动项目后端
+#### 后端配置

-#### 1.启动nacos
+##### 配置业务域名

-> standalone代表着单机模式运行，非集群模式
->
+TODO

-```bash
-cd nacos/bin
-# Windows
-startup.cmd -m standalone
-# Linux/Unix/Mac
-# sh startup.sh -m standalone
-# bash startup.sh -m standalone
-```
-
-Nacos后台地址为：http://localhost:8848/nacos/index.html，默认用户名密码都是：**nacos**
-
-#### 2.启动MySQL
-
-
-
-#### 3.启动各个微服务
+修改 `backend\microservice-provider-access-8002\src\main\resources\static\access\assets\js\websocket.js` 文件

 ```
-# 启动 UserProvider
-# 启动 Gateway
-# ......
+window.wsUrl = 'ws://127.0.0.1:80/access/websocket/1';
 ```



-### Step2. 启动项目前端
+#### nginx 代理配置（可选）

-#### 1.启动后台管理员项目
+根据自己的实际情况来改

-之后在 `frontend` 目录下运行即可
+```conf
+server
+{
+    server_name epp.only4.work; # ⚠ Api 业务域名
+    listen 80;
+    listen 443 ssl http2;

-```bash
-npm run serve
+    # 核心配置
+    location / {
+        proxy_pass http://127.0.0.1:5203; # ⚠ Gateway 微服务项目本地运行的端口
+
+        # websocket
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "Upgrade";
+    }
+
+    # ⚠ 日志相关，根据自己实际情况配置
+    access_log  /dev/null;
+    error_log  /dev/null;
+}
 ```

-#### 2.小程序打包
-
-待更新



-### Step3. 启动项目门禁端

-编译并运行client-entrance-guard目录下electron项目即可
+## 启动项目

+### Step0: [开发] 启动项目开发环境

+- 启动开发工具：IDEA Ultimate、VSCode、微信开发者工具

-## 停止项目
-
-### Step1. 停止各个微服务
-
-
-
-### Step2. 停止nacos
-
-
-
-### Step3. 停止MySQL
-
-
-
-## 启动项目开发环境
-
- 启动开发工具：IDEA Ultimate、VSCode、微信开发者工具、小程序开发工具
-
- 拉取项目仓库最新代码&切换到对应分支
+- 拉取项目仓库最新代码 & 切换到对应分支

 - 启动数据库及可视化工具：MySQL、Navicat

 - 启动后端微服务注册中心：nacos

- 在本地启动Gateway及各个微服务项目
+- 在本地启动 Gateway 及各个微服务项目

- 在服务器端启动内网穿透Server端，在本地启动内网穿透Client端
+- 在服务器端启动内网穿透 Server 端，在本地启动内网穿透 Client 端

  ```bash
  cd ./intranet-penetration/bin
@@ -512,92 +313,78 @@ npm run serve

 - 启动接口测试工具：Postman

- `miniprogram` 目录下启动命令行：`npm run dev:alipay`(支付宝小程序)、`npm run dev:weapp`(微信小程序)
+- 本地运行门禁端：`client-entrance-guard` 目录下启动命令行：`npm run start`

-  > 因为支付宝小程序和微信小程序输出都在dist目录下，所以不可以同时开发调试

- `client-entrance-guard` 目录下启动命令行：`npm run start`(本地运行门禁端)
+
+### Step1. 启动项目后端
+
+#### [部署&开发] 启动 nacos
+
+> standalone 代表着单机模式运行，非集群模式
+>
+
+```bash
+cd nacos/bin
+# Windows
+startup.cmd -m standalone
+# Linux/Unix/Mac
+# sh startup.sh -m standalone
+# bash startup.sh -m standalone
+```
+
+Nacos 后台地址为：http://localhost:8848/nacos/index.html，默认用户名密码都是：**nacos**
+
+#### [部署&开发] 启动 MySQL
+
+略
+
+#### [部署&开发] 启动各个微服务
+
+开发：直接在 IDEA 中启动即可
+
+部署：
+
+```
+# 启动 UserProvider
+# 启动 Gateway
+# ......
+```
+
+#### [可选] 启动 nginx
+
+略
+
+
+
+### Step2. 启动项目前端
+
+#### [开发] 启动后台管理项目
+
+在 `frontend` 目录下运行
+
+```bash
+npm run serve
+```
+
+> ps: 生产环境直接打包为静态文件部署
+
+
+
+### Step3. 启动项目门禁端
+
+编译并运行 `client-entrance-guard` 目录下 `electron` 项目即可
+
+
+
+## 停止项目
+
+这个应该不用多说吧



 ## 相关链接

-### 后端
-
-#### JDK
-
-OpenJDK：https://openjdk.org/
-
-Java SE 11：https://jdk.java.net/java-se-ri/11
-
-#### Spring
-
-Spring Cloud官网：https://spring.io/projects/spring-cloud
-
-Spring Cloud Alibaba GitHub repo：https://github.com/alibaba/spring-cloud-alibaba
-
-Spring initializr：https://start.spring.io/
-
-https://start.spring.io/#!type=maven-project&language=java&platformVersion=2.7.5&packaging=jar&jvmVersion=11&groupId=com.cxyxiaomo&artifactId=entrance&name=Epidemic%20prevention%20platform&description=&packageName=com.cxyxiaomo.entrance&dependencies=lombok,mysql,mybatis
-
-##### Gateway
-
-B站教程：https://www.bilibili.com/video/BV1JB4y1F7aL
-
-#### Maven
-
-MVN REPOSITORY：https://mvnrepository.com/
-
-#### Nacos
-
-Quick Start：https://nacos.io/zh-cn/docs/v2/quickstart/quick-start.html
-
-
-
-### 前端
-
-#### Element Plus
-
-Element Plus官网：https://element-plus.gitee.io/zh-CN/
-
-安装：https://element-plus.gitee.io/zh-CN/guide/installation.html
-
-#### Ant Design
-
-Ant Design of Vue：https://www.antdv.com/docs/vue/introduce
-
-
-
-### 小程序端
-
-#### Taro
-
-Taro：https://docs.taro.zone/docs
-
-#### 微信小程序
-
-开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/
-
-#### 支付宝小程序
-
-开发文档：https://opendocs.alipay.com/mini/developer/getting-started
-
-支付宝开放平台：https://open.alipay.com/develop/manage
-
-支付宝沙箱应用：https://open.alipay.com/develop/sandbox/app
-
-支付宝沙箱应用 - 文档：https://opendocs.alipay.com/common/02kkv7
-
-
-
-### Electron
-
-开发文档：https://www.electronjs.org/docs/latest/tutorial/quick-start
-
-Electron Forge打包时的一些常见问题：https://blog.csdn.net/qq_49700358/article/details/126531158
-
-打包：https://www.electronjs.org/docs/latest/tutorial/tutorial-packaging
-
-#### cnpm
-
-npmmirror 中国镜像站：https://npmmirror.com/
+- [相关文档链接](./docs/RelatedLinks.md)
+- [遇到的问题及对应的解决方案](./docs/Solutions.md)
+- 【TODO】[参考](./docs/Reference.md)、[开发步骤记录](./docs/开发步骤记录.md)、[功能拆分](./docs/功能拆分.md)
--- a/TODOs.md
+++ b/TODOs.md
@@ -1,3 +1,9 @@
+# 门禁端网页
+
+https://epp.only4.work/access/index.html
+
+
+
 # 启动远程 Nacos

 > /www/wwwserv/epp/nacos/conf/application.properties port 改为 8488
--- a/backend/microservice-gateway/src/main/resources/application.yml
+++ b/backend/microservice-gateway/src/main/resources/application.yml
@@ -25,6 +25,10 @@ spring:
          predicates:
            - Path=/access/**
            - Method=GET,POST
+        - id: access-websocket
+          uri: lb:ws://microservice-provider-access
+          predicates:
+            - Path=/access/websocket/**
        - id: shop
          uri: lb://microservice-provider-shop
          predicates:
--- a/backend/microservice-provider-access-8002/src/main/java/com/cxyxiaomo/epp/access/controller/WebSocketServer.java
+++ b/backend/microservice-provider-access-8002/src/main/java/com/cxyxiaomo/epp/access/controller/WebSocketServer.java
@@ -10,7 +10,7 @@ import java.io.IOException;
 import java.util.concurrent.ConcurrentHashMap;
 import java.util.concurrent.CopyOnWriteArraySet;

-@ServerEndpoint("/websocket/{userId}")
+@ServerEndpoint("/access/websocket/{userId}")
@Component
@Slf4j
 public class WebSocketServer {
--- a/backend/microservice-provider-access-8002/src/main/resources/static/access/assets/js/websocket.js
+++ b/backend/microservice-provider-access-8002/src/main/resources/static/access/assets/js/websocket.js
@@ -0,0 +1,59 @@
+// window.wsUrl = 'ws://epp.only4.work/access/websocket/1';
+window.wsUrl = 'ws://127.0.0.1:80/access/websocket/1';
+window.wsUrl = 'ws://127.0.0.1:8002/access/websocket/1';
+// window.wsUrl = 'ws://127.0.0.1:8000';
+window.ws = null;
+
+(function () {
+    if (!'WebSocket' in window) {
+        alert("不支持当前浏览器，请升级浏览器。")
+        return
+    }
+
+    function createConn() {
+        // 创建webscoket 对象 地址填入本地ip 端口是在搭建websocket服务器定义的端口
+        const ws = new WebSocket(window.wsUrl)
+        // 执行上面的语句之后，客户端就会与服务器进行连接
+
+        // readyState返回当前实例对象的当前状态
+        /*
+          共有四种状态
+          CONNECTING: 值为0，表示正在连接
+          OPEN:  值为1，表示连接成功，可以通信了
+          CLOSING 值为2， 表示连接正在关闭
+          CLOSED 值为3，表示连接已经关闭了，或者打开连接失败
+        */
+
+        // 实例对象的onopen属性，用于指定连接成功后的回调函数
+        ws.onopen = (res) => {
+            console.log('onopen readyState', ws.readyState)
+            console.log('onopen 连接成功==========>', res)
+        }
+
+        // 实例对象的onmessage属性，用于指定收到服务器数据后的回调函数
+        ws.onmessage = ({data}) => {
+            console.log('onmessage readyState', ws.readyState)
+            // 注意此时的data是json格式的 需要转化下
+            console.log('onmessage 有新消息啦=======>', JSON.parse(data))
+            // 实例对象的send方法给服务器发送消息
+            ws.send('客户端发送的消息')
+        }
+
+        // 实例对象的onclose属性，用于连接关闭后的回调 函数
+        // 当关闭了服务器后 会走到此回调函数
+        ws.onclose = () => {
+            console.log('onclose readyState', ws.readyState)
+            console.log('onclose websocket连接关闭=======>')
+        }
+
+        // 连接发生错误的回调方法
+        // 如当服务器没有启动 就会走到这个错误回调
+        ws.onerror = (error) => {
+            console.log('onerror readyState', ws.readyState)
+            console.log('onerror 发生错误==========>', error)
+        }
+    }
+
+    createConn()
+
+})()
--- a/backend/microservice-provider-access-8002/src/main/resources/static/access/index.html
+++ b/backend/microservice-provider-access-8002/src/main/resources/static/access/index.html
@@ -50,6 +50,7 @@
    </div>
    <script src="./renderer.js" type="module"></script>
    <script src="./assets/js/setting-panel.js" type="module"></script>
+    <script src="./assets/js/websocket.js"></script>
 </body>

 </html>
--- a/docs/EnvCheck.md
+++ b/docs/EnvCheck.md
@@ -0,0 +1,134 @@
+## 环境安装
+
+### cnpm
+
+```bash
+# electron 需要使用 cnpm 安装依赖
+npm install -g cnpm --registry=https://registry.npmmirror.com
+```
+
+
+
+## 环境变量检查
+
+如果希望查看环境变量是否配置成功，可以使用以下命令：
+
+（下面以 Windows 下命令说明，Linux 系统下 `echo %变量名%` 需要改成 `echo $变量名`）
+
+```bash
+echo %PATH%
+# 您会看到以;分隔的很多路径，其中应该包括：
+# JDK 所在文件夹下的 bin 目录：...\openjdk-11\bin
+# Maven 所在文件夹下的 bin 目录：...\apache-maven-3.6.3\bin
+
+echo %JAVA_HOME%
+# 您会看到 JDK 所在文件夹
+
+echo %MAVEN_HOME%
+# 您会看到 Maven 所在文件夹
+```
+
+如果希望查看环境是否安装成功或安装的环境版本，可以使用以下命令：
+
+```bash
+# 查看 Git 版本
+git --version
+# 您应该看到类似如下输出👇
+# git version 2.35.1.windows.2
+
+# 查看 MySQL 版本（如果 MySQL 的 bin 目录没有配在环境变量中，则需要先 cd 切换到 bin 目录下）
+mysql --version
+# 您应该看到类似如下输出👇
+# mysql  Ver 8.0.12 for Win64 on x86_64 (MySQL Community Server - GPL)
+
+# 查看 JDK 版本
+java -version
+# 您应该看到类似如下输出👇
+# openjdk version "11" 2018-09-25
+# OpenJDK Runtime Environment 18.9 (build 11+28)
+# OpenJDK 64-Bit Server VM 18.9 (build 11+28, mixed mode)
+
+# 查看 Maven 版本
+mvn -v
+# 您应该看到类似如下输出👇
+# Apache Maven 3.6.3 (cecedd343002696d0abb50b32b541b8a6ba2883f)
+# Maven home: xxxxxx\apache-maven-3.6.3\bin\..
+# Java version: 11, vendor: Oracle Corporation, runtime: xxxxxx\openjdk-11
+# Default locale: zh_CN, platform encoding: GBK
+# OS name: "windows 10", version: "10.0", arch: "amd64", family: "windows"
+
+# 查看 node 版本
+node -v
+# 您应该看到类似如下输出👇
+# v14.18.0
+
+# 查看 npm 版本
+npm -v
+# 您应该看到类似如下输出👇
+# 8.19.2
+
+# 查看 cnpm 版本
+cnpm -v
+# 您应该看到类似如下输出👇
+# cnpm@8.4.0 (C:\Users\Coz\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
+# npm@8.19.2 (C:\Users\Coz\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\index.js)
+# node@14.18.0 (D:\Program\Development\Environment\nodejs\node.exe)
+# npminstall@6.5.2 (C:\Users\Coz\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
+# prefix=C:\Users\Coz\AppData\Roaming\npm
+# win32 x64 10.0.22621
+# registry=https://registry.npmmirror.com
+```
+
+
+
+## 配置国内镜像源
+
+Maven 镜像源配置（下面以阿里云镜像为例，其他镜像可自行替换）：
+
+用编辑器打开 maven 目录下 conf/settings.xml 文件，找到如下位置，将 `<mirror></mirror>` 部分粘贴进去：
+
+```xml
+<!-- mirrors
+| This is a list of mirrors to be used in downloading artifacts from remote repositories.
+|
+| It works like this: a POM may declare a repository to use in resolving certain artifacts.
+| However, this repository may have problems with heavy traffic at times, so people have mirrored
+| it to several places.
+|
+| That repository definition will have a unique id, so we can create a mirror reference for that
+| repository, to be used as an alternate download site. The mirror site will be the preferred
+| server for that repository.
+|-->
+<mirrors>
+<!-- mirror
+| Specifies a repository mirror site to use instead of a given repository. The repository that
+| this mirror serves has an ID that matches the mirrorOf element of this mirror. IDs are used
+| for inheritance and direct lookup purposes, and must be unique across the set of mirrors.
+|
+<mirror>
+<id>mirrorId</id>
+<mirrorOf>repositoryId</mirrorOf>
+<name>Human Readable Name for this Mirror.</name>
+<url>http://my.repository.com/repo/path</url>
+</mirror>
+-->
+<!-- ######## 👇👇👇将以下部分粘贴进去👇👇👇 ######## -->
+<mirror>
+<id>alimaven</id>
+<name>aliyun maven</name>
+<url>https://maven.aliyun.com/repository/public</url>
+<mirrorOf>central</mirrorOf>
+</mirror>
+<!-- ######## 👆👆👆将以上部分粘贴进去👆👆👆 ######## -->
+</mirrors>
+```
+
+npm 镜像源配置（下面以淘宝镜像为例，其他镜像可自行替换）：
+
+```bash
+# 配置镜像源
+npm config set registry https://registry.npm.taobao.org/
+# 配置后可通过以下命令查看是否配置成功
+npm config get registry
+```
+
--- a/docs/Others.md
+++ b/docs/Others.md
@@ -1,7 +0,0 @@
-## 其他的一些技术无关内容
-
-系统图标，系统名称
-
-系统登录界面可以展示的一些口号：
-
-数据日更新，问题不过夜
--- a/docs/Reference.md
+++ b/docs/Reference.md
@@ -0,0 +1,34 @@
+小程序：https://github.com/HolyShiftt/school
+
+
+
+可以参考的一些：
+
+（附源码）springboot社区疫情防控管理系统 毕业设计 164621：https://blog.csdn.net/WeiXin_DZbishe/article/details/127091024 （https://blog.csdn.net/Q_3461074420/article/details/127100890）
+
+【原创】基于JavaWeb的社区疫情防控管理系统（疫情防控管理系统毕业设计）：https://blog.csdn.net/qq_59059632/article/details/127080812
+
+基于springboot社区疫情防控管理系统：https://blog.csdn.net/weixin_46437112/article/details/121885311
+
+
+
+疫情防控系统：http://chisc.net/CIOjulebu/dianxinganli/2020-01-31/3883.html
+
+科技防疫——社区疫情防控平台：https://zhuanlan.zhihu.com/p/108992875
+
+【附源码】计算机毕业设计SSM社区疫情防控监管系统：https://blog.csdn.net/bishe409/article/details/127413536
+
+智慧社区防疫管理信息化系统功能清单及价格：https://www.deerpu.cn/soft-1860.html   https://www.deerpu.cn/softPrice-1860.html
+
+网格化社区疫情防控系统建设方案（全国版：云端接入）：http://www.egova.com.cn/web/pdf/%E7%BD%91%E6%A0%BC%E5%8C%96%E7%96%AB%E6%83%85%E9%98%B2%E6%8E%A7%E7%B3%BB%E7%BB%9F%E6%96%B9%E6%A1%88(%E5%85%A8%E5%9B%BD%E7%89%88)-0207.pdf
+
+
+
+基于Java+SpringBoot+vue+elementui社区疫情防控系统详细设计实现：https://blog.51cto.com/u_14304894/5578744
+
+【计算机毕业设计】java ssm社区（小区）疫情防控系统：https://blog.csdn.net/qq_15801219/article/details/124359029
+
+【计算机毕业设计】疫情社区管理系统的设计与实现 （新增-健康打卡）：https://blog.csdn.net/newuserphb/article/details/124490818
+
+基于社区的疫情防控系统的设计与实现：https://wenku.baidu.com/view/e9d96532874769eae009581b6bd97f192279bf18.html
+
--- a/docs/RelatedLinks.md
+++ b/docs/RelatedLinks.md
@@ -0,0 +1,81 @@
+## 相关链接
+
+### 后端
+
+#### JDK
+
+OpenJDK：https://openjdk.org/
+
+Java SE 11：https://jdk.java.net/java-se-ri/11
+
+#### Spring
+
+Spring Cloud官网：https://spring.io/projects/spring-cloud
+
+Spring Cloud Alibaba GitHub repo：https://github.com/alibaba/spring-cloud-alibaba
+
+Spring initializr：https://start.spring.io/
+
+https://start.spring.io/#!type=maven-project&language=java&platformVersion=2.7.5&packaging=jar&jvmVersion=11&groupId=com.cxyxiaomo&artifactId=entrance&name=Epidemic%20prevention%20platform&description=&packageName=com.cxyxiaomo.entrance&dependencies=lombok,mysql,mybatis
+
+##### Gateway
+
+B站教程：https://www.bilibili.com/video/BV1JB4y1F7aL
+
+#### Maven
+
+MVN REPOSITORY：https://mvnrepository.com/
+
+#### Nacos
+
+Quick Start：https://nacos.io/zh-cn/docs/v2/quickstart/quick-start.html
+
+
+
+### 前端
+
+#### Element Plus
+
+Element Plus官网：https://element-plus.gitee.io/zh-CN/
+
+安装：https://element-plus.gitee.io/zh-CN/guide/installation.html
+
+#### Ant Design
+
+Ant Design of Vue：https://www.antdv.com/docs/vue/introduce
+
+
+
+### 小程序端
+
+#### Taro
+
+Taro：https://docs.taro.zone/docs
+
+#### 微信小程序
+
+开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/
+
+#### 支付宝小程序
+
+开发文档：https://opendocs.alipay.com/mini/developer/getting-started
+
+支付宝开放平台：https://open.alipay.com/develop/manage
+
+支付宝沙箱应用：https://open.alipay.com/develop/sandbox/app
+
+支付宝沙箱应用 - 文档：https://opendocs.alipay.com/common/02kkv7
+
+
+
+### Electron
+
+开发文档：https://www.electronjs.org/docs/latest/tutorial/quick-start
+
+Electron Forge打包时的一些常见问题：https://blog.csdn.net/qq_49700358/article/details/126531158
+
+打包：https://www.electronjs.org/docs/latest/tutorial/tutorial-packaging
+
+#### cnpm
+
+npmmirror 中国镜像站：https://npmmirror.com/
--- a/docs/开发步骤记录.md
+++ b/docs/开发步骤记录.md
@@ -1,5 +1,11 @@
 ## 开发步骤记录

+## 文件名大小写敏感
+
+```bash
+git config core.ignorecase false
+```
+
 ### 前端

 #### 初始化Element-plus项目
@@ -50,6 +56,6 @@ vue ui

 ```bash
 cnpm install --save-dev electron
-cnpm install --save-dev @electron-forge/cli 
+cnpm install --save-dev @electron-forge/cli
 ```

--- a/nginx-conf/nginx.conf
+++ b/nginx-conf/nginx.conf
@@ -0,0 +1,23 @@
+server
+{
+    server_name epp.only4.work;
+    listen 80;
+    listen 443 ssl http2;
+
+    location / {
+        proxy_pass http://127.0.0.1:5203;
+
+        # websocket
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "Upgrade";
+    }
+
+    # SSL相关配置
+    ssl_certificate     /www/wwwcert/only4.work/fullchain.crt;
+    ssl_certificate_key /www/wwwcert/only4.work/private.pem;
+    include /www/wwwconf/common/ssl.conf;
+
+    access_log  /dev/null;
+    error_log  /dev/null;
+}