NO IMAGE

1.style.css

@import url('reset.css');
@import url('plug-ins/customScrollbar.min.css');
.activeNav{
background-color: #333e48 ;
}
.panel-ft{
margin-top: -20px;
}
.login-page {
background: url(../imgs/bg9.png) no-repeat fixed;
overflow: hidden;
background-size: cover;
height: 100%;
}
.authCardImg{
width:200px;height:120px;
}
.login-contain {
width: 340px;
height: auto;
position: relative;
left: 77%;
top: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
box-shadow: 0 5px 20px rgba(19, 32, 48, 0.25);
background: #ffffff;
/*   border-bottom: 5px #4bcf99 solid;
*/  border-radius: 2px;
}
.login-contain header {
padding: 10px 0;
text-align: center;
color: #97a4b1;
font-size: 14px;
border-bottom: 1px #4bcf99 solid;
letter-spacing: 5px;
}
.login-contain header h1 {
font-weight: normal;
margin-bottom: 5px;
color: #4f5f6f;
}
.login-contain header p {
text-transform: uppercase;
font-size: 12px;
color: #d7dde4;
}
.login-contain .form-content {
margin: 40px 50px;
}
.login-contain .form-content li {
margin-bottom: 15px;
overflow: hidden;
}
.login-contain .form-content li:last-child {
margin: 0;
}
.login-contain .form-content li .form-control {
background: none;
border-color: #d7dde4;
}
.login-contain .form-content li .btm-info {
font-size: 12px;
text-align: center;
color: #d7dde4;
}
.login-contain .form-content li .tips {
display: none;
margin-top: 5px;
font-size: 12px;
color: #9ca2a8;
}
.login-contain .form-content li .tips mark {
color: inherit;
}
a {
color: #969696;
}
a:hover {
color: #33be85;
}
a:active {
color: #33be85;
}

2.login.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>驗證碼demo</title>
<meta name="keywords"  content="設定關鍵詞..." />
<meta name="description" content="設定描述..." />
<meta name="author" content="DeathGhost" />
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name='apple-touch-fullscreen' content='yes'>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<link rel="icon" href="../static/base/images/icon/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="../static/base/javascript/plug-ins/layerUi/mobile/need/layer.css" />
<link rel="stylesheet" type="text/css" href="../static/base/css/style.css" />
<script src="../static/base/javascript/jquery.js"></script>
<script src="../static/js/tools.js"></script>
<script src="../static/base/javascript/plug-ins/customScrollbar.min.js"></script>
<script src="../static/base/javascript/pages/login.js"></script>
<style type="text/css">
.input1 {
padding: 7px 15px;
width: 100%;
border-radius:5px;
}
#adminName,#adminPwd{
background-color: white;
}
.df div{
margin-bottom: 10px
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
-webkit-text-fill-color: #333;
}
</style>
</head>
<body class="login-page" >
<section class="login-contain" style="border-radius:15px">
<header>
<h1>登入</h1>
</header>
<div class="form-content">
<ul style="margin-top: -27px">
<li>
<input onkeydown="KeyDown()"  autocomplete="off" style="background-color: white;border-radius:7px;" type="text" placeholder="使用者名稱..." class="input1" id="adminName"/>
</li>
<li>
<input onkeydown="KeyDown()"  autocomplete="off" style="background-color: white;border-radius:7px" type="password" placeholder="密碼..." class="input1" id="adminPwd"/>
</li>
<li>
<div class="form-group">
<div style="float: left;"  class=""><input onkeydown="KeyDown()" style="padding:6px 15px;width:122px;border-radius:5px" type="text" maxlength="5" id="code"></div>
<div onclick="flushimg()" style="float: left;margin-left: 10px;height: 36px;overflow: hidden;border-bottom: 1px solid;" ><img id="codeimg" ></div>
</div>
</li>
<li>
<button style="background-color: #4BCFA2;padding: 12px 15px;" class="btn btn-lg btn-block" onclick="login()">立即登入</button>
</li>
</ul>
</div>
</section>
<div class="mask"></div>
<script src="../static/base/javascript/plug-ins/layerUi/layer.js"></script>
<script type="text/javascript">
var uuid = guid()
flushimg()
function guid() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,
function(c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r
: (r & 0x3 | 0x8);
return v.toString(16);
});
}
function flushimg(){
var imgsrc = serverWeb "/image/genCode?v=" Math.random() "&uuid=" uuid
$("#codeimg").attr("src",imgsrc)
$("#code").val("")
}
//設定按enter鍵即提交
function KeyDown(){
if (event.keyCode == 13){
event.returnValue=false;
event.cancel = true;
login();
}
}
function login() {
var code = $("#code").val()
/* if(!code){
layer.msg('請輸入驗證碼', {time: 1000});
return false
} */
if ($("#username").val() == "" || $("#password").val() == "") {
layer.msg('請輸入使用者名稱或密碼進行登入', {time: 1000});
return;
}
$.ajax({
async:false,
type: 'POST',
url: serverWeb '/dologin',
contentType: "application/x-www-form-urlencoded",
data: {
account: $("#adminName").val(),
pwd: $("#adminPwd").val(),
uuid: uuid,
code:code
},
datatype:'json',
success: function(result) {
var result = JSON.parse(result); 
if (result.status == 'success') {
window.location.href= serverWeb 'index';
} else {
if(result.msg){
alert(result.msg)
}else{
// 登入失敗
layer.msg('使用者名稱或者密碼錯誤,請重新登入', {time: 1000});
}
flushimg()
}
}
});
}
</script>
</body>
</html>

3.ImageController

package com.project.controller;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.lang3.StringUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import redis.clients.jedis.Jedis;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.project.utils.RedisUtil;
@Controller  
@RequestMapping("/image/")  
public class ImageController  extends BaseController{ 
@RequestMapping("genCode")  
public void  genCZCode(HttpServletRequest request, HttpServletResponse response){
logger.info("genCode引數 : "   JSON.toJSONString(request.getParameterMap()));
Jedis jedis =RedisUtil.getJedis();
try {
System.setProperty("java.awt.headless", "true");
// 響應頭資訊
response.setHeader("Pragma", "No-Cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expries", 0);
String uuid = request.getParameter("uuid");
// 隨機數生成類
Random random = new Random();
// 定義驗證碼的位數
int size = 5;
// 定義變數儲存生成的驗證碼
String vCode = "";
char c;
// 產生驗證碼
for (int i = 0; i < size; i  ) {
// 產生一個26以內的隨機整數
int number = random.nextInt(26);
// 如果生成的是偶數,則隨機生成一個數字
if (number % 2 == 0) {
c = (char) ('0'   (char) ((int) (Math.random() * 10)));
// 如果生成的是奇數,則隨機生成一個字母
} else {
c = (char) ((char) ((int) (Math.random() * 26))   'A');
}
vCode = vCode   c;
}
// 儲存生成的5位驗證碼
jedis.set(uuid "-code", vCode);
System.out.println(uuid "-code---------" vCode);
jedis.expire(uuid "-code", 600);
// 驗證碼圖片的生成
// 定義圖片的寬度和高度
int width = (int) Math.ceil(size * 20);
int height = 50;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
// 獲取圖片的上下文
Graphics gr = image.getGraphics();
// 設定圖片背景顏色
gr.setColor(Color.WHITE);
gr.fillRect(0, 0, width, height);
// 設定圖片邊框
gr.setColor(Color.GRAY);
gr.drawRect(0, 0, width - 1, height - 1);
// 畫十條幹擾線
for (int i = 0; i < 5; i  ) {
int x1 = random.nextInt(width);
int y1 = random.nextInt(height);
int x2 = random.nextInt(width);
int y2 = random.nextInt(height);
gr.setColor(randomColor());
gr.drawLine(x1, y1, x2, y2);
}
// 設定字型,畫驗證碼
gr.setColor(randomColor());
gr.setFont(randomFont());
gr.drawString(vCode, 10, 22);
// 影象生效
gr.dispose();
// 輸出到頁面
ImageIO.write(image, "PNG", response.getOutputStream());
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally {
RedisUtil.returnResource(jedis);
}
}
@RequestMapping("validateCode")  
@ResponseBody
public String  validateCode(HttpServletRequest request, HttpServletResponse response){
logger.info("validateCode引數 : "   JSON.toJSONString(request.getParameterMap()));
JSONObject result = new JSONObject();
Jedis jedis = RedisUtil.getJedis();
try {
String uuid = request.getParameter("uuid");
String code = request.getParameter("code");
String cacheCode = jedis.get(uuid   "-code");
if(StringUtils.isEmpty(code) || StringUtils.isEmpty(cacheCode)){
result.put("status", "false");
result.put("msg", "驗證碼錯誤");
}else if(code.equalsIgnoreCase(cacheCode)){
result.put("status", "true");
result.put("msg", "驗證通過");
}else{
result.put("status", "false");
result.put("msg", "驗證碼錯誤");
}
} catch (Exception e) {
e.printStackTrace();
result.put("status", "false");
}finally {
RedisUtil.returnResource(jedis);
}
return result.toJSONString();
}
// 生成隨機的顏色
private Color randomColor() {
int red = r.nextInt(150);
int green = r.nextInt(150);
int blue = r.nextInt(150);
return new Color(red, green, blue);
}
private String[] fontNames = { "宋體", "華文楷體", "黑體", "微軟雅黑", "楷體_GB2312" };
private Random r = new Random();
// 生成隨機的字型
private Font randomFont() {
int index = r.nextInt(fontNames.length);
String fontName = fontNames[index];// 生成隨機的字型名稱
int style = r.nextInt(4);
int size = r.nextInt(3)   24; // 生成隨機字號, 24 ~ 28
return new Font(fontName, style, size);
}
}  

4.BaseController

@RequestMapping(value = "dologin")
@ResponseBody
public String login(HttpServletRequest request){
logger.info("login引數:"   JSON.toJSONString(request.getParameterMap()));
JSONObject result = new JSONObject();
Jedis jedis = RedisUtil.getJedis();
try {
result.put("status", "success");
String uuid = request.getParameter("uuid");
String code = request.getParameter("code");
String cacheCode = jedis.get(uuid   "-code");
if(StringUtils.isEmpty(code) ){
result.put("status", "fail");
result.put("msg", "輸入驗證碼錯誤");
return result.toJSONString();
}else if( StringUtils.isEmpty(cacheCode) ){
result.put("status", "fail");
result.put("msg", "驗證碼異常");
return result.toJSONString();
}else if(StringUtils.isEmpty(uuid)){
result.put("status", "fail");
result.put("msg", "驗證碼異常唯一碼錯誤");
return result.toJSONString();
}else if(code.equalsIgnoreCase(cacheCode)){
result.put("msg", "驗證通過");
}else{
result.put("status", "fail");
result.put("msg", "驗證碼錯誤");
return result.toJSONString();
}
String account = request.getParameter("account");
String pwd = request.getParameter("pwd");
String pwdMd5 = MD5Encoder.encode(pwd);
User sysUser = userService.loginSys(account, pwdMd5);
if(sysUser == null){
result.put("status", "fail");
result.put("msg", "賬號或密碼錯誤");
return result.toJSONString();
}
if(!sysUser.getIsenabled()){
result.put("status", "fail");
result.put("msg", "賬號已禁用");
return result.toJSONString();
}
sysUser.setPassword(null);
request.getSession().setAttribute("user", sysUser);
return result.toJSONString();
} catch (Exception e) {
e.printStackTrace();
result.put("status", "fail");
result.put("msg", "系統異常,請重新登入");
return result.toJSONString();
} finally{
RedisUtil.returnResource(jedis);
}
}