这是已经开发好的验证码,咱们直接调用接口,拿过来直接用就可以了
链接:https://pan.baidu.com/s/1QMPhW5UzxmhIa7THFab5hw
提取码:6666
下面演示一下:
首先创建一个Code来先生成随机验证码,然后传到页面上即可
下面看我们的登录也页面,为了点击图片,可以自动刷新验证码,加了一点小东西,下面看代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="/jiazhongWebDemo3/login" method="post">姓名:<input type="text" name="uname"><br>密码:<input type="password" name="upwd"><br>请输入验证码:<input type="text" name="code"><br><img src="/jiazhongWebDemo3/Code" onclick="this.src=this.src+'?'+Math.random()"/><br><input type="submit" value="登录">
</form>
</body>
</html>
下面看效果:
格式以及背景并不是很好看,后期我们可以通过美化,去实现。