开发登陆、退出功能
- 访问登录页面
- 点击顶部区域内的链接，打开登录页面。
- 登录
- 验证账号、密码、验证码。
- 成功时，生成登录凭证，发放给客户端。
- 失败时，跳转回登录页。
- 退出
- 将登录凭证修改为失效状态。
- 跳转至网站首页。
1.处理登陆凭证
1.1 现在先存到数据库中：数据库表login_ticket 登录凭证
SET character_set_client = utf8mb4 ;
CREATE TABLE `login_ticket` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`user_id` int(11) NOT NULL,
`ticket` varchar(45) NOT NULL, #登录凭证
`status` int(11) DEFAULT '0' COMMENT '0-有效; 1-无效;',
`expired` timestamp NOT NULL, #过期时间
PRIMARY KEY (`id`),
KEY `index_ticket` (`ticket`(20))
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
1.2 编写对应的实体类
//登录凭证的实体类
public class LoginTicket {
private int id;
private int userId;
private String ticket;
private int status;
private Date expired;
}
1.3 LoginTicketMapper
package com.guo.dao;
import com.guo.entity.LoginTicket;
import org.apache.ibatis.annotations.*;
import org.springframework.stereotype.Repository;
@Mapper
@Repository
public interface LoginTicketMapper {
//增加一个凭证
@Insert({
"insert into login_ticket(user_id,ticket,status,expired) ",
"values(#{userId},#{ticket},#{status},#{expired}) "
})
int insertTicket(LoginTicket loginTicket);
//根据ticket查询凭证
//Options 设置主键自动增值
@Options(useGeneratedKeys = true, keyProperty = "id")
@Select({
"select id,user_id,ticket,status,expired from login_ticket where ticket = #{ticket}"
})
LoginTicket selectByTicket(String ticket);
//让凭证失效，修改凭证的状态
@Update({
"update login_ticket set status = #{status} where ticket = #{ticket}"
})
int updateStatus(String ticket, int status);
}
1.4 userService
//登录的方法
/**
*
* @param username 用户传入的用户名
* @param password 用户传入的密码
* @param expiredSeconds 登录凭证的有效时间
* @return
*/
public Map<String,Object> login(String username, String password, int expiredSeconds){
Map<String, Object> map = new HashMap<>();
//1.判断用户名或密码是否为空
if (StringUtils.isBlank(username)){
map.put("usernameMsg","用户名不能为空");
return map;
}else if (StringUtils.isBlank(password)){
map.put("passwordMsg","密码不能为空");
return map;
}
//2.验证账号
//2.1根据username查询用户
User user = userMapper.selectByName(username);
//用户名不存在
if (user == null){
//用户不存在
map.put("usernameMsg","用户不存在");
return map;
}
//2.2因为在注册用户时，密码是经过加密的，所以验证密码时需要进行加密后验证
password = CommunityUtil.md5(password + user.getSalt());
//验证密码
if (!password.equals(user.getPassword())){
map.put("passwordMsg","用户密码错误");
return map;
}
//2.3验证激活状态
if (user.getStatus() == 0){
map.put("usernameMsg","用户未激活");
return map;
}
//3.验证结束，生成登录凭证
LoginTicket loginTicket = new LoginTicket();
loginTicket.setUserId(user.getId()); //设置用户Id
loginTicket.setTicket(CommunityUtil.generateUUID()); //设置凭证，随机字符串
loginTicket.setStatus(0); //设置状态
loginTicket.setExpired(new Date(System.currentTimeMillis() + expiredSeconds * 1000)); //过期时间
loginTicketMapper.insertLoginTicket(loginTicket); //添加凭证到数据库
map.put("ticket", loginTicket.getTicket()); //存入map
return map;
}
2. 处理登录
2.1 loginController
@Autowired
private UserService userService;
@Value("${server.servlet.context-path}")
private String contextPath;
//处理登录的方法
/**
*
* @param username 客户端传入的用户名
* @param password 客户端传入的密码
* @param code 客户端传入的验证码
* @param rememberme 客户端是否勾选 记住我
* @param model
* @param session 从session中获取页面刷新的验证码
* @param response 利用cookie将登录凭证传至客户端
* @return
对于User user这种对象，springmvc会自动将其封装至model中，我们可以利用model获取user
* 但是对于String username, String password, String code
* springmvc不会自动将其封装至model中，我们可以利用request对象获取信息,在HTML中利用
* th:value="${param.password}"获取
*/
@RequestMapping(path = "/login",method = RequestMethod.POST)
public String login(String username, String password, String code, boolean rememberme,
Model model, HttpSession session, HttpServletResponse response){
//1.首先检查验证码是否正确，验证码不正确就无需查询数据库验证用户名和密码
//1.1 从session取出验证码
String kaptcha = (String) session.getAttribute("kaptcha");
//1.2 验证
if (StringUtils.isBlank(kaptcha) || StringUtils.isBlank(code) || !kaptcha.equalsIgnoreCase(code)){
//当验证码为空或者用户未输入验证码或者二者不相等，验证失败，返回登录界面
model.addAttribute("codeMsg","验证码不正确");
return "/site/login";
}
//2. 检查账号和密码
//2.1 设置保存时间，根据客户端是否勾选 记住我选择不同的时间
//REMEMBER_EXPIRED_SECONDS:
//DEFAULT_EXPIRED_SECONDS:
int expiredSeconds = rememberme ? REMEMBER_EXPIRED_SECONDS : DEFAULT_EXPIRED_SECONDS;
Map<String, Object> map = userService.login(username, password, expiredSeconds);
//2.2 判断是否登录成功
if (map.containsKey("ticket")){
//登录成功 将cookie传至客户端,内容为登录凭证
Cookie cookie = new Cookie("ticket",map.get("ticket").toString());
//设置cookie的访问路径：即访问什么路径下的资源才会携带cookie
cookie.setPath(contextPath);
//设置cookie保存时间
cookie.setMaxAge(expiredSeconds);
//发送cookie至浏览器
response.addCookie(cookie);
return "redirect:/index";
}else {
//登录失败
model.addAttribute("usernameMsg",map.get("usernameMsg"));
model.addAttribute("passwordMsg",map.get("passwordMsg"));
return "/site/login";
}
}
注：
CommunityConstant接口：
int REMEMBER_EXPIRED_SECONDS = 3600 * 24 * 30; //一个月
int DEFAULT_EXPIRED_SECONDS = 3600 * 12; //单位为秒，12小时
2.2 login.html
<div class="main">
<div class="container pl-5 pr-5 pt-3 pb-3 mt-3 mb-3">
<h3 class="text-center text-info border-bottom pb-3">登 录</h3>
<form class="mt-5" th:action="@{/login}" method="post"> <-->表单提交给login</-->
<div class="form-group row">
<label for="username" class="col-sm-2 col-form-label text-right">账号:</label>
<div class="col-sm-10">
<!--th:value="${param.username}" 为了失败返回时能显示之前的用户名-->
<input type="text"
th:class="|form-control ${usernameMsg!=null?'is-invalid':''}|"
th:value="${param.username}"
id="username" name="username"
placeholder="请输入您的账号!" required>
<div class="invalid-feedback" th:text="${usernameMsg}">
该账号不存在!
</div>
</div>
</div>
<div class="form-group row mt-4">
<label for="password" class="col-sm-2 col-form-label text-right">密码:</label>
<div class="col-sm-10">
<input type="password" th:class="|form-control ${passwordMsg!=null?'is-invalid':''}|"
th:value="${param.password}"
id="password" name="password" placeholder="请输入您的密码!" required>
<div class="invalid-feedback" th:text="${passwordMsg}">
密码长度不能小于8位!
</div>
</div>
</div>
<div class="form-group row mt-4">
<label for="verifycode" class="col-sm-2 col-form-label text-right">验证码:</label>
<div class="col-sm-6">
<input type="text"
th:class="|form-control ${codeMsg!=null?'is-invalid':''}|"
id="verifycode" name="code"
placeholder="请输入验证码!">
<div class="invalid-feedback" th:text="${codeMsg}">
验证码不正确!
</div>
</div>
<!--
th:src="@{/kaptcha}" 将验证码图片的链接转置kaptcha路径下
href="javascript:refresh_kaptcha();"
利用js编写刷新验证码的方法
-->
<div class="col-sm-4">
<img th:src="@{/kaptcha}" id="kaptcha" style="width:100px;height:40px;" class="mr-2"/>
<a href="javascript:refresh_kaptcha();" class="font-size-12 align-bottom">刷新验证码</a>
</div>
</div>
<div class="form-group row mt-4">
<div class="col-sm-2"></div>
<div class="col-sm-10">
<input type="checkbox" id="remember-me"
th:checked="${param.rememberme}"
name="rememberme" checked="checked">
<label class="form-check-label" for="remember-me">记住我</label>
<a href="forget.html" class="text-danger float-right">忘记密码?</a>
</div>
</div>
<div class="form-group row mt-4">
<div class="col-sm-2"></div>
<div class="col-sm-10 text-center">
<button type="submit" class="btn btn-info text-white form-control">立即登录</button>
</div>
</div>
</form>
</div>
</div>
3.退出功能
- 将登录凭证修改为失效状态。
- 跳转至网站首页。
3.1 UserService
//退出功能，让登录状态失效
public void logout(String ticket){
if (StringUtils.isBlank(ticket)){
return;
}
loginTicketMapper.updateStatus(ticket,1);
}
3.2 LoginController
//退出登录方法
@RequestMapping(path = "/logout", method = RequestMethod.GET)
//利用CookieValue获取cookie
public String logout(@CookieValue("ticket") String ticket){
userService.logout(ticket);
return "redirect:/login"; //重定向login，默认为get请求
}
3.3 index.html
修改index头部的链接
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item text-center" href="site/profile.html">个人主页</a>
<a class="dropdown-item text-center" href="site/setting.html">账号设置</a>
<a class="dropdown-item text-center" th:href="@{/logout}">退出登录</a>
<div class="dropdown-divider"></div>
<span class="dropdown-item text-center text-secondary">nowcoder</span>
</div>
此时，我们就简单地完成了登录和退出功能。但是我们还没有处理登录后的逻辑，只是简单实现了登录首页的功能。下一步我们应该进一步完善登录后的显示内容。
774
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
