From 42e3952b83304c773c71c383663136a647eb7681 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=91=98=E5=B0=8F=E5=A2=A8?=
<2291200076@qq.com>
Date: Mon, 28 Nov 2022 15:22:56 +0800
Subject: [PATCH] =?UTF-8?q?[=E9=97=A8=E7=A6=81=E7=AB=AF]=20=E5=88=9B?=
=?UTF-8?q?=E5=BB=BA=E9=A1=B9=E7=9B=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
README.md | 92 +++++++++++++++++++++-----
client-entrance-guard/.gitignore | 2 +
client-entrance-guard/html/index.html | 19 ++++++
client-entrance-guard/html/renderer.js | 1 +
client-entrance-guard/main.js | 31 +++++++++
client-entrance-guard/package.json | 15 +++++
client-entrance-guard/preload.js | 10 +++
docs/开发步骤记录.md | 9 +++
8 files changed, 161 insertions(+), 18 deletions(-)
create mode 100644 client-entrance-guard/.gitignore
create mode 100644 client-entrance-guard/html/index.html
create mode 100644 client-entrance-guard/html/renderer.js
create mode 100644 client-entrance-guard/main.js
create mode 100644 client-entrance-guard/package.json
create mode 100644 client-entrance-guard/preload.js
diff --git a/README.md b/README.md
index 3f3e006..aa0bd9c 100644
--- a/README.md
+++ b/README.md
@@ -38,12 +38,13 @@
项目部署环境：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（集成开发环境）、
Postman（接口测试） | Maven 3.6.3 | |
-| 小程序 | Taro 3.x（小程序跨端解决方案）、Vue 3（JavaScript框架） | VS Code（代码编辑器）、
微信开发者工具（微信小程序打包工具）、
小程序开发工具（支付宝小程序打包工具） | npm 8.19.2 | |
-| 数据库 | MySQL 8.0.12（数据存储） | Navicat | - | |
+| 板块 | 技术栈 | 开发工具 | 依赖管理 | 备注 |
+| -------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ----------- | ---- |
+| 前端 | Vue 3（JavaScript框架）、Element Plus（UI组件库） | VS Code（代码编辑器） | npm 8.19.2 | 暂定 |
+| 后端 | Java 11（开发语言）、SpringCloud（微服务）、nacos-server-2.1.2（服务注册与发现）、Redis（缓存） | Intellij IDEA Ultimate（集成开发环境）、
Postman（接口测试） | Maven 3.6.3 | |
+| 小程序端 | Taro 3.x（小程序跨端解决方案）、Vue 3（JavaScript框架） | VS Code（代码编辑器）、
微信开发者工具（微信小程序打包工具）、
小程序开发工具（支付宝小程序打包工具） | npm 8.19.2 | |
+| 门禁端 | Electron（跨平台桌面GUI应用开发）、Nodejs（JavaScript 运行时环境） | VS Code（代码编辑器） | npm 8.19.2 | |
+| 数据库 | MySQL 8.0.12（数据存储） | Navicat | - | |
@@ -94,16 +95,22 @@
#### 1.安装运行环境
+##### 概览
+
需要准备如下项目运行环境
代码管理：[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)
+后端：[**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)（用于测试支付宝小程序）
@@ -162,8 +169,20 @@
> # 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 镜像源配置（下面以阿里云镜像为例，其他镜像可自行替换）：
@@ -195,14 +214,14 @@
> http://my.repository.com/repo/path
>
> -->
->
->
-> alimaven
-> aliyun maven
-> https://maven.aliyun.com/repository/public
-> central
->
->
+>
+>
+> alimaven
+> aliyun maven
+> https://maven.aliyun.com/repository/public
+> central
+>
+>
>
> ```
>
@@ -215,7 +234,23 @@
> npm config get registry
> ```
>
->
+
+
+
+##### cnpm
+
+```bash
+# electron 需要使用 cnpm 安装依赖
+npm install -g cnpm --registry=https://registry.npmmirror.com
+```
+
+
+
+##### Taro
+
+```bash
+npm install -g @tarojs/cli
+```
@@ -351,6 +386,15 @@ npm run build:alipay
+#### 9.门禁端依赖
+
+```bash
+cd client-entrance-guard
+cnpm install
+```
+
+
+
### Step1. 启动项目后端
#### 1.启动nacos
@@ -417,6 +461,8 @@ npm run serve
- 启动开发工具：IDEA Ultimate、VSCode、微信开发者工具、小程序开发工具
+- 拉取项目仓库最新代码&切换到对应分支
+
- 启动数据库及可视化工具：MySQL、Navicat
- 启动后端微服务注册中心：nacos
@@ -435,11 +481,11 @@ npm run serve
- 启动接口测试工具：Postman
-- 启动命令行：`npm run dev:alipay`(支付宝小程序)、`npm run dev:weapp`(微信小程序)
+- `miniprogram` 目录下启动命令行：`npm run dev:alipay`(支付宝小程序)、`npm run dev:weapp`(微信小程序)
> 因为支付宝小程序和微信小程序输出都在dist目录下，所以不可以同时开发调试
-- 拉取项目仓库最新代码&切换到对应分支
+- `client-entrance-guard` 目录下启动命令行：`npm run start`(本地运行门禁端)
@@ -510,3 +556,13 @@ Taro：https://docs.taro.zone/docs
支付宝沙箱应用：https://open.alipay.com/develop/sandbox/app
支付宝沙箱应用 - 文档：https://opendocs.alipay.com/common/02kkv7
+
+
+
+### Electron
+
+开发文档：https://www.electronjs.org/docs/latest/tutorial/quick-start
+
+#### cnpm
+
+npmmirror 中国镜像站：https://npmmirror.com/
diff --git a/client-entrance-guard/.gitignore b/client-entrance-guard/.gitignore
new file mode 100644
index 0000000..2752eb9
--- /dev/null
+++ b/client-entrance-guard/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+.DS_Store
diff --git a/client-entrance-guard/html/index.html b/client-entrance-guard/html/index.html
new file mode 100644
index 0000000..a6f4a90
--- /dev/null
+++ b/client-entrance-guard/html/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+ Hello World!
+
+
+
+ Hello World!
+ We are using Node.js ,
+ Chromium ,
+ and Electron .
+
+
+
+
diff --git a/client-entrance-guard/html/renderer.js b/client-entrance-guard/html/renderer.js
new file mode 100644
index 0000000..a21dc4c
--- /dev/null
+++ b/client-entrance-guard/html/renderer.js
@@ -0,0 +1 @@
+// alert('111');
diff --git a/client-entrance-guard/main.js b/client-entrance-guard/main.js
new file mode 100644
index 0000000..9495b08
--- /dev/null
+++ b/client-entrance-guard/main.js
@@ -0,0 +1,31 @@
+const { app, BrowserWindow } = require('electron')
+const { platform } = require('node:process')
+const path = require('path')
+
+console.log(`This platform is ${platform}`);
+
+const createWindow = () => {
+ const mainWindow = new BrowserWindow({
+ width: 800,
+ height: 600,
+ webPreferences: {
+ preload: path.join(__dirname, 'preload.js')
+ },
+ })
+
+ mainWindow.loadFile('html/index.html')
+
+ mainWindow.webContents.openDevTools()
+}
+
+app.whenReady().then(() => {
+ createWindow()
+
+ app.on('activate', () => {
+ if (BrowserWindow.getAllWindows().length === 0) createWindow()
+ })
+})
+
+app.on('window-all-closed', () => {
+ if (process.platform !== 'darwin') app.quit()
+})
diff --git a/client-entrance-guard/package.json b/client-entrance-guard/package.json
new file mode 100644
index 0000000..953447e
--- /dev/null
+++ b/client-entrance-guard/package.json
@@ -0,0 +1,15 @@
+{
+ "name": "client-entrance-guard",
+ "version": "1.0.0",
+ "author": "coder-xiaomo",
+ "description": "社区疫情防控系统 - 门禁端",
+ "main": "main.js",
+ "scripts": {
+ "start": "electron ."
+ },
+ "license": "MIT",
+ "devDependencies": {
+ "@electron-forge/cli": "^6.0.3",
+ "electron": "^21.3.1"
+ }
+}
diff --git a/client-entrance-guard/preload.js b/client-entrance-guard/preload.js
new file mode 100644
index 0000000..8439f65
--- /dev/null
+++ b/client-entrance-guard/preload.js
@@ -0,0 +1,10 @@
+window.addEventListener('DOMContentLoaded', () => {
+ const replaceText = (selector, text) => {
+ const element = document.getElementById(selector)
+ if (element) element.innerText = text
+ }
+
+ for (const dependency of ['chrome', 'node', 'electron']) {
+ replaceText(`${dependency}-version`, process.versions[dependency])
+ }
+})
diff --git a/docs/开发步骤记录.md b/docs/开发步骤记录.md
index 91f38ab..776ad24 100644
--- a/docs/开发步骤记录.md
+++ b/docs/开发步骤记录.md
@@ -44,3 +44,12 @@ vue ui
4. 主启动
5. 业务类
+
+
+#### Electron客户端
+
+```bash
+cnpm install --save-dev electron
+cnpm install --save-dev @electron-forge/cli
+```
+