天猫整站（简易版）SSM（七）无需登录即可使用的功能

注册

一、页面效果

访问地址：http://localhost:8080/tmall_ssm/registerPage

二、register.jsp

register.jsp也包含公共页面,不同的是，没有使用首页的search.jsp,而是用的简单一点的simpleSearch.jsp。
中间是注册业务页面registerPage.jsp

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

<%@include file="../include/fore/header.jsp"%>
<%@include file="../include/fore/top.jsp"%>
<%@include file="../include/fore/simpleSearch.jsp"%>
<%@include file="../include/fore/register/registerPage.jsp"%>
<%@include file="../include/fore/footer.jsp"%>

三、PageController

服务跳转

package com.li.tmall.controller;

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

/**
 * @Author: 98050
 * Time: 2018-09-27 11:50
 * Feature:
 */
@Controller
@RequestMapping("")
public class PageController {
    @RequestMapping("registerPage")
    public String registerPage() {
        return "fore/register";
    }
    @RequestMapping("registerSuccessPage")
    public String registerSuccessPage() {
        return "fore/registerSuccess";
    }
    @RequestMapping("loginPage")
    public String loginPage() {
        return "fore/login";
    }
    @RequestMapping("forealipay")
    public String alipay(){
        return "fore/alipay";
    }
}

四、registerPage.jsp

注册页面的主体功能，用于提交账号密码。 在提交之前会进行为空验证，以及密码是否一致验证。

<%--
  Created by IntelliJ IDEA.
  User: 
  Date: 2018/9/27
  Time: 11:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false"%>

<script>
    $(function(){

        <c:if test="${!empty msg}">
        $("span.errorMessage").html("${msg}");
        $("div.registerErrorMessageDiv").css("visibility","visible");
        </c:if>

        $(".registerForm").submit(function(){
            if(0==$("#name").val().length){
                $("span.errorMessage").html("请输入用户名");
                $("div.registerErrorMessageDiv").css("visibility","visible");
                return false;
            }
            if(0==$("#password").val().length){
                $("span.errorMessage").html("请输入密码");
                $("div.registerErrorMessageDiv").css("visibility","visible");
                return false;
            }
            if(0==$("#repeatpassword").val().length){
                $("span.errorMessage").html("请输入重复密码");
                $("div.registerErrorMessageDiv").css("visibility","visible");
                return false;
            }
            if($("#password").val() !=$("#repeatpassword").val()){
                $("span.errorMessage").html("重复密码不一致");
                $("div.registerErrorMessageDiv").css("visibility","visible");
                return false;
            }

            return true;
        });
    })
</script>

<form method="post" action="foreregister" class="registerForm">

    <div class="registerDiv">
        <div class="registerErrorMessageDiv">
            <div class="alert alert-danger" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
                <span class="errorMessage"></span>
            </div>
        </div>

        <table class="registerTable" align="center">
            <tr>
                <td  class="registerTip registerTableLeftTD">设置会员名</td>
                <td></td>
            </tr>
            <tr>
                <td class="registerTableLeftTD">登陆名</td>
                <td  class="registerTableRightTD"><input id="name" name="name" placeholder="会员名一旦设置成功，无法修改" > </td>
            </tr>
            <tr>
                <td  class="registerTip registerTableLeftTD">设置登陆密码</td>
                <td  class="registerTableRightTD">登陆时验证，保护账号信息</td>
            </tr>
            <tr>
                <td class="registerTableLeftTD">登陆密码</td>
                <td class="registerTableRightTD"><input id="password" name="password" type="password"  placeholder="设置你的登陆密码" > </td>
            </tr>
            <tr>
                <td class="registerTableLeftTD">密码确认</td>
                <td class="registerTableRightTD"><input id="repeatpassword" type="password"   placeholder="请再次输入你的密码" > </td>
            </tr>

            <tr>
                <td colspan="2" class="registerButtonTD">
                    <a href="../../../fore/registerSuccess.jsp"><button>提   交</button></a>
                </td>
            </tr>
        </table>
    </div>
</form>

这段代码用于当账号提交到服务端，服务端判断当前账号已经存在的情况下，显示返回的错误提示 "用户名已经被使用,不能使用"

五、UserService

UserService新增加isExist(String name)方法

package com.li.tmall.service;

import com.li.tmall.pojo.User;

import java.util.List;

/**
 * @Author: 98050
 * Time: 2018-09-20 10:50
 * Feature:R
 */
public interface UserService {

    /**
     * 用户列表
     * @return
     */
    List<User> list();

    /**
     * 在查询订单时，为订单项中的user字段赋值
     * @param id
     * @return
     */
    User get(Integer id);

    /**
     * 增加用户
     * @param user
     */
    void add(User user);

    /**
     * 判断用户名是否重复
     * @param name
     * @return
     */
    boolean isExist(String name);
}

六、UserServiceImpl

UserServiceImpl 新增isExist(String name)的实现，判断某个名称是否已经被使用过了。

    @Override
    public boolean isExist(String name) {
        UserExample example = new UserExample();
        example.createCriteria().andNameEqualTo(name);
        List<User> users = userMapper.selectByExample(example);
        if (!users.isEmpty()){
            return true;
        }
        return false;
    }

七、ForeController.register()

registerPage.jsp 的form提交数据到路径 foreregister,导致ForeController.register()方法被调用

1. 通过参数User获取浏览器提交的账号密码
2. 通过HtmlUtils.htmlEscape(name);把账号里的特殊符号进行转义
3. 判断用户名是否存在

 

• 如果已经存在，就服务端跳转到reigster.jsp，并且带上错误提示信息
• 如果不存在，则加入到数据库中，并服务端跳转到registerSuccess.jsp页面

注:为什么要用 HtmlUtils.htmlEscape？ 因为在恶意注册的时候，会使用诸如 <script>alert('papapa')</script> 这样的名称，会导致网页打开就弹出一个对话框。 那么在转义之后，就没有这个问题了。
注:model.addAttribute("user", null); 这句话的用处是当用户存在，服务端跳转到register.jsp的时候不带上参数user, 否则当注册失败的时候，会在原本是“请登录”的超链位置显示刚才注册的名称。 

扫描二维码关注公众号，回复： 3539099 查看本文章

    @RequestMapping("foreregister")
    public String register(Model model, User user){
        String name = user.getName();
        //把账号里的特殊符号进行转义
        name = HtmlUtils.htmlEscape(name);
        user.setName(name);
        boolean exist = userService.isExist(name);
        if (exist){
            String message = "用户名已经被使用,不能使用!";
            model.addAttribute("msg",message);
            model.addAttribute("user",null);
            return "fore/register";
        }
        userService.add(user);
        return "redirect:registerSuccess";
    }

八、registerSuccess.jsp

<%--
  Created by IntelliJ IDEA.
  User: 
  Date: 2018/9/27
  Time: 11:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false"%>

<%@include file="../include/fore/header.jsp"%>
<%@include file="../include/fore/top.jsp"%>
<%@include file="../include/fore/simpleSearch.jsp"%>
<%@include file="../include/fore/register/registerSuccessPage.jsp"%>
<%@include file="../include/fore/footer.jsp"%>

九、registerSuccessPage.jsp

<%--
  Created by IntelliJ IDEA.
  User: 
  Date: 2018/9/27
  Time: 12:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false"%>

<div class="registerSuccessDiv">

    <img src="${pageContext.request.contextPath}/img/site/registerSuccess.png">
    恭喜注册成功
</div>