初始前端页面了解
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IMUT_BANK ATM WelCome!!</title>
<link href="css/login.css" rel="stylesheet" rev="stylesheet" type="text/css" media="all" />
<link href="/Final/images/nmb.png" rel="shortcut icon"/>
<script type="text/javascript" src="js/jQuery1.7.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery1.42.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.js"></script>
<script type="text/javascript" src="js/Validform_v5.3.2_min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $tab_li = $('#tab ul li');
$tab_li.hover(function(){
$(this).addClass('selected').siblings().removeClass('selected');
var index = $tab_li.index(this);
$('div.tab_box > div').eq(index).show().siblings().hide();
});
});
</script>
<script type="text/javascript">
$(function() {
/*用户登录*/
$("#stu_username_hide").focus(function () {
var username = $(this).val();
if (username == '输入卡号') {
$(this).val('');
}
});
$("#stu_username_hide").focusout(function () {
var username = $(this).val();
if (username == '') {
$(this).val('输入卡号');
}
});
$("#stu_password_hide").focus(function () {
var username = $(this).val();
if (username == '输入密码') {
$(this).val('');
}
});
$("#stu_password_hide").focusout(function () {
var username = $(this).val();
if (username == '') {
$(this).val('输入密码');
}
});
$(".stu_login_error").Validform({
tiptype: function (msg, o, cssctl) {
var objtip = $(".stu_error_box");
cssctl(objtip, o.type);
objtip.text(msg);
},
ajaxPost: true
});
/*管理员登录*/
$("#tea_username_hide").focus(function () {
var username = $(this).val();
if (username == '输入用户名') {
$(this).val('');
}
});
$("#tea_username_hide").focusout(function () {
var username = $(this).val();
if (username == '') {
$(this).val('输入用户名');
}
});
$("#tea_password_hide").focus(function () {
var username = $(this).val();
if (username == '输入密码') {
$(this).val('');
}
});
$("#tea_password_hide").focusout(function () {
var username = $(this).val();
if (username == '') {
$(this).val('输入密码');
}
});
$(".tea_login_error").Validform({
tiptype: function (msg, o, cssctl) {
var objtip = $(".tea_error_box");
cssctl(objtip, o.type);
objtip.text(msg);
},
ajaxPost: true
});
})
</script>
<script type="text/javascript">
$(function(){
$(".screenbg ul li").each(function(){
$(this).css("opacity","0");
});
$(".screenbg ul li:first").css("opacity","1");
var index = 0;
var t;
var li = $(".screenbg ul li");
var number = li.size();
function change(index){
li.css("visibility","visible");
li.eq(index).siblings().animate({opacity:0},3000);
li.eq(index).animate({opacity:1},3000);
}
function show(){
index = index + 1;
if(index <= number-1){
change(index);
}else{
index = 0;
change(index);
}
}
t = setInterval(show,8000);
//根据窗口宽度生成图片宽度
var width = $(window).width();
$(".screenbg ul img").css("width",width+"px");
});
</script>
</head>
<body>
<div id="tab">
<ul class="tab_menu">
<li class="selected">用户登录</li>
<li>管理员登录</li>
</ul>
<div class="tab_box">
<!-- 用户登录开始 -->
<div>
<div class="stu_error_box"></div>
<form action="<%=request.getContextPath()%>/UserLogin" method="post" class="stu_login_error">
<div id="username">
<label>卡 号：</label>
<input type="text" id="stu_username_hide" name="ICNo" placeholder="输入卡号" nullmsg="卡号不能为空！" datatype="s6-18" errormsg="卡号范围在6~18个字符之间！" sucmsg="卡号验证通过！"/>
<!--ajaxurl="demo/valid.jsp"-->
</div>
<div id="password">
<label>密 码：</label>
<input type="password" id="stu_password_hide" name="pwd" placeholder="输入密码" nullmsg="密码不能为空！" datatype="*6-16" errormsg="密码范围在6~16位之间！" sucmsg="密码验证通过！"/>
</div>
<p style="color:red;font-size: 14px" >${error}</p>
<div id="login">
<button type="submit">登录</button>
</div>
</form>
</div>
<!-- 用户登录结束-->
<!-- 管理员登录开始-->
<div class="hide">
<div class="tea_error_box"></div>
<form action="<%=request.getContextPath()%>/login" method="post" class="tea_login_error">
<div id="username">
<label>用户名：</label>
<input type="text" id="tea_username_hide" placeholder="请输入用户名" name="name" nullmsg="用户名不能为空！" datatype="s6-18" errormsg="用户名范围在6~18个字符之间！" sucmsg="用户名验证通过！"/>
<!--ajaxurl="demo/valid.jsp"-->
</div>
<div id="password">
<label>密 码：</label>
<input type="password" id="tea_password_hide" placeholder="请输入密码" name="password" nullmsg="密码不能为空！" datatype="*6-16" errormsg="密码范围在6~16位之间！" sucmsg="密码验证通过！"/>
</div>
<p style="color:red;font-size: 14px" >${error}</p>
<div id="login">
<button type="submit">登录</button>
</div>
</form>
</div>
<!-- 管理员登录结束-->
</div>
</div>
<div class="bottom">©2021 <a href="javascript:;" target="_blank">关于</a> <span>京ICP证030173号</span> <img width="13" height="16" src="images/copy_rignt_24.png" /></div>
<div class="screenbg">
<ul>
<li><a href="javascript:;"><img src="<%=request.getContextPath()%>/images/forest-3840x2160-sunset-artwork-4k-20035.jpg" length="100%" width="100%"></a></li>
</ul>
</div>
</body>
</html>
通过代码我们可以看到前端界面主要就是获取到了用户输入的用户名、密码，然后传递给后端，想要完成管理员的用户登录我们需要拿到前端传递的用户名密码在数据库中校验，再将检测的结果返回给前端页面。
首先我们在servlet文件夹中新建servlet文件~起名为AdminLoginServlet
这个文件中主要是处理Get和Post请求~
package com.atm.servlet;
import com.atm.pojo.Manager;
import com.atm.service.AdminUserService;
import com.atm.service.impl.AdminUserServiceImpl;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.sql.SQLException;
/**
* 管理员登录
*/
@WebServlet("/login")
public class AdminLoginServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException,IOException{
//获得请求参数
String name = request.getParameter("name");
String password = request.getParameter("password");
//调用业务层进行代码处理
AdminUserService adminUserService = new AdminUserServiceImpl();
try {
Manager manager = adminUserService.findManager(name, password);
if (manager == null) {
//登录失败
System.out.println("登录失败了");
request.setAttribute("error", "用户登录失败");
request.getRequestDispatcher("changepage/login.jsp").forward(request, response);
System.out.println(request);
}else {
//登录成功，跳转到后台用户列表页面展示
response.sendRedirect("list");
}
}catch (Exception ex){
ex.printStackTrace();
}
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException {
doPost(request,response);
}
}
但是我们还需要调用业务层对数据进行校验，所以我们在service文件夹中新建AdminUserService接口，通过账户名密码进行查询。
package com.atm.service;
import com.atm.pojo.Manager;
import java.sql.SQLException;
//管理员业务接口
public interface AdminUserService {
//根据账户密码查询管理员
public Manager findManager(String name, String password)throws Exception;
}
想要完成查询，我们还需要一个实体类来存储和传输数据~
所以我们在pojo包下新建Manager实体类，并生成get、set方法。
package com.atm.pojo;
public class Manager {
private Integer id;
private String name;
private String password;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
我们还需要一个具体的实现类来实现这个接口，所以我们在service包下新建impl包，impl包一般存放接口的实现类，全称为implement，实现的意思。
package com.atm.service.impl;
import com.atm.dao.AdminUserDao;
import com.atm.pojo.Manager;
import com.atm.service.AdminUserService;
import java.sql.SQLException;
//管理员业务实现类
public class AdminUserServiceImpl implements AdminUserService {
private AdminUserDao adminUserDao=new AdminUserDao();
@Override
public Manager findManager(String name, String password) throws Exception {
return adminUserDao.findMananger(name,password);
}
}
在这里我们调用了AdminUserDao（持久层，也就是我们的数据层）用sql语句对数据库进行查询操作：
package com.atm.dao;
import com.atm.pojo.Manager;
import com.atm.utill.DBUtils;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
//管理员用户持久层操作
public class AdminUserDao {
//根据用户名密码查询用户
public Manager findMananger(String name, String password)throws Exception{
Connection connection= DBUtils.getConnection();
PreparedStatement preparedStatement = connection.prepareStatement("select * from manage where name =? and password=?");
preparedStatement.setString(1,name);
preparedStatement.setString(2,password);
ResultSet resultSet = preparedStatement.executeQuery();
Manager manager=null;
if (resultSet.next()){
manager=new Manager();
manager.setId(resultSet.getInt(1));
manager.setName(resultSet.getString(2));
manager.setPassword(resultSet.getString(3));
}
return manager;
}
}
然后我们对前端页面进行处理，主要是对没用的效果进行注释：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IMUT_BANK ATM WelCome!!</title>
<link href="css/login.css" rel="stylesheet" rev="stylesheet" type="text/css" media="all" />
<link href="/Final/images/nmb.png" rel="shortcut icon"/>
<script type="text/javascript" src="js/jQuery1.7.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery1.42.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.js"></script>
<script type="text/javascript" src="js/Validform_v5.3.2_min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $tab_li = $('#tab ul li');
$tab_li.hover(function(){
$(this).addClass('selected').siblings().removeClass('selected');
var index = $tab_li.index(this);
$('div.tab_box > div').eq(index).show().siblings().hide();
});
});
</script>
<script type="text/javascript">
$(function() {
/*用户登录*/
$("#stu_username_hide").focus(function () {
var username = $(this).val();
if (username == '输入卡号') {
$(this).val('');
}
});
$("#stu_username_hide").focusout(function () {
var username = $(this).val();
if (username == '') {
$(this).val('输入卡号');
}
});
$("#stu_password_hide").focus(function () {
var username = $(this).val();
if (username == '输入密码') {
$(this).val('');
}
});
$("#stu_password_hide").focusout(function () {
var username = $(this).val();
if (username == '') {
$(this).val('输入密码');
}
});
// $(".stu_login_error").Validform({
// tiptype: function (msg, o, cssctl) {
// var objtip = $(".stu_error_box");
// cssctl(objtip, o.type);
// objtip.text(msg);
// },
// ajaxPost: true
// });
/*管理员登录*/
$("#tea_username_hide").focus(function () {
var username = $(this).val();
if (username == '输入用户名') {
$(this).val('');
}
});
$("#tea_username_hide").focusout(function () {
var username = $(this).val();
if (username == '') {
$(this).val('输入用户名');
}
});
$("#tea_password_hide").focus(function () {
var username = $(this).val();
if (username == '输入密码') {
$(this).val('');
}
});
$("#tea_password_hide").focusout(function () {
var username = $(this).val();
if (username == '') {
$(this).val('输入密码');
}
});
// $(".tea_login_error").Validform({
// tiptype: function (msg, o, cssctl) {
// var objtip = $(".tea_error_box");
// cssctl(objtip, o.type);
// objtip.text(msg);
// },
// ajaxPost: true
// });
})
</script>
<script type="text/javascript">
$(function(){
$(".screenbg ul li").each(function(){
$(this).css("opacity","0");
});
$(".screenbg ul li:first").css("opacity","1");
var index = 0;
var t;
var li = $(".screenbg ul li");
var number = li.size();
function change(index){
li.css("visibility","visible");
li.eq(index).siblings().animate({opacity:0},3000);
li.eq(index).animate({opacity:1},3000);
}
function show(){
index = index + 1;
if(index <= number-1){
change(index);
}else{
index = 0;
change(index);
}
}
t = setInterval(show,8000);
//根据窗口宽度生成图片宽度
var width = $(window).width();
$(".screenbg ul img").css("width",width+"px");
});
</script>
</head>
<body>
<div id="tab">
<ul class="tab_menu">
<li class="selected">用户登录</li>
<li>管理员登录</li>
</ul>
<div class="tab_box">
<!-- 用户登录开始 -->
<div>
<div class="stu_error_box"></div>
<form action="<%=request.getContextPath()%>/UserLogin" method="post" class="stu_login_error">
<div id="username">
<label>卡 号：</label>
<input type="text" id="stu_username_hide" name="ICNo" placeholder="输入卡号" nullmsg="卡号不能为空！" datatype="s6-18" errormsg="卡号范围在6~18个字符之间！" sucmsg="卡号验证通过！"/>
<!--ajaxurl="demo/valid.jsp"-->
</div>
<div id="password">
<label>密 码：</label>
<input type="password" id="stu_password_hide" name="pwd" placeholder="输入密码" nullmsg="密码不能为空！" datatype="*6-16" errormsg="密码范围在6~16位之间！" sucmsg="密码验证通过！"/>
</div>
<p style="color:red;font-size: 14px" >${error}</p>
<div id="login">
<button type="submit">登录</button>
</div>
</form>
</div>
<!-- 用户登录结束-->
<!-- 管理员登录开始-->
<div class="hide">
<div class="tea_error_box"></div>
<form action="<%=request.getContextPath()%>/login" method="post" class="tea_login_error">
<div id="username">
<label>用户名：</label>
<input type="text" id="tea_username_hide" placeholder="请输入用户名" name="name" nullmsg="用户名不能为空！" datatype="s6-18" errormsg="用户名范围在6~18个字符之间！" sucmsg="用户名验证通过！"/>
<!--ajaxurl="demo/valid.jsp"-->
</div>
<div id="password">
<label>密 码：</label>
<input type="password" id="tea_password_hide" placeholder="请输入密码" name="password" nullmsg="密码不能为空！" datatype="*6-16" errormsg="密码范围在6~16位之间！" sucmsg="密码验证通过！"/>
</div>
<p style="color:red;font-size: 14px" >${error}</p>
<div id="login">
<button type="submit">登录</button>
</div>
</form>
</div>
<!-- 管理员登录结束-->
</div>
</div>
<div class="bottom">©2021 <a href="javascript:;" target="_blank">关于</a> <span>京ICP证030173号</span> <img width="13" height="16" src="images/copy_rignt_24.png" /></div>
<div class="screenbg">
<ul>
<li><a href="javascript:;"><img src="<%=request.getContextPath()%>/images/forest-3840x2160-sunset-artwork-4k-20035.jpg" length="100%" width="100%"></a></li>
</ul>
</div>
</body>
</html>
到这里我们就可以运行啦~
首先我们输入错的管理员用户和密码：
显示错误信息就说明成功了：
这个时候我们再输入正确的用户名和密码：
显示404就说明成功了~（因为这里的跳转我们没有实现，所以显示404才是正常的。）
实现代码已经上传到资源~
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
