【JavaWeb项目】一个众筹网站的开发（四）后台用户注册功能

重点：

密码加密存储

使用jQuery插件做校验和错误提示等

密码不能明文存储，在数据库中是加密存储的

可逆加密：通过密文使用解密算法得到明文 DES AES

不可逆加密：通过密文，得不到明文 MD5 SHA-1 SHA-2

MD5优点：压缩性，长度固定；容易计算；抗修改性；强抗碰撞；MD5加盐值加密码

一、公司的工具类中加入MD5

project-commons下

创建MD5Util.java

package com.atguigu.project;

import java.security.MessageDigest;

public class MD5Util {

    public static String digest16(String inStr) {

        return digest(inStr, 16);

    }

    public static String digest(String inStr) {

        return digest(inStr, 32);

    }

    private static String digest(String inStr, int rang) {

        MessageDigest md5 = null;

        if ( MyStringUtils.isEmpty(inStr) ) {

            return "";

        }

        try {

            md5 = MessageDigest.getInstance("MD5");

        } catch (Exception e) {

            e.printStackTrace();

            return "";

        }

        char[] charArray = inStr.toCharArray();

        byte[] byteArray = new byte[charArray.length];  

        for (int i = 0; i < charArray.length; i++) {

            byteArray[i] = (byte) charArray[i];

        }

        byte[] md5Bytes = md5.digest(byteArray);  

        StringBuilder hexValue = new StringBuilder();  

        for (int i = 0; i < md5Bytes.length; i++) {

            int val = ((int) md5Bytes[i]) & 0xff;

            if (val < 16)

                hexValue.append("0");

            hexValue.append(Integer.toHexString(val));

        }

        if ( rang == 32 ) {

            return hexValue.toString();

        } else {

            return hexValue.toString().substring(8, 24);

        }

    }  

    public static void main(String args[]) {

        String s = new String("admin");

        System.out.println(digest(s));

    }

}

MyStringUtils

package com.atguigu.project;

public class MyStringUtils {

    public static boolean isEmpty(String str) {

        if (str == null) {

            return true;

        }

        if (str.trim().equals("")) {

            return true;

        }

        return false;

    }

}

业务中使用MD5加密：
1.将用户输入的用户密码拿到
2.去数据库查询用户，使用用户带来的用户名和加密后的密码进行查询

二、使用jQuery插件做校验和错误提示

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

该插件是由 Jörn Zaefferer 编写和维护的，他是 jQuery 团队的一名成员，是 jQuery UI 团队的主要开发人员，是 QUnit 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现，并一直更新至今。目前版本是 1.14.0。

访问 jQuery Validate 官网，下载最新版的 jQuery Validate 插件

使用：引入jQuery和jQuery Validate

<script type="application/javascript" src="yourpath/jquery-3.2.1.min.js"></script> 
<script type="application/javascript" src="yourpath/jquery.validate.js"></script>

rules指定校验规则
messages指定报错信息

举例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <script type="application/javascript" src="js/jquery-3.2.1.min.js"></script>

        <script type="application/javascript" src="plugin/jquery-validation-1.13.1/dist/jquery.validate.js"></script>

    </head>

    <body>

        <form class="cmxform" id="commentForm" method="get" action="">

            <fieldset>

                <legend>Please provide your name, email address (won't be published) and a comment</legend>

                <p>

                    <label for="cname">Name (required, at least 2 characters)</label>

                    <input id="cname" name="name" minlength="2" type="text" required>

                </p>

                <p>

                    <label for="cemail">E-Mail (required)</label>

                    <input id="cemail" type="email" name="email" required>

                </p>

                <p>

                    <label for="curl">URL (optional)</label>

                    <input id="curl" type="url" name="url">

                </p>

                <p>

                    <label for="ccomment">Your comment (required)</label>

                    <textarea id="ccomment" name="comment" required></textarea>

                </p>

                <p>

                    <input class="submit" type="submit" value="Submit">

                </p>

            </fieldset>

        </form>

    </body>

        <script>

    $.validator.setDefaults({

        submitHandler: function() {

            alert("submitted!");

        }

    });

    $().ready(function() {

        $("#commentForm").validate({

            rules: {

                name: "required",

                email: {

                    required: true,

                    email: true

                }

            },

            messages: {

                    name:{

                        required:"名字是必须的",

                        },

                    email: {

                        required: "邮箱是必须的",

                        email: "邮箱格式必须是合法的"

                    }

            }

        });

    });

    </script>

</html>

rules指定规则，name: "required"意为name是必须的，当有多条规则的时候使用大括号，email字段是必须的，且要检查email格式

rules: {

        name: "required",

        email: {

                required: true,

                email: true

               }

       }

messages是错误信息，与上面的rules相对应

messages: {

     name:{

           required:"名字是必须的",

          },

     email: {

              required: "邮箱是必须的",

              email: "邮箱格式必须是合法的"

            }

         }

三、用户登陆和注册界面

将css和js的引入统一放到WEB-INF的includes文件夹下，所有页面共用的css和js聚集在一起，各页面独有的则存放在各个页面

js-file.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<script src="${ctp}/jquery/jquery-2.1.1.min.js"></script>

<script src="${ctp}/plugin/bootstrap-3.3.7/js/bootstrap.min.js"></script>

<script src="${ctp}/script/docs.min.js"></script>

<script src="${ctp}/script/back-to-top.js"></script>
<!-- --------随着项目不断增加 -->

css-file.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<link rel="stylesheet" href="${ctp}/plugin/bootstrap-3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" href="${ctp}/css/font-awesome.min.css">

<link rel="stylesheet" href="${ctp}/css/login.css">
<link rel="stylesheet" href="${ctp}/css/main.css">

在各页面需要引入js和css的地方分别使用：
<%@include file="/WEB-INF/includes/js-file.jsp" %>
<%@include file="/WEB-INF/includes/css-file.jsp" %>

JSP指令（directive）是为JSP引擎而设计的，它们并不直接产生任何可见输出，而只是告诉引擎如何处理JSP页面中的其余部分。
JSP指令的基本语法格式：
<%@ 指令属性名="值" %>

include指令
include指令用于通知JSP引擎在翻译当前JSP页面时将其他文件中的内容合并进当前JSP页面转换成的Servlet源文件中，这种在源文件级别进行引入的方式称之为静态引入，当前JSP页面与静态引入的页面紧密结合为一个Servlet。
语法：
<%@ include file="relativeURL"%>
其中的file属性用于指定被引入文件的相对路径。

在index.jsp中配置登陆和注册页面的url

<ul class="nav navbar-nav navbar-right">

    <li><a href="${ctp}/login.jsp">登录</a></li>

    <li><a href="${ctp}/reg.jsp">注册</a></li>

</ul>

同时也配置login.jsp和reg.jsp中的相关链接

四、管理员用户注册

注册的流程：

来到注册页面--->输入表单内容--->js插件校验--->来到控制器处理注册请求--->调用UserService的注册方法--->UserMapper给数据库中保存东西--->注册完跳转到管理员控制台

注册页面找到注册表单

表单有action指向

method是post

 <form id="regForm" class="form-signin" role="form" action="${ctp }/permission/user/reg" method="post">

       ...

        </div>

        <a id="submitBtn" class="btn btn-lg btn-success btn-block" > 注册</a>

      </form>

    </div>

  <%@include file="/WEB-INF/includes/js-file.jsp" %>

  <script type="text/javascript">

  $("#submitBtn").click(function () {

    $("#regForm").submit();

    return false;

});

  </script>

action 属性规定当提交表单时，向何处发送表单数据

action="${ctp }/permission/user/reg"，因此点击提交后会将表单数据发送给/manager-web/permission/user/reg

在web控制器里

分层，后台有很多功能

controller中根据功能分包

权限

业务审核

业务管理

参数管理

我们将处理上面注册请求的功能放在permission下，接收并响应上面的请求

处理注册请求

超详细 Spring @RequestMapping 注解使用技巧

项目部属对应的path

从上面可知webapp在根路径下

@RequestMapping("/permission/user") 正是上面发送数据的地址

package com.atguigu.scw.manager.controller.permission;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import com.atguigu.scw.manager.bean.TUser;

//处理所有/permission/user下的请求

@RequestMapping("/permission/user")

@Controller

public class UserController {

    private String manager = "manager/";

    /**

     *

     */

    // /permission/user/reg

    @RequestMapping("/reg")

    public String reg(TUser user) {

        System.out.println("用户注册...");

        // 1.注册成功后来到控制面板页面

        return "manager/main";

    }

}

return "manager/main"

实际访问的是/manager-web/WEB-INF/jsps/manager/main.jsp

为什么能访问到呢？因为我们在SpringMVC中配置了解析器

<!--2、视图解析器 -->

<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">

     <property name="prefix" value="/WEB-INF/jsps/"></property>

     <property name="suffix" value=".jsp"></property>

</bean>

controller方法返回字符串可以指定逻辑视图名，通过视图解析器解析为物理视图地址。因此，根据上面的前后缀配置，manager/main解析为/manager-web/WEB-INF/jsps/manager/main.jsp

控制台页面不是直接能够访问的，不放在webapp，放在WEB-INF的jsps下的manager中

manger存放管理员的页面

下面又包含permission、audi、serviceman、system文件夹，分别对应权限管理、业务审核、业务管理、参数管理

将main.jsp放在manager下

五、表单校验

设置下注册页面的表单

校验插件拷贝到plugin文件夹下

修改reg.jsp

...

<div class="container">

      <form id="regForm" class="form-signin" role="form" action="${ctp }/permission/user/reg" method="post">

        <h2 class="form-signin-heading"><i class="glyphicon glyphicon-log-in"></i> 用户注册</h2>

          <div class="form-group has-success has-feedback">

            <input type="text" name="loginacct" class="form-control"

            id="loginacct_input"

            placeholder="请输入登录账号" autofocus>

            <span class="glyphicon glyphicon-user form-control-feedback"></span>

          </div>

          <div class="form-group has-success has-feedback">

            <input type="password" name="userpswd" class="form-control"

            id="userpswd_input"

            placeholder="请输入登录密码" style="margin-top:10px;">

            <span class="glyphicon glyphicon-lock form-control-feedback"></span>

          </div>

          <div class="form-group has-success has-feedback">

            <input type="text" name="email" class="form-control"

            id="email_input" placeholder="请输入邮箱地址" style="margin-top:10px;">

            <span class="glyphicon glyphicon glyphicon-envelope form-control-feedback"></span>

          </div>

          <div class="form-group has-success has-feedback">

            <select class="form-control" >

                <option>会员</option>

                <option>管理</option>

            </select>

          </div>

        <div class="checkbox">

          <label>

            忘记密码

          </label>

          <label style="float:right">

            <a href="${ctp}/login.jsp">我有账号</a>

          </label>

        </div>

        <a id="submitBtn" class="btn btn-lg btn-success btn-block" > 注册</a>

      </form>

    </div>

  <%@include file="/WEB-INF/includes/js-file.jsp" %>

  <script type="text/javascript">

  $("#submitBtn").click(function () {

    $("#regForm").submit();

    return false;

});

  $("#regForm").validate({

      rules:{

          loginacct:{

              required: true,

              minlength: 6

          },

          userpswd: {

              required: true,

              minlength: 6

          },

          email: {

              required: true,

              email: true

          }

      },

      messages:{

          loginacct:{

              required: "请填写用户账号",

              minlength: "登陆账号必须是6位以上"

          },

          userpswd: {

              required: "请填写密码",

              minlength: "密码必须是6位以上"

          },

          email: {

              required: "请填写邮箱",

              email: "请输入正确的邮箱"

          }

      }

  });

  </script>

...

运行

可以发现图标因为显示提示信息位置有点错乱

可以想办法把提示信息放在图标的下边

自定义错误显示

 <script type="text/javascript">

//给校验器设置一些策略

    $.validator.setDefaults({

        showErrors:function(map, list) {

            //console.log(map);

            //console.log(list);

            //将每个元素自己的错误信息显示在自己的图标下

            //先清除所有错误；清状态

            $(".errorinfo").empty();

            $(".form-group").removeClass("has-success has-error has-warning")

            $.each(list,function(){

                //当前发生错误的详细信息；

                //element当前错误元素

                //错误信息

                $(this.element).nextAll(".errorinfo").text(this.message);

                //改变input的状态；

                $(this.element).parent("div.form-group").addClass("has-error")

            })

        }

    });
...

showErrors:function(map, list)

map和list

map封装了每个字段的错误信息

element是错误信息的元素

在图标下面加一个span用来显示错误信息

<span class="errorinfo" style="color: red"></span>

注册分会员注册和管理员注册

修改下reg.jsp中提交时的js

 $("#submitBtn").click(function () {

    var loginType = $("select.form-control").val();

    if(loginType == "管理"){

        $("#regForm").submit();

    }else{

        alert("此功能尚未开通")

    }

    return false;

});

在表单提交的UserController中编写注册的逻辑

//处理所有/permission/user下的请求

@RequestMapping("/permission/user")

@Controller

public class UserController {

    private String manager = "manager/";

    @Autowired

    UserService userService;

    /**

     *

     */

    // /permission/user/reg

    @RequestMapping("/reg")

    public String reg(TUser user, Model model, HttpSession session) {

        System.out.println("用户注册..." + user);

        // 1.注册成功后来到控制面板页面

        // 1.注册用户

        boolean flag = userService.register(user);

        if (flag == true) {

            // 1.注册成功，来到控制面板

            // 用户保存的数据在user对象中，id是数据库生成的自增主键

            // 需要修改mybatis的mapper文件，让其使用自动生成的id

            session.setAttribute(Constants.LOGIN_USER, user);

            return "manager/main";

        } else {

            // 2.注册失败

            model.addAttribute("regError", "用户名已经被使用");

            // 3.来到页面要回显user之前输入的内容

            // 4.user先从隐含模型中拿的；只要pojo，确定完值以后会自动放在隐含模型中

            // 用的key是类名首字母小写${tUser.loginacct }
            // 由于bean包中的类名前两个字母大写，比较特殊，这里实际使用的是TUser

            return "forward:/reg.jsp";

        }

    }

}

注册失败好要回显，在reg.jsp的表格中设置用户名和邮箱的value，value="${TUser.loginacct }

<form id="regForm" class="form-signin" role="form" action="${ctp }/permission/user/reg" method="post">

        <h2 class="form-signin-heading"><i class="glyphicon glyphicon-log-in"></i> 用户注册</h2>

          <div class="form-group has-success has-feedback">

            <input type="text" name="loginacct" class="form-control"

            id="loginacct_input"

            placeholder="请输入登录账号" value="${TUser.loginacct }" autofocus>

            <span class="glyphicon glyphicon-user form-control-feedback"></span>

            <span class="errorinfo" style="color: red"></span>

          </div>

          <div class="form-group has-success has-feedback">

            <input type="password" name="userpswd" class="form-control"

            id="userpswd_input"

            placeholder="请输入登录密码" style="margin-top:10px;">

            <span class="glyphicon glyphicon-lock form-control-feedback"></span>

            <span class="errorinfo" style="color: red"></span>

          </div>

          <div class="form-group has-success has-feedback">

            <input type="text" name="email" class="form-control"

            id="email_input" placeholder="请输入邮箱地址" value="${TUser.email }" style="margin-top:10px;">

            <span class="glyphicon glyphicon glyphicon-envelope form-control-feedback"></span>

            <span class="errorinfo" style="color: red"></span>

          </div>

由于bean起名的时候前两个字母都是大写，因此页面中要和类名相同，即TUser，而不是常用的tUser

上面用到了UserService的register方法和Constants.LOGIN_USER常量

编写UserService接口和实现类

package com.atguigu.scw.manager.service;

import com.atguigu.scw.manager.bean.TUser;

public interface UserService {

    public boolean register(TUser user);

}

package com.atguigu.scw.manager.service.impl;

import java.util.Date;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

import com.atguigu.project.MD5Util;

import com.atguigu.project.MyStringUtils;

import com.atguigu.scw.manager.bean.TUser;

import com.atguigu.scw.manager.dao.TUserMapper;

import com.atguigu.scw.manager.service.UserService;

@Service

public class UserServiceImpl implements UserService {

    @Autowired

    TUserMapper userMapper;

    public boolean register(TUser user) {

        // 1.拿到用户信息，先加密密码

        // 加密的密码 盐,这里使用了用户名

        // 盐不能超过8位，因此本打算用用户名，但容易出错，这里取部分用户名

        // String loginacct = user.getLoginacct();

        // String salt = loginacct.substring(0, 6) + "HA";

        // String crypt = Md5Crypt.md5Crypt(user.getUserpswd().getBytes());

        String diget = MD5Util.digest(user.getUserpswd());

        user.setUserpswd(diget);

        // 2.在将用户的其他信息设置默认值

        // 设置昵称 创建时间

        user.setUsername(user.getLoginacct());

        user.setCreatetime(MyStringUtils.formatSimpleDate(new Date()));

        // 3.去数据库保存用户，登陆账号不能重复

        int i;

        try {

            i = userMapper.insertSelective(user);

        } catch (Exception e) {

            // 保存失败的原因就是用户重复，数据库设置了Loginacct不可重复

            return false;

        }

        // i影响多少行

        return i == 1 ? true : false;

    }

}

用到了MyStringUtils.formatSimpleDate(new Date())

MyStringUtils中添加方法

 public static String formatSimpleDate(Date date) {

        SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");

        return format.format(date);

    }

Constants.LOGIN_USER常量

package com.atguigu.scw.manager.constant;

public class Constants {

    public static final String LOGIN_USER = "loginUser";

}

修改下/manager-dao/src/main/resources/mybatis/mapper/TUserMapper.xml

<insert id="insertSelective" parameterType="com.atguigu.scw.manager.bean.TUser" useGeneratedKeys="true" keyProperty="id">

数据库里密码长度改为64

登陆后的控制面板，右上角显示用户名

从session中取，用loginUser

main.jsp中

<div class="btn-group">

                  <button type="button" class="btn btn-default btn-success dropdown-toggle" data-toggle="dropdown">

                    <i class="glyphicon glyphicon-user"></i>

                   ${loginUser.username }

                  <span class="caret"></span>

                  </button>

                      <ul class="dropdown-menu" role="menu">

                        <li><a href="#"><i class="glyphicon glyphicon-cog"></i> 个人设置</a></li>

                        <li><a href="#"><i class="glyphicon glyphicon-comment"></i> 消息</a></li>

                        <li class="divider"></li>

                        <li><a href="index.html"><i class="glyphicon glyphicon-off"></i> 退出系统</a></li>

                      </ul>

                </div>