传智书城JSP页面

本文档详细介绍了如何将传智书城的静态HTML页面转换为JSP,包括创建和修改JSP文件以解决乱码问题,调整链接和图片路径,以及将头部、菜单、底部代码抽取到单独的文件中。最后,通过创建register.jsp注册页面,并在Tomcat服务器上测试整个应用的运行情况。
摘要由CSDN通过智能技术生成

1.首页设置

在chapter06项目的webcontent目录下创建一个名称为index.jsp的页面文件,该文件使用<jsp:forword>动作元素跳转到项目客户端展示的首页

<body>
    <jsp:forward page="client/index.jsp"></jsp:forward>
</body>

2.文件移植

将第一章传智书城案例中的client文件复制到webcontent目录下,并将client文件夹下的所有.html文件改为,jsp文件

运行后发现页面中中文都是乱码,需要将每一个JSP文件中都加上page指令即可,代码如下

<%@ page languager="java" contentType="tent/html;charset=UTF-8" pageEncoding="UTF-8“
%>

3.修改JSP页面中的地址和链接

点击页面右上角注册时会出现“404”错误,需要在index.jsp页面文件中的链接和图片等路径前,加入"${pageContext.request.conetxtPath}/client/"即可

4.抽取页面代码

1)、创建head.jsp文件

在web工程的WebContent目录下创建一个名称为client的文件

在其中创建一个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" />&nbsp;<a href="#">购物车</a> 
				| <a href="#">帮助中心</a> 
				| <a href="#">我的帐户</a>
				| <a href="${pageContext.request.contextPath}/client/register.jsp">新用户注册</a>							
			 
			</td>		
		</tr>
	</table>
</div>

2)、创建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&#
  • 1
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值