本次的Demo主要以图片验证码的方式输入和接收
初始界面如下:
改造之后的界面如下:
1. Java
引入验证码
设置验证码的key以及image
下方的redisTemplate 为RedisTemplate<String, Object> redisTemplate
其中Kv为我的工具类,对应的create()其实是new一个对象而已
2. uniapp
验证码处理:
refreshCode 方法用于获取新的验证码图片,并更新 captchaImg点击验证码图片会触发 refreshCode 方法,用户可以获取新的验证码以便重新输入
登录逻辑:
在 login 方法中,首先检查用户名、密码和验证码是否为空。如果为空,则通过 uni.$u.toast 提示用户将密码使用 MD5 加密后,与用户名和其他参数一起发送到服务器进行登录验证登录成功后,使用 uni.$store.commit 保存 token,并存储当前时间到本地存储中,然后跳转到主页面
响应式布局:
根据屏幕的宽高比例调整登录框的位置和宽度,确保在不同设备上都有良好的显示效果
错误处理:
使用 uni.$u.toast 提示用户登录失败的原因,以便可以进行必要的调整
其中的图片还有路径等细节 ,可放置个人的东西
对应的小程序界面如下:
js方法如下:
布局如下:
补充两个引入的js文件
获取后端验证码的js文件:
md5加密
到此这篇关于Java结合uniapp实现验证码功能的示例详解的文章就介绍到这了,更多相关Java uniapp验证码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!