项目3-商城-2-登录验证及后端代码

话说：

各位读者，下午好！ 和第一篇博客之所以隔了几篇，你知道吗？我遇到了多少Bug，然后就这么云淡风轻的搞定了。今天总结下登录。

目录

1、效果图

2、注册Ajax验证

3、登录

1）前端验证

2）后端代码

4.总结

开发工具：IDEA

难度系数：★★☆☆☆

建议用时：1.5~2H

1、效果图





2、注册Ajax验证

<!-- 引入jQuery -->
<script src="js/jquery-1.8.3.js"></script>

<!-- 前端验证  引入外部js文件-->
<script src="js/register.js"></script>
<script type="text/javascript">
$(function() {
//alert("进来了");
var regInfo = $("#regInfo");
$("#userName").blur(function() {
// alert("失去焦点");
var reg = /[\u4e00-\u9fa5]/;
var userName = $("#userName").val().trim();
if($(this).val().trim() == ""){

$("#userNameInfo").html("请填写用户名");
}else{
$("#userNameInfo").html("");
regInfo.html("");
if(reg.test(userName)) {
$("#userNameInfo").html("用户名不能为中文");
}else{
$("#userNameInfo").html("");
// alert("进来了");
//Ajax异步验证 注册名
$.ajax({
url:"checkMemberName",
type:"get",
async:true,//Asynchronous Synchronous
dataType:"json",
data:{"userName":userName},
success:function(data) {
console.log("请求后台成功！数据为"+data);//Object ""
if(data == ""){
$("#userNameInfo").html("√");
$("#userNameInfo").css({"font-size":"25px","color":"green","font-weight":"bolder"});
}else{
$("#userNameInfo").html("该用户已注册");
$("#userNameInfo").css({"font-size":"15px","color":"red","font-weight":"bolder"});

}
},
error:function() {
alert("遗憾，请求数据失败");
}

});

}
}

});

})

</script>

这里没啥特别的，需要注意

1）就是上一篇博客提到的递归调用问题。

2）返回json，是需要把Gson包放到IDEA部署到Tomcat的位置的，否则根本进不了success(){},因为没有返回json数据！

3）Ajax要写在页面内，写在外部.js里面，好像无效。

后台访问的Servlet：

package com.hmc.servlet;

import com.google.gson.Gson;
import com.hmc.dao.MemberDao;
import com.hmc.dao.MemberDaoImpl;
import com.hmc.pojo.Member;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

/**
* User:Meice
* 2018/2/24  5:46
*/
@WebServlet("/front/checkMemberName")
public class getMemberByNameServlet extends HttpServlet {

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//1.接收参数  用户名
System.out.println("前台MemberName Ajax验证进来了");
String userName = req.getParameter("userName");
System.out.println("前台接收到的用户名为:"+userName);

//2.调用方法  返回一个对象
MemberDao md = new MemberDaoImpl();
String sql = "select * from tb_user where userName =  '"+userName+"'";
System.out.println(sql);
List<Member> memberList = md.memberList(sql);
System.out.println("根据userName得到的会员对象列表:"+memberList);

//3.返回JSON格式的数据
Member member = null;
Gson gson = new Gson();
System.out.println("根据userName得到的对象列表大小:"+memberList.size());
if(memberList.size()>0) {
member = memberList.get(0);
System.out.println("得到的单个Member对象是："+member);
//把对象转换为json格式返回给前台
System.out.println("转换为JSON格式的Member对象是:"+gson.toJson(member));
resp.getWriter().write(gson.toJson(member));

}else{
System.out.println("转换为JSON格式的Member对象是:"+gson.toJson(""));
resp.getWriter().write(gson.toJson(""));
}

}

/**
* 运行结果：
* 前台MemberName Ajax验证进来了
前台接收到的用户名为:xiaomei
select * from tb_user where userName =  'xiaomei'
根据userName得到的会员对象列表:[Member {0  xiaomei  牙齿笑了  111111  15265888898  1961184526@qq.com  }]
得到的单个Member对象是：Member {0  xiaomei  牙齿笑了  111111  15265888898  1961184526@qq.com  }
*/
}

这里要特别注意，能否返回JSon，要看包真正导入到IDEA部署的Tomcat位置。



3、登录

本来想注册后直接带参跳转登录界面，无奈不会接收location.href=”login.jsp?userName =”+userName传过来的参数,暂搁置。

1）前端验证

2）后端代码

3）Cookie取值

1）前端验证

<%--引入juery--%>
<script src="js/jquery-1.8.3.js"></script>

<script type="text/javascript">

function checkLoginForm() {

var flag = false;
//alert("进来了");
$(function() {

var loginInfo = $("#loginInfo");
var userName = $("#userName").val().trim();
var pwd = $("#pwd").val().trim();
var code = $("#code").val().trim();
if(userName == "") {
loginInfo.html("请输入用户名");
}else{
loginInfo.html("");
if(pwd == "") {
loginInfo.html("请输入密码");
}else{

loginInfo.html("");
if(code == "") {
loginInfo.html("请输入验证码");
}else{
loginInfo.html("");
flag = true;
}

}
}

})

return flag;

}

//一进来  userName就应该聚焦
$(function() {
// $("#userName").focus();

//用户名blur()验证
$("#userName").blur(function() {
var userName2 = $(this).val().trim();
var userNameInfo = $("#userNameInfo");
if($(this).val().trim() == "") {
userNameInfo.html("请输入用户名");
}else{
userNameInfo.html("");

//Ajax验证
$.ajax({
url:"checkMemberName",
type:"get",
dataType:"json",
async:true,
data:{"userName":userName2},//一定要注意这个userName2不要和$("#userName").blur()冲突，否则递归调用！！还不以发现
success:function(data) {
//alert("请求后台成功！"+data);
if(data != "") {
$("#userNameInfo").html("√");
$("#userNameInfo").css({"font-size":"25px","color":"green","font-weight":"bolder"});
}else{
$("#userNameInfo").html("×");
$("#userNameInfo").css({"font-size":"30px","color":"red","font-weight":"bolder"});

}

},
error:function() {
alert("遗憾，请求后台失败");
}

});

}

});

//密码验证
$("#pwd").blur(function() {
var pwdInfo = $("#pwdInfo");
if($(this).val().trim() == "") {
pwdInfo.html("请输入密码");
}else{
pwdInfo.html("");

}

});

//验证码
$("#code").blur(function() {
var codeInfo = $("#codeInfo");
if($(this).val().trim() == "") {
codeInfo.html("请输入验证码");
}else{
codeInfo.html("");

}
});

})

</script>

注意：

a、这里Ajax的url调用的是和注册一样的Servlet，因为都是判断用户名存在不嘛。

b.验证码不在赘述，之前有博客是专门针对验证码的。

2）后端代码

package com.hmc.servlet;

import com.hmc.dao.MemberDao;
import com.hmc.dao.MemberDaoImpl;
import com.hmc.pojo.Member;

import javax.servlet.ServletException;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

/**
* User:Meice
* 2018/2/24  11:17
*/

public class MemberLoginServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置编码
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
System.out.println("验证登录Servlet进来啦!+++++++++++++++++++++++++++");
//1.接收参数
String code1 = req.getParameter("code");
System.out.println("页面填写的验证码为:"+code1);

String userName = req.getParameter("userName");
String pwd = req.getParameter("pwd");
System.out.println("得到的用户名 密码为："+userName+"  "+pwd );

//接收从CheckCode  Session中传过来的验证码
String code = (String) req.getSession().getAttribute("code");
System.out.println("memberServlet接收到的验证码:"+code);

if(!code1.toLowerCase().equals(code.toLowerCase())) {//1)这里当然要用equals()而不是== 比较地址，当然错误！2）忽略大小写
req.getSession().setAttribute("msg","验证码不正确");
req.getSession().setMaxInactiveInterval(3);//5S有效期，避免正确登录后还显示
req.getRequestDispatcher("login.jsp").forward(req,resp);
}else{

//2.调用方法
MemberDao md = new MemberDaoImpl();
String sql = "select * from tb_user where userName = '"+userName+"' and pwd = '"+pwd+"'";
List<Member> memberList = md.memberList(sql);
System.out.println("根据用户名和密码得到的集合为："+memberList);
//3.跳转页面
if(memberList.size()>0) {
Member member = memberList.get(0);
System.out.println("得到的会员为："+member);

//存Session里面
req.getSession().setAttribute("member",member);

//存Cookie
Cookie cookie = new Cookie("userName",member.getUserName());
cookie.setMaxAge(60*60*12);//默认保存1天
Cookie cookie1 = new Cookie("pwd",member.getPassword());
cookie1.setMaxAge(60*60*12);

resp.addCookie(cookie);
resp.addCookie(cookie1);

//跳转页面
resp.getWriter().write("<script>alert('恭喜！登录成功 *.* ~');location.href='index.jsp'</script>");

}else{
//如果用户不存在
req.getSession().setAttribute("msg","用户名或密码不正确");
req.getSession().setMaxInactiveInterval(5);//5S有效期，避免正确登录后还显示
req.getRequestDispatcher("login.jsp").forward(req,resp);
}
}

/**
* 运行结果：
* 页面填写的验证码为:kizl
得到的用户名 密码为：xiaomei  111111
memberServlet接收到的验证码:KizL
QGPv
*/
}

}

3）Cookie取值

用户登录后，记住用户名及密码

<%--遍历cookie 记住用户名 和密码--%>

<%
String userName = "";
String pwd = "";
Cookie[] cookies =     request.getCookies();
if(cookies != null) {
for(int i=0;i<cookies.length;i++) {
if(cookies[i].getName().equals("userName")) {
userName = cookies[i].getValue();
}
if(cookies[i].getName().equals("pwd")) {
pwd = cookies[i].getValue();
}
}

}
%>

补充：对于配置Servlet，看心情，所以注解和配置搭配着用啦。

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1">

<!--这里  手动配置addMenber Servlet-->
<servlet>
<servlet-name>myAdd</servlet-name>
<servlet-class>com.hmc.servlet.AddMemberServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>myAdd</servlet-name>
<url-pattern>/front/addMember</url-pattern>
</servlet-mapping>

<!--配置 验证码Servlet  codeServlet-->
<servlet>

<servlet-name>myCode</servlet-name>
<servlet-class>com.hmc.utils.VertifyCodeServlet</servlet-class>
</servlet>

<servlet-mapping>

<servlet-name>myCode</servlet-name>
<url-pattern>/front/checkCode</url-pattern>
</servlet-mapping>

<!--配置memberLogin  Servlet-->
<servlet>
<servlet-name>myMemberLogin</servlet-name>
<servlet-class>com.hmc.servlet.MemberLoginServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>myMemberLogin</servlet-name>
<url-pattern>/front/memberLogin</url-pattern>
</servlet-mapping>
</web-app>

4.总结

1.前台登录 注册流程

注册本质就是插入一条数据，保证注册名不重复即可。

登录本质是查一条数据，用到了session cookie

2.IDEA使用注意事项

1）要知道如何给IDEA中导入外部.jar包。

Project Structure ==> Modules ==> Dependencies

对于javax.servlet这样的包，直接加入libraries，全部导入，部署后会自动部署到目录下。

2)要知道外部的.jar包在Tomcat部署后，并不会类似Eclipse那样自动部署，如果本地测试没有问题，还出现找不到包的情况，那么需要手动部署。

Project Structure ==> Atrifacts ==>Out put 下面的WEB-INF下面的classes下面添加Extracted Directory。这样才表明该包正式部署到了IDEA部署tomcat的位置。

比如：数据库驱动包，比如gson

3）要了解IDEAWeb项目部署后，到底部署到哪里去了？详见之前博客总结。

4）要知道JSP页面编译后的.class文件到底编译到哪里去了？详见之前博客总结。

3.Ajax请求出现递归错误。

专门发表一篇博客总结。注意data:{“userName”,userName}传值和$(“#userName”).blur()这2个userName不能相同，否则鼠标刚blur()就调用，刚离开就调用，就造成了循环调用。

4.Ajax代码不能写在外部的.js文件中，没效果。

5.SQLserver中的sql语句，在Java代码中，如果是值，要用”,而不像在MySQL中，”，”“都可以的。

好了！再会~~~