用户注册
1.注册表单效验
要求:
在提交表单时,效验表单里的表单项的值。
如果不符合要求,不要提交,显示错误信息
如果符合要求,不能直接提交要使用Ajax提交
分析:
表单效验插件validator
导入文件:
jQuery,插件的js文件
表单jQuery对象.validate({
submitHandler:function(form){
//如果表单校验通过的话,这个函数会被调用;(表单本身的提交会被阻止)
//写Ajax代码,提交表单的数据。form:是表单对象
},
rules:{
表单项name:{
规则名称:参数,
规则名称:参数
}
},
messages:{
表单项name:{
规则名称:提示信息,
规则名称:提示信息
}
}
});
1.找到注册的页面
JQuery的引入要引入到最前面
<script>
$("#registerForm").validate({
sumbilHander:funtion(from){
alert("表单效验通过,可以使用Ajax提交表单了");
},
password:{//密码要求
required:"不能为空",
minlength:"最少为三位"
},
rules:{
username:{
required:true
minlength:3
},
massages:{//提示信息
required:"不能为空",
minlength:"最少为三位"
}
}
});
</script>
注意修改:type="button" 按钮 修改成: type="submit"
用户注册功能
要求:
表单效验通过以后,要使用Ajax把表单数据提交到服务器,注册保存到数据库user表
得到注册的结果:
如果注册成功:跳转注册成功页面register_ok.html
如果注册失败:提示错误信息,验证码刷新一次
功能的分析:
页面上:
ajax提交表单,提交到/user.register方法
Servlet
1.接受参数:map
2.封装实体:User
3.完成功能:
调用Service,保存用户数据
3.1调用dao,报数据保存到数据库中
执行dao层
3.2INSERT INTO user .......
dao层返回给service
3.3返回结果boolean类型:
把int类型转换成boolean
返回给Servlet
3.4得到结果:boolean
4.处理结果
实际开发中同一返回给:Resultlnfo中。
把结果放在Resultlnfo里
(他是一个javaBean对象)
转换成一个json格式字符串把json格式字符串返回给客户端。
返回给页面:
实现步骤:
1.组装表单参数:params
2.发Ajax请求到/user,把参数传递过去
3.到UserServlet里
接受参数,封装实体,完成功能(调用service完成)
返回结果:把结果放在ResultInfo转换成json,返回客户端
4.在页面上:指定结果类型是json
result:是json对象
resut={“OK”:"trye",“data”..."msg"}
图片代码解析:
页面表单register.html
UserServlet
UserServicelmpl
package com.itheima.service.impl;
import com.itheima.dao.UserDao;
import com.itheima.dao.impl.UserDaoImpl;
import com.itheima.domain.User;
import com.itheima.service.UserService;
import com.itheima.util.Md5Utils;
public class UserServiceImpl implements UserService {
private UserDao userDao = new UserDaoImpl();
@Override
public boolean register(User user) throws Exception {
String md5 = Md5Utils.encodeByMd5(user.getPassword());
user.setPassword(md5);
int count = userDao.add(user);
return count > 0;
}
@Override
public boolean active(String code) {
int count = userDao.active(code);
return count > 0;
}
@Override
public User login(String username, String password) throws Exception {
password = Md5Utils.encodeByMd5(password);
return userDao.login(username, password);
}
}
UserDaolmpl
package com.itheima.dao.impl;
import com.itheima.dao.UserDao;
import com.itheima.domain.User;
import com.itheima.util.JdbcUtils;
import org.springframework.dao.EmptyResultDataAccessException;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
public class UserDaoImpl implements UserDao {
private JdbcTemplate jdbcTemplate = new JdbcTemplate(JdbcUtils.getDataSource());
@Override
public int add(User user) {
Object[] params = {user.getUid(),user.getUsername(),user.getPassword(),user.getName(), user.getBirthday(),user.getSex(),user.getTelephone(),user.getEmail(),user.getStatus(), user.getCode()};
return jdbcTemplate.update("INSERT INTO tab_user (uid,username,PASSWORD,NAME,birthday,sex,telephone,email, STATUS, CODE) VALUES (?,?,?,?,?,?,?,?,?,?)",params);
}
@Override
public int active(String code) {
return jdbcTemplate.update("update tab_user set status = 'Y' where code = ?", code);
}
@Override
public User login(String username, String password) {
User user = null;
try {
user = jdbcTemplate.queryForObject("select * from tab_user where username = ? and password = ?", new BeanPropertyRowMapper<>(User.class), username, password);
} catch (EmptyResultDataAccessException e) {
System.out.println("找不到用户User[username="+username+", password="+password+"]");
}
return user;
}
}
UserServlet
package com.itheima.web;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.itheima.domain.ResultInfo;
import com.itheima.domain.User;
import com.itheima.service.UserService;
import com.itheima.service.impl.UserServiceImpl;
import com.itheima.util.BeanUtils;
import com.itheima.util.MailUtils;
import com.itheima.util.UUIDUtils;
import com.itheima.web.base.BaseServlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Map;
@WebServlet(urlPatterns="/user", name="UserServlet")
public class UserServlet extends BaseServlet {
private UserService userService = new UserServiceImpl();
/**
* 注册功能
*/
public void register(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
ResultInfo info = null;
try {
//0.首先先校验验证码。
String check = request.getParameter("check");
String checkcode_server = (String) request.getSession().getAttribute("CHECKCODE_SERVER");
if (check.equalsIgnoreCase(checkcode_server)) {//验证码正确,就进行注册
//1.接收参数
Map<String, String[]> map = request.getParameterMap();
//2.封装实体
User user = BeanUtils.populate(map, User.class);
//2.1 设置激活状态为未激活
user.setStatus("N");
//2.2 设置激活码
user.setCode(UUIDUtils.getUuid());
//3.完成功能
boolean success = userService.register(user);
if (success) {
//注册成功了,给用户发送激活邮件
String email = user.getEmail();
String url = "http://localhost/travel/user?action=active&code=" + user.getCode();
String content = "注册成功,请<a href='"+url+"'>点击激活</a>后再登录";
MailUtils.sendMail(email, content);
}
//4.处理结果:结果放在ResultInfo里
info = new ResultInfo(success);
}else{
//直接返回结果
info = new ResultInfo(false, "验证码错误");
}
} catch (Exception e) {
e.printStackTrace();
//4.处理结果:结果放在ResultInfo里
info = new ResultInfo(false, "服务器忙,请稍候");
}
//把结果转换成json,返回客户端
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(info);
response.getWriter().print(json);
}
/**
* 激活功能
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
public void active(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.接收参数
String code = request.getParameter("code");
//2.完成功能
boolean success = userService.active(code);
//3.处理结果
if (success) {
//激活成功,跳转到登录页面
response.sendRedirect(request.getContextPath() + "/login.html");
}else{
//激活失败
response.getWriter().print("激活失败,请重新激活或者联系管理员");
}
}
/**
* 登录功能
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
public void login(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
ResultInfo info = null;
try {
//1.接收参数
String username = request.getParameter("username");
String password = request.getParameter("password");
String check = request.getParameter("check");
//2.完成功能
//2.1 先校验验证码
String checkcode_server = (String) request.getSession().getAttribute("CHECKCODE_SERVER");
if (check.equalsIgnoreCase(checkcode_server)) {//验证码正确
//2.2 校验用户名和密码
User user = userService.login(username, password);
if (user != null) {//用户名和密码正确
//2.3 判断是否已激活
if (user.getStatus().equals("Y")) {
info = new ResultInfo(true);
//登录成功:就把User对象放到session里。
request.getSession().setAttribute("loginUser", user);
}else{
//未激活
info = new ResultInfo(false, "请激活后再登录");
}
}else{//说明:用户名或密码错误
info = new ResultInfo(false, "用户名或密码错误");
}
}else{//验证码错误
info = new ResultInfo(false, "验证码错误");
}
} catch (Exception e) {
e.printStackTrace();
info = new ResultInfo(false, "服务器忙,请稍候");
}
//把结果转换成json,返回客户端
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(info);
response.getWriter().print(json);
}
public void getLoginUser(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
ResultInfo info = null;
//1.从session里获取loginUser
User user = (User) request.getSession().getAttribute("loginUser");
//2.判断loginUser是否存在
if (user != null) {//说明是已登录状态
info = new ResultInfo(true, user.getName(),"");
}else{
info = new ResultInfo(false);
}
//3.返回结果
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(info);
response.getWriter().print(json);
}
public void logout(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.getSession().invalidate();
response.sendRedirect(request.getContextPath() + "/login.html");
}
}
用到的方法:
用户的激活
要求:
用户注册账号成功之后,必须要去自己的邮箱里,点击一个激活链接
如果激活成功,就跳转到登录页面
分析:
UPDATE tab_user SET STAUS="Y" WHERE CODE=?
如何激活:执行SQL语句:UPDATE tab_user SET STAUS="Y" WHERE CODE=?
注册成功之后:要给用户的邮箱发送一个激活邮件
邮件的内容:是激活链接
用户打开邮箱:点击激活链接
向服务端发请求,执行激活的SQL语句
激活之后:跳转到登录页面
代码解析:
UserServlet代码:
UserService代码:
快捷键打开实现类:ctrl+alt+B
UserDao代码:
在用户注册成功之后,给用户发送激活邮件
邮件的内容:
注册成功:请<a href="http://localhost/travel/user?action=active&code=激活码">
点击链接后登录
用户打开邮箱,点击邮件的激活链接
点击激活链接,发送激活请求
请求的地址?code=激活码
小结:
-
用户注册成功之后,给用户的邮箱发送激活邮件
-
邮件的内容是:激活的链接(包含激活地址和激活码)
-
-
用户打开自己的邮箱,在邮件里点击激活链接,激活帐号
-
点击激活链接,向服务端发送请求。传参激活码
-
Servlet里接收得到激活码,调用service完成激活的功能
-
激活之后:
-
如果激活成功:跳转到登录页面
-
如果激活失败:显示激活失败,请重试或者系统管理员
-
-
用户的登录
要求:
-
用户在登录页面输入用户名和密码,验证码。点击时要Ajax提交表单
-
如果得到结果:
-
登录验证通过,跳转到首页
-
登录验证不通过,提示,并且刷新验证码
-
用户名或密码错误
-
验证码错误
-
用户未激活
-
-
代码解析:
判定事件:第一步,找到他,第二步,点击
login.html
注意他们的name有没有一一对应
UserServlet:
/**
* 登录功能
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
public void login(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
ResultInfo info = null;
try {
//1.接收参数
String username = request.getParameter("username");
String password = request.getParameter("password");
String check = request.getParameter("check");
//2.完成功能
//2.1 先校验验证码
String checkcode_server = (String) request.getSession().getAttribute("CHECKCODE_SERVER");
if (check.equalsIgnoreCase(checkcode_server)) {//验证码正确
//2.2 校验用户名和密码
User user = userService.login(username, password);
if (user != null) {//用户名和密码正确
//2.3 判断是否已激活
if (user.getStatus().equals("Y")) {
info = new ResultInfo(true);
//登录成功:就把User对象放到session里。
request.getSession().setAttribute("loginUser", user);
}else{
//未激活
info = new ResultInfo(false, "请激活后再登录");
}
}else{//说明:用户名或密码错误
info = new ResultInfo(false, "用户名或密码错误");
}
}else{//验证码错误
info = new ResultInfo(false, "验证码错误");
}
} catch (Exception e) {
e.printStackTrace();
info = new ResultInfo(false, "服务器忙,请稍候");
}
//把结果转换成json,返回客户端
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(info);
response.getWriter().print(json);
}
小结:
页面组装表单的参数:表单jQuery对象.serialize()
页面发Ajax请求,提交表单参数到Servlet
在Servlet里:登录校验,返回校验结果。以下三项校验全部都通过,就是登录成功;否则就是登录失败
3.1 验证码校验
3.2 用户名和密码校验
3.3 激活状态的校验
得到登录校验结果:
if登录成功:跳转到首页
else登录失败:显示错误信息,刷新验证码
显示登录信息
要求:
如果是未登录状态,页面顶部显示:登录 注册 两个链接
如果是已登录状态,页面顶部显示:你好,用户名 我的收藏 退出
分析:
什么样的状态是已登录状态?什么样的状态是未登录状态?
如果登录成功,通常是把登录的User对象放到session里。
只要是已登录状态,就可以从会话的session里得到登录的信息
会话技术的特点:
多个会话之间,数据互不干扰
同一会话内部,多次请求之间,数据可以共享
实现:
登录成功之后,要把User对象放到session里
在其它页面上,要发请求到服务端,从session里得到User的信息,显示到页面上
小结:
在登录成功时,把登录的User对象放到session里
在header.html被加载完成以后,要发Ajax请求:
服务端:从session里得到loginUser
如果得到了,就说明是已登录状态。给客户端返回true,并把用户名返回给客户端
如果没有得到,就说明是未登录状态。给客户端返回一个false
在header.html从服务端得到登录的信息
如果是已登录状态,得到了登录的用户名。把用户名显示出来
如果是未登录状态,不做任何操作,仍然是默认的未登录状态显示
退出登录
-
要求:
-
点击“退出”按钮时,要变成未登录状态
-
-
分析:
-
从未登录变成已登录:把登录的User放到了session里
-
从已登录变成未登录:
-
方案一:把session里的User对象清除掉。不允许的
-
方案二:把整个session对象销毁掉。
-
-
使用方案二
-
-
实现:
-
页面点击“退出”链接,发请求到Servlet
-
Servlet里:
-
销毁session对象
-
跳转到登录页面
-
-
Ajax实现功能
-
页面要什么样的操作,要完成什么样的事情:
-
发Ajax请求,由服务端帮页面完成这些功能
-
服务端把功能处理的结果交给页面
-
-
页面得到处理的结果:显示/处理