企业官网建设流程全解析

学弟学妹们，大家好👋！作为已经顺利完成答辩的计算机往届学长，当年从零搭建 SpringBoot 后端接口、对接微信小程序客户端交互、设计 MySQL 数据表、梳理人脸识别预约签到完整业务逻辑和撰写毕业设计论文的经历依旧历历在目。深知人脸识别预约签到小程序毕设的痛点，大家常常会遇到小程序和后端人脸接口联调报错、签到预约业务逻辑梳理不清、论文创新点不好提炼、答辩抓不住项目核心优势等各类问题💻。

选择基于微信小程序 + SpringBoot 人脸识别预约签到打卡系统课题的学弟学妹注意啦✨，本系统答辩高频考点与核心亮点，就是依托人脸识别技术实现活动预约、人脸核验签到、签到数据自动统计的完整打卡闭环。开发不用盲目堆砌冗余功能，优先吃透核心业务：普通用户在微信小程序端录入人脸信息、浏览可预约活动、提交预约申请、现场人脸打卡、查看个人预约与签到记录；教师在 Vue 后台发布活动、审核预约申请、实时查看签到名单、导出签到数据；管理员借助 Vue 后台管理账号权限、核查人脸信息、管理全部活动与系统日志。做好普通用户、教师、系统管理员三重权限划分，吃透人脸录入 - 活动预约 - 人脸打卡 - 签到记录统计整套业务流程。答辩重点突出前后端分离架构、微信小程序轻量化打卡入口、人脸识别防代签机制、多角色权限管控，完整演示微信小程序客户端与 Vue 后台管理端功能，答辩从容稳定，轻松拿高分💪。

博主介绍：

深耕计算机专业项目 开发多年，基于springboot,vue,node,javaweb,微信小程序,安卓,android,鸿蒙,Harmony,python,毕业设计，课程设计，支持定制开发，附全套资料。

文末有本题目的源码+全套资料⬇️⬇️⬇️

摘要

针对传统线下签到方式存在代签、签到统计繁琐、预约流程低效等问题，本文设计并实现一套基于微信小程序的人脸识别预约签到打卡系统。系统后端采用 SpringBoot 框架，前端管理页面使用 Vue 开发，移动端客户端基于微信小程序实现，数据存储选用 MySQL 数据库。系统主要分为管理员、教师、普通用户三类角色，集成人脸核验、活动预约、签到打卡、记录查询、信息管理等核心功能。用户通过微信小程序完成人脸信息录入，预约对应活动，在指定时间地点完成人脸识别签到；管理员与教师可在 Vue 后台管理页面进行用户管理、活动发布、签到记录查看与数据统计。本系统利用人脸识别技术有效杜绝代签现象，依托微信小程序无需额外安装 APP，降低使用门槛。测试结果表明，系统运行稳定，人脸签到响应较快，能够简化预约签到流程，自动完成签到数据汇总，提升课堂、会议、培训等场景下签到管理工作效率，具备良好的实用性与扩展性。

关键词：微信小程序；SpringBoot；Vue；人脸识别；签到打卡；MySQL

Abstract

Aiming at the problems of proxy sign-in, tedious statistics and inefficient reservation process in traditional offline sign-in methods, this paper designs and implements a face recognition reservation and sign-in system based on WeChat Mini Program. The back-end of the system adopts SpringBoot framework, the front-end management page is developed with Vue, the mobile client is realized by WeChat Mini Program, and MySQL database is used for data storage. The system includes three roles: administrator, teacher and ordinary user, and integrates core functions such as face verification, activity reservation, sign-in, record query and information management. Users can complete face information entry and activity reservation through the WeChat Mini Program, and finish face recognition sign-in at the specified time and place. Administrators and teachers can manage users, publish activities, view sign-in records and make data statistics on the Vue management page. The system uses face recognition technology to prevent proxy sign-in. Since WeChat Mini Program does not require additional APP installation, the usage threshold is reduced. The test results show that the system runs stably and the face sign-in response is fast. It can simplify the reservation and sign-in process, automatically summarize sign-in data, improve the efficiency of sign-in management in classrooms, meetings and training scenarios, and has good practicability and scalability.

Key words: WeChat Mini Program; SpringBoot; Vue; Face Recognition; Sign-in; MySQL

一、研究目的与意义

研究目的

传统签到大多依靠纸质点名、二维码签到，存在他人代签、人工统计耗时、签到记录不易保存等痛点。本课题旨在开发一套结合人脸识别技术的预约签到打卡系统，依托微信小程序轻量化访问，配合 SpringBoot+Vue 后台管理平台。系统目标是实现线上活动预约、人脸信息采集、现场人脸识别签到、签到记录自动保存与统计。通过人脸比对从根源防止代签；用户无需安装软件，打开微信即可预约和打卡；后台管理人员能够快速发布活动、查看签到明细、导出签到数据。本系统目的是替代传统人工签到模式，简化签到全流程，降低管理人员工作负担，保证签到结果真实可靠，适用于课堂、社团活动、会议培训等场景。

研究意义

理论意义：本课题将微信小程序、SpringBoot 后端、Vue 管理端与人脸识别技术结合，丰富了移动端 B/S 架构打卡系统的设计案例，为同类身份核验签到系统的开发提供设计思路与实现参考。

现实意义：纸质签到需要人工点名、手工整理，工作量大且容易出错；二维码签到容易被截图代签。本系统使用人脸识别核验身份，有效解决代签问题。微信小程序载体降低用户使用成本，随时随地可以预约活动。后台自动统计签到数据，支持查看缺勤、出勤记录，省去人工汇总工作。教师和管理员可以实时查看签到情况，及时掌握人员到场状态。系统部署简单，维护方便，能够在校园、单位会议等场景落地使用，提升签到管理数字化水平。同时系统模块化设计，后续可扩展定位签到、消息提醒等功能，具备较好应用价值。

二、需求分析

角色划分：系统包含 3 类用户：系统管理员、教师、普通用户（学生 / 参会人员）

1. 普通用户（小程序端）

1. 用户注册登录模块：微信授权登录，填写个人基础信息，绑定微信 openid；可以修改个人资料。
2. 人脸信息录入模块：上传人脸照片，调用人脸接口完成人脸特征入库；人脸信息支持重新录入。
3. 活动预约模块：查看教师发布的可预约活动，查看活动时间、地点、人数限制；提交预约申请，查看预约记录；可取消未开始活动预约。
4. 人脸识别签到模块：活动签到时间段内，进入签到页面，拍摄人脸，系统比对人脸特征，比对成功完成打卡；签到成功 / 失败给出提示，查看本人签到历史。
5. 个人中心模块：查看个人预约记录、签到记录，修改个人信息。

2. 教师（Vue 后台 + 小程序）

1. 活动管理模块：发布预约活动，填写活动名称、时间、地点、签到起止时间；修改、删除活动。
2. 预约审核模块：查看本活动用户预约列表，审核预约申请。
3. 签到管理模块：实时查看活动签到名单，查看签到状态（已签到 / 未签到）；导出签到记录。
4. 个人信息管理模块：修改教师账号密码、个人资料。

3. 系统管理员（Vue 后台）

1. 用户管理模块：管理普通用户账号、教师账号；账号启用 / 禁用，查看所有用户信息。
2. 人脸信息管理模块：查看所有人脸入库记录，异常人脸信息清理。
3. 活动管理模块：查看全部活动，删除违规活动。
4. 系统管理模块：修改管理员密码，查看系统操作日志。

非功能需求：系统响应速度快；人脸比对保证一定准确率；数据持久化存储；权限隔离，不同角色只能访问对应功能；小程序端适配手机。

三、系统开发技术介绍

1. SpringBoot：后端核心框架，简化 Spring 项目配置，自动配置，内置 tomcat，快速开发 RESTful 接口，负责接收小程序和 Vue 前端请求，处理业务逻辑，操作数据库，返回 JSON 数据。
2. Vue2/Vue3：后台管理页面前端框架，采用组件化开发，页面交互流畅，用于实现管理员、教师的网页管理后台，搭配 Element UI 快速搭建表单、表格页面。
3. 微信小程序：移动端客户端，使用 WXML、WXSS、JS 开发，无需下载安装，微信直接打开；调用微信相机组件采集人脸图片，调用后端接口完成登录、预约、人脸签到业务。
4. MySQL：关系型数据库，存储用户信息、活动信息、预约记录、签到记录、人脸信息，支持事务，稳定可靠。
5. 人脸识别接口：调用第三方人脸比对 API（如百度智能云），上传人脸图片，返回人脸比对相似度，判断是否为同一人。
6. Maven：项目依赖管理工具，管理后端 jar 包依赖。

四、数据库表设计

说明：id 统一为主键，长度 10

用户表 user

人脸信息表 face_info

活动表 activity

预约表 reservation

签到表 sign_record

五、系统详细设计

5.1 总体架构设计

系统采用前后端分离架构。

1. 客户端：微信小程序（普通用户）、Vue 管理后台（教师、管理员）；
2. 服务层：SpringBoot 后端，提供 REST 接口；
3. 数据层：MySQL 数据库；
4. 第三方服务：人脸比对 API。 前端发起 http 请求，后端接收请求，处理业务逻辑，调用人脸 API，读写数据库，返回 JSON 结果。

5.2 模块详细设计

（1）用户登录模块

小程序端使用微信授权获取 openid，传给后端，后端查询 user 表，完成登录；Vue 后台使用账号密码登录，后端校验账号密码与角色权限，返回 token。

后端登录接口 Controller 片段

@RestController @RequestMapping("/user") public class UserController { @Autowired private UserService userService; @PostMapping("/login") public Result login(@RequestBody User user){ //校验账号密码 User loginUser = userService.checkLogin(user.getUsername(),user.getPassword()); if(loginUser == null){ return Result.fail("账号或密码错误"); } //生成token返回前端 String token = TokenUtil.createToken(loginUser.getId(),loginUser.getRole()); Map<String,Object> map = new HashMap<>(); map.put("token",token); map.put("role",loginUser.getRole()); return Result.success(map); } }

（2）人脸录入模块

小程序调用相机拍摄人脸图片，转 base64 传给后端；后端调用人脸 API 上传图片，获取 face_token 存入 face_info 表，绑定 user_id。

逻辑：一个用户对应一条人脸记录，后续签到时使用该 face_token 进行比对。

人脸录入 Service 片段

@Service public class FaceServiceImpl implements FaceService { @Override public String addFace(Long userId, String imgBase64) { //调用第三方人脸接口，获取face_token String faceToken = FaceApiUtil.uploadFace(imgBase64); FaceInfo faceInfo = new FaceInfo(); faceInfo.setUserId(userId); faceInfo.setFaceToken(faceToken); faceInfo.setCreateTime(DateUtil.now()); faceInfo.setStatus("正常"); faceInfoMapper.insert(faceInfo); return faceToken; } }

（3）活动预约模块

教师在 Vue 后台新增活动存入 activity 表；小程序用户查看活动列表，提交预约，生成 reservation 记录，初始状态待审核；教师审核预约，修改 audit_status。

（4）人脸识别签到模块

用户在签到时间段内上传人脸图片，后端获取该用户预存 face_token，调用人脸比对接口，返回相似度；相似度大于阈值则签到成功，新增 sign_record 记录，签到结果标记成功；否则签到失败。

签到接口核心代码

@PostMapping("/sign/add") public Result signIn(@RequestBody SignDTO signDTO){ //1.校验活动是否在签到时间范围内 Activity activity = activityMapper.selectById(signDTO.getActivityId()); if(!TimeUtil.checkSignTime(activity.getSignEndTime())){ return Result.fail("不在签到时间"); } //2.获取用户人脸token FaceInfo faceInfo = faceInfoMapper.selectByUserId(signDTO.getUserId()); //3.调用人脸比对接口 float score = FaceApiUtil.faceCompare(faceInfo.getFaceToken(),signDTO.getImgBase64()); if(score > 0.8){ //签到成功，写入签到记录 SignRecord record = new SignRecord(); record.setUserId(signDTO.getUserId()); record.setActivityId(signDTO.getActivityId()); record.setSignTime(DateUtil.now()); record.setSignResult("成功"); signRecordMapper.insert(record); return Result.success("签到成功"); }else{ return Result.fail("人脸比对失败，请重新拍照"); } }

（5）后台管理模块（Vue 端）

教师 / 管理员登录 Vue 页面，携带 token 访问接口，实现用户管理、活动管理、预约查看、签到记录查询，签到数据表格展示，支持导出 Excel。

5.3 权限设计

使用 Token 实现权限控制。请求头携带 token，拦截器解析 token，获取用户角色；

• 普通用户：只能访问小程序预约、人脸录入、签到接口；
• 教师：可以发布活动、审核预约、查看自己活动签到记录；
• 管理员：全部权限，用户管理、系统管理。

最后出来的界面UI效果如下：

前台：

后台：

小程序及APP：

上面分享的这套系统，包含一些特色功能和创新设计。完全符合导师的要求。也可根据要求修改。完整的项目代码、MySQL 数据库文件、全套文档、界面效果图、PPT 我都已经打包整理好了🎓。 正在准备同题目的学弟学妹，想要拿来参考学习的，可以点击下方链接。👇👇👇👇👇