登录界面效果图:
是不是简洁又美观呢，其实前端代码实现比较的容易，后端代码的实现有一定的难度哦~
涉及到验证码的实现，用户名和密码的校验等等。代码过多，防止大家疲劳，中间加了图片
实现步骤:
1.login.jsp中form表单的完成
需要四个文本框，三个输入框，一个图片和一个按钮控件~
下面是form表单的代码实现（为了样式的好看，引入了CSS）
<!-- 登录部分开始 -->
<div class="content">
<!-- <div class="page_name">登录</div> -->
<div class="login_content">
<form action="/project3/login_verify" method="post" onsubmit="return validate();">
<div class="login_l">
<div class="span1">
<label class="tn-form-label">用户名:</label>
<input class="tn-textbox" type="text" name="username" id="username">
<label style="color: red" id="usernameValidate"></label>
</div>
<div class="span1">
<label class="tn-form-label">密码:</label> <input class="tn-textbox"
type="password" name="password" id="password">
</div>
<div class="span1">
<label class="tn-form-label">验证码：</label> <input
class="tn-textbox-long" type="text" name="verifyCode"> <span>
<img src="ValidateCodeServlet"
id="validateCode" title="点击换一换" onclick="changeValidateCode()">
<a href="javascript:changeValidateCode();">看不清？</a>
</span>
</div>
<div class="tn-form-row-button">
<div class="span1">
<input name="submit" type="submit" class="tn-button-text"
value="登录">
</div>
</div>
<div class="clear"></div>
</div>
</form>
</div>
</div>
<!-- 登录部分结束 -->
2.对用户名和密码的验证：
这里用到了javascript，因为怕小伙伴们弄不太懂，就先用javascript，没有用到ajax表单验证等等
<script type="text/javascript">
function validate() {
var username = document.getElementById("username");
var password = document.getElementById("password");
if (username.value == "") {
alert("用户名不能为空！");
username.focus();
return false;
}else if (username.value.length<6 || username.value.length>12) {
alert("用户名长度不符合要求，请输入6-12位用户名!");
username.focus();
return false;
}
if (password.value == "") {
alert("密码不能为空！");
password.focus();
return false;
}else if (password.value.length<6 || password.value.length>12) {
alert("密码长度不符合要求，请输入6-12位密码!");
password.focus();
return false;
}
return true;
}
</script>
3.验证码的随机生成和验证码图片和数字的更换
这就要用到javascript和java类来实现
显示script用于验证码的更换
<script>
<!--验证码的更换-->
function changeValidateCode() {
document.getElementById("validateCode").src = "ValidateCodeServlet?rand="
+ Math.random();
}
</script>
接着就是如何实现这个验证码生成的函数
package servlet;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* 验证码图像生成
*
* @author QST青软实训
*
*/
@WebServlet("/ValidateCodeServlet")
public class ValidateCodeServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public ValidateCodeServlet() {
super();
}
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// 设置响应头 Content-type类型
response.setContentType("image/jpeg");
// 获取二进制数据输出流对象
ServletOutputStream out = response.getOutputStream();
// 创建缓冲图象
int width = 60;
int height = 20;
BufferedImage imgbuf = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
Graphics2D g = imgbuf.createGraphics();
// 设定背景色
g.setColor(getRandColor(200, 250));
// 设定图像形状及宽高
g.fillRect(0, 0, width, height);
// 随机产生100条干扰线，使图象中的认证码不易被其它程序探测到
Random r = new Random();
g.setColor(getRandColor(160, 200));
for (int i = 0; i < 100; i++) {
int x = r.nextInt(width);
int y = r.nextInt(height);
int xl = r.nextInt(12);
int yl = r.nextInt(12);
g.drawLine(x, y, x + xl, y + yl);
}
// 随机产生100个干扰点，使图像中的验证码不易被其他分析程序探测到
g.setColor(getRandColor(120, 240));
for (int i = 0; i < 100; i++) {
int x = r.nextInt(width);
int y = r.nextInt(height);
g.drawOval(x, y, 0, 0);
}
// 随机产生0-9之间的4位数字验证码
g.setFont(new Font("Times New Roman", Font.PLAIN, 18));
String code = "";
for (int i = 0; i < 4; i++) {
String rand = String.valueOf(r.nextInt(10));
code += rand;
g.setColor(new Color(20 + r.nextInt(110), 20 + r.nextInt(110),
20 + r.nextInt(110)));
g.drawString(rand, 13 * i + 6, 16);
}
System.out.println("yanzheng:"+code);
// 将验证码保存到session中
request.getSession().setAttribute("SESSION_VALIDATECODE", code);
// 输出图像
ImageIO.write(imgbuf, "JPEG", out);
out.close();
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
}
// 获取指定范围的随机颜色
private Color getRandColor(int fc, int bc) {
Random random = new Random();
if (fc > 255)
fc = 255;
if (fc < 0)
fc = 0;
if (bc > 255)
bc = 255;
if (bc < 0)
bc = 0;
int r = fc + random.nextInt(bc - fc);
int g = fc + random.nextInt(bc - fc);
int b = fc + random.nextInt(bc - fc);
return new Color(r, g, b);
}
}
4.验证码的校验
同样验证码的校验也需要java来进行实现。
这里还用到了Session，Session的作用先来简介一下：
Session:在计算机中，尤其是在网络应用中，称为“会话控制”。Session 对象存储特定用户会话所需的属性及配置信息。这样，当用户在应用程序 的 Web 页之间跳转时，存储在 Session 对象中的变量将不会丢失，而是在整个用户会话中一直存在下去。当用户请求来自应用程序的 Web 页时，如果该用户还没有会话，则 Web 服务器将自动创建一个 Session 对象。当会话过期或被放弃后，服务器将终止该会话。Session 对象最常见的一个用法就是存储用户的首选项。例如，如果用户指明不喜欢查看图形，就可以将该信息存储在 Session 对象中。有关使用 Session 对象的详细信息，请参阅“ASP 应用程序”部分的“管理会话”。注意 会话状态仅在支持 cookie 的浏览器中保留。
下面是相当的代码：
写在继承了HttpServlet的类中doPost重写方法中。
下面是这部分代码的实现:
// 判断验证码是否正确
String sessionValidateCode = (String)req.getSession().getAttribute("SESSION_VALIDATECODE");
System.out.println(sessionValidateCode);
if(!sessionValidateCode.equals(verifyCode)){
out.print("<script type='text/javascript'>");
out.print("alert('请正确输入验证码！');");
out.print("window.location='login.jsp';");
out.print("</script>");
}
这样通过这简单的四步就完成了，小伙伴们学会了吗？，不会的可以在评论区留言哦~
结语:
