欢迎来到17CMS
设为首页 添加收藏
主页 > 文章中心 > 技术方案 >

SpringBoot+Vue实现网页版人脸登录、人脸识别

介绍

FACE-UI 基于前后端分离Web端项目,主要实现了网页版的人脸登录,通过调取前端摄像头拍照,传入后台进行跟数据库人脸库的相似度比对。

一,springboot后端项目

1,拉取项目后,导入相关依赖jar包

项目结构

0f17ff96-bc7e-11ed-bfe3-dac502259ad0.png

2,执行sql文件夹下面的mysql脚本

0f394a48-bc7e-11ed-bfe3-dac502259ad0.png

3,执行完成后,配置腾讯云

参考

https://blog.csdn.net/Susan003/article/details/125914027

4,获取secretId和secretKey,并开通人脸服务之后,将secretId和secretKey配置到yml文件中

0f6dd358-bc7e-11ed-bfe3-dac502259ad0.png

5,运行 FaceEasyApplication


二,vue前端项目

1,拉取项目后,安装依赖


npminstall #如果有淘宝镜像 cnpminstall


运行


npmrunserve


2,效果图,登录页面

注意:刚刚初始化的时候,表里面是没有人脸的

所以登录界面第一次拍照为录入人脸,后续为验证人脸登录

0f8ac3b4-bc7e-11ed-bfe3-dac502259ad0.png


0fa62622-bc7e-11ed-bfe3-dac502259ad0.png

摄像头被我挡住了哦

3,首页效果图

0fd96b2c-bc7e-11ed-bfe3-dac502259ad0.png


0ff45b80-bc7e-11ed-bfe3-dac502259ad0.png

4,列表效果图

1008473a-bc7e-11ed-bfe3-dac502259ad0.png

4.1,添加人脸效果图

10289cce-bc7e-11ed-bfe3-dac502259ad0.png

4.2,修改人脸数据效果图

1043909c-bc7e-11ed-bfe3-dac502259ad0.png

其余的可以自己慢慢探索

5,日志列表效果图

105630a8-bc7e-11ed-bfe3-dac502259ad0.png

日志列表 主要记录近期:登录的情况以及异常

项目地址

FACE-UI 项目地址

gitee后端项目:https://gitee.com/susantyp/face-easy

gitee前端项目:https://gitee.com/susantyp/face-ui


想了解更多关于SpringBoot+Vue实现网页版人脸登录、人脸识别的内容,请扫微信
或微信搜索jiemingpan