JavaWeb-旅游网-注册和登录

最近仿照着黑马旅游网写了个旅游网项目，界面和图片用的是黑马的，毕竟界面太难画…，但是不是响应式的，等改天用Bootstrap重构成响应式的，功能跟黑马的基本一样，我在此基础上进行了一些添加和优化。
在写的过程，收获到了很多知识，所以总结一下这几天所收获同时也重新梳理整个项目的流程，涉及的功能较多，我会分成几篇博客进行总结
本次没有使用jsp，前端单纯的就是html,后台提供接口，通过Ajax进行请求
因为用的是黑马的界面和图片，如果涉及侵权了，请联系我，我会道歉并且删除博客。

JavaWeb-旅游网-导航条和分页展示
JavaWeb-旅游网-线路搜索
JavaWeb-旅游网-详情展示
JavaWeb-旅游网-点击收藏

注册

功能：注册提交后会发送给用户一封激活邮件，只有激活用户才可登录到主界面
页面：

前端使用JQuery对用户输入的信息进行校验,只有当全部信息符合要求时才可进行注册

         //检验用户名function checkUserName() {//1.获取用户名的值var username = $("#username").val();//2.定义正则var reg_username = /^\w{2,10}$/;//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{6,20}$/;//3.判断var flag = reg_password.test(password);if (flag){//合法用户名$("#password").css("border","");} else{//非法用户名,红色边框提示非法$("#password").css("border","1px solid red");}return flag;}//检验邮箱function checkEmail(){var email = $("#email").val();//定义正则var reg_email = /^\w+@\w+\.\w+$///判断var flag = reg_email.test(email);if (flag){$("#email").css("border","");} else {$("#email").css("border","1px solid red");}return flag}//检验姓名function checkName() {//1.获取用户名的值var username = $("#name").val();//3.判断var flag = true;if (username.length == 0){//姓名为空flag = false;$("#name").css("border","1px solid red");} else{flag = true;$("#name").css("border","");}return flag;}//检验手机号function checkTel() {//1.获取用户名的值var telephone = $("#telephone").val();//正则var reg_tel = /^[1][3,4,5,7,8][0-9]{9}$/;//3.判断var flag = reg_tel.test(telephone);if (!flag){$("#telephone").css("border","1px solid red");} else{$("#telephone").css("border","");}return flag;}//检验出生日期function checkBirth() {//1.获取用户名的值var birthday = $("#birthday").val();//3.判断var flag = true;if (birthday.length == 0){//姓名为空flag = false;$("#birthday").css("border","1px solid red");} else{flag = true;$("#birthday").css("border","");}return flag;}$(function(){//当表单提交，调用所有校验方法,返回为true，表单提交$("#registerForm").submit(function(){if (checkUserName()&&checkPassWord()&&checkEmail()&&checkName()&&checkTel()&&checkBirth()){//检验通过，发送Ajax请求，提交表单的数据,$(this).serialize()该方法将表单数据序列化成: key=value&key=value的格式$.post("user/regist",$(this).serialize(),function (data) {if(data.flag){//注册成功location.href="register_ok.html"}else{//注册失败,添加提示信息$("#errorMsg").html(data.errorMsg);}})}return false;});//当某个组件失去焦点，调用对应的校验$("#username").blur(checkUserName)$("#password").blur(checkPassWord)$("#email").blur(checkEmail)$("#name").blur(checkName)$("#telephone").blur(checkTel)$("#birthday").blur(checkBirth)});

不符合要求的信息会有红框提示

信息都符合要求后，发送Ajax请求，后台进行注册,使用了MD5加盐（用户名+密码）的方式对用户密码进行加密，注册完成后发送激活邮件给用户
后台代码：

public void regist(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//获取数据Map<String,String[]> map = request.getParameterMap();//封装对象User user = new User();try {BeanUtils.populate(user,map );} catch (IllegalAccessException e) {e.printStackTrace();} catch (InvocationTargetException e) {e.printStackTrace();}//调用service完成注册UserService service = new UserServiceImpl();boolean flag = service.regist(user);ResultInfo info = new ResultInfo();//响应消息if(flag){//注册成功info.setFlag(true);}else {//注册失败info.setFlag(false);info.setErrorMsg("注册失败");}//将info对象序列化为Json,返回客户端//将json数据写回客户端response.setContentType("application/json;charset=utf-8");response.getWriter().write(getJson(info));}

用户只有在激活了账户后才能进行正常的使用，每个用户都会自动生成唯一的激活码，后台根据唯一的激活码进行激活状态的更改

  public boolean regist(User user) {//根据用户名查询用户对象User u = userDao.findByUserName(user.getUsername());if(null != u){return false;}//邮件激活准备//设置激活码，唯一字符串user.setCode(UuidUtil.getUuid());//设置激活状态user.setStatus("N");//保存用户信息userDao.regist(user);//激活邮件发送String content = "<a href ='http://localhost/travel/activeUserServlet?code="+user.getCode()+"'>点击激活【黑马旅游网】</a>";MailUtils.sendMail(user.getEmail(),content ,"激活邮件" );return true;}

激活账户

     //获取激活码String code = request.getParameter("code");if(null != code){//调用service完成激活UserService service = new UserServiceImpl();boolean flag = service.active(code);//判断标记String msg = null;if(flag){msg = "激活成功，请<a href='login.html'>登录</a>";}else {msg = "激活失败";}response.setContentType("text/html;charset=utf-8");response.getWriter().write(msg);}

用户收到的邮件

 function checkUserName(){var username = $("#username").val();var flag = true;if (username.length == 0){//姓名为空flag = false;$("#username").css("border","1px solid red");} else{flag = true;$("#username").css("border","");}return flag;}//检查密码是否输入function checkPassWord(){var password = $("#password").val();var flag = true;if (password.length == 0){//姓名为空flag = false;$("#password").css("border","1px solid red");} else{flag = true;$("#password").css("border","");}return flag;}//检查验证码是否输入function checkCode(){var code = $("#check").val();var flag = true;if (code.length == 0){//姓名为空flag = false;$("#check").css("border","1px solid red");} else{flag = true;$("#check").css("border","");}return flag;}

发送Ajax，后台对登录信息进行认证将结果以json格式返回到前端，前端根据结果进行相应处理，
前端代码：

$(function () {//给登录按钮注册点击事件$("#btn_submit").click(function(){//Ajax请求，提交表单数据if (checkUserName&&checkPassWord()&&checkCode()){$.post("user/login",$("#loginForm").serialize(),function (data) {//处理响应结果if (data.flag){//登录成功location.href="index.html"}else{//登录错误，显示提示信息同时更新验证码$("#errorMsg").css("visibility","visible");$("#errorMsg").html(data.errorMsg);changeCheckCode();}});}return false;});})

后台代码：后台进行认证时，先将前端传过来的密码进行MD5加密，然后再同数据库进行认证，同时判断验证码是否正确以及账户是否激活，提示以相应的信息

   public void login(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");if(checkcode_server == null || !checkcode_server.equalsIgnoreCase(check)){ResultInfo info = new ResultInfo();info.setFlag(false);info.setErrorMsg("验证码错误");//将info对象序列化为Json,返回客户端//将json数据写回客户端response.setContentType("application/json;charset=utf-8");response.getWriter().write(getJson(info));return;}//获取用户名和密码Map<String,String[]> map = request.getParameterMap();//封装对象User user = new User();try {BeanUtils.populate(user,map );} catch (IllegalAccessException e) {e.printStackTrace();} catch (InvocationTargetException e) {e.printStackTrace();}//将密码转换成MD5加密，再后数据进行对比String password = user.getPassword();try {user.setPassword(Md5Util.encodeByMd5(user.getUsername()+password));System.out.println("MD5: "+Md5Util.encodeByMd5(user.getUsername()+password));} catch (Exception e) {e.printStackTrace();}//查询UserService service = new UserServiceImpl();User u = service.login(user);//判断用户信息是否正确ResultInfo info = new ResultInfo();if(null == u){info.setFlag(false);info.setErrorMsg("用户名或密码错误");}if(null != u&& !"Y".equals(u.getStatus())){//未激活info.setFlag(false);info.setErrorMsg("尚未激活，请激活后重新登录");}if(null != u &&"Y".equals(u.getStatus())){//将user对象存进sessionrequest.getSession().setAttribute("user",u);info.setFlag(true);}//JSON格式response.setContentType("application/json;charset=utf-8");response.getWriter().write(getJson(info));}

登录后的用户名显示

未登录前

登录后

因为前后端分离，所以没法像之前那样通过session获得用户，这里依然使用Ajax向后台请求用户信息

 $.get("user/findUser",{},function (data) {var msg = "欢迎，"+data.username;//显示登录后的div$("#login").css('display','block');//将登录前的div隐藏$("#logout").css('display','none');$("#name").html(msg);});

后台代码

    public void findUser(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//从session中获取登录用户Object user = request.getSession().getAttribute("user");//将user写回客户端response.setContentType("application/json;charset=utf-8");response.getWriter().write(getJson(user));}

这里额外记录一点，display属性把元素隐藏后，隐藏的元素不会占据位置，看不见也摸不着，而visibility属性把元素隐藏后，隐藏的元素还是会占据位置，看不见但摸得着

visibility:visible(显示)/hidden(隐藏)
display:none(隐藏)/show(显示)

退出

退出就会简单了，把用户信息从session中移除，删除session，然后重定向到登录页面即可

    public void exit(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {HttpSession session = request.getSession();session.removeAttribute("user");session.invalidate();response.sendRedirect(request.getContextPath()+"/login.html");}

JavaWeb-旅游网-注册和登录相关推荐

02.javaWeb旅游网小项目【注册功能】
用户注册模块 1.实现注册功能 1)注册功能(前台页面) 前台注册页面注册校验成功使用异步交互(JQuery-ajax) 点击注册将当前提交内容从后台数据库查询是否存在 $(function () ...
黑马旅游网-注册用户（二）
目录一.注册用户-业务流程分析 1.页面效果 2.业务流程分析二.注册用户-前端功能实现修改register.html 1.校验用户名 2.校验密码 3.检验邮箱 4.使用ajax提交数据 5. ...
旅游网案例：登录功能
文章目录一.需求分析二.login.html 三.loginServlet 四.UserServiceImpl 五.UserDaoImpl 六.登录成功的用户名提示一.需求分析二.login. ...
黑马57期黑马旅游网之03登录和退出功能_22登录功能姓名提示_姓名提示不能正常显示
Chrome 由于缓存的原因,一直显示的是原本的样子,打开F12调试也看不到 findUserServlet 换了个浏览器也没有什么明显变化,后来发现视频中的 findUserServlet 一开始直 ...
JavaWeb黑马旅游网-学习笔记02【注册功能】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
JavaWeb黑马旅游网-学习笔记09【旅游线路收藏】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
JavaWeb黑马旅游网-学习笔记08【旅游线路详情】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
JavaWeb黑马旅游网-学习笔记04【BaseServlet抽取】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
JavaWeb黑马旅游网-学习笔记03【登陆和退出功能】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...

JavaWeb-旅游网-注册和登录

注册

登录

登录后的用户名显示

退出

JavaWeb-旅游网-注册和登录相关推荐

最新文章

热门文章