[门禁端] 创建项目

README.md

@@ -39,10 +39,11 @@
 项目部署环境：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  |      |
+| 小程序端 | 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                                                      | -           |      |
 
 
@@ -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 镜像源配置（下面以阿里云镜像为例，其他镜像可自行替换）：
@@ -201,8 +220,8 @@
 >       <name>aliyun maven</name>
 >       <url>https://maven.aliyun.com/repository/public</url>
 >       <mirrorOf>central</mirrorOf>
-> 	 <!-- ######## 👆👆👆将以上部分粘贴进去👆👆👆 ######## -->
 >     </mirror>
+>     <!-- ######## 👆👆👆将以上部分粘贴进去👆👆👆 ######## -->
 >   </mirrors>
 > ```
 >
@@ -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/

client-entrance-guard/.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+.DS_Store

client-entrance-guard/html/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
+    <title>Hello World!</title>
+</head>
+
+<body>
+    <h1>Hello World!</h1>
+    We are using Node.js <span id="node-version"></span>,
+    Chromium <span id="chrome-version"></span>,
+    and Electron <span id="electron-version"></span>.
+    <script src="./renderer.js"></script>
+</body>
+
+</html>

client-entrance-guard/html/renderer.js

@@ -0,0 +1 @@
+// alert('111');

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

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"
+  }
+}

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])
+    }
+})

docs/开发步骤记录.md

@@ -44,3 +44,12 @@ vue ui
 4. 主启动
 5. 业务类
 
+
+
+#### Electron客户端
+
+```bash
+cnpm install --save-dev electron
+cnpm install --save-dev @electron-forge/cli 
+```
+