Bootstrap+web+Idea實現登入頁面（含驗證碼）

阿新 • • 發佈：2019-01-17

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

        }
    %>

<%@ 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 &copy; 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>

最終效果圖：

Bootstrap+web+Idea實現登入頁面（含驗證碼）

style.css(自己設定的css樣式) html { background: url("../../assets/img/windows-10.jpg") no-repeat center center fixed; -webkit-b

三層架構(MVC)實現簡單登陸註冊驗證（含驗證碼）

前言在我的上一篇微博裡我已經提出了登陸的方法，當時我採取的是純servlet方式，因為當時剛接觸到servlet，正好網上沒有這方面的全面講解，所以我就發飆了。不過在現實生產中我們大多采用的三層架構。所

php通過curl擴展進行模擬登錄（含驗證碼）

程序 valid 做的 .cn ica ews fclose har user 以下為本人工作中遇到的需要做的事情，之前也沒怎麽用過curl，查了好多資料，才稍微弄明白一點；本文所有內容只是自己平日工作的記錄，僅供大家參考：<?php/*** 模擬登錄*/head

登入模組（手機驗證碼）

本人為實習生，第一次寫部落格，寫的不好的大家多多諒解應公司近期需求，需要單獨開發一個後臺管理系統。自己按實際業務寫了一個登入介面已經實現，時序圖如下原始碼牽扯業務量太大，這裡只放出部分關鍵實現原始碼，整合思路可以配合時序圖去理解。Controller層package com.

【Java並發編程】之六：Runnable和Thread實現多線程的區別（含代碼）

技術分享 runnable 避免實際應用 details div 一個預測 enter 轉載請註明出處：http://blog.csdn.net/ns_code/article/details/17161237 Java中實現多線程有兩種方法：繼承Thre

Web API 2 入門——創建ASP.NET Web API的幫助頁面（谷歌翻譯）

鏈接所有 action 解決方案 fec amp 開發人員 sharp ima 在這篇文章中創建API幫助頁面將幫助頁面添加到現有項目添加API文檔在敞篷下下一步作者：Mike Wasson 創建Web API時，創建幫助

10.折線連接--WEB設計器JQUERY插件講解（含源碼）

href 連接點 connector icon play span 進行就是表單關鍵字：設計器源代碼，Web設計器，工作流設計器，jQuery插件，組態設計器，SCADA系統設計器，流程圖設計，表單設計建模，報表設計，可視化，設計時，運行時，輕量級開放平臺。前面章節

12.手機端如何拖動組件--WEB設計器JQUERY插件講解（含源碼）

鼠標事件 component 移動 edt design 說明文檔 mov each offset 關鍵字：設計器源代碼，Web設計器，工作流設計器，jQuery插件，組態設計器，SCADA系統設計器，流程圖設計，表單設計建模，報表設計，可視化，設計時，運行時，輕量級開放平

13.美化界面--WEB設計器JQUERY插件講解（含源碼）

計時 erl 設計時流程圖 spirit ora 輕量 com 源代碼今天花了一個小時對頁面略做了一些美化，看起來更專業了點，主要是一些背景圖片之類的樣式調整，初學者可以看下，如何切分spirit圖片，遇到問題主要是LI中的元素如何垂直居中的問題（解決方案是li設

SSM框架下登入頁面，圖片驗證碼，密碼加密對比資料庫資料（二）

登入頁面的Controller的程式碼如下：在這過程中，需要對填入資料進行判斷，是否為使用者名稱存在？是否密碼有誤？是否驗證碼有誤？如若都沒有錯誤則頁面跳轉至登入成功頁面。 @RequsetMapper("/login.do") public @Respons

jsp實現登入註冊（與資料庫對接）

最近做了一些影象處理的內容，閒暇時間搞了下jsp，終於把至少兩個月之前的程式碼的bug找出來了... 具體內容我在之前一篇博文有介紹，主要是增加了資料庫的部分。其實一樣處理，獲得輸入的使用者名稱，密碼，然後判斷是否需要在當前頁面用javascipt處理下（比如註冊肯定是需要

嵌入式web伺服器boa移植全過程（含圖解過程）

移植平臺：mini2440（arm9 s3c2440）開發板，核心2.6.29 一、boa下載和安裝： 1、修改編譯安裝檔案： 1）在www.boa.org下載boa-0.94.13.tar.gz 並解壓 2）在src目錄下執行./configure生成Ma

IntelliJ IDEA 下載安裝（含註冊碼）

IntelliJ IDEA號稱當前Java開發效率最高的IDE工具。 IntelliJ IDEA有兩個版本：社群版(Community)和旗艦版(Ultimate)。社群版是免費的、開源的，但功能較少; 旗艦版提供了較多的功能 1.

SpringMVC攔截器實現登入認證（2017修正版）

當使用到springmvc的做網頁工程的時候，總會遇到需要判斷登陸許可權的，一般的做法是每次登陸的話，傳送給後臺，後臺返回一個唯一的token，以便標識使用者每一次請求的許可權，如果沒有登陸成功，則token為空，訪問任意網址都會跳到登陸介面，所以網上查了，有很多

轉：【Java並發編程】之五：volatile變量修飾符—意料之外的問題（含代碼）

功能模式 aik 執行方法 end bold 有變目的轉載請註明出處： volatile用處說明在JDK1.2之前，Java的內存模型實現總是從主存（即共享內存）讀取變量，是不需要進行特別的註意的。而隨著JVM的成熟和優化，現在在多線程環境下vo

轉：【Java並發編程】之二十：並發新特性—Lock鎖和條件變量（含代碼）

ets exc n) 否則 max 長時間 info trace space 簡單使用Lock鎖 Java 5中引入了新的鎖機制——Java.util.concurrent.locks中的顯式的互斥鎖：Lock接口，它提供了比synchronized更加廣泛的鎖

轉：【Java並發編程】之十八：第五篇中volatile意外問題的正確分析解答（含代碼）

深入規則 rup lis con method 執行 change .text 轉載請註明出處：http://blog.csdn.net/ns_code/article/details/17382679 在《Java並發編程學習筆記之五：volatile變量修

轉：【Java並發編程】之十六：深入Java內存模型——happen-before規則及其對DCL的分析（含代碼）

無需 bit 對象引用說了 final 緩存機器通過 round 轉載請註明出處：http://blog.csdn.net/ns_code/article/details/17348313 happen—before規則介紹 Java語言中有一個“先行發生

轉：【Java並發編程】之十二：線程間通信中notifyAll造成的早期通知問題（含代碼）

data light lan 添加項 article util tool 元素 seconds 轉載請註明出處：http://blog.csdn.net/ns_code/article/details/17229601 如果線程在等待時接到通知，但線程等待的條件

轉：【Java並發編程】之十九：並發新特性—Executor框架與線程池（含代碼）

接口類容易 20px 了解大小執行c 生命周期 schedule p s Executor框架簡介在Java 5之後，並發編程引入了一堆新的啟動、調度和管理線程的API。Executor框架便是Java 5中引入的，其內部使用了線程池機制，它在java.

Bootstrap+web+Idea實現登入頁面（含驗證碼）

相關推薦