1
0
Code Issues Pull Requests Packages Projects Releases Wiki Activity GitHub Gitee

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

This commit is contained in:
程序员小墨 2023-03-22 15:01:41 +08:00
parent 02daa81924
commit 0253a8b750
12 changed files with 533 additions and 405 deletions

579
README.md
View File

@ -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 3JavaScript框架、Element PlusUI组件库 | 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 3JavaScript框架 | VS Code代码编辑器<br />微信开发者工具(微信小程序打包工具)、<br />小程序开发工具(支付宝小程序打包工具) | npm 8.19.2 | |
| 门禁端 | Electron跨平台桌面GUI应用开发、NodejsJavaScript 运行时环境) | VS Code代码编辑器 | npm 8.19.2 | |
| 数据库 | MySQL 8.0.12(数据存储) | Navicat | - | |
## 数据库设计
> 微服务:一个服务对应一个数据库,同一个信息可能存在不同的数据库 > 微服务:一个服务对应一个数据库,同一个信息可能存在不同的数据库
用户表 TODO
人员进出日志表
体温上报表
@ -83,188 +63,44 @@
### 一些说明 ### 一些说明
微信小程序支付功能如果没有微信支付商户号无法开发&测试,我没有商户号,所以微信小程序的支付功能没有做兼容。 微信小程序支付功能如果没有微信支付商户号无法开发&测试,我没有商户号,所以微信小程序的支付功能是假的支付。
支付宝小程序在沙箱环境下,可以测试完整的支付流程,所以支付宝小程序的开发全部在沙箱环境下进行(没有在线上支付宝环境测试过)。
## 启动项目 ## 环境配置(使用技术栈)
### Step0. 启动前的准备 ### 安装运行环境
#### 1.安装运行环境 项目运行需要如下环境。[检查环境是否安装成功及国内镜像源配置](./docs/EnvCheck.md)
##### 概览 | 类型 | 项目 | 名称及版本 | 部署环境 | 说明 |
| ---------- | ----------- | ------------------------------------------------------------ | --------- | ------------------------------------------------------------ |
需要准备如下项目运行环境 | 系统 | | Windows 10/11 或<br />Ubuntu Desktop 22.04 LTS | 开发 | |
| 系统 | | Ubuntu Server 22.04 LTS | 生产 | |
代码管理:[Git](https://git-scm.com/download) | 环境 | 代码管理 | [Git](https://git-scm.com/download) | 开发 | 代码管理 |
| 环境 | 前端 门禁端 | [**Node.js 14.18.0**](https://nodejs.org/zh-cn/) | 开发 生产 | 一个开源、跨平台的 JavaScript 运行时环境 |
前端:[**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) | 依赖管理 | 前端 门禁端 | **npm 9.5.1** | 开发 | 安装 node 时会自带 npm |
| 环境 | 前端 | [Vue 3](https://cn.vuejs.org/guide/quick-start.html) | 开发 | 渐进式 JavaScript 框架 |
后端:[**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) | UI 组件库 | 前端 | [Element Plus](https://element-plus.gitee.io/zh-CN/) | 开发 | 一个Vue 3 UI 框架 |
| 环境 | 门禁端 | [**cnpm**](https://npmmirror.com/) | 开发 | |
数据库:[**MySQL 8.0.x**](https://downloads.mysql.com/archives/community/)、[Navicat](http://www.navicat.com.cn/products/navicat-premium)(需要激活,可使用其他数据库管理工具代替) | 环境 | 门禁端 | [**Electron**](https://www.electronjs.org/) | 开发 | 跨平台桌面 GUI 应用开发 |
| 环境 | 后端 | [**OpenJDK 11**](https://jdk.java.net/java-se-ri/11) | 开发 生产 | **需要配置 JDK 环境变量**Java 11 |
小程序端:[**Taro**](https://taro-docs.jd.com/docs/GETTING-STARTED) | 依赖管理 | 后端 | [**Maven 3.6.3**](https://maven.apache.org/download.cgi) | 开发 生产 | **需要配置 Maven 环境变量、国内镜像源** |
| 微服务框架 | 后端 | SpringCloud | 开发 生产 | 微服务 |
门禁端:[**Electron**](https://www.electronjs.org/)[**cnpm**](https://npmmirror.com/) | 环境 | 后端 | [**nacos server 2.2.0**](https://github.com/alibaba/nacos/releases/tag/2.2.0) | 开发 生产 | 微服务注册中心(服务注册与发现) |
| 环境 | 服务端 | Nginx | 开发 生产 | 可选 |
开发工具:[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)(需要安装 `沙箱环境切换插件` 扩展并重启工具) | 环境 | 数据库 | [**MySQL 8.0.x**](https://downloads.mysql.com/archives/community/) | 开发 生产 | 数据存储 |
| 管理工具 | 数据库 | [Navicat](http://www.navicat.com.cn/products/navicat-premium) | 开发 | 可选;需要激活,可使用其他数据库管理工具代替 |
手机应用:[微信](https://weixin.qq.com/)(用于测试微信小程序)、[支付宝客户端沙箱版](https://open.alipay.com/develop/sandbox/tool/alipayclint)(用于测试支付宝小程序) | 开发工具 | 小程序端 | [微信开发者工具](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) |
接口测试工具:[Postman](https://www.postman.com/downloads/) | 开发工具 | 后端 | [Intellij IDEA Ultimate](https://www.jetbrains.com/zh-cn/idea/download/) | 开发 | 集成开发环境。需要激活 |
| 小程序测试 | 手机应用 | [微信](https://weixin.qq.com/) | 开发 | 用于测试微信小程序 |
> 如果希望查看环境变量是否配置成功,可以使用以下命令: | 接口测试 | 接口测试 | [Postman](https://www.postman.com/downloads/) | 开发 | 接口测试工具 |
> | | 后端 | Redis | | 缓存(待定) |
> (下面以 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
> ```
>
##### 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 ```bash
# 克隆项目代码到本地 # 克隆项目代码到本地
@ -278,32 +114,43 @@ cd epp
#### 3.数据库 ### 项目配置
#### 导入数据库
导入数据库SQLSQL文件在 `database` 目录下) 导入数据库SQLSQL文件在 `database` 目录下)
#### 4.后端依赖 #### 安装依赖
代码克隆下来后,第一次需要安装依赖
```bash ```bash
# ############
# 后端依赖
# ############
# 进入 backend 目录 # 进入 backend 目录
cd backend cd backend
mvn clean install mvn clean install
# 回到项目根目录下 # 回到项目根目录下
cd ../ cd ../
```
# ############
# 门禁端依赖
# ############
# Electron
cd client-entrance-guard
cnpm install
# 回到项目根目录下
cd ../
# ############
#### 5.前端依赖 # 前端依赖
# ############
代码克隆下来后,第一次需要安装依赖
```bash
# 进入 frontend 目录 # 进入 frontend 目录
cd frontend cd frontend
# 建议使用 cnpm 安装依赖,如果没有安装 cnpm可以通过 npm i cnpm进行安装 # 建议使用 cnpm 安装依赖,如果没有安装 cnpm可以通过 npm i cnpm 进行安装
cnpm install cnpm install
# npm install --legacy-peer-deps # 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 ```javascript
App.use(setGlobalDataPlugin, { // app.js
App({
...
globalData: { 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://mp.weixin.qq.com/) - **服务器域名** 添加 `https://` 开头的**request合法域名**(注意不是业务域名) - 小程序测试号:在[微信小程序后台](https://mp.weixin.qq.com/) - **服务器域名** 添加 `https://` 开头的**request合法域名**(注意不是业务域名)
- 支付宝沙箱应用:在[支付宝开放平台](https://open.alipay.com/develop/sandbox/app) - 左侧**沙箱应用** - **服务端域名白名单** 添加 `https://` 开头的**httpRequest接口请求域名白名单**
##### 配置微信小程序appid ##### 配置微信小程序appid
@ -354,7 +190,7 @@ App.use(setGlobalDataPlugin, {
> >
> 如果已经注册过小程序可以在此处微信扫码登录https://mp.weixin.qq.com/ ,然后左侧菜单最后一项【设置】,滑到最下面【帐号信息】,<u>AppID(小程序ID)</u>一栏就是appid > 如果已经注册过小程序可以在此处微信扫码登录https://mp.weixin.qq.com/ ,然后左侧菜单最后一项【设置】,滑到最下面【帐号信息】,<u>AppID(小程序ID)</u>一栏就是appid
修改 `miniprogram/project.config.json` 文件 修改 `weixin-miniprogram/project.config.json` 文件
```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 打开**微信开发者工具**,小程序目录选择 `weixin-miniprogram` 目录,按照正常的小程序发布流程进行发布即可。发布前记得测试小程序各功能是否正常。
cd miniprogram
npm run build:weapp
#### 门禁端配置 & 打包
##### 配置业务域名
修改 `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 > 参考文档https://www.electronjs.org/docs/latest/tutorial/tutorial-packaging
@ -420,87 +242,66 @@ npm run package
### Step1. 启动项目后端 #### 后端配置
#### 1.启动nacos ##### 配置业务域名
> standalone代表着单机模式运行非集群模式 TODO
>
```bash 修改 `backend\microservice-provider-access-8002\src\main\resources\static\access\assets\js\websocket.js` 文件
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.启动各个微服务
``` ```
# 启动 UserProvider window.wsUrl = 'ws://127.0.0.1:80/access/websocket/1';
# 启动 Gateway
# ......
``` ```
### 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 - 启动数据库及可视化工具MySQL、Navicat
- 启动后端微服务注册中心nacos - 启动后端微服务注册中心nacos
- 在本地启动Gateway及各个微服务项目 - 在本地启动 Gateway 及各个微服务项目
- 在服务器端启动内网穿透Server端在本地启动内网穿透Client端 - 在服务器端启动内网穿透 Server 端,在本地启动内网穿透 Client 端
```bash ```bash
cd ./intranet-penetration/bin cd ./intranet-penetration/bin
@ -512,92 +313,78 @@ npm run serve
- 启动接口测试工具Postman - 启动接口测试工具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` 项目即可
## 停止项目
这个应该不用多说吧
## 相关链接 ## 相关链接
### 后端 - [相关文档链接](./docs/RelatedLinks.md)
- [遇到的问题及对应的解决方案](./docs/Solutions.md)
#### JDK - 【TODO】[参考](./docs/Reference.md)、[开发步骤记录](./docs/开发步骤记录.md)、[功能拆分](./docs/功能拆分.md)
OpenJDKhttps://openjdk.org/
Java SE 11https://jdk.java.net/java-se-ri/11
#### Spring
Spring Cloud官网https://spring.io/projects/spring-cloud
Spring Cloud Alibaba GitHub repohttps://github.com/alibaba/spring-cloud-alibaba
Spring initializrhttps://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 REPOSITORYhttps://mvnrepository.com/
#### Nacos
Quick Starthttps://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 Vuehttps://www.antdv.com/docs/vue/introduce
### 小程序端
#### Taro
Tarohttps://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/

View File

@ -1,3 +1,9 @@
# 门禁端网页
https://epp.only4.work/access/index.html
# 启动远程 Nacos # 启动远程 Nacos
> /www/wwwserv/epp/nacos/conf/application.properties port 改为 8488 > /www/wwwserv/epp/nacos/conf/application.properties port 改为 8488

View File

@ -25,6 +25,10 @@ spring:
predicates: predicates:
- Path=/access/** - Path=/access/**
- Method=GET,POST - Method=GET,POST
- id: access-websocket
uri: lb:ws://microservice-provider-access
predicates:
- Path=/access/websocket/**
- id: shop - id: shop
uri: lb://microservice-provider-shop uri: lb://microservice-provider-shop
predicates: predicates:

View File

@ -10,7 +10,7 @@ import java.io.IOException;
import java.util.concurrent.ConcurrentHashMap; import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.CopyOnWriteArraySet; import java.util.concurrent.CopyOnWriteArraySet;
@ServerEndpoint("/websocket/{userId}") @ServerEndpoint("/access/websocket/{userId}")
@Component @Component
@Slf4j @Slf4j
public class WebSocketServer { public class WebSocketServer {

View File

@ -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()
})()

View File

@ -50,6 +50,7 @@
</div> </div>
<script src="./renderer.js" type="module"></script> <script src="./renderer.js" type="module"></script>
<script src="./assets/js/setting-panel.js" type="module"></script> <script src="./assets/js/setting-panel.js" type="module"></script>
<script src="./assets/js/websocket.js"></script>
</body> </body>
</html> </html>

134
docs/EnvCheck.md Normal file
View File

@ -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
```

View File

@ -1,7 +0,0 @@
## 其他的一些技术无关内容
系统图标,系统名称
系统登录界面可以展示的一些口号:
数据日更新,问题不过夜

34
docs/Reference.md Normal file
View File

@ -0,0 +1,34 @@
小程序https://github.com/HolyShiftt/school
可以参考的一些:
附源码springboot社区疫情防控管理系统 毕业设计 164621https://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

81
docs/RelatedLinks.md Normal file
View File

@ -0,0 +1,81 @@
## 相关链接
### 后端
#### JDK
OpenJDKhttps://openjdk.org/
Java SE 11https://jdk.java.net/java-se-ri/11
#### Spring
Spring Cloud官网https://spring.io/projects/spring-cloud
Spring Cloud Alibaba GitHub repohttps://github.com/alibaba/spring-cloud-alibaba
Spring initializrhttps://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 REPOSITORYhttps://mvnrepository.com/
#### Nacos
Quick Starthttps://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 Vuehttps://www.antdv.com/docs/vue/introduce
### 小程序端
#### Taro
Tarohttps://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/

View File

@ -1,5 +1,11 @@
## 开发步骤记录 ## 开发步骤记录
## 文件名大小写敏感
```bash
git config core.ignorecase false
```
### 前端 ### 前端
#### 初始化Element-plus项目 #### 初始化Element-plus项目
@ -50,6 +56,6 @@ vue ui
```bash ```bash
cnpm install --save-dev electron cnpm install --save-dev electron
cnpm install --save-dev @electron-forge/cli cnpm install --save-dev @electron-forge/cli
``` ```

23
nginx-conf/nginx.conf Normal file
View File

@ -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;
}