JSP技术下与传智书城JSP页面

最新推荐文章于 2023-06-06 09:27:44 发布

灰灰.X

最新推荐文章于 2023-06-06 09:27:44 发布

阅读量862

点赞数

文章标签： tomcat java eclipse html

本文链接：https://blog.csdn.net/jgxc152/article/details/121391815

版权

jsp技术

1、jsp动作元素
通过动作元素可以实现多行java代码能够实现的效果，例如页面文件，实现请求转发等
（1）include动作元素：将其他资源的输出内容插入到单前jsp页面的输出内容当中，使用方法如下，先输出dynamicinclude的页面内容，经过6秒之后在此页面将included的内容进行输出，便于观察：
included.jsp代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>include</title>
</head>
<body>
<%Thread.sleep(6000); %>
included.jsp内的中文<br />
</body>
</html>

dynamicinclude,jsp代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dynamicinluded page</title>
</head>
<body>
daynamicinlude.jsp内的中文<br />
<jsp:include page="included.jsp" flush="true"/>
</body>
</html>

效果如图所示：
在这里插入图片描述
2、forward动作元素
该动作元素是将当前请求转发到其他啊web资源，在定义page属性时，要使用请求转发资源的相对路径，该路径是相对当前页面的URL，其具体使用方法如下：
jspforward.jsp代码：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
<jsp:forward page="welcom.jsp" />
</body>
</html>

welcome. jsp代码：

<%@ page language="java"  contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ page import ="java.util.Date"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>welcom page</title>
</head>
<body>
你好， 欢迎进入首页，当前访问时间是：
<%
out.println(new Date().toLocaleString()); 
%>

</body>
</html>

运行效果如下：
在这里插入图片描述

3、传智书城JSP界面（即将html页面转为jsp页面）

1、实现浏览器访问首页：
（1）将client导入项目中，将所有的html文件改为jsp文件，为防止导入的包出现乱码，要将jsp文件中的编码方式改为utf-8，无法修改的使用notepad++进行修改，并且为防止访问页面出现乱码，应该在所有jsp文件中加入page指令指定编码与语言，再使用浏览器访问index.jsp文件，效果如图：
在这里插入图片描述

2、修改jsp页面中的地址和链接
（1）不能进入注册页面

（2）解决方法:在所有的js，css，和图片的链接（herf/src）中加入“${pageContext.request.contextPath}/client”来确定浏览器访问的绝对路径，
添加后的运行结果如图，就可以进行用户注册：
在这里插入图片描述
3、抽取index.jsp 页面代码
减少重复代码的出现，使代码量减少，可将项目中的重复代码抽取到一个新的jsp页面中，通过jsp的include指令来引入抽取出的jap页面，具体实现方法如下
实现主页面的抽取：
（1）抽取index.jsp中的顶部代码至新的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="${pageContext.request.contextPath}/client/#">
					<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="${pageContext.request.contextPath}/client/#">购物车</a> 
				| <a href="${pageContext.request.contextPath}/client/#">帮助中心</a> 
				| <a href="${pageContext.request.contextPath}/client/#">我的帐户</a>
				| <a href="${pageContext.request.contextPath}/client/register.jsp">新用户注册</a>							
			 
			</td>		
		</tr>
	</table>
</div>

（2）抽取index.jsp中的菜单列表代码至新的menu_search.jsp文件中

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<div id="divmenu">
		<a href="${pageContext.request.contextPath}/client/#">文学</a> 
		<a href="${pageContext.request.contextPath}/client/#">生活</a> 
		<a href="${pageContext.request.contextPath}/client/#">计算机</a> 
		<a href="${pageContext.request.contextPath}/client/#">外语</a> 
		<a href="${pageContext.request.contextPath}/client/#">经管</a>
		<a href="${pageContext.request.contextPath}/client/#">励志</a> 
		<a href="${pageContext.request.contextPath}/client/#">社科</a> 
		<a href="${pageContext.request.contextPath}/client/#">学术</a> 
		<a href="${pageContext.request.contextPath}/client/#">少儿</a>
		<a href="${pageContext.request.contextPath}/client/#">艺术</a> 
		<a href="${pageContext.request.contextPath}/client/#">原版</a> 
		<a href="${pageContext.request.contextPath}/client/#">科技</a> 
		<a href="${pageContext.request.contextPath}/client/#">考试</a> 
		<a href="${pageContext.request.contextPath}/client/#">生活百科</a> 
		<a href="${pageContext.request.contextPath}/client/#" 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="${pageContext.request.contextPath}/client/#">
					<img src="${pageContext.request.contextPath}/client/images/serchbutton.gif" border="0" style="margin-bottom:-4px" onclick="search()"/> 
				</a>
			</td>
		</tr>
	</table>
</form>
</div>

（3）抽取index.jsp中的底部代码至新的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="${pageContext.request.contextPath}/client/#">
						<font color="#747556"><b>CONTACT US</b></font> 
					</a>
				</td>
			</tr>
			<tr>
				<td style="padding-left:50px">
					<font color="#CCCCCC">
						<b>COPYRIGHT 2015 &copy; BookStore All Rights RESERVED.</b> 
					</font>
				</td>
			</tr>
		</table>
	</div>

（4）被抽取后的index.jsp文件所添加的代码如下

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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}/clientjs/autoplay.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="box_autoplay">
    	<div class="list">
        	<ul>
            	<li><img src="${pageContext.request.contextPath}/client/ad/index_ad1.jpg" width="900" height="335" /></li>
            	<li><img src="${pageContext.request.contextPath}/client/ad/index_ad2.jpg" width="900" height="335" /></li>
            	<li><img src="${pageContext.request.contextPath}/client/ad/index_ad3.jpg" width="900" height="335" /></li>
            	<li><img src="${pageContext.request.contextPath}/client/ad/index_ad4.jpg" width="900" height="335" /></li>
            	<li><img src="${pageContext.request.contextPath}/client/ad/index_ad5.jpg" width="900" height="335" /></li>
        	</ul>
    	</div>
	</div>
	<!-- 网上书城首页轮播图  end -->
	
	<!--4. 公告板和本周热卖  start -->
    <div id="divcontent">
		<table width="900px" border="0" cellspacing="0">
			<tr>
				<td width="497">
				
					<img src="${pageContext.request.contextPath}/client/images/billboard.gif" width="497" height="38" />
					<table cellspacing="0" class="ctl">
						<tr>
							<td width="485" height="29">
                            尊敬的网上书城用户， 　　<br />
　　为了让大家有更好的购物体验，3月25日起，当日达业务关小黑屋回炉升级！<br />具体开放时间请留意公告，感谢大家的支持与理解，祝大家购物愉快！<br />
        3月23日<br />
        传智播客 网上书城系统管理部<br />
                            </td>
						</tr>
					</table>
				</td>
				<td style="padding:5px 15px 10px 40px">
					<table width="100%" border="0" cellspacing="0">
						<tr>
							<td>
								<img src="${pageContext.request.contextPath}/client/images/hottitle.gif" width="126" height="29" />
							</td>
						</tr>
					</table>
					<table width="100%" border="0" cellspacing="0">
						<tr>						
							<td style="width:80; text-align:center">
								<a href="${pageContext.request.contextPath}/client/#">
								<img src="${pageContext.request.contextPath}/client/bookcover/105.jpg" width="102" height="130" border="0" />
								</a>
								<br /> 
							</td>		
							<td style="width:80; text-align:center">
								<a href="${pageContext.request.contextPath}/client/#">
								<img src="${pageContext.request.contextPath}/client/bookcover/106.jpg" width="102" height="130" border="0" />
								</a>
								<br /> 
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</div>
<!-- 公告板和本周热卖  end -->	

<!--5. 网上书城底部 start -->
<%@include file="foot.jsp" %>
	<!-- 网上书城底部  end -->
</body>
</html>

所运行的效果与源码主页面相同
在这里插入图片描述

4、修改注册页面，引用公共页面代码
同样是调用的从index.jsp中抽取的三个（head,menu_search,foot）.jsp文件，修改后的resiter.jsp注册页面代码如图：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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="registersuccess.html" 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>&nbsp;</td>
							</tr>
							<tr>
								<td style="text-align: right">性别：</td>
								<td colspan="2">&nbsp;&nbsp;
                                <input type="radio" name="gender" value="男" checked="checked" /> 男
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<input type="radio" name="gender" value="女" /> 女
								</td>
								<td>&nbsp;</td>
							</tr>
							<tr>
								<td style="text-align: right">联系电话：</td>
								<td colspan="2">
								<input type="text" class="textinput"
									style="width: 350px" name="telephone" />
								</td>
								<td>&nbsp;</td>
							</tr>
							<tr>
								<td style="text-align: right">个人介绍：</td>
								<td colspan="2">
								<textarea class="textarea" name="introduce"></textarea>
								</td>
								<td>&nbsp;</td>
							</tr>
						</table>

						<table width="70%" border="0" cellspacing="0">
							<tr>
								<td style="padding-top: 20px; text-align: center">
									<input type="image" src="${pageContext.request.contextPath}/client/images/signup.gif" name="submit" border="0"/>
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</form>
	</div>
    <!-- 网上书城用户注册  end -->
    
	<!--4. 网上书城下方显示 start -->
<%@ include file="foot.jsp" %>
       <!--4. 网上书城下方显示 start -->
</body>
</html>

其运行结果与原注册页面相同：
在这里插入图片描述

灰灰.X

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JSP技术下与传智书城JSP页面

jsp技术1、jsp动作元素通过动作元素可以实现多行java代码能够实现的效果，例如页面文件，实现请求转发等（1）include动作元素：将其他资源的输出内容插入到单前jsp页面的输出内容当中，使用方法如下，先输出dynamicinclude的页面内容，经过6秒之后在此页面将included的内容进行输出，便于观察：included.jsp代码：<%@ page language="java" contentType="text/html; charset=UTF-8" pageEn
复制链接

扫一扫