登录界面
登录界面
一、前端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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>西南石油大学电子邮件</title>
</head>
<body>
<styletype="text/css">
#page{
background-color: white;
width: 1024px;height: 600px;
border: 1px;
margin: auto;
}
#page_head{
background-color:#F5F5F5;
height: 60px;
}
#page_body{
background-color: yellow;
height: 460px;width:964px;
margin:auto;
background-image: url(res/login_bg_03.jpg);
}
#page_foot{
background-color:#f5f5f5;
height:70px;
width:964px;
margin:auto;
padding-top: 20px;
text-align: center;
}
#logo{
margin-left: 100px;
}
#login{
margin-top: 60px;
margin-left: 550px;
width:380px;height: 350px;
position:absolute;
background-color: white;
}
#loginTitle{
width: 380px;height:40px;padding-top: 10px;
background-color: orange;
text-align: center;color:#fff;font-size: 16px;
}
#tip{
display:none;
height: 50px;width: 380px;
background-color: #cc3300;color:white;
text-align: center;line-height: 50px;
}
.textitem1{
position: absolute;
height: 40px;
left: 30px;top: 100px;
}
.textitem2{
position: absolute;
height: 40px;
left: 30px;top: 160px;
}
.btn{
height:38px;
width:100px;
border:none;
color:#fff;
font-weight: 400;
font-size: 20px;
font-family: "微软雅黑";
}
</style>
</head>
<body>
<div id="page">
<div id="page_head">
<div id="logo">
<img src="res/login_logo.png">
</div>
</div>
<div id="page_body">
<form action="${pageContext.request.contextPath }/LoginTestServlet" method="post">
<div id="login">
<div id="loginTitle">
<b>账号登录</b>
</div>
<div id="tip">
请填写用户名
</div>
<div class="textitem1">
<input style="width:320px" id="input_user" type="text" name="name" placeholder="用户名">
</div>
<div class="textitem2">
<input style="width:320px" id="input_password" type="password" name="password" placeholder="密码">
</div>
<div style="position: absolute;left: 30px;top: 220px;width: 320px">
<span style="color:red;float:left">学生选择@stu.swpu.edu.cn</span>
<a href="#" style="float:right;">忘记密码</a>
</div>
<div style="position: absolute;left: 30px;top: 260px;width: 320px">
<input style="float: right;background: url(res/login_btn.jpg)" class="btn" type="submit" value="登录">
</div>
</div>
</form>
</div>
<div id="page_foot">
西南石油大学
</div>
</div>
</body>
</body>
</html>
二、运行效果
三、后台验证用户和密码的正确性
创建servletà LoginTestServlet
其实现方法如下：
public class LoginTestServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("test/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
//获取前台的数据
String name=null;
name=request.getParameter("name");
System.out.println(name);
String password=null;
password=request.getParameter("password");
//查询数据库中与name和password匹配的数量，不等于零代表正确
int num=0;
UserService uService=new UserServiceImpl();
num=uService.getUserByNameAndPwd(name,password);
if(num==0) {
System.out.println("密码错误，请检查账号和密码");
request.getRequestDispatcher("/EmailLogin.jsp").forward(request, response);
}else {
System.out.println("密码正确，欢迎");
request.getRequestDispatcher("/EmailLogin.jsp").forward(request, response);
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
四、Service方法调用Dao层
创建UserService接口及其实现类UserServiceImpl
实现方法如下
五、JDBC实现验证后台数据
创建UserDao接口及其实现类UserDaoImpl
实现如下方法：
根据前端输入的姓名和密码与mysql相匹配的数量来判断是否存在或者密码是否正确；
数据库内容如下
当输入正确的账号和密码时
跳回原登陆界面（理应跳入邮件界面，但未实现界面的设计），后台打印（可用ajax实现局部刷新，并且写回原网页）
