[门禁端] 创建项目
This commit is contained in:
parent
5f142254f2
commit
42e3952b83
92
README.md
92
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（集成开发环境）、<br />Postman（接口测试） | Maven 3.6.3 | |
|
||||
| 小程序 | Taro 3.x（小程序跨端解决方案）、Vue 3（JavaScript框架） | VS Code（代码编辑器）、<br />微信开发者工具（微信小程序打包工具）、<br />小程序开发工具（支付宝小程序打包工具） | 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（集成开发环境）、<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 | - | |
|
||||
|
||||
|
||||
|
||||
@ -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 @@
|
||||
> <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>
|
||||
> <!-- ######## 👇👇👇将以下部分粘贴进去👇👇👇 ######## -->
|
||||
> <mirror>
|
||||
> <id>alimaven</id>
|
||||
> <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/
|
||||
|
||||
2
client-entrance-guard/.gitignore
vendored
Normal file
2
client-entrance-guard/.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
node_modules/
|
||||
.DS_Store
|
||||
19
client-entrance-guard/html/index.html
Normal file
19
client-entrance-guard/html/index.html
Normal file
@ -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>
|
||||
1
client-entrance-guard/html/renderer.js
Normal file
1
client-entrance-guard/html/renderer.js
Normal file
@ -0,0 +1 @@
|
||||
// alert('111');
|
||||
31
client-entrance-guard/main.js
Normal file
31
client-entrance-guard/main.js
Normal file
@ -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()
|
||||
})
|
||||
15
client-entrance-guard/package.json
Normal file
15
client-entrance-guard/package.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
10
client-entrance-guard/preload.js
Normal file
10
client-entrance-guard/preload.js
Normal file
@ -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])
|
||||
}
|
||||
})
|
||||
@ -44,3 +44,12 @@ vue ui
|
||||
4. 主启动
|
||||
5. 业务类
|
||||
|
||||
|
||||
|
||||
#### Electron客户端
|
||||
|
||||
```bash
|
||||
cnpm install --save-dev electron
|
||||
cnpm install --save-dev @electron-forge/cli
|
||||
```
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user