目录
用户登录
一、分析
二、前端实现
1.添加登录的id
<div class="submit_btn">
<button type="button" id="btn_sumit">登录</button>
<div class="auto_login">
<input type="checkbox" name="" class="checkbox">
<span>自动登录</span>
</div>
</div>2.跳转页面
<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 () {
$("#btn_sumit").click(function () {
//ajax提交数据
$.post("loginServlet",$("#loginForm").serialize(),function (data) {
if(data.flag){
//登录成功,跳转到首页
location.href="index.html";
}else {
//登录失败,显示错误信息
$("#errorMsg").html(data.errorMsg);
}
})
});
});
</script>
</head>三、后端的实现
LoginServlet
package com.hotdas.travel.web.servlet;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.hotdas.travel.domain.ResultInfo;
import com.hotdas.travel.domain.User;
import com.hotdas.travel.service.UserService;
import com.hotdas.travel.service.impl.UserServiceImpl;
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 {
String check = request.getParameter("check");
String checkcode_server = (String)request.getSession().getAttribute("CHECKCODE_SERVER");
request.getSession().removeAttribute("CHECKCODE_SERVER");
//4.提示登录信息
ResultInfo info = new ResultInfo();
if (checkcode_server!=null && !"".equals(checkcode_server)){
if (!check.equalsIgnoreCase(checkcode_server)){
info.setFlag(false);
info.setErrorMsg("验证码有误");
ObjectMapper objectMapper = new ObjectMapper();
response.setCharacterEncoding("utf-8");
response.setContentType("application/json;charset=utf-8");
objectMapper.writeValue(response.getOutputStream(),info);
return;
}
}
//1.获取表单的数据
Map<String, String[]> parameterMap = request.getParameterMap();
//2.封装数据到user
User user = new User();
try {
BeanUtils.populate(user,parameterMap);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
//3.调用service完成登录
UserService userService = new UserServiceImpl();
User u = userService.login(user);
if (u==null){
//用户名和密码有误
info.setFlag(false);
info.setErrorMsg("用户名和密码有误");
}
//5.判断用户是否激活
if (u!=null && !"Y".equals(u.getStatus())){
//用户没有激活
info.setFlag(false);
info.setErrorMsg("您尚未激活,请进行邮箱激活!");
}
if (u!=null && "Y".equals(u.getStatus())){
//登录成功后,用户信息保存在session中
request.getSession().setAttribute("user",u);
//登录成功
info.setFlag(true);
}
ObjectMapper objectMapper = new ObjectMapper();
response.setCharacterEncoding("utf-8");
response.setContentType("application/json;charset=utf-8");
objectMapper.writeValue(response.getOutputStream(),info);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request,response);
}
}
UserService
package com.hotdas.travel.service;
import com.hotdas.travel.domain.User;
public interface UserService {
Boolean regirst(User user);
Boolean activeUser(String code);
//用户登录
User login(User user);
}UserServiceImpl
package com.hotdas.travel.service.impl;
import com.hotdas.travel.dao.UserDao;
import com.hotdas.travel.dao.impl.UserDaoImpl;
import com.hotdas.travel.domain.User;
import com.hotdas.travel.service.UserService;
import com.hotdas.travel.util.MailUtils;
import com.hotdas.travel.util.UuidUtil;
public class UserServiceImpl implements UserService {
private UserDao userDao = new UserDaoImpl();
@Override
public Boolean activeUser(String code) {
//根据激活码查询用户
User user = userDao.findByCode(code);
if(user!=null){
//激活该用户 status="Y"
userDao.activeUser(user);
return true;
}else{
return false;
}
}
@Override
public Boolean regirst(User user) {
//从数据库中查询用户
User u = userDao.findByUsername(user.getUsername());
//判断用户是否存在
if (u!=null){
//用户存在,返回false
return false;
}
//激活邮箱才可以使用
user.setCode(UuidUtil.getUuid());
user.setStatus("N");
//保存信息到数据库
userDao.save(user);
//发送邮箱给用户让用户进激活,后面doing...
String content = "<a href='http://localhost/travel/activeUserServlet?code="+user.getCode()+"'>点击激活卓越旅游网</a> ";
MailUtils.sendMail(user.getEmail(),content,"请激活你的卓越旅游网用户");
return true;
}
@Override
public User login(User user) {
return userDao.findUserByUsernameAndPassword(user.getUsername(),user.getPassword());
}
}
UserDao
package com.hotdas.travel.dao;
import com.hotdas.travel.domain.User;
public interface UserDao {
//根据用户名查询用户信息
User findByUsername(String username);
//保存用户信息
void save(User user);
//权限用户激活码用户
User findByCode(String code);
//激活
void activeUser(User user);
User findUserByUsernameAndPassword(String username, String password);
}
UserDaoImpl
package com.hotdas.travel.dao.impl;
import com.hotdas.travel.dao.UserDao;
import com.hotdas.travel.domain.User;
import com.hotdas.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=?";
user = template.queryForObject(sql,new BeanPropertyRowMapper<User>(User.class),username);
} catch (DataAccessException e) {
e.printStackTrace();
}
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(?,?,?,?,?,?,?,?,?)";
template.update(sql,
user.getUsername(),
user.getPassword(),
user.getName(),
user.getBirthday(),
user.getSex(),
user.getTelephone(),
user.getEmail(),
user.getStatus(),
user.getCode());
}
//根据code查询用户
@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;
}
@Override
public void activeUser(User user) {
String sql = "update tab_user set status='Y' where uid=? ";
template.update(sql,user.getUid());
}
@Override
public User findUserByUsernameAndPassword(String username, String password) {
User user =null;
try {
String sql="select * from tab_user where username=? and password=?";
user = template.queryForObject(sql,new BeanPropertyRowMapper<User>(User.class),username,password);
} catch (DataAccessException e) {
e.printStackTrace();
}
return user;
}
}
测试
登录成功的效果
显示登录的用户信息
四、前端实现
修改header.html，添加登录状态style="display:none;和id="span_username"
<script>
$(function () {
$.post("findUserServlet",{},function (data) {
var msg = "欢迎回来，"+data.name;
$("#span_username").html(msg);
$(".login").css("display","block");
});
});
</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" style="display:none;">
<span id="span_username">欢迎回来，admin</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>
五、后端的实现
FindUserServlet
package com.hotdas.travel.web.servlet;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.hotdas.travel.domain.User;
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 {
User user = (User)request.getSession().getAttribute("user");
ObjectMapper objectMapper = new ObjectMapper();
response.setCharacterEncoding("utf-8");
response.setContentType("application/json;charset=utf-8");
String userStr = objectMapper.writeValueAsString(user);
response.getWriter().write(userStr);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request,response);
}
}
测试
用户退出
六、前端的实现
登录用session存储用户信息,当session清除,用户的登录状态就消息.
实现:编写ExitServlet用于清除session即可
修改header.html
<!-- 登录状态 -->
<div class="login" style="display:none;">
<span id="span_username">欢迎回来，admin</span>
<a href="myfavorite.html" class="collection">我的收藏</a>
<a href="javascript:location.href='exitUserServlet';">退出</a>
</div>
七、后端实现
package com.hotdas.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("/exitUserServlet")
public class ExitUserServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取session进行销毁
request.getSession().invalidate();
//跳转到登录页面
response.sendRedirect(request.getContextPath()+"/login.html");
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request,response);
}
}
测试
退出有一下划线，点击退出跳转首页如下
八、遇到的bug
1.登录功能的bug
代码没有报错，但是怎么都登录不上，修改了pom.xml的端口号，重新运行，就解决了
2.退出功能的bug
是前端网页跳转的路径写错了
952
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
