home.jsp · 教案-天貓整站開發-SSM版（打印用）

[TOC] ## 步驟 1 : 前臺頁面的特點觀察模仿天貓前端，可以發現前臺頁面有如下特點： 1. 有共同的置頂導航 2. 有共同的搜索欄 3. 有共同的頁腳根據這樣的特點，在設計前臺jsp頁面的時候，就制作了很多公共頁面，其他前臺頁面就共享這些公共頁面，使得開發和維護成本降低不少 ## 步驟 2 : home.jsp 所包含頁面根據前臺頁面的特點，我們把home.jsp設計成如代碼所示。 1. header.jsp 引入標準標簽庫，js,css，自定義javascript函數等 2. top.jsp 置頂導航 3. search.jsp 搜索欄 4. homePage.jsp 首頁業務頁面 5. footer.jsp 頁腳 ![](https://box.kancloud.cn/7f84f9db4c072f457c162678dccc685b_400x506.png) ``` <%@ 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/search.jsp"%> <%@include file="../include/fore/home/homePage.jsp"%> <%@include file="../include/fore/footer.jsp"%> ``` ## 步驟 3 : header.jsp header.jsp 做了如下工作 1. 聲明為html5格式 `<!DOCTYPE html> ` 2.讓瀏覽器以UTF顯示中文，本頁面的中文文字采用`UTF-8`編碼 `<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>` 3. 引入標準標簽庫 `<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>` c通常用于條件判斷和遍歷 4. 引入bootstrap和jquery 5. 自定義前端樣式 `<link href="css/fore/style.css" rel="stylesheet">` 除了輪播和圖標，前端幾乎沒用Bootstrap中的樣式，所有的自定義樣式都在這個文件里。 ## 步驟 4 : top.jsp 置頂導航頁面。這里會根據用戶是否登錄，決定是否顯示退出按鈕，或者登錄注冊按鈕，以及購物車中的商品數量。 ![](https://box.kancloud.cn/7bf13898f2c9557781fcc53b7aa645a1_1018x30.png) ``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <nav class="top "> <a href="${contextPath}"> <span style="color:#C40000;margin:0px" class=" glyphicon glyphicon-home redColor"></span> 天貓首頁 </a> <span>喵，歡迎來天貓</span> <c:if test="${!empty user}"> <a href="loginPage">${user.name}</a> <a href="forelogout">退出</a> </c:if> <c:if test="${empty user}"> <a href="loginPage">請登錄</a> <a href="registerPage">免費注冊</a> </c:if> <span class="pull-right"> <a href="forebought">我的訂單</a> <a href="forecart"> <span style="color:#C40000;margin:0px" class=" glyphicon glyphicon-shopping-cart redColor"></span> 購物車<strong>${cartTotalItemNumber}</strong>件</a> </span> </nav> ``` > contextPath 在后面會講解到。 ## 步驟 5 : search.jsp 這里會從request的屬性"cs" 中獲取到分類集合，并取第5個到第8個，一共4個來顯示。 ![](https://box.kancloud.cn/78018c34192a726284ffdcd84ad7b6f4_672x137.png) ``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <a href="${contextPath}"> <img id="logo" src="img/site/logo.gif" class="logo"> </a> <form action="foresearch" method="post" > <div class="searchDiv"> <input name="keyword" type="text" placeholder="時尚男鞋太陽鏡 "> <button type="submit" class="searchButton">搜索</button> <div class="searchBelow"> <c:forEach items="${cs}" var="c" varStatus="st"> <c:if test="${st.count>=5 and st.count<=8}"> <span> <a href="forecategory?cid=${c.id}"> ${c.name} </a> <c:if test="${st.count!=8}"> <span>|</span> </c:if> </span> </c:if> </c:forEach> </div> </div> </form> ``` ## 步驟 6 : homePage.jsp 這是首頁業務頁面，將在`homePage.jsp`中詳細講解，在此就不展開了。 ``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <title>模仿天貓官網</title> <div class="homepageDiv"> <%@include file="categoryAndcarousel.jsp"%> <%@include file="homepageCategoryProducts.jsp"%> </div> ``` ## 步驟 7 : footer.jsp 頁腳部分,除了顯示頁腳的靜態信息外，還包含了modal.jsp。這個modal.jsp里提供了兩個模態窗口。 1. 登錄模態窗口當用戶在未登錄狀態，于產品頁點擊購買的時候會彈出 2. 刪除模態窗口當用戶在我的訂單頁面,和購物車頁面進行刪除操作的時候，就會彈出模態刪除窗口。 ![](https://box.kancloud.cn/425000944701e2326742a4f26eb3be3b_1027x580.png) footer.jsp： ``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <%@include file="modal.jsp" %> <div id="footer" class="footer" style="display: block;"> <div id="footer_ensure" class="footer_ensure"> <a href="#nowhere"> <img src="img/site/ensure.png"> </a> </div> <div class="horizontal_line"> </div> <div id="footer_desc" class="footer_desc"> <div class="descColumn"> <span class="descColumnTitle">購物指南</span> <a href="#nowhere" >免費注冊</a> <a href="#nowhere" >開通支付寶</a> <a href="#nowhere" >支付寶充值</a> </div> <div class="descColumn"> <span class="descColumnTitle">天貓保障</span> <a href="#nowhere" >發票保障</a> <a href="#nowhere" >售后規則</a> <a href="#nowhere" >缺貨賠付</a> </div> <div class="descColumn"> <span class="descColumnTitle">支付方式</span> <a href="#nowhere" >快捷支付</a> <a href="#nowhere" >信用卡</a> <a href="#nowhere" >螞蟻花唄</a> <a href="#nowhere" >貨到付款</a> </div> <div class="descColumn"> <span class="descColumnTitle">商家服務</span> <a href="#nowhere" >商家入駐</a> <a href="#nowhere" >商家中心</a> <a href="#nowhere" >天貓智庫</a> <a href="#nowhere" >天貓規則</a> <a href="#nowhere" >物流服務</a> <a href="#nowhere" >喵言喵語</a> <a href="#nowhere" >運營服務</a> </div> <div class="descColumn"> <span class="descColumnTitle">手機天貓</span> <a href="#nowhere" ><img src="img/site/ma.png"></a> </div> </div> <div style="clear:both"> </div> <div id="copyright" class="copyright"> <div class="coptyrightMiddle"> <img id="cateye" class="cateye" src="img/site/cateye.png"> <div class="white_link" > <a href="#nowhere" style="padding-left:0px" >關于天貓</a> <a href="#nowhere" > 幫助中心</a> <a href="#nowhere" >開放平臺</a> <a href="#nowhere" > 誠聘英才</a> <a href="#nowhere" >聯系我們</a> <a href="#nowhere" >網站合作</a> <a href="#nowhere" >法律聲明</a> <a href="#nowhere" >知識產權</a> <a href="#nowhere" > 廉正舉報 </a> </div> <div class="white_link" > <a href="#nowhere" style="padding-left:0px" > 阿里巴巴集團</a><span class="slash">|</span> <a href="#nowhere" > 淘寶網</a><span class="slash">|</span> <a href="#nowhere" >天貓 </a><span class="slash">|</span> <a href="#nowhere" > 聚劃算</a><span class="slash">|</span> <a href="#nowhere" >全球速賣通</a><span class="slash">|</span> <a href="#nowhere" >阿里巴巴國際交易市場</a><span class="slash">|</span> <a href="#nowhere" >1688</a><span class="slash">|</span> <a href="#nowhere" >阿里媽媽</a><span class="slash">|</span> <a href="#nowhere" > 阿里旅行·去啊 </a><span class="slash">|</span> <a href="#nowhere" > 阿里云計算 </a><span class="slash">|</span> <a href="#nowhere" > 阿里通信 </a><span class="slash">|</span> <a href="#nowhere" > YunOS </a><span class="slash">|</span> <a href="#nowhere" > 阿里旅行·去啊 </a><span class="slash">|</span> <a href="#nowhere" > 萬網 </a><span class="slash">|</span> <a href="#nowhere" > 高德 </a><span class="slash">|</span> <a href="#nowhere" > 優視 </a><span class="slash">|</span> <a href="#nowhere" > 友盟 </a><span class="slash">|</span> <a href="#nowhere" > 蝦米 </a><span class="slash">|</span> <a href="#nowhere" > 天天動聽 </a><span class="slash">|</span> <a href="#nowhere" > 來往 </a><span class="slash">|</span> <a href="#nowhere" > 釘釘 </a><span class="slash">|</span> <a href="#nowhere" > 支付寶 </a> </div> <div class="license"> <span>增值電信業務經營許可證：浙B2-20110446</span> <span>網絡文化經營許可證：浙網文[2015]0295-065號</span> <span>互聯網醫療保健信息服務審核同意書浙衛網審【2014】6號 </span> <span>互聯網藥品信息服務資質證書編號：浙-（經營性）-2012-0005</span> <div class="copyRightYear">? 2003-2016 TMALL.COM 版權所有</div> <div> <img src="img/site/copyRight1.jpg"> <img src="img/site/copyRight2.jpg"> </div> </div> </div> </div> </div> </body> </html> ``` 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="密碼"> </div> <span class="text-danger">不要輸入真實的天貓賬號密碼</span><br><br> <div> <a href="#nowhere">忘記登錄密碼</a> <a href="register.jsp" 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> </div> ```