一、实现首页
1.首页设置
WebContent在创建index.jsp,实现跳转到客户端展示的首页
<body>
<jsp:forward page="client/index.jsp"></jsp:forward>
</body>2.文件移植
第一章该书城案例中的client文件夹复制到WebContent下，将client文件夹下的所有html文件改为jsp文件，如下图
测试下
http://localhost:8080/chapter06/index.jsp
解决方法：将每一个jsp文件加上page指令
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>3.修改jsp页面中的地址和链接
问题：
因为是请求转发，所以“<a href="register.jsp">新用户注册</a>”会被转换为“http://localhost:8080/chapter06/register.jsp”
解决办法：
在客户端首页中的链接和图片等路径前加上${pageContext.request.contextPath}/client/
例如
<link rel="stylesheet" href="${pageContext.request.contextPath}/client/css/main.css" type="text/css" />
<link type="text/css" href="${pageContext.request.contextPath}/client/css/autoplay.css" rel="stylesheet" />
<script type="text/javascript" src="${pageContext.request.contextPath}/client/js/autoplay.js"></script>
4.抽取页面代码
重复代码抽取到新的jsp页面，通过include指令包含进来
抽取后
head.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div id="divhead">
<table cellspacing="0" class="headtable">
<tr>
<td>
<a href="index.jsp">
<img src="${pageContext.request.contextPath}/client/images/logo.png" width="200" height="60" border="0" />
</a>
</td>
<td style="text-align:right">
<img src="${pageContext.request.contextPath}/client/images/cart.gif" width="26" height="23" style="margin-bottom:-4px" /> <a href="#">购物车</a>
| <a href="#">帮助中心</a>
| <a href="#">我的帐户</a>
| <a href="${pageContext.request.contextPath}/client/register.jsp">新用户注册</a>
</td>
</tr>
</table>
</div>menu_search.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div id="divmenu">
<a href="#">文学</a>
<a href="#">生活</a>
<a href="#">计算机</a>
<a href="#">外语</a>
<a href="#">经管</a>
<a href="#">励志</a>
<a href="#">社科</a>
<a href="#">学术</a>
<a href="#">少儿</a>
<a href="#">艺术</a>
<a href="#">原版</a>
<a href="#">科技</a>
<a href="#">考试</a>
<a href="#">生活百科</a>
<a href="#" style="color:#FFFF00">全部商品目录</a>
</div>
<div id="divsearch">
<form action="#" id="searchform">
<table width="100%" border="0" cellspacing="0">
<tr>
<td style="text-align:right; padding-right:220px">
Search
<input type="text" name="textfield" class="inputtable" id="textfield" value="请输入书名"
onmouseover="this.focus();"
onclick="my_click(this, 'textfield');"
onBlur="my_blur(this, 'textfield');"/>
<a href="#">
<img src="${pageContext.request.contextPath}/client/images/serchbutton.gif" border="0" style="margin-bottom:-4px" onclick="search()"/>
</a>
</td>
</tr>
</table>
</form>
</div>foot.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div id="divfoot">
<table width="100%" border="0" cellspacing="0">
<tr>
<td rowspan="2" style="width: 10%"><img
src="${pageContext.request.contextPath}/client/images/logo.png"
width="195" height="50" style="margin-left: 175px" />
</td>
<td style="padding-top: 5px; padding-left: 50px"><a href="#">
<font color="#747556"><b>CONTACT US</b> </font> </a>
</td>
</tr>
<tr>
<td style="padding-left: 50px"><font color="#CCCCCC"> <b>COPYRIGHT
2015 © BookStore All Rights RESERVED.</b> </font>
</td>
</tr>
</table>
</div>在客户端首页中用include指令包含上面三个页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/client/css/main.css" type="text/css" />
<!-- 导入首页轮播图css和js脚本 -->
<link type="text/css" href="${pageContext.request.contextPath}/client/css/autoplay.css" rel="stylesheet" />
<script type="text/javascript" src="${pageContext.request.contextPath}/client/js/autoplay.js"></script>
</head>
<body class="main">
<!-- 1.网上书城顶部 start -->
<%@include file="head.jsp"%>
<!-- 网上书城顶部 end -->
<!-- 2.网上书城菜单列表 start -->
<%@include file="menu_search.jsp" %>
<!-- 网上书城菜单列表 end -->
<!-- 3.网上书城首页轮播图 start -->
。。。。。。
<!-- 网上书城首页轮播图 end -->
<!-- 4.公告板和本周热卖 start -->
。。。。。。
<!-- 公告板和本周热卖 end -->
<!--5. 网上书城底部 start -->
<%@ include file="foot.jsp" %>
<!-- 网上书城底部 end -->
</body>
</html>二、实现注册页面
1.修改注册页面中的地址，并引入公共页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户注册</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/client/css/main.css" type="text/css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/client/js/form.js"></script>
</head>
<body class="main">
<!-- 1.网上书城顶部 start -->
<%@include file="head.jsp"%>
<!-- 网上书城顶部 end -->
<!--2. 网上书城菜单列表 start -->
<%@include file="menu_search.jsp" %>
<!-- 网上书城菜单列表 end -->
<!-- 3.网上书城用户注册 start -->
<div id="divcontent" align="center">
<form action="${pageContext.request.contextPath}/client/registersuccess.jsp" method="post" onsubmit="return checkForm();">
<table width="850px" border="0" cellspacing="0">
<tr>
<td style="padding: 30px"><h1>新会员注册</h1>
<table width="70%" border="0" cellspacing="2" class="upline">
<tr>
<td style="text-align: right; width: 20%">会员邮箱：</td>
<td style="width: 40%">
<input type="text" class="textinput" id="email" name="email" onkeyup="checkEmail();"/>
</td>
<td colspan="2"><span id="emailMsg"></span><font color="#999999">请输入有效的邮箱地址</font></td>
</tr>
<tr>
<td style="text-align: right">会员名：</td>
<td><input type="text" class="textinput" id="username" name="username" onkeyup="checkUsername();"/>
</td>
<td colspan="2"><span id="usernameMsg"></span><font color="#999999">字母数字下划线1到10位, 不能是数字开头</font></td>
</tr>
<tr>
<td style="text-align: right">密码：</td>
<td><input type="password" class="textinput" id="password" name="password" onkeyup="checkPassword();"/></td>
<td><span id="passwordMsg"></span><font color="#999999">密码请设置6-16位字符</font></td>
</tr>
<tr>
<td style="text-align: right">重复密码：</td>
<td>
<input type="password" class="textinput" id="repassword" name="repassword" onkeyup="checkConfirm();"/>
</td>
<td><span id="confirmMsg"></span> </td>
</tr>
<tr>
<td style="text-align: right">性别：</td>
<td colspan="2">
<input type="radio" name="gender" value="男" checked="checked" /> 男
<input type="radio" name="gender" value="女" /> 女
</td>
<td> </td>
</tr>
<tr>
<td style="text-align: right">联系电话：</td>
<td colspan="2">
<input type="text" class="textinput"
style="width: 350px" name="telephone" />
</td>
<td> </td>
</tr>
<tr>
<td style="text-align: right">个人介绍：</td>
<td colspan="2">
<textarea class="textarea" name="introduce"></textarea>
</td>
<td> </td>
</tr>
</table>
<table width="70%" border="0" cellspacing="0">
<tr>
<td style="padding-top: 20px; text-align: center">
<input type="image" src="images/signup.gif" name="submit" border="0"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
<!-- 网上书城用户注册 end -->
<!--4. 网上书城下方显示 start -->
<%@ include file="foot.jsp" %>
<!-- 网上书城下方显示 start -->
</body>
</html>