[TOC] ## 步驟 1 : 先運行，看到效果，再學習 先將完整的 tmall_ssm 項目（向老師要相關資料），配置運行起來，確認可用之后，再學習做了哪些步驟以達到這樣的效果。 ## 步驟 2 : 模仿和排錯 在確保可運行項目能夠正確無誤地運行之后，再嚴格照著教程的步驟，對代碼模仿一遍。 模仿過程難免代碼有出入，導致無法得到期望的運行結果，此時此刻通過比較**正確答案** ( 可運行項目 ) 和自己的代碼，來定位問題所在。 采用這種方式，**學習有效果，排錯有效率**，可以較為明顯地提升學習速度，跨過學習路上的各個檻。 ## 步驟 3 : 界面效果 在未登錄狀態(如果已經登錄就看不到這個效果了，需要先退出,所以要先做退出)，點擊購買或者加入購物車就會彈出這個模態對話框 在這個模態對話框上可以進行登錄操作，如果賬號和密碼出錯會出現 "賬號密碼錯誤" 提示。  ## 步驟 4 : imgAndInfo.jsp 立即購買和加入購物車這兩個按鈕的監聽是放在imgAndInfo.jsp頁面中 這兩個按鈕都會通過JQuery的`.get`方法，用異步ajax的方式訪問forecheckLogin，獲取當前是否登錄狀態 如果返回的不是"success" 即表明是未登錄狀態，那么就會打開登錄的模態窗口 `$("#loginModal").modal('show');` 監聽購買按鈕： ~~~ $(".buyLink").click(function(){ var page = "forecheckLogin"; $.get( page, function(result){ if("success"==result){ 。。。略 } else{ $("#loginModal").modal('show'); } } ); return false; }); ~~~ 加入購物車按鈕監聽： ~~~ $(".addCartLink").click(function(){ var page = "forecheckLogin"; $.get( page, function(result){ if("success"==result){ 。。。略 } else{ $("#loginModal").modal('show'); } } ); return false; }); ~~~ ## 步驟 5 : ForeController.checkLogin() 在上一步的ajax訪問路徑`/forecheckLogin`會導致`ForeController.checkLogin()`方法被調用。 獲取session中的"user"對象 如果不為空，即表示已經登錄，返回字符串"success" 如果為空，即表示未登錄，返回字符串"fail" ~~~ 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.bind.annotation.ResponseBody; import org.springframework.web.util.HtmlUtils; import com.dodoke.tmall.pojo.Category; import com.dodoke.tmall.pojo.Product; import com.dodoke.tmall.pojo.ProductImage; import com.dodoke.tmall.pojo.PropertyValue; import com.dodoke.tmall.pojo.Review; 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.ReviewService; 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; @Autowired ReviewService reviewService; @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"; } @RequestMapping("forelogout") public String logout(HttpSession session) { session.removeAttribute("user"); return "redirect:forehome"; } @RequestMapping("foreproduct") public String product(int pid, Model model) { Product p = productService.get(pid); // 根據對象p，獲取這個產品對應的單個圖片集合 List<ProductImage> productSingleImages = productImageService.list(p.getId(), ProductImageService.type_single); // 根據對象p，獲取這個產品對應的詳情圖片集合 List<ProductImage> productDetailImages = productImageService.list(p.getId(), ProductImageService.type_detail); p.setProductSingleImages(productSingleImages); p.setProductDetailImages(productDetailImages); // 獲取產品的所有屬性值 List<PropertyValue> pvs = propertyValueService.list(p.getId()); // 獲取產品對應的所有的評價 List<Review> reviews = reviewService.list(p.getId()); // 設置產品的銷量和評價數量 productService.setSaleAndReviewNumber(p); model.addAttribute("reviews", reviews); model.addAttribute("p", p); model.addAttribute("pvs", pvs); return "fore/product"; } @RequestMapping("forecheckLogin") @ResponseBody public String checkLogin(HttpSession session) { User user = (User) session.getAttribute("user"); if (null != user) { return "success"; } return "fail"; } } ~~~ ## 步驟 6 : modal.jsp modal.jsp 頁面被 footer.jsp 所包含，所以每個頁面都是加載了的。 通過imgAndInfo.jsp頁面中的購買按鈕或者加入購物車按鈕顯示出來。 點擊登錄按鈕時，使用imgAndInfo.jsp 頁面中的ajax代碼進行登錄驗證： ~~~ $("button.loginSubmitButton").click(function(){ var name = $("#name").val(); var password = $("#password").val(); if(0==name.length||0==password.length){ $("span.errorMessage").html("請輸入賬號密碼"); $("div.loginErrorMessageDiv").show(); return false; } var page = "foreloginAjax"; $.post( page, {"name":name,"password":password}, function(result){ if("success"==result){ location.reload(); } else{ $("span.errorMessage").html("賬號密碼錯誤"); $("div.loginErrorMessageDiv").show(); } } ); return true; }); ~~~ modal.jsp： ~~~ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <div class="modal " id="loginModal" tabindex="-1" role="dialog" > <div class="modal-dialog loginDivInProductPageModalDiv"> <div class="modal-content"> <div class="loginDivInProductPage"> <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 href="#nowhere">忘記登錄密碼</a> <a href="registerPage" class="pull-right">免費注冊</a> </div> <div style="margin-top:20px"> <button class="btn btn-block redButton loginSubmitButton" type="submit">登錄</button> </div> </div> </div> </div> </div> <div class="modal" id="deleteConfirmModal" tabindex="-1" role="dialog" > <div class="modal-dialog deleteConfirmModalDiv"> <div class="modal-content"> <div class="modal-header"> <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">確認刪除？</h4> </div> <div class="modal-footer"> <button data-dismiss="modal" class="btn btn-default" type="button">關閉</button> <button class="btn btn-primary deleteConfirmButton" id="submit" type="button">確認</button> </div> </div> </div> </div> ~~~ ## 步驟 7 : `ForeController.loginAjax()` 在上一步modal.jsp中，點擊了登錄按鈕之后，訪問路徑/foreloginAjax,導致`ForeController.loginAjax()`方法被調用 1. 獲取賬號密碼 2. 通過賬號密碼獲取User對象 2.1 如果User對象為空，那么就返回"fail"字符串。 2.2 如果User對象不為空，那么就把User對象放在session中，并返回"success" 字符串 ~~~ 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.bind.annotation.ResponseBody; import org.springframework.web.util.HtmlUtils; import com.dodoke.tmall.pojo.Category; import com.dodoke.tmall.pojo.Product; import com.dodoke.tmall.pojo.ProductImage; import com.dodoke.tmall.pojo.PropertyValue; import com.dodoke.tmall.pojo.Review; 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.ReviewService; 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; @Autowired ReviewService reviewService; @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"; } @RequestMapping("forelogout") public String logout(HttpSession session) { session.removeAttribute("user"); return "redirect:forehome"; } @RequestMapping("foreproduct") public String product(int pid, Model model) { Product p = productService.get(pid); // 根據對象p，獲取這個產品對應的單個圖片集合 List<ProductImage> productSingleImages = productImageService.list(p.getId(), ProductImageService.type_single); // 根據對象p，獲取這個產品對應的詳情圖片集合 List<ProductImage> productDetailImages = productImageService.list(p.getId(), ProductImageService.type_detail); p.setProductSingleImages(productSingleImages); p.setProductDetailImages(productDetailImages); // 獲取產品的所有屬性值 List<PropertyValue> pvs = propertyValueService.list(p.getId()); // 獲取產品對應的所有的評價 List<Review> reviews = reviewService.list(p.getId()); // 設置產品的銷量和評價數量 productService.setSaleAndReviewNumber(p); model.addAttribute("reviews", reviews); model.addAttribute("p", p); model.addAttribute("pvs", pvs); return "fore/product"; } @RequestMapping("forecheckLogin") @ResponseBody public String checkLogin(HttpSession session) { User user = (User) session.getAttribute("user"); if (null != user) { return "success"; } return "fail"; } @RequestMapping("foreloginAjax") @ResponseBody public String loginAjax(@RequestParam("name") String name, @RequestParam("password") String password, HttpSession session) { name = HtmlUtils.htmlEscape(name); User user = userService.get(name, password); if (null == user) { return "fail"; } session.setAttribute("user", user); return "success"; } } ~~~