1、jsp 界面登录界面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="utf-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="/xt/admin/static/admin/layui/css/layui.css" />
<link rel="stylesheet" type="text/css" href="/xt/admin/static/admin/css/login.css" />
</head>
<body>
<div class="m-login-bg" >
<div class="login_box">
<div class="login_l_img"><img src="/xt/admin/static/admin/images/login/login-img.png" /></div>
<div class="login">
<div class="login_logo"><a href="#"><img src="/xt/admin/static/admin/images/login/login_logo.png" /></a></div>
<div class="login_name">
<p>统计系统</p>
</div>
<!-- onclick="this.style.display='none';document.getElementById('password').style.display='block';document.getElementById('password').focus();" -->
<form method="post" action="/jywstjxt/login">
<input name="dlmc" type="text" value="用户名" onfocus="this.value=''" onblur="if(this.value==''){this.value='用户名'}">
<!-- <span id="password_text" >密码</span> -->
<input name="dlmm" value="密码" type="password" id="password" onblur="if(this.value==''){document.getElementById('password_text').style.display='block';this.style.display='none'};"/>
<input value="登录" style="width:100%;" onsubmit="return false;" onclick = "submitForm()" type="button">
<div class="layui-form-item">
<div class="layui-inline" id="error" style="color: red;">
<%=request.getAttribute("err")==null?"":request.getAttribute("err") %>
</div>
</div>
</form>
</div>
<div class="copyright">版权所有@有限公司</div>
</div>
</div>
<script src="/jxt/admin/static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
function submitForm(){
var theForm = document.forms[0];
if(theForm.dlmc.value !='' && theForm.dlmm.value !=null && theForm.dlmc.value!=null && theForm.dlmm.value !="" && theForm.dlmm.value !="密码" && theForm.dlmc.value !="用户名"){
theForm.dlmm.value = window.btoa(theForm.dlmm.value);
theForm.submit();
}else{
document.getElementById("error").innerHTML = "请输入用户名和密码";
}
}
</script>
</body>
</html><input value="登录" style="width:100%;" οnsubmit="return false;" onclick = "submitForm()" type="button"> 这句话很重要，提交按钮，将form提交通过submitForm()函数进行二次处理。
下边关于submitForm()函数的说明：
function submitForm(){
var theForm = document.forms[0];
if(theForm.dlmc.value !='' && theForm.dlmm.value !=null && theForm.dlmc.value!=null && theForm.dlmm.value !="" && theForm.dlmm.value !="密码" && theForm.dlmc.value !="用户名"){
theForm.dlmm.value = window.btoa(theForm.dlmm.value); //这里进行的base64编码 window.btoa
theForm.submit();
}else{
document.getElementById("error").innerHTML = "请输入用户名和密码";
}
}2. 后台处理。
package com.zhb.Control;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.yl.dao.XtyhDao;
import com.yl.impl.XtyhImpl;
import com.yl.util.MD5Utils;
/**
* Servlet implementation class Login
*/
public class Login extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String dlmc = req.getParameter("dlmc") == null ? "" : req.getParameter("dlmc");
String dlmm = req.getParameter("dlmm") == null ? "" : req.getParameter("dlmm");
if ((dlmm != null && !"".equals(dlmm) && !"密码".equals(dlmm)) && (dlmc!=null && !"".equals(dlmc))) {
dlmm = new String(MD5Utils.decode(dlmm.trim())); //这里进行base64解码
XtyhDao yh = new XtyhImpl();
String pwd = yh.checkDl(dlmc);
if(pwd.equals(MD5Utils.stringToMD5(dlmm))){//这里将解码后的明文进行md5加密和数据库查出来的密文进行对比
req.getSession().setAttribute("dlmc", dlmc);
// 根据登录名称取到用户名称存入session
List<String> list = yh.getyh(dlmc);
req.getSession().setAttribute("yhmc", list.get(1));
resp.sendRedirect("admin/admin/index/index.jsp");
}else{
req.setAttribute("err", "登录失败：用户名或密码错误");
req.getRequestDispatcher("admin/admin/index/login.jsp").forward(req, resp);
}
}else {
req.setAttribute("err", "请输入用户名和密码");
req.getRequestDispatcher("admin/admin/index/login.jsp").forward(req, resp);
}
}
}
到此就结束了，大家有看不懂的可以在评论区留言。