<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Login</title>
<!-- Fav Icon Link -->
<link rel="shortcut icon" type="image/png" href="images/fav.png">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- themify icons CSS -->
<link rel="stylesheet" href="css/themify-icons.css">
<!-- Main CSS -->
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/green.css" id="style_theme">
<link rel="stylesheet" href="css/responsive.css">
<script src="js/modernizr.min.js"></script>
<style>
.checkCodes{
position: relative;
right: 12px;
top: 7px;
}
.center{
margin-top: 120px;
}
.error{
width: 50%;
margin-left: 120px;
}
</style>
</head>
<body class="auth-bg" >
<div class="center">
<!-- Pre Loader -->
<div class="loading">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
<!--/Pre Loader -->
<!-- Color Changer -->
<div class="theme-settings" id="switcher">
<span class="theme-click">
<span class="ti-settings"></span>
</span>
<span class="theme-color theme-default theme-active" data-color="green"></span>
<span class="theme-color theme-blue" data-color="blue"></span>
<span class="theme-color theme-red" data-color="red"></span>
<span class="theme-color theme-violet" data-color="violet"></span>
<span class="theme-color theme-yellow" data-color="yellow"></span>
</div>
<!-- /Color Changer -->
<div class="wrapper">
<!-- Page Content -->
<div id="content">
<div class="container">
<div class="row">
<div class="col-sm-6 auth-box">
<div class="lochana-box-shadow">
<h3 class="widget-title">登录</h3>
<form class="widget-form" action="${pageContext.request.contextPath}/LoginServlet" method="post">
<!-- form-group -->
<div class="form-group row">
<c:if test="${error_msg!=null}">
<div class="col-sm-12">
<div class="alert alert-danger error" role="alert">
${error_msg}
</div>
</div>
</c:if>
<div class="col-sm-12">
<input name="username" placeholder="请输入用户名" class="form-control" required="" data-validation="length alphanumeric" data-validation-length="3-12"
data-validation-error-msg="User name has to be an alphanumeric value (3-12 chars)" data-validation-has-keyup-event="true">
</div>
</div>
<!-- /.form-group -->
<!-- form-group -->
<div class="form-group row">
<div class="col-sm-12">
<input type="password" placeholder="请输入密码" name="password" class="form-control" data-validation="strength" data-validation-strength="2"
data-validation-has-keyup-event="true">
</div>
</div>
<div class="form-group row">
<div class="col-sm-8">
<input placeholder="请输入验证码" name="checkCode" class="form-control" data-validation="strength" data-validation-strength="2"
data-validation-has-keyup-event="true">
</div>
<div class="col-sm-4 checkCodes">
<a href="javascript:refreshCode()"><img src="${pageContext.request.contextPath}/checkCode" title="请点击刷新" height="80%" width="80%" id="checkCode"></a>
</div>
</div>
<!-- /.form-group -->
<!-- Check Box -->
<div class="form-check row">
<div class="col-sm-12 text-left">
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" id="ex-check-2">
<label class="custom-control-label" for="ex-check-2">记住我</label>
</div>
</div>
</div>
<!-- /Check Box -->
<!-- Login Button -->
<div class="button-btn-block">
<button type="submit" class="btn btn-primary btn-lg btn-block">登录</button>
</div>
<!-- /Login Button -->
<!-- Links -->
<div class="auth-footer-text">
<small>新用户
package web.Servlet;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
@WebServlet("/checkCode")
public class CheckCodeServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
response.setHeader("pragma","no-cache");
response.setHeader("cache-control","no-cache");
response.setHeader("expires","0");
int width = 80;
int height = 30;
BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
Graphics g = image.getGraphics();
g.setColor(Color.GRAY);
g.fillRect(0,0, width,height);
String checkCode = getCheckCode();
request.getSession().setAttribute("CHECKCODE_SERVER",checkCode);
g.setColor(Color.YELLOW);
g.setFont(new Font("黑体",Font.Bold,20));
g.drawString(checkCode,15,25);
ImageIO.write(image,"PNG",response.getOutputStream());
}
private String getCheckCode() {
String base = "0123456789ABCDEFGabcdefg";
int size = base.length();
Random r = new Random();
StringBuffer sb = new StringBuffer();
for(int i=1;i<=4;i++){
int index = r.nextInt(size);
char c = base.charAt(index);
sb.append(c);
}
return sb.toString();
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request,response);
}
}
,
<a href="sign-up.html">注册</a> 点击这里</small>
</div>
<!-- /Links -->
</form>
</div>
</div>
</div>
</div>
</div>
<!-- /Page Content -->
</div>
</div>
<!-- Jquery Library-->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Popper Library-->
<script src="js/popper.min.js"></script>
<!-- Bootstrap Library-->
<script src="js/bootstrap.min.js"></script>
<!-- Custom Script-->
<script src="js/custom.js"></script>
<script>
function refreshCode() {
let checkCode=document.getElementById("checkCode");
checkCode.src="${pageContext.request.contextPath}/checkCode?time"+new Date().getTime();
}
</script>
</body>
</html>
