6-6-阶段案例：传智书城JSP页面

一、实现首页

1.首页设置

WebContent在创建index.jsp,实现跳转到客户端展示的首页

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页面中的地址和链接

问题：

因为是请求转发，所以“新用户注册”会被转换为“http://localhost:8080/chapter06/register.jsp”

解决办法：

在客户端首页中的链接和图片等路径前加上${pageContext.request.contextPath}/client/

例如

4.抽取页面代码

重复代码抽取到新的jsp页面，通过include指令包含进来

抽取后

head.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

	

		

			

				
					 
				
			
			

				 购物车 
				| 帮助中心 
				| 我的帐户
				| 新用户注册							
			 
			
		
		
	

 menu_search.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

		文学 
		生活 
		计算机 
		外语 
		经管
		励志 
		社科 
		学术 
		少儿
		艺术 
		原版 
		科技 
		考试 
		生活百科 
		全部商品目录		



	

		

			

				Search 
				 
				
					 
				
			
		
	

foot.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

	

		

			

			
			

					CONTACT US  
			
		
		

			
 COPYRIGHT
						2015 © BookStore All Rights RESERVED. 
			
		
	

在客户端首页中用include指令包含上面三个页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>












	  <%@include file="head.jsp"%>



	<%@include file="menu_search.jsp" %>



	。。。。。。


   。。。。。。
		

      <%@ include file="foot.jsp" %>

二、实现注册页面

1.修改注册页面中的地址，并引入公共页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>










       <%@include file="head.jsp"%>


       <%@include file="menu_search.jsp" %>


	

		

			

				

					
新会员注册
						

							

								
会员邮箱：
								

								
								
								
请输入有效的邮箱地址
							
							

								
会员名：
								

								
								
字母数字下划线1到10位, 不能是数字开头
							
							

								
密码：
								

								
密码请设置6-16位字符
							
							

								
重复密码：
								

								
								
								
 
							
							

								
性别：
								
  
                                 男
									       
									 女
								
								
 
							
							

								
联系电话：
								

								
								
								
 
							
							

								
个人介绍：
								

								
								
								
 
							
						

						
					
				
			
		
	
    

     <%@ include file="foot.jsp" %>

2.访问

http://localhost:8080/chapter06/client/register.jsp