[TOC] ## 步驟 1 : 先運行，看到效果，再學習 先將完整的 tmall_ssm 項目（向老師要相關資料），配置運行起來，確認可用之后，再學習做了哪些步驟以達到這樣的效果。 ## 步驟 2 : 模仿和排錯 在確保可運行項目能夠正確無誤地運行之后，再嚴格照著教程的步驟，對代碼模仿一遍。 模仿過程難免代碼有出入，導致無法得到期望的運行結果，此時此刻通過比較**正確答案** ( 可運行項目 ) 和自己的代碼，來定位問題所在。 采用這種方式，**學習有效果，排錯有效率**，可以較為明顯地提升學習速度，跨過學習路上的各個檻。 ## 步驟 3 : 界面效果 訪問登錄地址： `http://localhost:8080/tmall_ssm/loginPage`  ## 步驟 4 : login.jsp 與register.jsp相仿，login.jsp也包含了header.jsp,footer.jsp等公共頁面。 中間是登錄業務頁面loginPage.jsp  ~~~ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@include file="../include/fore/header.jsp"%> <%@include file="../include/fore/loginPage.jsp"%> <%@include file="../include/fore/footer.jsp"%> ~~~ ## 步驟 5 : UserService 增加get(String name, String password)方法 ~~~ 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); User get(String name, String password); } ~~~ ## 步驟 6 : UserServiceImpl 增加User get(String name, String password) 方法 ~~~ 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; } @Override public User get(String name, String password) { UserExample example = new UserExample(); example.createCriteria().andNameEqualTo(name).andPasswordEqualTo(password); List<User> result = userMapper.selectByExample(example); if (result.isEmpty()) { return null; } return result.get(0); } } ~~~ ## 步驟 7 : loginPage.jsp 登陸業務頁面，用于向服務器提交賬號和密碼 1. 與registerPage.jsp類似的，用于顯示登錄密碼錯誤 <c:if test="${!empty msg}"> $("span.errorMessage").html("${msg}"); $("div.loginErrorMessageDiv").show(); </c:if> 2. 其他js函數是用于為空驗證 ~~~ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <script> $(function(){ <c:if test="${!empty msg}"> $("span.errorMessage").html("${msg}"); $("div.loginErrorMessageDiv").show(); </c:if> $("form.loginForm").submit(function(){ if(0==$("#name").val().length||0==$("#password").val().length){ $("span.errorMessage").html("請輸入賬號密碼"); $("div.loginErrorMessageDiv").show(); return false; } return true; }); $("form.loginForm input").keyup(function(){ $("div.loginErrorMessageDiv").hide(); }); var left = window.innerWidth/2+162; $("div.loginSmallDiv").css("left",left); }) </script> <div id="loginDiv" style="position: relative"> <div class="simpleLogo"> <a href="${contextPath}"><img src="img/site/simpleLogo.png"></a> </div> <img id="loginBackgroundImg" class="loginBackgroundImg" src="img/site/loginBackground.png"> <form class="loginForm" action="forelogin" method="post"> <div id="loginSmallDiv" class="loginSmallDiv"> <div class="loginErrorMessageDiv"> <div class="alert alert-danger" > <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button> <span class="errorMessage"></span> </div> </div> <div class="login_acount_text">賬戶登錄</div> <div class="loginInput " > <span class="loginInputIcon "> <span class=" glyphicon glyphicon-user"></span> </span> <input id="name" name="name" placeholder="手機/會員名/郵箱" type="text"> </div> <div class="loginInput " > <span class="loginInputIcon "> <span class=" glyphicon glyphicon-lock"></span> </span> <input id="password" name="password" type="password" placeholder="密碼" type="text"> </div> <span class="text-danger">不要輸入真實的天貓賬號密碼</span><br><br> <div> <a class="notImplementLink" href="#nowhere">忘記登錄密碼</a> <a href="registerPage" class="pull-right">免費注冊</a> </div> <div style="margin-top:20px"> <button class="btn btn-block redButton" type="submit">登錄</button> </div> </div> </form> </div> ~~~ ## 步驟 8 : ForeController.login() **loginPage.jsp**的form提交數據到路徑 forelogin,導致ForeController.login()方法被調用 1. 獲取賬號密碼 2. 把賬號通過HtmlUtils.htmlEscape進行轉義 3. 根據賬號和密碼獲取User對象 3.1 如果對象為空，則服務端跳轉回login.jsp，也帶上錯誤信息，并且使用 loginPage.jsp 中的辦法顯示錯誤信息 3.2 如果對象存在，則把對象保存在session中，并客戶端跳轉到首頁"forehome" 注 為什么要用 HtmlUtils.htmlEscape？ 因為注冊的時候，ForeController.register()，就進行了轉義，所以這里也需要轉義。有些同學在惡意注冊的時候，會使用諸如 <script>alert('papapa')</script> 這樣的名稱，會導致網頁打開就彈出一個對話框。 那么在轉義之后，就沒有這個問題了。 > @RequestParam用于將請求參數區數據映射到功能處理方法的參數上。可以用來設置默認值或者判斷非空等作用，在這里可以省略不寫。當然這里也可以使用對象接受。 > ~~~ package com.dodoke.tmall.controller; import java.util.List; import javax.servlet.http.HttpSession; 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.bind.annotation.RequestParam; 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"; } @RequestMapping("forelogin") public String login(@RequestParam("name") String name, @RequestParam("password") String password, Model model, HttpSession session) { name = HtmlUtils.htmlEscape(name); User user = userService.get(name,password); if(null==user){ model.addAttribute("msg", "賬號密碼錯誤"); return "fore/login"; } session.setAttribute("user", user); return "redirect:forehome"; } } ~~~