1.需求:
1.用户进入登录页面,没有注册过的,可以去注册,所以需要一个注册功能的接口.并且在注册成功之后,返回到登录页面,进行登录操作.
2.下面这两种情况,都提示”用户名或密码错误”
(1)输入数据库中没有的用户名和密码
(2)输入合法的用户名(数据库中存在),但是密码错误
3.用户名和密码输入都合法,不给出任何提示,用户点击登录,直接进入主界面.
4.找回密码功能(未实现,其实很需要,之后再补加一个吧)
2.代码:
1.页面:
使用bootstrap,又快又好!
<body>
<br><br><br><br><br>
<div id="all">
<button type="ret" class="btn btn-default" onclick="window.history.go(-1);">返回</button>
<br><br>
<form action="" class="col-sm-12">
<div class="form-group">
<label class="col-sm-2 control-label name">用户名</label>
<div class="col-sm-10">
<input type="text" id="id1" name="username" class="form-control " placeholder="请输入用户名"><span id="msg1">
</div>
</div>
<br><br>
<div class="form-group">
<label class="col-sm-2 control-label pass">密码</label>
<div class="col-sm-10">
<input type="password" id="id2" name="password" class="form-control" placeholder="请输入密码"><span id="msg2">
</div>
</div>
<br><br>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<a href="page/zhuce.jsp" class="form-control-static">点击注册</a><br><br>
<input type="button" value="登录" id="sub" class="btn btn-default">
<button type="reset" class="btn btn-default">重置</button>
</div>
</div>
</form>
</div>
</body>
2.css部分
<style type="text/css">
#all{
margin:0 auto;
background:white;
border:1px solid black;
height:260px;
width:600px;
}
body{
background:#eee;
}
//这个是提示的字体,由于此处在合法状态下不用给出提示,所以只要出现提示就是警告,所以直接定义提示部分的字体为[red]
span{
color:red;
}
</style>
3.js部分
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript">
$(function(){
//用户名部分的[判断为空]和[小动画]
$("#id1").blur(function(){
$(".name").animate(
{bottom: '-3px'}, 500
);
if($('#id1').val() == ""){
$("#msg1").text("请输入用户名");
}
});
//密码部分的[判断为空]和[小动画]
$("#id2").blur(function(){
$(".pass").animate(
{bottom:'-3px'},500
);
if($('#id2').val() == ""){
$("#msg2").text("请输入密码");
}
});
//用户名部分的[鼠标聚焦提示消失]和[小动画]
$("#id1").focus(function(){
$("#msg1").text("");
$(".name").animate(
{bottom: '+10px'}, 500
);
});
//密码部分的[鼠标聚焦提示消失]和[小动画]
$("#id2").focus(function(){
$("#msg2").text("");
$(".pass").animate(
{bottom:'+10px'},500
);
});
//当用户点击[登录]按钮时,进行校验
$("#sub").click(function(){
$.ajax({
url:"UserAjaxServlet02",
type:"post",
data:{
//将用户名和密码传到后台
username:$("#id1").val(),
password:$("#id2").val()
},
dataType:"json",
success:function(msg){
//判断后台发送回来的提示
//这是用户名不存在的情况下,显示"用户名或密码错误"
if(msg.msg != null){
$("#msg2").text(msg.msg);
}
//这是用户名正确,密码错误的情况下,显示"用户名或密码错误"
if(msg.msg3 != null){
$("#msg2").text(msg.msg3);
}
//如果前台得到"登录"的消息,进行登录操作,进行跳转.
if(msg.msg2 != null){
if(msg.msg2 = "登录"){
window.location.href="/Science_Museum/
}
}
},
});
});
});
</script>
4.servlet部分
package com.hello.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import net.sf.json.JSONObject;
import com.hello.beans.User;
import com.hello.dao.UserDao;
import com.hello.dao.impl.UserImpl;
import com.hello.util.CreateConnection;
import com.hello.util.MD5;
public class UserAjaxServlet02 extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
JSONObject j = new JSONObject();
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
//拿到从前台通过ajax传过来的数据
String username = request.getParameter("username");
String password = request.getParameter("password");
String pwd = MD5.getMD5(password);
//这里准备两条sql语句,第一句查找数据库中是否有用户所输入的用户名
String sql = "select username from t_user";
//查找该用户名的密码.
String sql2 = "select password from t_user where username = '"+username+"'";
try {
Connection conn = CreateConnection.getConnection();
Statement sta = conn.createStatement();
ResultSet set = sta.executeQuery(sql);
boolean flag = true;
boolean flag2 = true;
while (set.next()) {
//判断用户所输入的用户名是否在存在?执行第二条sql语句,并将flag改为true
if (username.equals(set.getString("username"))) {
ResultSet set2 = sta.executeQuery(sql2);
flag=true;
while (set2.next()) {
//判断密码
if(pwd.equals(set2.getString("password"))){
//到此处,用户名和密码都匹配成功,设置session,这是整个商城都需要用到的.
HttpSession session = request.getSession();
UserDao dao = new UserImpl();
//这儿一个方法,将该用户名所对应的user放到session中.
User user = dao.query(username);
session.setAttribute("session_user", user);
//
flag2=true;
break;
}else{
flag2=false;
}
}
//如果匹配到,跳出循环
break;
} else {
flag=false;
}
}
//这是用户名不在数据库中
if (flag == false) {
j.put("msg", "用户名或密码错误");
out.write(j.toString());
}
//这是用户名正确,但是密码错误.都是要提示用户"用户名或密码错误"
if(flag2 == false){
j.put("msg3", "用户名或密码错误");
out.write(j.toString());
}
//都合法的情况下,向前台发出"登录"信息,前台接收到登录之后,才能登录操作.
if(flag == true && flag2 == true){
j.put("msg2", "登录");
out.write(j.toString());
}
} catch (SQLException e) {
e.printStackTrace();
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
写在最后
写一下流程吧:
用户来到登录界面–>输入用户名和密码–>点击[登录]按钮–>js中的click事件触发–>将用户名和密码传送到后台进行校验–>返回相应的值,并显示在界面上–>如果返回为”登录”,直接触发跳转事件,否则没有反应.