前台页面:
<title>登录</title>
<div class="col" style="border:1px solid #CCC;">
<div>
<div style="border-bottom:1px solid #CCC;text-align:center;height:50px;">
<div class="login" style="float:left;">
<a href="javascript:void(0);"id="switch_qlogin">微信登录</a>
</div>
<span style="float:left;top:10px;">|</span>
<div class="login" style="float:right;">
<a href="javascript:void(0);" id="switch_login">账户登录</a>
</div>
</div>
<br><br>
<div id="welogin">
<div id="login_container"></div>
<form class="form-horizontal" method="post" action="" id="form">
<table>
<tr>
<td>
<label class="control-label col-md-2 col-md-offset-1" >用户名:</label>
</td>
<td>
<div class="col-md-6">
<@s.textfield name="user.account" id="userAccount" class="form-control" autocomplete="off" required=true maxlength="20" style="width:300px;"/>
</div>
</td>
</tr>
<tr>
<td>
<label class="control-label col-md-2 col-md-offset-1" >密码:</label>
</td>
<td>
<div class="col-md-6">
<input type="password" id="pwd" name="user.password" class="form-control" required=true maxlength="20" style="width:300px;"/>
</div>
</td>
</tr>
<tr>
<td>
<label class="control-label col-md-2 col-md-offset-1" >验证码:</label>
</td>
<td>
<@s.textfield id="verift_input" placeholder="请输入验证码" maxlength="5"/>
<a href="javascript:void(0);" id="update" rel="external nofollow" title="点击更换验证码">
<img id="imgVerify" alt="更换验证码" height="36" width="170" >
</a>
<p id="ms" style="font-size:12px;"></p>
</td>
</tr>
<tr>
<td></td>
<td>
<div class="col-md-6" style="font-size:14px;float:left;">
<p>忘记密码</p>
</div>
<div class="col-md-6" style="font-size:14px;float:right;">
<p><a href="${base}/front/user/register">立即注册</a></p>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="btn-group">
<button type="button" id="login" onclick="aaogin();" class="btn btn-circle btn_list"> <i class="fa fa-times"></i><span class="hidden-sm hidden-xs">登录</span> </button>
</div>
<td>
</tr>
</table>
</form>
</div>
</div>
</div>
<!-- END SAMPLE FORM PORTLET-->
<style>
.login{
width:48%;
height:99%;
text-align:center;
line-height:50px;
}
label{
text-align:right;
}
.col{
width:40%;
margin:0 auto;
}
.col-md-6{
width:50%;
}
table{
width:90%;
margin:0 auto;
margin-top:20px;
}
table tr{
height:50px;
}
button{
width:200px;
height:40px;
margin-left:30%;
}
#login_container{
margin-left:100px;
}
</style>
<script src="${base}/resources/m45/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//获得上一级页面的url
var url=document.referrer;
var obj = new WxLogin({
id:"login_container",
appid: "wx7287a60bb700fd21",
scope: "snsapi_login", // 固定参数,微信官方提供的解析参数
redirect_uri: "http%3A%2F%2Fwww.txjava.cn%2F${base}%2Ffront%2Fuser%2FcallBackLogin?url="+url, // 回调url,就是扫码后,微信官方返回一些参数(code,state),然后调用你这里指定的方法
state: "", // 该参数可以不写
style: "black", //二维码黑白风格,该参数可以不写
href: "" // 该参数可以不写
});
});
</script>
<script>
function aaogin(){
var userAccount = $("#userAccount").val();
var pwd = $("#pwd").val();
$.ajax({
type:"post",
url:"${base}/front/user/frontlogin",
data:{
"userAccount":userAccount,
"pwd":pwd,
"yan":yan,
"flag":1
},
dataType:"json",
async:false,
success:function(result){
if(result!=null){
$("#login").click(function(){
alert("重复提交");
$(this).attr("disabled","disabled");
});
//返回到上一级页面,并刷新数据
window.history.go(-1);
window.location.href=document.referrer;
}else{
alert("用户名或密码错误!");
}
}
});
}
$(function(){
$('#login_container').css('display','block');
$('#form').css('display','none');
$('#switch_qlogin').click(function(){
$('#form').css('display','none');
$('#login_container').css('display','block');
});
$('#switch_login').click(function(){
$('#form').css('display','block');
$('#login_container').css('display','none');
});
})
$("#verift_input").blur(function(){
var yan=$("#verift_input").val();
alert(yan)
$.ajax({
type:"post",
url:"${base}/front/user/yanzheng",
data:{
"yan":yan
},
dataType:"json",
async:false,
success:function(msg){
if(msg=="验证通过"){
$("#ms").html("<span style='color:green;'>"+msg+"</span>")
}else if(msg=="验证失败"){
$("#ms").html("<span style='color:red;'>"+msg+"</span>")
}
}
});
})
$(function(){
$("#imgVerify").attr("src", 'http://www.txjava.cn/visitweb/front/user/pic');
})
$("#update").click(function(){
//var img = document.getElementById("img");
$("#imgVerify").attr("src", 'http://www.txjava.cn/visitweb/front/user/pic?'+new Date().getTime());
})
</script>
工具类:
package com.ruidev.front.user.util;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Namespace;
@Namespace("/front/check")
public class DrawImageUtil {
// 图片的宽度。
private int width = 160;
// 图片的高度。
private int height = 40;
// 验证码字符个数
private int codeCount = 5;
// 验证码干扰线数
private int lineCount = 150;
// 验证码
private String code = null;
private char[] codeSequence = {'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',
'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',
'X', 'Y', 'Z', '1', '2', '3', '4', '5', '6', '7', '8', '9'};
private BufferedImage bufferedImage;
private DrawImageUtil(int width, int height){
this.width = width;
this.height = height;
}
public DrawImageUtil(int width, int height, int codeCount, int lineCount){
this(width, height);
this.codeCount = codeCount;
this.lineCount = lineCount;
createCodeImage();
}
private void createCodeImage(){
//字符所在x坐标
int x = 0;
//字体高度
int fontHeight = 0;
//字符所在y坐标
int codeY = 0;
int red = 0;
int green = 0;
int blue = 0;
x = width / (codeCount + 2);
fontHeight = height - 2;
codeY = height - 4;
bufferedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_BGR);
Graphics2D graphics2D = bufferedImage.createGraphics();
Random random = new Random();
graphics2D.setColor(Color.WHITE);
graphics2D.fillRect(0, 0, width,height);
Font font = new Font("Fixedays",Font.PLAIN,fontHeight);
graphics2D.setFont(font);
for (int i = 0; i < lineCount; i++) {
//x轴第一个点的位置
int x1 = random.nextInt(width);
//y轴第一个点的位置
int y1 = random.nextInt(height);
//x轴第二个点的位置
int x2 = x1 + random.nextInt(width >> 2);
//y轴第二个点的位置
int y2 = y1 + random.nextInt(height >> 2);
red = random.nextInt(255);
green = random.nextInt(255);
blue = random.nextInt(255);
graphics2D.setColor(new Color(red, green, blue));
graphics2D.drawLine(x1, y1, x2, y2);
}
StringBuffer randomCode = new StringBuffer(codeCount);
for (int i = 0; i < codeCount; i++) {
String strRand = String.valueOf(codeSequence[random.nextInt(codeSequence.length)]);
red = random.nextInt(255);
green = random.nextInt(255);
blue = random.nextInt(255);
graphics2D.setColor(new Color(red, green, blue));
graphics2D.drawString(strRand, (i +1) * x, codeY);
randomCode.append(strRand);
}
code = randomCode.toString();
}
public void write(String path) throws IOException {
OutputStream outputStream = new FileOutputStream(path);
this.write(outputStream);
outputStream.flush();
outputStream.close();
}
public void write(OutputStream outputStream) throws IOException {
ImageIO.write(bufferedImage, "png", outputStream);
}
public BufferedImage getBufferedImage(){
return bufferedImage;
}
public String getCode(){
return code;
}
}
/*
* 获取图片
*/
@Action("pic")
@ActionEnableAnon
public String pic() throws Exception {
response.setContentType("image/jpeg");
// 禁止图像缓存
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
HttpSession session = request.getSession();
DrawImageUtil imageUtil = new DrawImageUtil(100, 40, 5, 30);
session.setAttribute("code", imageUtil.getCode());
imageUtil.write(response.getOutputStream());
return null;
}
/*
* 验证输入的是否与图片一致
*/
@Action("yanzheng")
@ActionEnableAnon
public String yanzheng() throws Exception{
String yan=request.getParameter("yan");
if(request.getSession().getAttribute("code").equals(yan)) {
returnObject="验证通过";
}else {
returnObject="验证失败";
}
return JSON;
}