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

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, 8, 17);//8:左右距离,17:上下距离
		str = strEnsure.substring(1, 2);
		graphics.drawString(str, 20, 15);
		str = strEnsure.substring(2, 3);
		graphics.drawString(str, 35, 18);
		str = strEnsure.substring(3, 4);
		graphics.drawString(str, 45, 15);
		// 随机产生10个干扰点
		Random random = new Random();
		for (int i = 0; i <= 10; i++) {
			int x = random.nextInt(width);
			int y = random.nextInt(height);
			graphics.drawOval(x, y, 1, 1);
		}
		// 释放图形上下文
		graphics.dispose();

		try {
			ImageIO.write(image, "JPEG", os);
		} catch (IOException e) {
			e.printStackTrace();
			return "";
		}
		return strEnsure;

	}
}

makeCerPic.jsp(生成图片)

<%@ page contentType="image/jpeg"%>
<jsp:useBean id="image" scope="page"
	class="cn.voicecodes.makecertpic.MakeCertPic" />

<%
	String str = image.getCerPic(0, 0, response.getOutputStream());
	session.setAttribute("certCode", str);
	
	out.clear();
	out = pageContext.pushBody();
%>

4、语言的国际化使用了c标签和fmt标签，语言包使用的是本地配置文件，语言的切换使用的是模态框。

配置文件

mess.properties（默认语言的配置文件）

lan1=用户名
lan2=密码
lan3=验证码
lan4=登录
lan5=请输入用户名
lan6=请输入密码
lan7=请输入验证码
lan8=安全退出

mess_zh_CN.properties（中文）

lan1=用户名
lan2=密码
lan3=验证码
lan4=登录
lan5=请输入用户名
lan6=请输入密码
lan7=请输入验证码
lan8=安全退出

mess_en_US.properties（英语）

lan1=UserName
lan2=PassWord
lan3=Code
lan4=Login
lan5=Please enter your user name
lan6=Please enter your password
lan7=Please enter the verification code
lan8=Login out

mess_ja_JP.properties（日语）

lan1=ユーザー名
lan2=暗証番号
lan3=検証ヤード
lan4=ログイン
lan5=ユーザー名を入力してください
lan6=パスワードを入力してください
lan7=検証ヤードで入力してください
lan8=安全脱退

mess_zh_TW.properties（台湾）

lan1=用戶名
lan2=密碼
lan3=驗證碼
lan4=登錄
lan5=請輸入用戶名
lan6=請輸入密碼
lan7=請輸入驗證碼
lan8=安全退出

国际化的标签

在jsp页面开头加上 c标签：<%@ taglib prefix=”c” uri=”http://java.sun.com/jsp/jstl/core” %>

fmt标签:<%@ taglib prefix=”fmt” uri=”http://java.sun.com/jsp/jstl/fmt”%>

 <c:if test="${sessionScope.locale !=null }">
      <!--sessionScope 即session.getAttribute(key)获取 -->
      <fmt:setLocale value="${sessionScope.locale }"/>
 </c:if>
 <fmt:bundle basename="mess">
      <div class="input-group">
	<span class="input-group-addon">
	  <a class="glyphicon glyphicon-user"></a>
        </span>
        <input class="form-control" type="text" name="username" id="username"
               placeholder='<fmt:message key='lan5' ></fmt:message>'>
       /div>
 <fmt:bundle>

效果如下：

语言的切换（模态框）

<span style="cursor:pointer" class="primary" οnclick="on();"
                  data-toggle="modal" data-target="#myModal"> <a class="glyphicon glyphicon-wrench"></a>
			</span>
            <!-- 模态框（Modal） -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog modal-sg">
                    <div class="modal-content">
                        <!-- 模态框标题 -->
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        </div>
                        <br>
                        <!-- 模态框内容 -->
                        <div>
                            <a href="login.jsp?code=CN"><img src="assets/img/china.png">简体中文</a>    
                            <a href="login.jsp?code=TW"><img src="assets/img/taiwan.png"> 繁體中文</a>    
                            <a href="login.jsp?code=US"><img src="assets/img/american.png"> American English</a>  
                             
                            <a href="login.jsp?code=JP"><img src="assets/img/japan.png"> 日本の言叶</a>   
                        </div>
                        <br> <br>
                        <!-- 模态框尾部 -->
                    </div>
                </div>
            </div>
      <%--  </li>
    </ul>--%>
</div>
<script>
    function on() {
        $(function () {
            $('#myModal').modal({
                keyboard: true
            })
        });
    }
</script>

根据请求切换的代码

<!-- 根据请求来设置语言 -->
    <%
        String code = request.getParameter("code");
       session.setAttribute("codes",code);
        if (code != null) {
            if ("US".equals(code)) {
                session.setAttribute("locale", Locale.US);
            } else if ("CN".equals(code)) {
                session.setAttribute("locale", Locale.CHINA);
            } else if ("TW".equals(code)) {
                session.setAttribute("locale", Locale.TAIWAN);
            } else if ("JP".equals(code)) {
                session.setAttribute("locale", Locale.JAPAN);
            }

        }
    %>

<%@ page import="java.util.Locale" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<html>
<head>
    <title>登录</title>
    <meta name="viewport" content="width=devic-width, initial-scale=1, maximun-scale=1, user-scalable=no">
    <!-- 设置各个移动端的大小 -->
    <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="assets/css/style.css" rel="stylesheet"/>
    <style >
        .form-control ,.input-group-addon{
            opacity:0.8;
        }


    </style>
    <!-- 切换验证码 -->
    <script>
        function reloadcode() {
            var verify = document.getElementById('safeCode');
            verify.setAttribute('src', 'makeCerPic.jsp?it=' + Math.random());/*Math.random()点击验证码图片随机生成  */
        }
    </script>
    <!-- 根据请求来设置语言 -->
    <%
        String code = request.getParameter("code");
       session.setAttribute("codes",code);
        if (code != null) {
            if ("US".equals(code)) {
                session.setAttribute("locale", Locale.US);
            } else if ("CN".equals(code)) {
                session.setAttribute("locale", Locale.CHINA);
            } else if ("TW".equals(code)) {
                session.setAttribute("locale", Locale.TAIWAN);
            } else if ("JP".equals(code)) {
                session.setAttribute("locale", Locale.JAPAN);
            }

        }
    %>

</head>

<body data-spy="scroll" data-target=".navbar-example">
<!-- <body> -->
<div class="container a ">
    <div class="row center-vertical">
        <div class="col-sm-4 col-sm-offset-4 ">
            <form action="LoginServlet" method="post">
                <div class="input-control" align="center" style="margin-bottom: 10px">
                    <img src="assets/img/SystemLogo.png" height="74"/>
                    <h1>Unified Management Portal</h1>
                </div>
                <c:if test="${sessionScope.locale !=null }">
                    <!--sessionScope 即session.getAttribute(key)获取 -->
                    <fmt:setLocale value="${sessionScope.locale }"/>
                </c:if>
                <fmt:bundle basename="mess">
                    <div class="input-group">
							<span class="input-group-addon">
								<a class="glyphicon glyphicon-user"></a> </span> <input
                            class="form-control" type="text" name="username" id="username"
                            placeholder='<fmt:message key='lan5' ></fmt:message>'>
                    </div>
                    <div class="mess">
                        <c:if test="${!empty requestScope.mass1}">${requestScope.mass1}<br/>
                        </c:if>
                    </div>
                    <br>
                    <div class="input-group">
							<span class="input-group-addon">
								<a class="glyphicon glyphicon-lock"></a> </span> <input
                            class="form-control" type="password" name="password" id="pwd"
                            placeholder="<fmt:message key='lan6' ></fmt:message>">
                    </div>
                    <div class="mass2">
                        <c:if test="${!empty requestScope.mass2}">${requestScope.mass2}<br/>
                        </c:if>
                    </div>
                    <br>
                    <div class="input-group">
							<span class="input-group-addon">
								<a class="glyphicon glyphicon-check"></a>
							</span>
                        <input class="form-control  " type="text" name="codes" id="codes"
                               placeholder="<fmt:message key='lan7' ></fmt:message>">
                        <span class="input-group-addon"> <img src="makeCerPic.jsp"
                                                              οnclick="reloadcode();" id="safeCode"
                                                              style="cursor:pointer">
							</span>
                    </div>
                    <br>
                    <div class="mess">
                        <c:if test="${!empty requestScope.mass}">${requestScope.mass}<br/>
                        </c:if>
                    </div>
                    <br>
                    <div>
                        <p align="center">
                            <button type="submit" class="btn  btn-md btn-primary" οnclick="return doLogin(); ">
                                <fmt:message key="lan4"></fmt:message>
                            </button>
                        </p>
                        <br>
                        <br>
                        <br>
                    </div>
                </fmt:bundle>
            </form>
        </div>
    </div>
</div>
<div id="footer">
    <ul class="list-inline">
        <li>
            <p class="text-muted">Copyright &copy; 2013-2016 VoiceCyber. All right reserved</p></li>
        <li><span style="cursor:pointer" class="primary" οnclick="on();"
                  data-toggle="modal" data-target="#myModal"> <a class="glyphicon glyphicon-wrench"></a>
			</span>
            <!-- 模态框（Modal） -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog modal-sg">
                    <div class="modal-content">
                        <!-- 模态框标题 -->
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        </div>
                        <br>
                        <!-- 模态框内容 -->
                        <div>
                            <a href="login.jsp?code=CN"><img src="assets/img/china.png">简体中文</a>    
                            <a href="login.jsp?code=TW"><img src="assets/img/taiwan.png"> 繁體中文</a>    
                            <a href="login.jsp?code=US"><img src="assets/img/american.png"> American English</a>  
                             
                            <a href="login.jsp?code=JP"><img src="assets/img/japan.png"> 日本の言叶</a>   
                        </div>
                        <br> <br>
                        <!-- 模态框尾部 -->
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>
<script>
    function on() {
        $(function () {
            $('#myModal').modal({
                keyboard: true
            })
        });
    }
</script>
</body>
<script src="assets/bootstrap/js/jquery-3.0.0.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</html>

最终效果图：

原文链接：https://blog.csdn.net/sanluo11/article/details/54407956

你可能也喜欢