一、页面效果
访问地址: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, 否则当注册失败的时候,会在原本是“请登录”的超链位置显示刚才注册的名称。
@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>