[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
页脚
```
<%@ 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
置顶导航页面。
这里会根据用户是否登录，决定是否显示退出按钮，或者登录注册按钮，以及购物车中的商品数量。
```
<%@ 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个来显示。
```
<%@ 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. 删除模态窗口
当用户在我的订单页面,和购物车页面进行删除操作的时候，就会弹出模态删除窗口。
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>
```
- 项目简介
- 功能一览
- 前台
- 后台
- 开发流程
- 需求分析-展示
- 首页
- 产品页
- 分类页
- 搜索结果页
- 购物车查看页
- 结算页
- 确认支付页
- 支付成功页
- 我的订单页
- 确认收货页
- 确认收货成功页
- 评价页
- 需求分析-交互
- 分类页排序
- 立即购买
- 加入购物车
- 调整订单项数量
- 删除订单项
- 生成订单
- 订单页功能
- 确认付款
- 确认收货
- 提交评价信息
- 登录
- 注册
- 退出
- 搜索
- 前台需求列表
- 需求分析后台
- 分类管理
- 属性管理
- 产品管理
- 产品图片管理
- 产品属性设置
- 用户管理
- 订单管理
- 后台需求列表
- 表结构设计
- 数据建模
- 表与表之间的关系
- 后台-分类管理
- 可运行的项目
- 静态资源
- JSP包含关系
- 查询
- 分页
- 增加
- 删除
- 编辑
- 修改
- 做一遍
- 重构
- 分页方式
- 分类逆向工程
- 所有逆向工程
- 后台其他页面
- 属性管理实现
- 产品管理实现
- 产品图片管理实现
- 产品属性值设置
- 用户管理实现
- 订单管理实现
- 前端
- 前台-首页
- 可运行的项目
- 静态资源
- ForeController
- home方法
- home.jsp
- homePage.jsp
- 前台-无需登录
- 注册
- 登录
- 退出
- 产品页
- 模态登录
- 分类页
- 搜索
- 前台-需要登录
- 购物流程
- 立即购买
- 结算页面
- 加入购物车
- 查看购物车页面
- 登录状态拦截器
- 其他拦截器
- 购物车页面操作
- 订单状态图
- 生成订单
- 我的订单页
- 我的订单页操作
- 评价产品
- 总结