上一篇》》注册---邮件激活_无尽的沉默的博客-CSDN博客
一.登录功能原理分析
二.代码实现
2.1前端代码
script中的ajax异步提交（绑定登录按钮事件）
完整的的login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>黑马旅游网-登录</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/login.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--导入angularJS文件-->
<!--<script src="js/angular.min.js"></script> -->
<!--导入jquery-->
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//1.给登录事件绑定点击事件
//2.发送ajax请求，提交表单数据
//3.处理响应的数据
$(function(){
$("#btn_sub").click(function() {
$.post(
"loginServlet", // 请求的页面处理
$("#loginForm").serialize(), //发送的表单数据
function(data) { //传过来处理后的数据
if(data.flag){
//登陆成功,跳转页面
location.href="index.html";
}
else{
//登陆失败，提示登录信息
$("#errorMsg").html(data.errorMsg);
}
}
);
});
});
</script>
</head>
<body>
<!--引入头部-->
<div id="header"></div>
<!-- 头部 end -->
<section id="login_wrap">
<div class="fullscreen-bg" style="background: url(images/login_bg.png);height: 532px;">
</div>
<div class="login-box">
<div class="title">
<img src="images/login_logo.png" alt="">
<span>欢迎登录淘淘旅游账户</span>
</div>
<div class="login_inner">
<!--登录错误提示消息-->
<div id="errorMsg" class="alert alert-danger" ></div>
<form id="loginForm" action="" method="post" accept-charset="utf-8">
<input type="hidden" name="action" value="login"/>
<input name="username" type="text" placeholder="请输入账号" autocomplete="off">
<input name="password" type="text" placeholder="请输入密码" autocomplete="off">
<div class="verify">
<input name="check" type="text" placeholder="请输入验证码" autocomplete="off">
<span><img src="checkCode" alt="" onclick="changeCheckCode(this)"></span>
<script type="text/javascript">
//图片点击事件
function changeCheckCode(img) {
img.src="checkCode?"+new Date().getTime();
}
</script>
</div>
<div class="submit_btn">
<button type="button" id="btn_sub">登录</button>
<div class="auto_login">
<input type="checkbox" name="" class="checkbox">
<span>自动登录</span>
</div>
</div>
</form>
<div class="reg">没有账户？<a href="javascript:;">立即注册</a></div>
</div>
</div>
</section>
<!--引入尾部-->
<div id="footer"></div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.0.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
</body>
</html>2.2后端代码
2.2.1编写Web层的Loginservlet
package cn.itcast.travel.web.servlet;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;
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 javax.servlet.http.HttpSession;
import org.apache.commons.beanutils.BeanUtils;
import com.fasterxml.jackson.databind.ObjectMapper;
import cn.itcast.travel.dao.UserDao;
import cn.itcast.travel.dao.impl.UserDaoImpl;
import cn.itcast.travel.domain.ResultInfo;
import cn.itcast.travel.domain.User;
import cn.itcast.travel.service.UserService;
import cn.itcast.travel.service.impl.UserServiceImpl;
/**
* Servlet implementation class LoginServlet
*/
@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
this.doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取验证码
String code=request.getParameter("check");
HttpSession session=request.getSession();
String scode=(String) session.getAttribute("CHECKCODE_SERVER");
session.removeAttribute("CHECKCODE_SERVER"); //保证验证码只能用一次，防止倒退后验证码还能使用
if(scode==null||!scode.equalsIgnoreCase(code)) {
//验证码错误
ResultInfo resultInfo=new ResultInfo();
resultInfo.setFlag(false);
resultInfo.setErrorMsg("验证码错误");
//将对象变成json格式
ObjectMapper obmMapper=new ObjectMapper();
response.setContentType("application/json;charset=utf-8");
String json=obmMapper.writeValueAsString(resultInfo);
//回写客户端
response.getWriter().write(json);
}
else {
//1.获取用户名和密码
Map<String, String[]> map=request.getParameterMap();
//2.封装用户对象
User user=new User();
try {
BeanUtils.populate(user, map);
} catch (IllegalAccessException | InvocationTargetException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//3.调用service层的方法查询
UserService userService=new UserServiceImpl();
//根据用户的用户名和用户密码查询用户所有的信息
User user2=userService.login(user);
ResultInfo resultInfo=new ResultInfo();//响应的信息
//4.判断用户是否存在
if(user2!=null) {
//判断激活码是否激活
if(!"Y".equals(user2.getStatus())) {//没有激活激活码
//如果没有激活，就去根据用户的激活码去激活
resultInfo.setFlag(false);
resultInfo.setErrorMsg("激活码尚未激活，请先激活");
// UserDao userDao=new UserDaoImpl();
// userDao.updateStatus(user2);//根据用户去修改激活状态
}
else { //激活码已经激活，登录成功，前台进行跳转
resultInfo.setFlag(true);
//登录成功且激活码已经激活
request.getSession().setAttribute("user",user2);//登录成功标记存储到session
}
}
else {
//登录不成功，用户名或者密码不正确
resultInfo.setFlag(false);
resultInfo.setErrorMsg("用户名或者密码不正确");
}
//将对象变成json格式
ObjectMapper obmMapper=new ObjectMapper();
response.setContentType("application/json;charset=utf-8");
String json=obmMapper.writeValueAsString(resultInfo);
//回写客户端
response.getWriter().write(json);
}//else
}
}
2.2.2编写servcie层的UserService类中的login方法
public User login(User user) {
return userDao.findByUsernameAndPassword(user.getUsername(),user.getPassword());
}完整的UserService抽象类以及UserServiceImpl实现类
UserService抽象类
package cn.itcast.travel.service;
import cn.itcast.travel.domain.User;
public interface UserService {
//注册用户
public boolean regist(User user);
public boolean active(String code);
public User login(User user);
}
UserServiceImpl实现类
package cn.itcast.travel.service.impl;
import java.util.UUID;
import cn.itcast.travel.dao.UserDao;
import cn.itcast.travel.dao.impl.UserDaoImpl;
import cn.itcast.travel.domain.User;
import cn.itcast.travel.service.UserService;
import cn.itcast.travel.util.MailUtils;
import cn.itcast.travel.util.UuidUtil;
public class UserServiceImpl implements UserService {
UserDao uDao=new UserDaoImpl();
//注册用户
@Override
public boolean regist(User user) {
// 通过用户名来查询用户信息
User user2=uDao.findByUsername(user.getUsername());
if(user2!=null) {
//说明已经注册了信息,用户名注册失败
return false;
}
//没有注册，保存用户的信息
//生成激活码，用户的唯一标志
user.setCode(UuidUtil.getUuid());
//设置激活状态
user.setStatus("N");
//保存用户的信息
System.out.println(user);
uDao.save(user);
//激活邮件发送，邮件正文
String content="<a href='http://localhost/travel/activeUserServlet?code="+user.getCode()+"'>点击激活【淘淘旅游网】</a>";
MailUtils.sendMail(user.getEmail(), content, "激活邮件");
return true;
}
//激活激活码
@Override
public boolean active(String code) {
//根据激活码查询用户信息 ，注意激活码是唯一的
User user =uDao.findByCode(code);
if(user!=null) { //存在该用户，调用dao的方法修改激活状态
//如果存在该用户，根据用户修改激活状态
uDao.updateStatus(user);
return true;
}
else {
return false;
}
}
//登录查询检测
@Override
public User login(User user) {
// TODO Auto-generated method stub
return uDao.findByUsernameAndPassword(user);
}
}
2.2.3编写DAO层的UserDaoImpl类中的findByUsernameAndPassword()方法
public User findByUsernameAndPassword(String username, String password) {
User user = null;
try {
//1.定义sql
String sql = "select * from tab_user where username = ? and password = ?";
//2.执行sql
user = template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), username,password);
} catch (Exception e) {
}
return user;
}完整的UserDao抽象类以及UserDaoImpl实现类
package cn.itcast.travel.dao;
import cn.itcast.travel.domain.User;
public interface UserDao {
//根据用户名来查询用户信息
public User findByUsername(String username);
//用户信息保存
public void save(User user);
//根据用户来修改用户的激活码
public void updateStatus(User user);
//根据激活码查询用户信息
public User findByCode(String code);
//登录根据用户名和密码查询
public User findByUsernameAndPassword(User user);
}
package cn.itcast.travel.dao.impl;
import org.springframework.dao.DataAccessException;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import cn.itcast.travel.util.JDBCUtils;
import cn.itcast.travel.dao.UserDao;
import cn.itcast.travel.domain.User;
public class UserDaoImpl implements UserDao {
//操作数据库的对象
private JdbcTemplate jdbcTemplate=new JdbcTemplate(JDBCUtils.getDataSource());
@Override
public User findByUsername(String username) {
//根据用户名来查询用户信息
User user=null;
try {//这个trycatch是为了防止jdbctemplate查询时没查到用户，封装用户会出异常，不是返回null 而设置的
// 1.编写sql语句
String sql="select* from tab_user where username = ?";
//2.执行sql语句
user = jdbcTemplate.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class),username);
} catch (DataAccessException e) {
}
return user;
}
//注册成功后保存用户信息
@Override
public void save(User user) {
// 1.定义sql
String sql="insert into tab_user(username,password,name,birthday,sex,telephone,email,status,code) values(?,?,?,?,?,?,?,?,?)";
//2.执行sql语句
jdbcTemplate.update(sql,user.getUsername(),
user.getPassword(),
user.getName(),
user.getBirthday(),
user.getSex(),
user.getTelephone(),
user.getEmail(),
user.getStatus(),
user.getCode()
);
}
//根据指定的用户来修改用户的激活码状态
@Override
public void updateStatus(User user) {
// 1.编写sql语句
String sql="update tab_user set status= 'Y' where code= ?";
//执行sql语句
jdbcTemplate.update(sql,user.getCode());
}
//根据激活码来查询用户的信息
@Override
public User findByCode(String code) {
User user=null;
try {
// 1.编写sql语句
String sql="select * from tab_user where code= ?";
//2.执行sql,返回user
user = jdbcTemplate.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class),code);
} catch (DataAccessException e) {
e.printStackTrace();
}
return user;
}
//根据用户名和密码查询
@Override
public User findByUsernameAndPassword(User user) {
//根据用户名和密码来查询用户所有信息
User user2=null;
try {//这个trycatch是为了防止jdbctemplate查询时没查到用户，封装用户会出异常，不是返回null 而设置的
// 1.编写sql语句
String sql="select* from tab_user where username = ? and password= ?";
//2.执行sql语句
user2 = jdbcTemplate.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class),user.getUsername(),user.getPassword());
} catch (Exception e) {
}
return user2;
}
}
2.2.4 index页面中（登录后）用户姓名提示功能
效果：
header.html代码
<script type="text/javascript">
$(function () {
$.get("findUserServlet",{},function (data) { //处理后返回的信息
//{uid:1,name:'李四'}
var msg = "欢迎回来，"+data.name; //返回处理后的user的json格式 直接user.name
$("#find_name").html(msg);
});
});
</script>findUserServlet代码
//从session中获取登录用户
Object user = request.getSession().getAttribute("user");
//将user写回客户端
ObjectMapper mapper = new ObjectMapper();
response.setContentType("application/json;charset=utf-8");
mapper.writeValue(response.getOutputStream(),user);完整的 findUserServlet类
package cn.itcast.travel.web.servlet;
import java.io.IOException;
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 com.fasterxml.jackson.databind.ObjectMapper;
import cn.itcast.travel.domain.User;
/**
* Servlet implementation class FindUserServlet
*/
@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
this.doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.登陆成功且已经激活后后 获取存储在session域中的user
Object user=request.getSession().getAttribute("user");
//2.将user写会到客户端
ObjectMapper objectMapper=new ObjectMapper();
response.setContentType("application/json;charset=utf-8");
objectMapper.writeValue(response.getOutputStream(),user);
}
}2.2.5 退出
什么叫做登录了？session中有user对象。
实现步骤：
- 访问servlet，将session销毁
- 跳转到登录页面
代码实现：
Header.html
完整的Header.html
<!-- 头部 start -->
<script type="text/javascript">
$(function () {
$.get("findUserServlet",{},function (data) { //处理后返回的信息
//{uid:1,name:'李四'}
var msg = "欢迎回来，"+data.name; //返回处理后的user的json格式 直接user.name
$("#span_usernaem").html(msg);
});
});
</script>
<header id="header">
<div class="top_banner">
<img src="images/top_banner.jpg" alt="">
</div>
<div class="shortcut">
<!-- 未登录状态 -->
<div class="login_out">
<a href="login.html">登录</a>
<a href="register.html">注册</a>
</div>
<!-- 登录状态 -->
<div class="login">
<span id="span_usernaem"></span>
<a href="myfavorite.html" class="collection">我的收藏</a>
<a href="javascript:location.href='exitServlet';">退出</a>
</div>
</div>
<div class="header_wrap">
<div class="topbar">
<div class="logo">
<a href="/"><img src="images/logo.jpg" alt=""></a>
</div>
<div class="search">
<input name="" type="text" placeholder="请输入路线名称" class="search_input" autocomplete="off">
<a href="javascript:;" class="search-button">搜索</a>
</div>
<div class="hottel">
<div class="hot_pic">
<img src="images/hot_tel.jpg" alt="">
</div>
<div class="hot_tel">
<p class="hot_time">客服热线(9:00-6:00)</p>
<p class="hot_num">400-618-9090</p>
</div>
</div>
</div>
</div>
</header>
<!-- 头部 end -->
<!-- 首页导航 -->
<div class="navitem">
<ul class="nav">
<li class="nav-active"><a href="index.html">首页</a></li>
<li><a href="route_list.html">门票</a></li>
<li><a href="route_list.html">酒店</a></li>
<li><a href="route_list.html">香港车票</a></li>
<li><a href="route_list.html">出境游</a></li>
<li><a href="route_list.html">国内游</a></li>
<li><a href="route_list.html">港澳游</a></li>
<li><a href="route_list.html">抱团定制</a></li>
<li><a href="route_list.html">全球自由行</a></li>
<li><a href="favoriterank.html">收藏排行榜</a></li>
</ul>
</div>
在exitServlet中销毁session域的user属性
package cn.itcast.travel.web.servlet;
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;
@WebServlet("/exitServlet")
public class ExitServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.销毁session
request.getSession().invalidate();
//2.跳转登录页面
response.sendRedirect(request.getContextPath()+"/login.html");
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}