SSM框架下的二手教材交易系统之用户登录（包括表单提前验证,ajax）

用户登录的逻辑：

1.用户填写用户名后，先检验该用户名是否在数据库中存在（用户名唯一），若不存在，则页面显示不存在，需重新输入；若存在，输入密码后验证密码是否正确。

2.验证验证码是否正确。

3.若页面三个元素中有一个错误，页面将阻止表单提交。若无错，则转到主页面。

先贴上表单代码：

<table>
<tr>
<td width="50"></td>
<td><label class="error" id="msg"></label>
</td>
</tr>
<tr>
<td width="50">用户名:</td>
<td><input class="input" type="text" name="loginname"
id="loginname" value="${loginForm.username}" />
</td>
</tr>
<tr>
<td height="20"> </td>
<td><label id="loginnameError" class="error"></label>
</td>
</tr>
<tr>
<td>密 码:</td>
<td><input class="input" type="password" name="loginpass"
id="loginpass" value="${loginForm.password}" />
</td>
</tr>
<tr>
<td height="20"> </td>
<td><label id="loginpassError" class="error"></label>
</td>
</tr>
<tr>
<td>验证码:</td>
<td><input class="input yzm" type="text" name="verifyCode"
id="verifyCode" value="${loginForm.verifycode}" /> <img
id="vCode" src="user/ValidateCodeAction" /> <a
href="javascript: _change()">换一张</a></td>
</tr>
<tr>
<td height="20px"> </td>
<td><label id="verifyCodeError" class="error"></label>
</td>
</tr>
<tr>
<td> </td>
<td align="left"><input type="submit" name="submitbtn"
id="submitbtn" class="loginBtn2" value="" onclick="return tosubmit();"/></td>
</tr>
</table>
</form>

后台查询:dao,service以及mapper文件

UserDao.java

@Repository
@Transactional
public interface UserDao{

/*** 检查是否注册***/
public int checkIfloginname(String loginname);
/***插入注册成功用户***/
public void addUser(User user);
/***查找登录用户密码
* @throws SQLException ***/
public String searchPass(String username);

/***根据用户名和密码查找是否存在
* @throws SQLException ***/
public String searchByPass(Map<String,String> map);
/***根据用户名修改密码
* @throws SQLException ***/
public int changePass(String userno,String repassword);
}

UserService.java

public interface UserService {
/*** 检查是否注册***/
public int checkIfloginname(String loginname);
/***插入注册成功用户***/
public void addUser(User user);
/***查找登录用户密码
* @throws SQLException ***/
public String searchPass(String username);

/***根据用户名和密码查找是否存在
* @throws SQLException ***/
public String searchByPass(Map<String,String> map);
/***根据用户名修改密码
* @throws SQLException ***/
public int changePass(String userno,String repassword);
}

UserServiceImpl.java

@Service
@Transactional
public class BookServiceImpl implements BookService{
@Autowired
private BookDao bookdao;

public Book searchById(String bookno) {
// TODO Auto-generated method stub
return bookdao.searchById(bookno);
}

public String searchcategory(String categoryno) {
// TODO Auto-generated method stub
return bookdao.searchcategory(categoryno);
}

public Setprice searchprice(String setpriceno) {
// TODO Auto-generated method stub
return bookdao.searchprice(setpriceno);
}

<
11940
span class="hljs-keyword">public Page<Book> searchByCategory(String categoryNo, int currentPage) {
// TODO Auto-generated method stub
return bookdao.searchByCategory(categoryNo, currentPage);
}

public Page<Book> searchByBookName(String bookName, int currentPage) {
// TODO Auto-generated method stub
return bookdao.searchByBookName(bookName, currentPage);
}

public Page<Book> searchByEditor(String editor, int currentPage) {
// TODO Auto-generated method stub
return bookdao.searchByEditor(editor, currentPage);
}

public Page<Book> searchByTwo(String bookName, String editor,
int currentPage) {
// TODO Auto-generated method stub
return bookdao.searchByTwo(bookName, editor, currentPage);
}

public Page<Book> searchByCriteria(List<Expression> list, int currtentPage) {
// TODO Auto-generated method stub
return bookdao.searchByCriteria(list, currtentPage);
}

}

userMappers.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.gyt.frame.Dao.UserDao">
<!-- 1. id （必须配置） id是命名空间中的唯一标识符，可被用来代表这条语句。 一个命名空间（namespace） 对应一个dao接口,
这个id也应该对应dao里面的某个方法（相当于方法的实现），因此id 应该与方法名一致 -->
<!-- 2. parameterType （可选配置, 默认为mybatis自动选择处理） 将要传入语句的参数的完全限定类名或别名， 如果不配置，mybatis会通过ParameterHandler
根据参数类型默认选择合适的typeHandler进行处理 parameterType 主要指定参数类型，可以是int, short, long,
string等类型，也可以是复杂类型（如对象） -->
<!-- 3. resultType (resultType 与 resultMap 二选一配置) resultType用以指定返回类型，指定的类型可以是基本类型，可以是java容器，也可以是javabean -->
<!-- 4. resultMap (resultType 与 resultMap 二选一配置) resultMap用于引用我们通过 resultMap标签定义的映射类型，这也是mybatis组件高级复杂映射的关键 -->
<!-- 5. flushCache (可选配置) 将其设置为 true，任何时候只要语句被调用，都会导致本地缓存和二级缓存都会被清空，默认值：false -->
<!-- 6. useCache (可选配置) 将其设置为 true，将会导致本条语句的结果被二级缓存，默认值：对 select 元素为 true -->
<!-- 7. timeout (可选配置) 这个设置是在抛出异常之前，驱动程序等待数据库返回请求结果的秒数。默认值为 unset（依赖驱动） -->
<!-- 8. fetchSize (可选配置) 这是尝试影响驱动程序每次批量返回的结果行数和这个设置值相等。默认值为 unset（依赖驱动) -->
<!-- 9. statementType (可选配置) STATEMENT，PREPARED 或 CALLABLE 的一个。这会让 MyBatis
分别使用 Statement，PreparedStatement 或 CallableStatement，默认值：PREPARED -->
<!-- 10. resultSetType (可选配置) FORWARD_ONLY，SCROLL_SENSITIVE 或 SCROLL_INSENSITIVE
中的一个，默认值为 unset （依赖驱动） -->

<!-- 检查是否注册 -->
<select id="checkIfloginname" parameterType="String" resultType="int">
select count(*) as loginnum from Customer where cusName=#{loginname}
</select>
<!-- 根据用户名和密码查找是否存在 -->
<select id="searchByPass" parameterType="String" resultType="String">
select CustomerNo  from Customer where cusName=#{username}
and cusPassword=#{password}
</select>
<!-- 插入注册成功用户 -->
<insert id="addUser" parameterType="com.gyt.frame.Vo.User">
insert into
Customer(CustomerNo,CusName,cusPassword,sex,stuNo,telephone,address)
values(#{userno},#{username},#{password},#{sex},#{studentno},#{telephone},#{roomno})
</insert>

<!-- 查找登录用户密码 -->
<select id="searchPass" parameterType="String" resultType="String">
select cusPassword as password from Customer where cusName=#{username}
</select>

<!-- 根据用户名修改密码 -->
<update id="changePass" parameterType="String">
update Customer
set
cusPassword=#{repassword}
where customerNo=#{userno}
</update>
</mapper>

mybatis的mapper配置文件resultType，以后会讲，下面的内容也会出现一些些。

2.对应页面检验数据是否正确的action，页面通过ajax访问。

LoginCheckAction.java

@Controller
@Scope("prototype")
public class LoginCheckAction extends ActionSupport implements RequestAware,SessionAware {
/**
*
*/
private static final long serialVersionUID = 1L;
@Autowired
private UserService userservice;
private Map<String, Object> request;
private Map<String, Object> session;
private String loginname;
private String loginpass;

public String getLoginname() {
return loginname;
}

public void setLoginname(String loginname) {
this.loginname = loginname;
}

public String getLoginpass() {
return loginpass;
}

public void setLoginpass(String loginpass) {
this.loginpass = loginpass;
}

public void setSession(Map<String, Object> arg0) {
// TODO Auto-generated method stub
this.session = arg0;
}

public void setRequest(Map<String, Object> arg0) {
// TODO Auto-generated method stub
this.request = arg0;
}

public UserService getUserservice() {
return userservice;
}

public void setUserservice(UserService userservice) {
this.userservice = userservice;
}

/*** 根据用户名和密码查找是否存在 ***/
public String execute(){
//      request.setCharacterEncoding("UTF-8");// 解决中文乱码
HttpServletResponse response = ServletActionContext.getResponse();

//      String username = request.get("loginname").toString();
//      System.out.println("username:"+loginname);
// System.out.println("aaaaaa"+request.getSession().getId());
//      String password = request.get("loginpass").toString();
//      System.out.println("password:"+loginpass);
//usermappers.xml中searchByPass需要两个参数，直接传递将有错。
//所以通过map来传递。
Map<String,String> map=new HashMap<String,String> ();
map.put("username", loginname);
map.put("password", loginpass);
//通过用户名和密码查找用户编号，若返回值不为空，则证明该用户存在，向页面传递true.
String str = userservice.searchByPass(map);
boolean b = false;
try {
if (str == null) {
b = false;
response.getWriter().print(b);
response.getWriter().close();
}
else{
b = true;
response.getWriter().print(b);
response.getWriter().close();
}
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return "success";

}

}

重点：



3.页面通过ajax验证。

<script type="text/javascript">
$(function() {
$("#submitbtn").hover(function() {
$("#submitbtn").attr("class", "loginBtn1");
}, function() {
$("#submitbtn").attr("class", "loginBtn2");
}

);
$(".input").focus(function() {//得到焦点验证
var labelid = $(this).attr("id") + "Error";
$("#" + labelid).text("");
showError($("#" + labelid));

});
$(".input").blur(function() {//失去焦点

var inid = "fun" + $(this).attr("id") + "()";
eval(inid);
});
//选择所有类为errorClass的元素，类选择器,each()遍历
$(".error").each(function() {
showError($(this));
});
//简单的表面的逻辑验证
function funloginname() {

var inid = "loginname";
var v = $("#" + inid).val();
if (!v) {
$("#" + inid + "Error").text("用户名不能为空！");
showError($("#" + inid + "Error"));
return false;
} else if (v.length > 20) {
$("#" + inid + "Error").text("用户名长度在1-20！");
showError($("#" + inid + "Error"));
return false;
}
return true;
}
function funloginpass() {
var inid = "loginpass";
var v = $("#" + inid).val();
if (!v) {
$("#" + inid + "Error").text("密码不能为空！");
showError($("#" + inid + "Error"));
return false;
} else if (v.length<2||v.length>10) {
$("#" + inid + "Error").text("密码长度在2-9！");
showError($("#" + inid + "Error"));
return false;

}
$.ajax({
//验证密码是否正确
url : "/SecondBooks/user/LoginCheckAction",
data : {
method : "execute",
loginname : $("#loginname").val(),
loginpass : v
},
type : "POST",
dataType : "json",
async : false,
cache : false,
success : function(result) {
//action传过来的值若为false,则密码错误。
if (!result) {
$("#" + inid + "Error").text("密码错误！");
showError($("#" + inid + "Error"));
return false;
}
}

});
return true;
}
function funverifyCode() {
//验证验证码是否正确。
var inid = "verifyCode";
var v = $("#" + inid).val();
//简单的逻辑验证
if (!v) {
$("#" + inid + "Error").text("验证码不能为空！");
showError($("#" + inid + "Error"));
return false;
} else if (v.length != 4) {
$("#" + inid + "Error").text("验证码错误！");
showError($("#" + inid + "Error"));
return false;

}
$.ajax({
url : "/SecondBooks/user/ValidateCheckAction",
data : {
method : "execute",
verifyCode : v
},
type : "POST",
dataType : "json",
async : false,
cache : false,
success : function(result) {
if (!result) {
$("#" + inid + "Error").text("验证码错误！");
showError($("#" + inid + "Error"));
return false;
}
}

});
return true;

}
function showError(ele) {
var text = ele.text();
if (text) {
ele.css("display", "");
} else {
ele.css("display", "none");
}
}

});
</script>

注意：jquery的代码想要实现，必须引入js。看图—–



4.提交表单。在提交表单之前，应该先判断数据是否有错，若有错，则无法提交。提前验证的代码：

function tosubmit() {
var bool = true;
if (!funloginname()) {
bool = false;
}
if (!funloginpass()) {
bool = false;
}
if (!funverifyCode()) {
bool = false;
}
if(bool){
alert(bool);
//window.location.href="user/LoginAction";
document.getElementById("loginForm").submit();

}
};

form表单可以通过两种方式来提前验证。

⑴.




⑵.




5.最终登录验证。

LoginAction.java

@Controller
@Scope("prototype")
public class LoginAction extends ActionSupport implements RequestAware,SessionAware,ServletRequestAware{
/**
*
*/
private static final long serialVersionUID = 1L;
@Autowired
private UserService userservice;
private Map<String, Object> request;
private Map<String, Object> session;
private String verifyCode;
private HttpServletRequest servletrequest;

public void setSession(Map<String, Object> arg0) {
// TODO Auto-generated method stub
this.session = arg0;
}

public void setRequest(Map<String, Object> arg0) {
// TODO Auto-generated method stub
this.request = arg0;
}

public String getVerifyCode() {
return verifyCode;
}

public void setVerifyCode(String verifyCode) {
this.verifyCode = verifyCode;
}

public UserService getUserservice() {
return userservice;
}

public void setUserservice(UserService userservice) {
this.userservice = userservice;
}

public String execute(){
User formuser = new User();
//      User.class.getFields();
//      request.setCharacterEncoding("UTF-8");// 解决中文乱码
String verifyCode = request.get("verifyCode").toString();
System.out.println("LoginAction:"+verifyCode);
formuser.setVerifycode(verifyCode);

String username = servletrequest.getParameter("loginname").toString();
formuser.setUsername(username);
System.out.println("username:"+username);

//      String username = request.get("loginname").toString();
//      formuser.setUsername(username);
//      System.out.println("username");

String password = servletrequest.getParameter("loginpass").toString();
System.out.println("LoginAction:"+password);
formuser.setPassword(password);
// String password=new
// String(request.getParameter("loginpass").getBytes("iso-8859-1"),"utf-8");
System.out.println(username+" "+password+" "+verifyCode);
// System.out.println("aaaaaa"+request.getSession().getId());
if (userservice.checkIfloginname(username)==0) {
request.put("msg", "该用户不存在！");
request.put("loginForm", formuser);
//          RequestDispatcher requestDispatcher = request
//                  .getRequestDispatcher("Pages/Ables/User/Login.jsp");
//          requestDispatcher.forward(request, response);
return "failure";
} else {
Map<String,String> map=new HashMap<String,String> ();
map.put("username", username);
map.put("password", password);
String str = userservice.searchByPass(map);
if (str == null) {
request.put("msg", "密码错误！");
request.put("loginForm", formuser);
//              RequestDispatcher requestDispatcher = request
//                      .getRequestDispatcher("Pages/Ables/User/Login.jsp");
//              requestDispatcher.forward(request, response);
return "failure";
} else {
System.out.println("qqqq");
formuser.setUserno(str);
session.put("sessionUser", formuser);
System.out.println("user:" + formuser.getUsername()
+ formuser.getUserno());
User user = (User) session.get("sessionUser");
request.put("username", user.getUsername());
System.out.println("sessionUser1:" + user.getUserno());
try {
username = URLEncoder.encode(username, "utf-8");
} catch (UnsupportedEncodingException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
Cookie cookie = new Cookie("loginname", username);
cookie.setMaxAge(1000 * 60 * 60 * 60 * 10);
//              response.sendRedirect("index.jsp");
return "success";
}

}
}

public void setServletRequest(HttpServletRequest arg0) {
// TODO Auto-generated method stub
this.servletrequest=arg0;
}

}

struts.xml就不贴代码了，类似。