Bootstrap+web+Idea实现登录页面（含验证码）
来源：互联网 发布：淘宝衣服代理加盟 编辑：程序博客网 时间：2024/05/14 18:57
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=UserNamelan2=PassWordlan3=Codelan4=Loginlan5=Please enter your user namelan6=Please enter your passwordlan7=Please enter the verification codelan8=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" onclick="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); } } %>login.jsp
<%@ 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" onclick="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" onclick="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 © 2013-2016 VoiceCyber. All right reserved</p></li> <li><span style="cursor:pointer" class="primary" onclick="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>最终效果图：
0 0
- Bootstrap+web+Idea实现登录页面（含验证码）
- ThinkPHP 登录页面（含验证码）
- 用JSP实现WEB页面登录验证
- .net登录页面实现验证码验证
- WEB登录页面加入简单验证码
- 登录页面图片验证码的实现
- flex制作一个用户登录框（含验证码）
- java实现登录窗口(含验证码验证、账户注册等)
- java 模拟登录含验证码
- 登录页面（含后台）login.php
- java实现登录页面的验证码功能
- Servlet实现用户登录页面（通过数据库验证）
- PHP实现注册登录功能完整教程及代码 含验证码
- jsp连接mysql数据库，实现含验证码的用户登录
- MyEclipse+MVC（Struts）实现登录验证（含工程源码）
- 会话： 用户一次性登录(含验证码验证)
- bootstrap 登录页面
- web中定义过滤器验证登录（未登录没有权限访问页面）
- win7上python2.7连接mysql数据库
- 百度ue编辑器关闭自动抓取远程图片
- 微信PaxosStore：深入浅出Paxos算法协议
- Node在异步I/O上的优势实践
- 2016年度回顾：32本阅读量，杂而不精，虚而不实；2017年计划：专攻，求精，务实
- Bootstrap+web+Idea实现登录页面（含验证码）
- Java synchronized详解
- HDU - 3081 Marriage Match II（最大流+并查集+二分查找）
- 最大连续子数组和
- 内存分配失败错误处理
- 解决旧版 IE 浏览器兼容问题
- 北京天宇联科技有限责任公司—T语言关键字
- meta总结
- Java NIO 简单教程
