JSP技术（3）传智书城

【任务目标】：
通过学习JSP知识，使用JSP技术，完成传智书城首页的展示。
【实现步骤】
1.首页设置
在chapter7项目的WebContent目录创建一个名称为index.jsp的页面文件，该文件使用动作元素跳转到项目客户端展示的首页，其主要代码如下所示。

2.文件移植
将第第一章中传智书城的文件复制到WebContent目录下，并将client文件夹下的所有.html文件改名为.jsp文件，修改后client文件下如图所示。

如果此时运行项目。访问网页使会发现页面的中文都是乱码。其实，要想解决此问题很简单只需将JSP文件中都加上page指令即可，其代码如下：

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

添加page指令后，重新启动Tomact服务器，再次访问index.jsp页面，这时所有中文就正确显示了。
3，修改JSP页面中的地址和链接，但是他会出现404报错。而这时怎么回事呢，我们可以了解到当点击“新用户注册”链接后，所访问的链接/chapter7/register.jsp，而项目注册页面的真实路径是/chapter7/client/register.jsp，所以出现了404的错误，要解决此问题，只需在index.jsp页面文件中的链接和图片等路径前，加入“"${pageContext.request.contextPath}/client/#">”即可。修改后链接如下：

新用户注册	

在上面链接代码中，EL表达式${pageContext.request.contextPath}会获取项目的名称chapter7并以“/”开头，这样查找项目中的文件时，是以绝对路径查找的，项目中只要有相应文件，就不会出现找不到文件的错误。此时在文件index.jsp页面，点击“新用户注册”连接后，就可以成功进入注册页面了。为了避免项目中的JS，CSS和图片等文件也出现找不到文件的错误，所以需要将所有JSP文件中的相关链接"{pageContext.request.contextPath}/client/"
4.抽取页面代码
虽然已经成功将HTML文件改为了JSP文件，并能够成功访问，但是在index.jsp页面和register.jsp中包含了大量的重复代码（如两个页面中的头部、菜单列表以及页面底部代码）。通常一个项目中的头部和底部是固定的，如果每一个页面都有这些代码，会使项目十分臃肿，不利于项目的开发和维护。此时，可以将项目的重复代码抽取·出到一个新的JSP页面，然后通过JSP的include指令引入这些抽取出的JSP页面。具体如下
（1）在client文件下创建一个名称为head.jsp的文件，将传智书城index.jsp中顶部的代码抽取到head.jsp中。其中，head.jsp页面的代码如下所示：

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

	

		

			

				
					

 
				
			
			

				

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

（2）在client文件下创建一个名称为menu_search.jsp的文件,将传智书城index.jsp中菜单列表中的代码抽取到menu_search.jsp中，其中menu_serch.jsp页面的代码：

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

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



	

		

			

				Search 
				 
				
					

 
				
			
		
	

（3）在client文件下创建一个名称为foot.jsp的文件，将传智书城index.jsp中底部的代码抽取出到foot.jsp中.其中，foot.jsp页面的代码如下所示：

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

		

			

				

					
				
				

					
						ConTACT US 
					
				
			
			

				

					
						COPYRIGHT 2015 © BookStore All Rights RESERVED. 
					
				
			
		
	

（4）使用include指令抽取出的三个JSP页面包含在index.jsp中，其主要代码如下所示：

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












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


	

    	

        	

            	



            	



            	



            	



            	



        	
    	
	
	
	
	
    

		

			

				

				
					


					

						

							

                            尊敬的网上书城用户， 　　

　　为了让大家有更好的购物体验，3月25日起，当日达业务关小黑屋回炉升级！
具体开放时间请留意公告，感谢大家的支持与理解，祝大家购物愉快！

        3月23日

        传智播客 网上书城系统管理部

                            
						
					
				
				

					
					
				
			
		
	
	


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

在文件中，使用include指令分别将head.jsp、menu_search.jsp、foot.jsp3个页面包含了index.jsp中。此中写法，不但减少了页面中的代码量，而且提高了代码的复用性。启动Tomact服务器，在浏览器地址栏输入“http://localhost:10081/chapter7/client/index.jsp”其浏览器效果如下图所示：

跳转至新用户注册为：

2020080603052