[TOC] ## 步驟 1 : 先運行，看到效果，再學習 先將完整的 tmall_ssm 項目（向老師要相關資料），配置運行起來，確認可用之后，再學習做了哪些步驟以達到這樣的效果。 ## 步驟 2 : 模仿和排錯 在確保可運行項目能夠正確無誤地運行之后，再嚴格照著教程的步驟，對代碼模仿一遍。 模仿過程難免代碼有出入，導致無法得到期望的運行結果，此時此刻通過比較**正確答案** ( 可運行項目 ) 和自己的代碼，來定位問題所在。 采用這種方式，**學習有效果，排錯有效率**，可以較為明顯地提升學習速度，跨過學習路上的各個檻。 ## 步驟 3 : 界面效果 訪問注冊地址： `http://localhost:8080/tmall_ssm/registerPage`  項目目錄結構：  ## 步驟 4 : register.jsp 與首頁的home.jsp相仿，register.jsp也包含了header.jsp,top.jsp,footer.jsp等公共頁面。 不同的是，沒有使用首頁的search.jsp,而是用的簡單一點的 simpleSearch.jsp 中間是注冊業務頁面registerPage.jsp ~~~ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <%@include file="../include/fore/header.jsp"%> <%@include file="../include/fore/top.jsp"%> <%@include file="../include/fore/simpleSearch.jsp"%> <%@include file="../include/fore/registerPage.jsp"%> <%@include file="../include/fore/footer.jsp"%> ~~~ ## 步驟 5 : PageController **register.jsp** 是放在WEB-INF目錄下的，是無法通過瀏覽器直接訪問的。 為了訪問這些放在WEB-INF下的jsp，準備一個專門的PageController類，專門做服務端跳轉。 比如訪問registerPage，就會服務端跳轉到WEB-INF/jsp/fore/register.jsp 去，這樣就解決了無法被訪問的問題。 這個類很簡單，就是單純用來做服務端跳轉用的，為了使學習更順滑，把后面會用到的也都先貼出來了，都不難理解的。 ~~~ package com.dodoke.tmall.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; @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"; } } ~~~ ## 步驟 6 : simpleSearch.jsp 與首頁的**search.jsp**不太一樣的是，這個搜索欄要更簡單一些，并且左右分開。 注： 這里${cs} 中用到的數據將在后續攔截器中講解  ~~~ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <div > <a href="${contextPath}"> <img id="simpleLogo" class="simpleLogo" src="img/site/simpleLogo.png"> </a> <form action="foresearch" method="post" > <div class="simpleSearchDiv pull-right"> <input type="text" placeholder="平衡車 原汁機" name="keyword"> <button class="searchButton" type="submit">搜天貓</button> <div class="searchBelow"> <c:forEach items="${cs}" var="c" varStatus="st"> <c:if test="${st.count>=8 and st.count<=11}"> <span> <a href="forecategory?cid=${c.id}"> ${c.name} </a> <c:if test="${st.count!=11}"> <span>|</span> </c:if> </span> </c:if> </c:forEach> </div> </div> </form> <div style="clear:both"></div> </div> ~~~ ## 步驟 7 : registerPage.jsp 注冊頁面的主體功能，用于提交賬號密碼。 在提交之前會進行為空驗證，以及密碼是否一致驗證。 這段代碼用于當賬號提交到服務端，服務端判斷當前賬號已經存在的情況下，顯示返回的錯誤提示 **"用戶名已經被使用,不能使用"** ~~~ <c:if test="${!empty msg}"> $("span.errorMessage").html("${msg}"); $("div.registerErrorMessageDiv").css("visibility","visible"); </c:if> ~~~ ~~~ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <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="registerSuccess.jsp"><button>提 交</button></a> </td> </tr> </table> </div> </form> ~~~ ## 步驟 8 : UserService UserService新增加isExist(String name)方法 ~~~ package com.dodoke.tmall.service; import java.util.List; import com.dodoke.tmall.pojo.User; public interface UserService { void add(User c); void delete(int id); void update(User c); User get(int id); List list(); boolean isExist(String name); } ~~~ ## 步驟 9 : UserServiceImpl UserServiceImpl 新增isExist(String name)的實現，判斷某個名稱是否已經被使用過了。 ~~~ package com.dodoke.tmall.service.impl; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.dodoke.tmall.mapper.UserMapper; import com.dodoke.tmall.pojo.User; import com.dodoke.tmall.pojo.UserExample; import com.dodoke.tmall.service.UserService; @Service public class UserServiceImpl implements UserService { @Autowired UserMapper userMapper; @Override public void add(User u) { userMapper.insert(u); } @Override public void delete(int id) { userMapper.deleteByPrimaryKey(id); } @Override public void update(User u) { userMapper.updateByPrimaryKeySelective(u); } @Override public User get(int id) { return userMapper.selectByPrimaryKey(id); } public List<User> list() { UserExample example = new UserExample(); example.setOrderByClause("id desc"); return userMapper.selectByExample(example); } @Override public boolean isExist(String name) { UserExample example = new UserExample(); example.createCriteria().andNameEqualTo(name); List<User> result = userMapper.selectByExample(example); if (!result.isEmpty()) { return true; } return false; } } ~~~ ## 步驟 10 : ForeController.register() **registerPage.jsp** 的form提交數據到路徑 foreregister,導致ForeController.register()方法被調用 1. 通過參數User獲取瀏覽器提交的賬號密碼 2. 通過HtmlUtils.htmlEscape(name);把賬號里的特殊符號進行轉義 3. 判斷用戶名是否存在 3.1 如果已經存在，就服務端跳轉到reigster.jsp，并且帶上錯誤提示信息 3.2 如果不存在，則加入到數據庫中，并服務端跳轉到registerSuccess.jsp頁面 注：為什么要用 HtmlUtils.htmlEscape？ 因為有些同學在惡意注冊的時候，會使用諸如 `<script>alert('papapa')</script`> 這樣的名稱，會導致網頁打開就彈出一個對話框。 那么在轉義之后，就沒有這個問題了。 注：model.addAttribute("user", null); 這句話的用處是當用戶存在，服務端跳轉到register.jsp的時候不帶上參數user, 否則當注冊失敗的時候，會在原本是“請登錄”的超鏈位置顯示剛才注冊的名稱。 可以試試把這一條語句注釋掉觀察這個現象。注意在參數里有 user,就會自動放到作用域里去了。 ~~~ package com.dodoke.tmall.controller; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.util.HtmlUtils; import com.dodoke.tmall.pojo.Category; import com.dodoke.tmall.pojo.User; import com.dodoke.tmall.service.CategoryService; import com.dodoke.tmall.service.OrderItemService; import com.dodoke.tmall.service.OrderService; import com.dodoke.tmall.service.ProductImageService; import com.dodoke.tmall.service.ProductService; import com.dodoke.tmall.service.PropertyValueService; import com.dodoke.tmall.service.UserService; @Controller @RequestMapping("") public class ForeController { @Autowired CategoryService categoryService; @Autowired ProductService productService; @Autowired UserService userService; @Autowired ProductImageService productImageService; @Autowired PropertyValueService propertyValueService; @Autowired OrderService orderService; @Autowired OrderItemService orderItemService; @RequestMapping("forehome") public String home(Model model) { List<Category> cs = categoryService.list(); productService.fill(cs); productService.fillByRow(cs); model.addAttribute("cs", cs); return "fore/home"; } @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 m = "用戶名已經被使用,不能使用"; model.addAttribute("msg", m); model.addAttribute("user", null); return "fore/register"; } userService.add(user); return "redirect:registerSuccessPage"; } } ~~~ ## 步驟 11 : registerSuccess.jsp 也是各種包含，不再贅述。 內容頁面在**registerSuccessPage.jsp**  ## 步驟 12 : registerSuccessPage.jsp 很簡單，就不說了~  ~~~ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <div class="registerSuccessDiv"> <img src="img/site/registerSuccess.png"> 恭喜注冊成功 </div> ~~~ > 自己嘗試添加md5加密