介绍
FACE-UI 基于前后端分离Web端项目,主要实现了网页版的人脸登录,通过调取前端摄像头拍照,传入后台进行跟数据库人脸库的相似度比对。
技术点:Springboot,Mysql,JWT,VUE 2.X 等等技术实现,主要功能点:人脸列表CRUD,日志列表CRUD,基于自建人脸库通过base64编码方式存储人脸图片,通过调用腾讯云人脸对比API场景实现
一、springboot后端项目
1,拉取项目后,导入相关依赖jar包
项目结构
![f62f4f81e74f55ad71b57b4a89813130.png](https://i-blog.csdnimg.cn/blog_migrate/89a30d8f2d5b22fb7d0f1fbff5b958a6.png)
2,执行sql文件夹下面的mysql脚本
![dd1bf571e0e4c93defe15778f4445b9b.png](https://i-blog.csdnimg.cn/blog_migrate/f9269303deb295e9bb5138847f7f996c.png)
3,执行完成后,配置腾讯云
4,获取secretId和secretKey,并开通人脸服务之后,将secretId和secretKey配置到yml文件中
![1c43fe1657c66798e6ba7f639d882cbc.png](https://i-blog.csdnimg.cn/blog_migrate/d601694ecc698ce4254ed3dc7b6fb7b0.png)
5,运行 FaceEasyApplication
二、vue前端项目
1,拉取项目后,安装依赖
npm install
#如果有淘宝镜像
cnpm install
运行
npm run serve
2,效果图,登录页面
“注意:刚刚初始化的时候,表里面是没有人脸的
所以登录界面第一次拍照为录入人脸,后续为验证人脸登录
![20acfa8a4eecd4ad285b016fdcc09d42.png](https://i-blog.csdnimg.cn/blog_migrate/ffeac7ae22a26cc6241540e47753273a.png)
![a273f110d87fe4673b3a40f54ddd2648.png](https://i-blog.csdnimg.cn/blog_migrate/bc103a3915de47ec1a31c5a3eba227a1.png)
摄像头被我挡住了哦😂
3,首页效果图
![157c95864ff9dd1bba83c66eeea22adb.png](https://i-blog.csdnimg.cn/blog_migrate/21f4b932da3c8811235e2b01ee35ff6b.png)
![b56c966553b88f387bf21915d11d86de.png](https://i-blog.csdnimg.cn/blog_migrate/4e19a8a451e5428fd4ef9b71b3099129.png)
4,列表效果图
![eb273b526af9c16f71f1957847fc452b.png](https://i-blog.csdnimg.cn/blog_migrate/fe466f142771e3733117d56180594466.png)
4.1,添加人脸效果图
![988c0eeb7a05c761cbc474f02e8776c5.png](https://i-blog.csdnimg.cn/blog_migrate/1f8477367fe201193b3b01b6f37cfbfb.png)
4.2,修改人脸数据效果图
![fb4ce585eb185b48c7c7133d1936e0fb.png](https://i-blog.csdnimg.cn/blog_migrate/5219f73c094859e0fcca667b422e6935.png)
其余的可以自己慢慢探索
5,日志列表效果图
![4d574f3c6a961861c6978683fd60da8a.png](https://i-blog.csdnimg.cn/blog_migrate/d583e8b40f703f50dfb81eb27f60e110.png)
日志列表 主要记录近期:登录的情况以及异常
项目地址
点击下方公众号卡片,回复关键字:人脸登录 获取源码链接。
推荐阅读:
不是你需要中台,而是一名合格的架构师(附各大厂中台建设PPT)