Bootstrap+web+Idea实现登录页面（含验证码）

最新推荐文章于 2025-06-15 12:15:51 发布

原创

最新推荐文章于 2025-06-15 12:15:51 发布 · 2.3w 阅读

32 ·

CC 4.0 BY-SA版权

本文介绍了如何结合Bootstrap、自定义CSS样式以及Java实现一个包含验证码功能的登录页面。首先，概述了Bootstrap的基本学习资源和环境下载。接着，详细说明了验证码的实现过程，包括Java类MakeCertPic.java的使用以及配置文件和国际化标签的设置。在jsp页面中，引入了c和fmt标签库以支持动态语言切换。最后展示了登录页面的最终效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、有关bootstrap的学习这边就不讲了，不会的请参考http://www.runoob.com/bootstrap/bootstrap-tutorial.html

2、bootstrap的环境下载:http://www.bootcss.com

style.css(自己设置的css样式)

html {
	background: url("../../assets/img/windows-10.jpg") no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

body {
	padding-top: 20px;
	font-size: 14px;
	background: transparent;
	height:300px;
	overflow:auto
}

h1 {
	font-weight: 400;
	font-size: 25px;
}


.panel {
	background-color: rgba(255, 255, 255, 0.1);
	align:center;
	padding-top: 20px;
}


/* footer start */
#footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	/* Set the fixed height of the footer here */
	height: auto;
	text-align: center;
}

.container {
	width: auto;
	max-width: auto;
	padding: 80px 15px;
	position: relative; 
	overflow: center;
}

.center-vertical {
    position:relative;
    /* top:50%;
    transform:translateY(-0px); */
    -ms-transform: rotate(0deg); /* IE 9 */
	-moz-transform: rotate(0deg); /* Firefox */
	-webkit-transform: rotate(0deg); /* Safari 和 Chrome */
	-o-transform: rotate(0deg); /* Opera */
}

img图片

3、验证码的实现（通过一个类，把生成的数字转换成图片）

MakeCertPic.java

package cn.voicecodes.makecertpic;

import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;

/**
 * 生成验证码图片
 */
public class MakeCertPic {
	private static final Color Color = null;
	private char mapTable[] = { 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i',
			'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v',
			'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8',
			'9',  };


	/**
	 * 功能:生成彩色验证码图片 参数width为生成图片的宽度,参数height为生成图片的高度,参数os为页面的输出流
	 */

	public String getCerPic(int width, int height, OutputStream os) {
		if (width < 60) {
			width = 60;
		}
		if (height <= 0) {
			height = 20;
		}
		BufferedImage image = new BufferedImage(width, height,
				BufferedImage.TYPE_3BYTE_BGR);
		// 获取图形上下文
		Graphics graphics = image.getGraphics();
		// 设定背景颜色
		graphics.setColor(new Color(0xDCDCDC));
		graphics.fillRect(0, 0, width, height);
		// 边框
		graphics.setColor(Color.black);
		graphics.drawRect(0, 0, width - 1, height - 1);
		// 随机产生验证码
		String strEnsure = "";
		// 4代表4位验证码
		for (int i = 1; i <= 4; i++) {
			strEnsure += mapTable[(int) (mapTable.length * Math.random())];
		}
		// 将图形验证码显示在图片中
		graphics.setColor(Color.black);
		graphics.setFont(new Font("Atlantic Inline", Font.PLAIN, 20));
		String str = strEnsure.substring(0, 1);
		graphics.drawString(str