Double_X 考勤系统

## 🖥项目简介 Double_X 考勤系统基于现代化的前端和后端技术栈开发,提供了灵活、智能的考勤管理解决方案。该系统主要功能包括单次打卡和每周循环打卡两种模式,用户可以根据需求自行设置打卡时段和周期,并支持补卡,满足不同场景下的考勤需求。 前端技术栈采用 Vue 3、Vue Router 和 ElementPlus,带来了流畅的用户体验和高效的界面交互。通过集成高德地图 JS API,用户可以方便地在地图上选择考勤地点,并自定义考勤范围,实现精准定位和灵活管理。 后端技术栈基于 Node.js 和 Express 搭建,配合 MySQL 数据库,提供了稳定、高效的数据存储和管理功能。系统具备强大的数据处理能力,助力用户更好地管理团队考勤。 Double_X 考勤系统支持多种考勤模式和灵活配置,致力于为用户提供便捷、智能的考勤解决方案。 ## 📦项目地址 - **前端仓库:**[https://git.vthc.cn/Pchen0/Double_X_Attendance_Web.git](https://git.vthc.cn/Pchen0/Double_X_Attendance_Web.git) - **后端仓库:**[https://git.vthc.cn/Pchen0/Double_X_Attendance.git](https://git.vthc.cn/Pchen0/Double_X_Attendance.git) - **演示地址:**[https://kq.ctbu.top](https://kq.ctbu.top) ## 💽Setup #### 0.安装Node.js [Node.js官网](https://nodejs.org/en/download/package-manager/) ***Linux*** **使用包管理器安装Node.js** 大多数Linux发行版都附带有包管理器,如APT(Debian、Ubuntu)、YUM(Fedora、CentOS)、DNF(Fedora)、Pacman(Arch Linux)等。你可以使用这些包管理器来安装Node.js。 1. **更新软件包索引**(这一步在某些系统上可能不需要,但是最好还是先执行): ```bash sudo apt update ``` 2. **安装Node.js**: 对于Debian和Ubuntu系统,可以使用APT包管理器: ```bash sudo apt install nodejs ``` 对于其他Linux发行版,可以使用相应的包管理器来安装Node.js。下面提供了几种常见发行版的安装方式: CentOS/RHEL 1.更新软件包索引: ```bash sudo yum update ``` 或者 ```bash sudo dnf update ``` 2.安装Node.js: ```bash sudo yum install nodejs ``` 或者 ```bash sudo dnf install nodejs ``` 无论你使用哪种Linux发行版,通过包管理器安装Node.js通常是最简单、最可靠的方法。 1. **验证安装**: 安装完成后,你可以通过以下命令验证Node.js和npm(Node.js软件包管理器)是否已正确安装: ```bash node -v npm -v ``` 这将显示已安装的Node.js和npm的版本信息。 ***Windows*** 在Windows上安装Node.js最简单的方法是使用Node.js的Windows安装程序。 **1.下载安装程序**: 访问 [Node.js官网](https://nodejs.org/en/download/),下载适用于Windows的Node.js安装程序(.msi文件)。 **2.运行安装程序**: 打开下载的.msi文件以启动安装向导,并按照提示进行安装。你可以接受默认设置,也可以自定义安装选项。 **3.验证安装**: 安装完成后,打开命令提示符,然后输入以下命令来验证Node.js和npm是否已正确安装: ```bash node -v npm -v ``` 这将显示已安装的Node.js和npm的版本信息。 #### 1.克隆远程库 ``` git clone https://git.vthc.cn/Pchen0/Double_X_Attendance.git ``` #### 2.安装依赖 ``` npm install ``` #### 3.导入数据并编写配置文件 请将项目目录下的data.sql文件导入您的MySQL数据库,然后编写配置文件: ```bash cp config-example.json config.json ``` Double_X考勤系统使用企业微信登录接口,您需要前往企业微信管理页面添加应用并获取corpid、corpsecret、agentid等信息。 #### 4.运行服务器 ``` node index.js ``` 成功运行后,您将看到以下输出: ![输出示例](./image/readme-1.png) #### 5. 编译前端页面 本项目依赖于高德地图 JavaScript API。部署前,请先访问高德开放平台创建应用,并配置服务端为 JS API。 ##### 操作步骤: **1.克隆前端仓库**: ```bash git clone https://git.vthc.cn/Pchen0/Double_X_Attendance_Web.git ``` **2.安装依赖**: 进入项目目录并安装项目依赖: ```bash cd Double_X_Attendance_Web npm install ``` **3.配置环境变量**: 在项目根目录下创建并编辑 `.env` 文件,添加以下环境变量: - `VITE_API_URL`:你的后端服务器地址 - `VITE_AMAP_KEY`:高德地图应用 Key - `VITE_AMAP_HOST`:代理服务器地址,参考下面的Nginx反向代理配置进行反向代理设置 *Nginx反向代理配置:* ```nginx location /_AMapService/ { set $args "$args&jscode=高德地图应用的安全密钥"; proxy_pass https://restapi.amap.com/; } ``` 保存相关配置之后需要通过命令nginx -s reload命令重新加载nginx配置文件。 *示例 `.env` 文件内容:* ```env VITE_API_URL=https://your-backend-server.com VITE_AMAP_KEY=your-amap-key VITE_AMAP_HOST=https://your-proxy-server.com ``` **4.编译前端页面**: 使用以下命令编译前端页面: ```bash npm run build ``` 该命令将生成用于生产环境的优化过的静态文件。 ## 💡使用手册 #### 1.设置管理员 首次登录系统的用户将会成为网站管理员,网站管理员可进入网站管理页面查看网站内所有注册用户,并将他们设为管理员。管理员具有管理考勤项目的权限。 拥有管理员权限的用户可对网站内所有考勤项目进行添加、删除等操作。 ![设置管理员](./image/readme-2.png) #### 2.添加/编辑考勤项目 ![添加考勤项目](./image/readme-3.png) **参数说明:** - 项目名称:考勤项目的名称,便于区分; - 参与人:参与考勤的用户,填写用户名,用|分隔; - 管理员:对该考勤项目具有编辑、删除、添加补卡记录权限的用户,填写用户名,用|分隔(用户必须具有考勤管理员权限); - 打卡星期:考勤项目的开始星期; - 每周循环:开启后将在每周的同一时段进行考勤,关闭时只进行单次考勤; - 打卡时间:考勤项目的开始、结束时间,暂不支持跨天; - 打卡半径:以在地图上选择的地点为中心设置考勤范围。 #### 3.用户考勤 用户在符合打卡条件的情况下可进行打卡操作。 ![用户考勤](./image/readme-4.png) 若未在规定时间内打卡,用户可向考勤管理员申请补卡。 ![补卡](./image/readme-5.png)