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> <inputclass="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> <inputclass="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>

最终效果图：

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

用来向登录页面输出验证码图片的一般处理程序页面
这是自己以前做的B/S项目中的一个输出验证码图片的页面,没什么技术含量,希望高手们不要嘲笑,只是希望为需要帮助的人尽一点绵薄之力罢了! 页面简介:该页面是一个以ashx 为后缀的一般处理程序页面,用于 ...
模拟web访问有登录且有验证码的登录后抓取数据
模拟web访问有登录且有验证码的登录后抓取数据 1 取验证码 1 在窗体上放一个picturebox (imgValidate)存放获取的验证码图片, 2 用浏览器的开发者工具firefox (f12 ...
【一、bootstrap框架前端注册登录页面】
一.使用bootstrap框架写一个简易的前端登录页面. 先上截图下面开始记录本人使用bootstrap框架写这个登录页面的过程 1.bootstrap需要的配置文件 <!-- 新 Boots ...
cas服务器登录页面添加验证码
本文的是以cas-4.1.5进行的,cas源代码下载官网:https://apereo.github.io/cas/4.2.x/index.html. 1.在cas工程的web.xml增加验证码功能的 ...
使用bootstrap框架实现简单登录页面
实现思路:从上到下,从左到右一开始没想到怎么实现的是验证码和图片那里,实现验证码和图片那一块的布局还是一个input控件和一张图片,使用bootstrap里的input控件默认情况下,是占一行的. ...
app登录界面背景 css_计算机毕业设计中Java web实现简登录页面（MyBatis+jsp+servlet+html+css+javascript）...
点击上方"蓝字",关注我们. 本文利用MyBatis+jsp+servlet+html+css+javascript实现了一个简单的登录页面.对用户输入的用户名和密码就行校验,校验 ...
登录页面带验证码html,使用H5+css3+js实现带验证码的登录页面
使用H5+css3+js实现带验证码的登录页面发布时间:2020-10-28 19:51:18 来源:亿速云阅读:151 作者:Leah 本篇文章为大家展示了使用H5+css3+js实现带验证码的 ...
使用opencv破解滑块验证码：以今日头条PC端登录页面滑块验证码为例
本文目标人群:python爬虫工程师一.首先看看破解的效果图二.滑块验证码的破解滑块验证码的破解的难点主要有两个:计算出滑块到缺口的距离和模拟人拖动滑块的轨迹. 如何计算出滑块到缺口的距离?从网 ...
Bootstrap JQuery 制作一个登录页面
使用Bootstrap和 JQuery 制作一个简单登录页面: 链接:https://pan.baidu.com/s/1wJyL1rdVST0cVPfcbuIQlw 提取码:6666 1. 实现图片的 ...

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

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

最新文章

热门文章