1.项目导入
点击＋按钮
2.启动项目
2.1方式一：
2.2方式二：配置maven快捷启动
3.技术选型
3.1Web层
a)Servlet：前端控制器
b)html：视图
c)Filter：过滤器
d)BeanUtils：数据封装
e)Jackson：json序列化工具
3.2Service层
f)Javamail：java发送邮件工具
g)Redis：nosql内存数据库
h)Jedis：java的redis客户端
3.3Dao层
i)Mysql：数据库
j)Druid：数据库连接池
k)JdbcTemplate：jdbc的工具
4.创建数据库
-- 创建数据库
CREATE DATABASE travel;
-- 使用数据库
USE travel;
--创建表
复制提供好的sql
5.注册功能
5.1页面效果
5.2功能分析
5.3代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>注册</title> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="stylesheet" href="css/register.css"> <!--导入jquery--> <script src="js/jquery-3.3.1.js"></script> <script> /* 表单校验： 1.用户名：单词字符，长度8到20位 2.密码：单词字符，长度8到20位 3.email：邮件格式 4.姓名：非空 5.手机号：手机号格式 6.出生日期：非空 7.验证码：非空 */ //校验用户名 //单词字符，长度8到20位 function checkUsername() { //1.获取用户名值 var username = $("#username").val(); //2.定义正则 var reg_username = /^w{8,20}$/; //3.判断，给出提示信息 var flag = reg_username.test(username); if (flag) { //用户名合法 $("#username").css("border", ""); } else { //用户名非法,加一个红色边框 $("#username").css("border", "1px solid red"); } return flag; } //校验密码 function checkPassword() { //1.获取密码值 var password = $("#password").val(); //2.定义正则 var reg_password = /^w{8,20}$/; //3.判断，给出提示信息 var flag = reg_password.test(password); if (flag) { //密码合法 $("#password").css("border", ""); } else { //密码非法,加一个红色边框 $("#password").css("border", "1px solid red"); } return flag; } //校验邮箱 function checkEmail() { //1.获取邮箱 var email = $("#email").val(); //2.定义正则 itcast@163.com var reg_email = /^w+@w+.w+$/; //3.判断 var flag = reg_email.test(email); if (flag) { $("#email").css("border", ""); } else { $("#email").css("border", "1px solid red"); } return flag; } $(function () { //当表单提交时，调用所有的校验方法 $("#registerForm").submit(function () { return checkUsername() && checkPassword() && checkEmail(); }); $("#username").blur(checkUsername); $("#password").blur(checkPassword); $("#email").blur(checkEmail); }); </script> </head> <body> <!--引入头部--> <div id="header"></div> <!-- 头部 end --> <div class="rg_layout"> <div class="rg_form clearfix"> <div class="rg_form_left"> <p>新用户注册</p> <p>USER REGISTER</p> </div> <div class="rg_form_center"> <!--注册表单--> <form id="registerForm" action="user"> <!--提交处理请求的标识符--> <input type="hidden" name="action" value="register"> <table style="margin-top: 25px;"> <tr> <td class="td_left"> <label for="username">用户名</label> </td> <td class="td_right"> <input type="text" id="username" name="username" placeholder="请输入账号"> </td> </tr> <tr> <td class="td_left"> <label for="password">密码</label> </td> <td class="td_right"> <input type="text" id="password" name="password" placeholder="请输入密码"> </td> </tr> <tr> <td class="td_left"> <label for="email">Email</label> </td> <td class="td_right"> <input type="text" id="email" name="email" placeholder="请输入Email"> </td> </tr> <tr> <td class="td_left"> <label for="name">姓名</label> </td> <td class="td_right"> <input type="text" id="name" name="name" placeholder="请输入真实姓名"> </td> </tr> <tr> <td class="td_left"> <label for="telephone">手机号</label> </td> <td class="td_right"> <input type="text" id="telephone" name="telephone" placeholder="请输入您的手机号"> </td> </tr> <tr> <td class="td_left"> <label for="sex">性别</label> </td> <td class="td_right gender"> <input type="radio" id="sex" name="sex" value="男" checked> 男 <input type="radio" name="sex" value="女"> 女 </td> </tr> <tr> <td class="td_left"> <label for="birthday">出生日期</label> </td> <td class="td_right"> <input type="date" id="birthday" name="birthday" placeholder="年/月/日"> </td> </tr> <tr> <td class="td_left"> <label for="check">验证码</label> </td> <td class="td_right check"> <input type="text" id="check" name="check" class="check"> <img src="checkCode" height="32px" alt="" onclick="changeCheckCode(this)"> <script type="text/javascript"> //图片点击事件 function changeCheckCode(img) { img.src = "checkCode?" + new Date().getTime(); } </script> </td> </tr> <tr> <td class="td_left"> </td> <td class="td_right check"> <input type="submit" class="submit" value="注册"> <span id="msg" style="color: red;"></span> </td> </tr> </table> </form> </div> <div class="rg_form_right"> <p> 已有账号？ <a href="#">立即登录</a> </p> </div> </div> </div> <!--引入尾部--> <div id="footer"></div> <!--导入布局js，共享header和footer--> <script type="text/javascript" src="js/include.js"></script> </body> </html>
5.4异步(ajax)提交表单
在此使用异步提交表单是为了获取服务器响应的数据。因为我们前台使用的是html作为视图层，不能够直接从servlet相关的域对象获取值，只能通过ajax获取响应数据。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>注册</title> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="stylesheet" href="css/register.css"> <!--导入jquery--> <script src="js/jquery-3.3.1.js"></script> <script> /* 表单校验： 1.用户名：单词字符，长度8到20位 2.密码：单词字符，长度8到20位 3.email：邮件格式 4.姓名：非空 5.手机号：手机号格式 6.出生日期：非空 7.验证码：非空 */ //校验用户名 //单词字符，长度8到20位 function checkUsername() { //1.获取用户名值 var username = $("#username").val(); //2.定义正则 var reg_username = /^w{8,20}$/; //3.判断，给出提示信息 var flag = reg_username.test(username); if (flag) { //用户名合法 $("#username").css("border", ""); } else { //用户名非法,加一个红色边框 $("#username").css("border", "1px solid red"); } return flag; } //校验密码 function checkPassword() { //1.获取密码值 var password = $("#password").val(); //2.定义正则 var reg_password = /^w{8,20}$/; //3.判断，给出提示信息 var flag = reg_password.test(password); if (flag) { //密码合法 $("#password").css("border", ""); } else { //密码非法,加一个红色边框 $("#password").css("border", "1px solid red"); } return flag; } //校验邮箱 function checkEmail() { //1.获取邮箱 var email = $("#email").val(); //2.定义正则 itcast@163.com var reg_email = /^w+@w+.w+$/; //3.判断 var flag = reg_email.test(email); if (flag) { $("#email").css("border", ""); } else { $("#email").css("border", "1px solid red"); } return flag; } $(function () { //当表单提交时，调用所有的校验方法 $("#registerForm").submit(function () { //1.发送数据到服务器 if(checkUsername() && checkPassword() && checkEmail()){ //校验通过,发送ajax请求，提交表单的数据 username=zhangsan&password=123 $.post("registUserServlet",$(this).serialize(),function(data){
//处理服务器响应的数据 data {flag:true,errorMsg:"注册失败"}
}); } //2.不让页面跳转 return false; //如果这个方法没有返回值，或者返回为true，则表单提交，如果返回为false，则表单不提交 }); $("#username").blur(checkUsername); $("#password").blur(checkPassword); $("#email").blur(checkEmail); }); </script> </head> <body> <!--引入头部--> <div id="header"></div> <!-- 头部 end --> <div class="rg_layout"> <div class="rg_form clearfix"> <div class="rg_form_left"> <p>新用户注册</p> <p>USER REGISTER</p> </div> <div class="rg_form_center"> <!--注册表单--> <form id="registerForm" action="user"> <!--提交处理请求的标识符--> <input type="hidden" name="action" value="register"> <table style="margin-top: 25px;"> <tr> <td class="td_left"> <label for="username">用户名</label> </td> <td class="td_right"> <input type="text" id="username" name="username" placeholder="请输入账号"> </td> </tr> <tr> <td class="td_left"> <label for="password">密码</label> </td> <td class="td_right"> <input type="text" id="password" name="password" placeholder="请输入密码"> </td> </tr> <tr> <td class="td_left"> <label for="email">Email</label> </td> <td class="td_right"> <input type="text" id="email" name="email" placeholder="请输入Email"> </td> </tr> <tr> <td class="td_left"> <label for="name">姓名</label> </td> <td class="td_right"> <input type="text" id="name" name="name" placeholder="请输入真实姓名"> </td> </tr> <tr> <td class="td_left"> <label for="telephone">手机号</label> </td> <td class="td_right"> <input type="text" id="telephone" name="telephone" placeholder="请输入您的手机号"> </td> </tr> <tr> <td class="td_left"> <label for="sex">性别</label> </td> <td class="td_right gender"> <input type="radio" id="sex" name="sex" value="男" checked> 男 <input type="radio" name="sex" value="女"> 女 </td> </tr> <tr> <td class="td_left"> <label for="birthday">出生日期</label> </td> <td class="td_right"> <input type="date" id="birthday" name="birthday" placeholder="年/月/日"> </td> </tr> <tr> <td class="td_left"> <label for="check">验证码</label> </td> <td class="td_right check"> <input type="text" id="check" name="check" class="check"> <img src="checkCode" height="32px" alt="" onclick="changeCheckCode(this)"> <script type="text/javascript"> //图片点击事件 function changeCheckCode(img) { img.src = "checkCode?" + new Date().getTime(); } </script> </td> </tr> <tr> <td class="td_left"> </td> <td class="td_right check"> <input type="submit" class="submit" value="注册"> <span id="msg" style="color: red;"></span> </td> </tr> </table> </form> </div> <div class="rg_form_right"> <p> 已有账号？ <a href="#">立即登录</a> </p> </div> </div> </div> <!--引入尾部--> <div id="footer"></div> <!--导入布局js，共享header和footer--> <script type="text/javascript" src="js/include.js"></script> </body> </html>
5.5后台代码
1.RegistUserServlet
package cn.itcast.travel.web.servlet; import cn.itcast.travel.domain.ResultInfo; import cn.itcast.travel.domain.User; import cn.itcast.travel.service.impl.UserServiceImpl; import com.fasterxml.jackson.databind.ObjectMapper; import org.apache.commons.beanutils.BeanUtils; 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 java.io.IOException; import java.lang.reflect.InvocationTargetException; import java.util.Map; @WebServlet("/registUserServlet") public class RegistUserServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //验证校验 String check = request.getParameter("check"); //从sesion中获取验证码 HttpSession session = request.getSession(); String checkcode_server = (String) session.getAttribute("CHECKCODE_SERVER"); session.removeAttribute("CHECKCODE_SERVER");//为了保证验证码只能使用一次 //比较 if(checkcode_server == null || !checkcode_server.equalsIgnoreCase(check)){ //验证码错误 ResultInfo info = new ResultInfo(); //注册失败 info.setFlag(false); info.setErrorMsg("验证码错误"); //将info对象序列化为json ObjectMapper mapper = new ObjectMapper(); String json = mapper.writeValueAsString(info); response.setContentType("application/json;charset=utf-8"); response.getWriter().write(json); return; } //1.获取数据 Map<String, String[]> map = request.getParameterMap(); //2.封装对象 User user = new User(); try { BeanUtils.populate(user, map); } catch (IllegalAccessException e) { e.printStackTrace(); } catch (InvocationTargetException e) { e.printStackTrace(); } //3.调用service完成注册 UserServiceImpl service = new UserServiceImpl(); boolean flag = service.regist(user); ResultInfo info = new ResultInfo(); //4.响应结果 if (flag) { //注册成功 info.setFlag(true); } else { //注册失败 info.setFlag(false); info.setErrorMsg("注册失败！"); } ObjectMapper mapper = new ObjectMapper(); String json = mapper.writeValueAsString(info); //将json数据写回客户端 //设置content-type response.setContentType("application/json;charset=utf-8"); response.getWriter().write(json); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } }
2.UserService以及UserServiceImpl
package cn.itcast.travel.service; import cn.itcast.travel.domain.User; public interface UserService { boolean regist(User user); }
package cn.itcast.travel.service.impl; 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; public class UserServiceImpl implements UserService { private UserDao userDao = new UserDaoImpl(); /* 注册用户 */ @Override public boolean regist(User user) { User u = userDao.findByUsername(user.getUsername()); //判断u是否为空 if (u != null) { //用户名存在，注册失败 return false; } //保存用户信息 userDao.save(user); return true; } }
3.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); }
package cn.itcast.travel.dao.impl; import cn.itcast.travel.dao.UserDao; import cn.itcast.travel.domain.User; import cn.itcast.travel.util.JDBCUtils; import org.springframework.dao.DataAccessException; import org.springframework.jdbc.core.BeanPropertyRowMapper; import org.springframework.jdbc.core.JdbcTemplate; public class UserDaoImpl implements UserDao { private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource()); @Override public User findByUsername(String username) { User user = null; try { //1.定义sql语句 String sql = "select * from tab_user where username = ?"; //2.执行sql user = template.queryForObject(sql, new BeanPropertyRowMapper<>(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) values(?,?,?,?,?,?,?)"; //2.执行sql template.update(sql, user.getUsername(), user.getPassword(), user.getName(), user.getBirthday(), user.getSex(), user.getTelephone(), user.getEmail() ); } }
5.6邮件激活
为什么要进行邮件激活？为了保证用户填写的邮箱是正确的。将来可以推广一些宣传信息，到用户邮箱中。
5.7发送邮件
1.申请邮箱
2.开启授权码
3.在MailUtils中设置自己的邮箱账号和密码(授权码)
邮件工具类：MailUtils，调用其中sendMail方法可以完成邮件发送
package cn.itcast.travel.util; import javax.mail.*; import javax.mail.internet.InternetAddress; import javax.mail.internet.MimeMessage; import java.util.Properties; /** * 发邮件工具类 */ public final class MailUtils { private static final String USER = "928003536@qq.com"; // 发件人称号，同邮箱地址 private static final String PASSWORD = "tybdcjvzqqvfxxxx"; // 如果是qq邮箱可以使户端授权码 /** * * @param to 收件人邮箱 * @param text 邮件正文 * @param title 标题 */ /* 发送验证信息的邮件 */ public static boolean sendMail(String to, String text, String title){ try { final Properties props = new Properties(); props.put("mail.smtp.auth", "true"); props.put("mail.smtp.host", "smtp.qq.com"); // 发件人的账号 props.put("mail.user", USER); //发件人的密码 props.put("mail.password", PASSWORD); // 构建授权信息，用于进行SMTP进行身份验证 Authenticator authenticator = new Authenticator() { @Override protected PasswordAuthentication getPasswordAuthentication() { // 用户名、密码 String userName = props.getProperty("mail.user"); String password = props.getProperty("mail.password"); return new PasswordAuthentication(userName, password); } }; // 使用环境属性和授权信息，创建邮件会话 Session mailSession = Session.getInstance(props, authenticator); // 创建邮件消息 MimeMessage message = new MimeMessage(mailSession); // 设置发件人 String username = props.getProperty("mail.user"); InternetAddress form = new InternetAddress(username); message.setFrom(form); // 设置收件人 InternetAddress toAddress = new InternetAddress(to); message.setRecipient(Message.RecipientType.TO, toAddress); // 设置邮件标题 message.setSubject(title); // 设置邮件的内容体 message.setContent(text, "text/html;charset=UTF-8"); // 发送邮件 Transport.send(message); return true; }catch (Exception e){ e.printStackTrace(); } return false; } public static void main(String[] args) throws Exception { // 做测试用 MailUtils.sendMail("1102029350@qq.com","你好，这是一封测试邮件，无需回复。","测试邮件"); System.out.println("发送成功"); } }
5.8用户点击邮件激活
经过分析，发现，用户激活其实就是修改用户表中的status为‘Y’
分析：
生成唯一的随机字符串，利用java自带的方法UUID.randomUUID()。
package cn.itcast.travel.util; import java.util.UUID; /** * 产生UUID随机字符串工具类 */ public final class UuidUtil { private UuidUtil(){} public static String getUuid(){ return UUID.randomUUID().toString().replace("-",""); } /** * 测试 */ public static void main(String[] args) { System.out.println(UuidUtil.getUuid()); System.out.println(UuidUtil.getUuid()); System.out.println(UuidUtil.getUuid()); System.out.println(UuidUtil.getUuid()); } }
发送邮件代码：
package cn.itcast.travel.service.impl; 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 { private UserDao userDao = new UserDaoImpl(); /* 注册用户 */ @Override public boolean regist(User user) { //1.根据用户名查询用户对象 User u = userDao.findByUsername(user.getUsername()); //判断u是否为null if(u != null){ //用户名存在，注册失败 return false; } //2.保存用户信息 //2.1设置激活码，唯一字符串 user.setCode(UuidUtil.getUuid()); //2.2设置激活状态 user.setStatus("N"); userDao.save(user); //3.激活邮件发送，邮件正文？ String content="<a href='http://localhost/travel/activeUserServlet?code="+user.getCode()+"'>点击激活【旅游网】</a>"; MailUtils.sendMail(user.getEmail(),content,"激活邮件"); return true; } }
修改保存Dao代码，加上存储status和code 的代码逻辑
激活代码实现：
ActiveUserServlet
package cn.itcast.travel.web.servlet; import cn.itcast.travel.service.UserService; import cn.itcast.travel.service.impl.UserServiceImpl; 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("/activeUserServlet") public class ActiveUserServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1.获取激活码 String code = request.getParameter("code"); if(code!=null){ //2.调用service完成激活 UserService service = new UserServiceImpl(); boolean flag = service.active(code); //3.判断标记 String msg = null; if(flag){ //激活成功 msg = "激活成功，请<a href='login.html'>登录</a>"; }else{ //激活失败 msg = "激活失败，请联系管理员!"; } response.setContentType("text/html;charset=utf-8"); response.getWriter().write(msg); } } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request,response); } }
UserService：active
package cn.itcast.travel.service; import cn.itcast.travel.domain.User; public interface UserService { boolean regist(User user); boolean active(String code); }
/** * 激活用户 * @param code * @return */ @Override public boolean active(String code) { //1.根据激活码查询用户对象 User user = userDao.findByCode(code); if(user != null){ //2.调用dao的修改激活状态的方法 userDao.updateStatus(user); return true; }else{ return false; } }
UserDao：findByCode updateStatus
/** * 根据激活码查询用户对象 * * @param code * @return */ @Override public User findByCode(String code) { User user = null; try { String sql = "select * from tab_user where code = ?"; user = template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), code); } catch (DataAccessException e) { e.printStackTrace(); } return user; } /** * 修改指定用户激活状态 * * @param user */ @Override public void updateStatus(User user) { String sql = " update tab_user set status = 'Y' where uid=?"; template.update(sql, user.getUid()); }
6.登录功能
6.1分析
6.2前台代码
<!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>
$(function () {
//1.给登录按钮绑定单击事件
$("#btn_sub").click(function () {
//2.发送ajax请求，提交表单数据
$.post("loginServlet",$("#loginForm").serialize(),function (data) {
//data : {flag:false,errorMsg:''}
if(data.flag){
//登录成功
location.href="index.html";
}else{
//登录失败
$("#errorMsg").html(data.errorMsg);
}
});
});
});
//3.处理响应结果
</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>
6.3后台代码
LoginServlet
package cn.itcast.travel.web.servlet;
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;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.apache.commons.beanutils.BeanUtils;
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.lang.reflect.InvocationTargetException;
import java.util.Map;
@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.获取用户名和密码数据
Map<String, String[]> map = request.getParameterMap();
//2.封装User对象
User user = new User();
try {
BeanUtils.populate(user, map);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
//3.调用Service查询
UserService service = new UserServiceImpl();
User u = service.login(user);
ResultInfo info = new ResultInfo();
//4.判断用户对象是否为null
if (u == null) {
//用户名密码或错误
info.setFlag(false);
info.setErrorMsg("用户名密码或错误");
}
//5.判断用户是否激活
if (u != null && !"Y".equals(u.getStatus())) {
//用户尚未激活
info.setFlag(false);
info.setErrorMsg("您尚未激活，请激活");
}
//6.判断登录成功
if(u != null && "Y".equals(u.getStatus())){
request.getSession().setAttribute("user",u);//登录成功标记
//登录成功
info.setFlag(true);
}
//响应数据
ObjectMapper mapper = new ObjectMapper();
response.setContentType("application/json;charset=utf-8");
mapper.writeValue(response.getOutputStream(),info);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
UserService
package cn.itcast.travel.service;
import cn.itcast.travel.domain.User;
public interface UserService {
boolean regist(User user);
boolean active(String code);
User login(User user);
}
package cn.itcast.travel.service.impl;
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 {
private UserDao userDao = new UserDaoImpl();
/*
注册用户
*/
@Override
public boolean regist(User user) {
//1.根据用户名查询用户对象
User u = userDao.findByUsername(user.getUsername());
//判断u是否为null
if(u != null){
//用户名存在，注册失败
return false;
}
//2.保存用户信息
//2.1设置激活码，唯一字符串
user.setCode(UuidUtil.getUuid());
//2.2设置激活状态
user.setStatus("N");
userDao.save(user);
//3.激活邮件发送，邮件正文？
String content="<a href='http://localhost/travel/activeUserServlet?code="+user.getCode()+"'>点击激活【旅游网】</a>";
MailUtils.sendMail(user.getEmail(),content,"激活邮件");
return true;
}
/**
* 激活用户
* @param code
* @return
*/
@Override
public boolean active(String code) {
//1.根据激活码查询用户对象
User user = userDao.findByCode(code);
if(user != null){
//2.调用dao的修改激活状态的方法
userDao.updateStatus(user);
return true;
}else{
return false;
}
}
/**
* 登录方法
* @param user
* @return
*/
@Override
public User login(User user) {
return userDao.findByUsernameAndPassword(user.getUsername(),user.getPassword());
}
}
UserDao
package cn.itcast.travel.dao;
import cn.itcast.travel.domain.User;
public interface UserDao {
public User findByUsername(String username);
public void save(User user);
User findByCode(String code);
void updateStatus(User user);
User findByUsernameAndPassword(String username, String password);
}
package cn.itcast.travel.dao.impl;
import cn.itcast.travel.dao.UserDao;
import cn.itcast.travel.domain.User;
import cn.itcast.travel.util.JDBCUtils;
import org.springframework.dao.DataAccessException;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
public class UserDaoImpl implements UserDao {
private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
@Override
public User findByUsername(String username) {
User user = null;
try {
//1.定义sql语句
String sql = "select * from tab_user where username = ?";
//2.执行sql
user = template.queryForObject(sql, new BeanPropertyRowMapper<>(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
template.update(sql,user.getUsername(),
user.getPassword(),
user.getName(),
user.getBirthday(),
user.getSex(),
user.getTelephone(),
user.getEmail(),
user.getStatus(),
user.getCode()
);
}
/**
* 根据激活码查询用户对象
*
* @param code
* @return
*/
@Override
public User findByCode(String code) {
User user = null;
try {
String sql = "select * from tab_user where code = ?";
user = template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), code);
} catch (DataAccessException e) {
e.printStackTrace();
}
return user;
}
/**
* 修改指定用户激活状态
*
* @param user
*/
@Override
public void updateStatus(User user) {
String sql = " update tab_user set status = 'Y' where uid=?";
template.update(sql, user.getUid());
}
/**
* 根据用户名和密码查询的方法
* @param username
* @param password
* @return
*/
@Override
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;
}
}
6.4 index页面中用户姓名的提示信息功能
header.html代码
<!-- 头部 start -->
<script>
$(function () {
$.get("findUserServlet",{},function (data) {
//{uid:1,name:'李四'}
var msg = "欢迎回来，"+data.name;
$("#span_username").html(msg);
});
});
</script>
<!-- 头部 start -->
<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_username"> </span>
<a href="myfavorite.html" class="collection">我的收藏</a>
<a href="javascript:;">退出</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>
Servlet代码
package cn.itcast.travel.web.servlet;
import com.fasterxml.jackson.databind.ObjectMapper;
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("/findUserServlet")
public class FindUserServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//从session中获取登录用户
Object user = request.getSession().getAttribute("user");
//将user写回客户端
ObjectMapper mapper = new ObjectMapper();
response.setContentType("application/json;charset=utf-8");
mapper.writeValue(response.getOutputStream(),user);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
6.5退出
什么叫做登录了？session中有user对象。
实现步骤：
- 访问servlet，将session销毁
- 跳转到登录页面
Header.html
<!-- 头部 start -->
<script>
$(function () {
$.get("findUserServlet",{},function (data) {
//{uid:1,name:'李四'}
var msg = "欢迎回来，"+data.name;
$("#span_username").html(msg);
});
});
</script>
<!-- 头部 start -->
<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_username"> </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>
Servlet
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);
}
}