前后端分离 uni-app 跨端 Spring Boot RESTful API移动端支持 iOS / Android / 小程序 / H5 等多端发布引言智机通——工程机械全场景一体化管理解决方案聚焦破解工时统计、设备保养、安全合规、薪资发放等管理痛点。本产品是一款面向工程机械施工、工人打卡、积分激励、工时核算、设备保养、安全任务、工资条与年假请假等环节的垂直管理 App含配套管理后台与 API把现场作业与管理动作收拢到同一套系统减少分散表格与口头交接提升数据可追溯性。近期能力更新已支持夜班、通宵等工时场景并上线请假与年假的申请、审核与余额管理流程同时新增队长审核机手打卡防自审机制审核列表自动排除当前队长本人与考勤、薪资等业务链更好衔接。一、项目背景与痛点在中国基建高速发展的今天工程机械与建筑施工现场正从「纸笔经验」向「数据系统」深度变革。智机通工程机械租赁管理平台围绕这一趋势打造一体化数字化管理方案以移动端为入口结合管理后台与后端服务为租赁企业、施工企业提供机手管理、设备管理、考勤打卡、任务协同、技能提升、工时与假勤、薪资透明化等核心能力。工程机械与施工现场在「人、机、时、钱」上长期存在协作断层本仓库实现的智机通平台针对常见痛点考勤与工时替代纸质签到降低代打、漏打支持常规 / 夜班 / 通宵通霄等班次维度与薪资口径见sql中夜班、通霄、加班类型等增量脚本加班与中直OT、中直等记录与汇总、工资条联动WorkOvertime、Summary、Payslips等模块假勤请假、年假在线申请队长移动端审核本队待审单管理员后台终审年假余额人工配置与系统计算规则并存AnnualLeave设备与保养设备模板/列表、保养计划与执行记录、上报追溯Maintenance*、Device*任务与激励特殊任务、技能任务、安全任务积分、兑换、抽奖、规则与说明文案维护组织协同队长—队员绑定DuiUsers队长端独立菜单与权限考勤异常、签字、打卡地点与须知审核风控优化队长移动端审核机手打卡时列表默认过滤当前登录队长本人规避自审场景、降低流程风险运营与合规用户反馈、协议、消息通知、版本控制文件上传Excel导出可选阿里云 OSS、微信公众号weixin-java-mp等扩展能力统一数据入口后可实现过程可追溯、统计可复用减轻对 Excel 与群消息的依赖。二、技术架构概览层级技术栈与仓库一致说明移动端uni-appVue 2TuniaoUIvue-i18n工程主路径moveAppPub/导航栏与主题组件统一请求封装对接后端管理后台Vue 3.2Vue Router 4Element Plus 2.xPinia 3持久化插件AxiosECharts工程move-adminPub/Vue CLI 5 构建自定义表格/搜索、高德地图加载器等后端 APISpring Boot 2.6.2MyBatis Spring Boot 2.2.0MySQLDruidFastjson统一Returncode/msg/data/maxPageRequestBody JSONObject的接口风格鉴权与文档JWTjava-jwt / jjwt、TokenHandlerInterceptorSpringfox 3Knife4j 3.0.3接口文档可在集成 Knife4j 的环境访问具体路径依部署而定其他依赖阿里云 OSS、Apache POIExcel、微信 Java SDK公众号等按需启用见move-apiPub/pom.xml重要application.properties中配置 **server.servlet.context-path/seaHouseApi**故服务端根路径为http://主机:端口/seaHouseApi/管理端VUE_APP_BASE_URL、移动端请求基地址须与此一致末尾常带seaHouseApi/。三、核心代码示例3.1 后端Controller Service 统一返回多数接口为POST JSON入参JSONObject出参Return典型示例考勤打卡模块RequestMapping(/AttendanceCheckinRecords) RestController Transactional CrossOrigin publicclass AttendanceCheckinRecordsController { Autowired private AttendanceCheckinRecordsService attendanceCheckinRecordsService; PostMapping(/save) public Return save(RequestBody JSONObject json) { Return re new Return(); if (MyUtil.isEmpty(json)) { re.setMsg(传参数有误); re.setCode(400); return re; } try { attendanceCheckinRecordsService.save(json); re.setCode(200); re.setMsg(成功); } catch (Exception e) { e.printStackTrace(); re.setCode(400); re.setMsg(操作失败); } return re; } // 分页列表等PostMapping(/List) ... }假勤、汇总、工资条等模块如AnnualLeaveController、SummaryController、PayslipsController遵循同一模式部分统计与 DDL 兼容逻辑使用BaseDaoMapper执行 SQL。3.2 管理后台Axios 封装Token 401与仓库一致move-adminPub/src/utils/request.js——优先localStorage.token回退到user对象内 tokenAuthorization: Bearer ...code 401跳转登录。const instance axios.create({ baseURL: process.env.VUE_APP_BASE_URL ?? https://your-domain.com/seaHouseApi/, timeout: 5000, }); // interceptors: Content-Type、token、401 → ElMessage router.push3.3 调用示例POST 路径不含 context-path 前缀时的写法前端baseURL已指向.../seaHouseApi/业务路径写模块名即可例如import request from /utils/request; const res await request.post(Summary/某方法, { startDate: 2025-03-01, endDate: 2025-03-18 });移动端则通过封装的postHeaderRequest(AnnualLeave/summary, JSON.stringify({...}))等形式调用。四、部署步骤生产环境4.1 环境要求组件建议版本JDK1.8与pom.xml中java.version一致Maven3.6Node.js16管理端使用 Vue CLI 5建议与团队协作版本统一MySQL5.7 / 8.0字符集utf8mb4Nginx1.18HTTPS、反向代理、静态资源4.2 数据库初始化CREATE DATABASE sea_house DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; -- 导入基础结构后按需执行 move-apiPub/src/main/resources/sql/ 下增量脚本 -- 例如年假表、夜班/通霄/加班类型、离职备注、抽奖等4.3 后端配置与启动编辑 **move-apiPub/src/main/resources/application.properties**生产库地址、账号密码、token-secret等注意保留server.port11068 server.servlet.context-path/seaHouseApi spring.datasource.urljdbc:mysql://YOUR_DB_HOST:3306/sea_house?useUnicodetruecharacterEncodingUTF-8serverTimezoneAsia/Shanghai spring.datasource.usernameYOUR_USER spring.datasource.passwordYOUR_PASSWORD token-secretYOUR_JWT_SECRET打包与运行artifactId 为api版本见pom.xmlcd move-apiPub mvn clean package -DskipTests java -jar target/api-0.0.1-SNAPSHOT.jar服务对外 API 前缀示例http://YOUR_HOST:11068/seaHouseApi/。4.4 管理后台构建cd move-adminPub npm install # 配置 .env.productionVUE_APP_BASE_URL 指向线上 API例如 https://your-domain.com/seaHouseApi/ npm run build # 将 dist 部署到 Nginx 静态目录或使用对象存储 CDN4.5 移动端构建cd moveAppPub # 推荐使用 HBuilderX发行 → 原生 App-云打包 / 微信小程序 / H5 # 将接口基地址配置为与后端 seaHouseApi 一致的公网可达地址4.6 Nginx 与上下文路径因 Spring Boot 使用 **context-path/seaHouseApi**反向代理需把带/seaHouseApi/的请求转到应用路径保持例如upstream seaHouse_backend { server 127.0.0.1:11068; keepalive 32; } location /seaHouseApi/ { proxy_pass http://seaHouse_backend/seaHouseApi/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; }具体以实际proxy_pass规则是否保留路径为准务必与前端baseURL一致。五、核心功能模块与当前路由/控制器对应以下按管理后台主导航与后端 Controller归纳便于对照源码。业务域主要能力代码入口示例考勤管理打卡记录、OT/中直、打卡汇总、工资条、打卡地点、签字、须知、考勤异常、请假/年假审核、年假余额配置、入职年限与年假天数说明routing.js考勤子菜单AttendanceCheckinRecords、WorkOvertime、Summary、Payslips、AttendanceAnomaly、AnnualLeave等设备管理设备模板、设备列表、保养执行记录DeviceTemplates、DeviceList、MaintenanceTasks任务特殊任务及提交记录含队长独立一套路由SpecialTasks、UserSpecialTasks队长端路由captain-task技能提升技能任务列表与提交记录SkillTasks、UserSkillTasks积分管理积分规则、积分记录、兑换记录、使用说明、积分抽奖UserPoints、Rewards、UserRewardsRedemptions、Lottery人员与队伍用户信息、队长档案、队长—机手维护、机手详情等Users、Captain*视图、DuiUsers用户反馈 / 系统反馈、系统参数、版本控制、修改密码、站内消息等Feedbacks、SystemParameter、VersionControl、Notifications、Message通用文件上传、Excel、协议、签到轨迹等File、Excel、Agreements、Signatures、CheckinLocations移动端另含考勤/工资条/年假与请假申请与列表、队长审核年假入口、任务与积分、评价等页面moveAppPub/pages。六、平台优势端侧齐备uni-app 现场作业 Vue3 管理后台 Spring Boot API角色与菜单按机手 / 队长 / 管理员分流侧栏可按roleId过滤队长专属路由。业务链打通从打卡、夜班/通宵与中直、异常、假勤到工资条数据在同一套用户与考勤模型上闭环减少重复录入。可扩展清单清晰resources/sql提供增量 DDL便于按环境迭代年假、班次、抽奖等能力而不必整库替换。对接能力强OSS、公众号、地图管理端、大文件上传500MB 级别 multipart 配置等已在技术栈中预留。接口风格统一Return约定 JWT 拦截利于多端与一个后端长期共存。七、适用场景工程机械租赁 / 施工企业多机手、多设备、多现场的考勤、工时与保养管理需队长一线审批的组织队员请假/年假由队长移动端预审后台可终审与留痕培训与激励并重安全/技能任务与积分、兑换、抽奖组合使用提升参与率逐步数字化已有 Excel 或纸质流程的团队可按模块上线先打卡与汇总再工资条与假勤八、仓库目录结构节选xlhApp/ ├── move-apiPub/ # Spring Boot 后端 │ ├── src/main/java/com/yunchen/api/ │ │ ├── controller/ # REST 控制器考勤、假勤、设备、任务、积分等 │ │ ├── service/ # 业务逻辑 │ │ ├── mapper/ # MyBatis Mapper │ │ ├── pojo/ # 实体与 Example │ │ ├── interceptor/ # Token 等拦截器 │ │ └── config/ # 跨域等配置 │ └── src/main/resources/ │ ├── application.properties # 端口、context-path、数据源、token-secret │ └── sql/ # 增量 SQL年假、夜班/通霄、抽奖等 ├── move-adminPub/ # Vue 3 管理后台 │ └── src/ │ ├── router/modules/ # 路由与侧栏菜单constantRoutes │ ├── views/ # 业务页面attendance、equipment、score… │ ├── components/ # 通用表格、搜索、编辑器等 │ └── utils/request.js # Axios 与鉴权 ├── moveAppPub/ # uni-app 移动端TuniaoUI │ ├── pages/ # 工作台、考勤、年假、任务等 │ └── tuniao-ui/ # UI 组件库 ├── README.md └── 平台简介.md总结智机通既是工程机械全场景一体化管理产品打卡、积分、工时、保养、安全、薪资、年假与请假一体化采用主流前后端分离架构又提供完整代码示例与部署指引适合作为工程机械/建筑施工领域数字化转型的参考实践也可用于技术分享与二次开发学习。
工程机械全场景一体化管理产品（打卡、积分、工时、保养、安全、薪资、年假与请假一体化）
前后端分离 uni-app 跨端 Spring Boot RESTful API移动端支持 iOS / Android / 小程序 / H5 等多端发布引言智机通——工程机械全场景一体化管理解决方案聚焦破解工时统计、设备保养、安全合规、薪资发放等管理痛点。本产品是一款面向工程机械施工、工人打卡、积分激励、工时核算、设备保养、安全任务、工资条与年假请假等环节的垂直管理 App含配套管理后台与 API把现场作业与管理动作收拢到同一套系统减少分散表格与口头交接提升数据可追溯性。近期能力更新已支持夜班、通宵等工时场景并上线请假与年假的申请、审核与余额管理流程同时新增队长审核机手打卡防自审机制审核列表自动排除当前队长本人与考勤、薪资等业务链更好衔接。一、项目背景与痛点在中国基建高速发展的今天工程机械与建筑施工现场正从「纸笔经验」向「数据系统」深度变革。智机通工程机械租赁管理平台围绕这一趋势打造一体化数字化管理方案以移动端为入口结合管理后台与后端服务为租赁企业、施工企业提供机手管理、设备管理、考勤打卡、任务协同、技能提升、工时与假勤、薪资透明化等核心能力。工程机械与施工现场在「人、机、时、钱」上长期存在协作断层本仓库实现的智机通平台针对常见痛点考勤与工时替代纸质签到降低代打、漏打支持常规 / 夜班 / 通宵通霄等班次维度与薪资口径见sql中夜班、通霄、加班类型等增量脚本加班与中直OT、中直等记录与汇总、工资条联动WorkOvertime、Summary、Payslips等模块假勤请假、年假在线申请队长移动端审核本队待审单管理员后台终审年假余额人工配置与系统计算规则并存AnnualLeave设备与保养设备模板/列表、保养计划与执行记录、上报追溯Maintenance*、Device*任务与激励特殊任务、技能任务、安全任务积分、兑换、抽奖、规则与说明文案维护组织协同队长—队员绑定DuiUsers队长端独立菜单与权限考勤异常、签字、打卡地点与须知审核风控优化队长移动端审核机手打卡时列表默认过滤当前登录队长本人规避自审场景、降低流程风险运营与合规用户反馈、协议、消息通知、版本控制文件上传Excel导出可选阿里云 OSS、微信公众号weixin-java-mp等扩展能力统一数据入口后可实现过程可追溯、统计可复用减轻对 Excel 与群消息的依赖。二、技术架构概览层级技术栈与仓库一致说明移动端uni-appVue 2TuniaoUIvue-i18n工程主路径moveAppPub/导航栏与主题组件统一请求封装对接后端管理后台Vue 3.2Vue Router 4Element Plus 2.xPinia 3持久化插件AxiosECharts工程move-adminPub/Vue CLI 5 构建自定义表格/搜索、高德地图加载器等后端 APISpring Boot 2.6.2MyBatis Spring Boot 2.2.0MySQLDruidFastjson统一Returncode/msg/data/maxPageRequestBody JSONObject的接口风格鉴权与文档JWTjava-jwt / jjwt、TokenHandlerInterceptorSpringfox 3Knife4j 3.0.3接口文档可在集成 Knife4j 的环境访问具体路径依部署而定其他依赖阿里云 OSS、Apache POIExcel、微信 Java SDK公众号等按需启用见move-apiPub/pom.xml重要application.properties中配置 **server.servlet.context-path/seaHouseApi**故服务端根路径为http://主机:端口/seaHouseApi/管理端VUE_APP_BASE_URL、移动端请求基地址须与此一致末尾常带seaHouseApi/。三、核心代码示例3.1 后端Controller Service 统一返回多数接口为POST JSON入参JSONObject出参Return典型示例考勤打卡模块RequestMapping(/AttendanceCheckinRecords) RestController Transactional CrossOrigin publicclass AttendanceCheckinRecordsController { Autowired private AttendanceCheckinRecordsService attendanceCheckinRecordsService; PostMapping(/save) public Return save(RequestBody JSONObject json) { Return re new Return(); if (MyUtil.isEmpty(json)) { re.setMsg(传参数有误); re.setCode(400); return re; } try { attendanceCheckinRecordsService.save(json); re.setCode(200); re.setMsg(成功); } catch (Exception e) { e.printStackTrace(); re.setCode(400); re.setMsg(操作失败); } return re; } // 分页列表等PostMapping(/List) ... }假勤、汇总、工资条等模块如AnnualLeaveController、SummaryController、PayslipsController遵循同一模式部分统计与 DDL 兼容逻辑使用BaseDaoMapper执行 SQL。3.2 管理后台Axios 封装Token 401与仓库一致move-adminPub/src/utils/request.js——优先localStorage.token回退到user对象内 tokenAuthorization: Bearer ...code 401跳转登录。const instance axios.create({ baseURL: process.env.VUE_APP_BASE_URL ?? https://your-domain.com/seaHouseApi/, timeout: 5000, }); // interceptors: Content-Type、token、401 → ElMessage router.push3.3 调用示例POST 路径不含 context-path 前缀时的写法前端baseURL已指向.../seaHouseApi/业务路径写模块名即可例如import request from /utils/request; const res await request.post(Summary/某方法, { startDate: 2025-03-01, endDate: 2025-03-18 });移动端则通过封装的postHeaderRequest(AnnualLeave/summary, JSON.stringify({...}))等形式调用。四、部署步骤生产环境4.1 环境要求组件建议版本JDK1.8与pom.xml中java.version一致Maven3.6Node.js16管理端使用 Vue CLI 5建议与团队协作版本统一MySQL5.7 / 8.0字符集utf8mb4Nginx1.18HTTPS、反向代理、静态资源4.2 数据库初始化CREATE DATABASE sea_house DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; -- 导入基础结构后按需执行 move-apiPub/src/main/resources/sql/ 下增量脚本 -- 例如年假表、夜班/通霄/加班类型、离职备注、抽奖等4.3 后端配置与启动编辑 **move-apiPub/src/main/resources/application.properties**生产库地址、账号密码、token-secret等注意保留server.port11068 server.servlet.context-path/seaHouseApi spring.datasource.urljdbc:mysql://YOUR_DB_HOST:3306/sea_house?useUnicodetruecharacterEncodingUTF-8serverTimezoneAsia/Shanghai spring.datasource.usernameYOUR_USER spring.datasource.passwordYOUR_PASSWORD token-secretYOUR_JWT_SECRET打包与运行artifactId 为api版本见pom.xmlcd move-apiPub mvn clean package -DskipTests java -jar target/api-0.0.1-SNAPSHOT.jar服务对外 API 前缀示例http://YOUR_HOST:11068/seaHouseApi/。4.4 管理后台构建cd move-adminPub npm install # 配置 .env.productionVUE_APP_BASE_URL 指向线上 API例如 https://your-domain.com/seaHouseApi/ npm run build # 将 dist 部署到 Nginx 静态目录或使用对象存储 CDN4.5 移动端构建cd moveAppPub # 推荐使用 HBuilderX发行 → 原生 App-云打包 / 微信小程序 / H5 # 将接口基地址配置为与后端 seaHouseApi 一致的公网可达地址4.6 Nginx 与上下文路径因 Spring Boot 使用 **context-path/seaHouseApi**反向代理需把带/seaHouseApi/的请求转到应用路径保持例如upstream seaHouse_backend { server 127.0.0.1:11068; keepalive 32; } location /seaHouseApi/ { proxy_pass http://seaHouse_backend/seaHouseApi/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; }具体以实际proxy_pass规则是否保留路径为准务必与前端baseURL一致。五、核心功能模块与当前路由/控制器对应以下按管理后台主导航与后端 Controller归纳便于对照源码。业务域主要能力代码入口示例考勤管理打卡记录、OT/中直、打卡汇总、工资条、打卡地点、签字、须知、考勤异常、请假/年假审核、年假余额配置、入职年限与年假天数说明routing.js考勤子菜单AttendanceCheckinRecords、WorkOvertime、Summary、Payslips、AttendanceAnomaly、AnnualLeave等设备管理设备模板、设备列表、保养执行记录DeviceTemplates、DeviceList、MaintenanceTasks任务特殊任务及提交记录含队长独立一套路由SpecialTasks、UserSpecialTasks队长端路由captain-task技能提升技能任务列表与提交记录SkillTasks、UserSkillTasks积分管理积分规则、积分记录、兑换记录、使用说明、积分抽奖UserPoints、Rewards、UserRewardsRedemptions、Lottery人员与队伍用户信息、队长档案、队长—机手维护、机手详情等Users、Captain*视图、DuiUsers用户反馈 / 系统反馈、系统参数、版本控制、修改密码、站内消息等Feedbacks、SystemParameter、VersionControl、Notifications、Message通用文件上传、Excel、协议、签到轨迹等File、Excel、Agreements、Signatures、CheckinLocations移动端另含考勤/工资条/年假与请假申请与列表、队长审核年假入口、任务与积分、评价等页面moveAppPub/pages。六、平台优势端侧齐备uni-app 现场作业 Vue3 管理后台 Spring Boot API角色与菜单按机手 / 队长 / 管理员分流侧栏可按roleId过滤队长专属路由。业务链打通从打卡、夜班/通宵与中直、异常、假勤到工资条数据在同一套用户与考勤模型上闭环减少重复录入。可扩展清单清晰resources/sql提供增量 DDL便于按环境迭代年假、班次、抽奖等能力而不必整库替换。对接能力强OSS、公众号、地图管理端、大文件上传500MB 级别 multipart 配置等已在技术栈中预留。接口风格统一Return约定 JWT 拦截利于多端与一个后端长期共存。七、适用场景工程机械租赁 / 施工企业多机手、多设备、多现场的考勤、工时与保养管理需队长一线审批的组织队员请假/年假由队长移动端预审后台可终审与留痕培训与激励并重安全/技能任务与积分、兑换、抽奖组合使用提升参与率逐步数字化已有 Excel 或纸质流程的团队可按模块上线先打卡与汇总再工资条与假勤八、仓库目录结构节选xlhApp/ ├── move-apiPub/ # Spring Boot 后端 │ ├── src/main/java/com/yunchen/api/ │ │ ├── controller/ # REST 控制器考勤、假勤、设备、任务、积分等 │ │ ├── service/ # 业务逻辑 │ │ ├── mapper/ # MyBatis Mapper │ │ ├── pojo/ # 实体与 Example │ │ ├── interceptor/ # Token 等拦截器 │ │ └── config/ # 跨域等配置 │ └── src/main/resources/ │ ├── application.properties # 端口、context-path、数据源、token-secret │ └── sql/ # 增量 SQL年假、夜班/通霄、抽奖等 ├── move-adminPub/ # Vue 3 管理后台 │ └── src/ │ ├── router/modules/ # 路由与侧栏菜单constantRoutes │ ├── views/ # 业务页面attendance、equipment、score… │ ├── components/ # 通用表格、搜索、编辑器等 │ └── utils/request.js # Axios 与鉴权 ├── moveAppPub/ # uni-app 移动端TuniaoUI │ ├── pages/ # 工作台、考勤、年假、任务等 │ └── tuniao-ui/ # UI 组件库 ├── README.md └── 平台简介.md总结智机通既是工程机械全场景一体化管理产品打卡、积分、工时、保养、安全、薪资、年假与请假一体化采用主流前后端分离架构又提供完整代码示例与部署指引适合作为工程机械/建筑施工领域数字化转型的参考实践也可用于技术分享与二次开发学习。
