好看的登陆界面java_简单又美观的登录界面

蓝桥杯昨天结束了，小编发挥的很不好，不开心~

所以，今天就不讲算法，讲一下看的见的jsp登录界面吧。

李春波 - 岁月(管弦乐版)

04:13来自浪潮之巅的小萝卜头

登录界面效果图:

是不是简洁又美观呢，其实前端代码实现比较的容易，后端代码的实现有一定的难度哦~

涉及到验证码的实现，用户名和密码的校验等等。

实现步骤:

1.login.jsp中form表单的完成

需要四个文本框，三个输入框，一个图片和一个按钮控件~

下面是form表单的代码实现(为了样式的好看，引入了CSS)

用户名:

密码:

验证码： 看不清？

2.对用户名和密码的验证：

这里用到了javascript，因为怕小伙伴们弄不太懂，就先用javascript，没有用到ajax表单验证等等

3.验证码的随机生成和验证码图片和数字的更换

这就要用到javascript和java类来实现

显示script用于验证码的更换

function changeValidateCode() { document.getElementById("validateCode").src = "ValidateCodeServlet?rand=" + Math.random(); }

接着就是如何实现这个验证码生成的函数

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(""); }

这样通过这简单的四步就完成了，小伙伴们学会了吗？，不会的可以在评论区留言哦~

结语:

昨天小编因为时间原因发了个图集，还因为图片原因，没被推荐，很伤心，嘤嘤嘤~~~

成功的路上并不拥挤，因为懂得坚持的人不多~ 爱编程的小萝卜头~