JSP技术（3）传智书城

最新推荐文章于 2022-06-27 15:43:05 发布
最新推荐文章于 2022-06-27 15:43:05 发布
阅读量2.3k 收藏 16
点赞数 1
文章标签： eclipse 服务器 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55680181/article/details/121446913
版权

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

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

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/#">”即可。修改后链接如下：

<a href="${pageContext.request.contextPath}/client/register.jsp">新用户注册</a>

在上面链接代码中，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"%>
<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）在client文件下创建一个名称为menu_search.jsp的文件,将传智书城index.jsp中菜单列表中的代码抽取到menu_search.jsp中，其中menu_serch.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）在client文件下创建一个名称为foot.jsp的文件，将传智书城index.jsp中底部的代码抽取出到foot.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）使用include指令抽取出的三个JSP页面包含在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>

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

张荣博2003
关注
  • 1
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
传智书城完整项目.rar
09-08
传智书城完整项目,功能完善,jsp界面齐全，数据库连接，超级用户，注册功能均正常，可通过邮箱注册用户，操作时需联网注册
传智书城项目的设计与实现论文源码 JAVA高级应用课程设计
最新发布
weixin_51912083的博客
11-23 2346
系统管理模块的主要功能：系统管理员和用户的注册、登录、退出以及用户信息修改，商品浏览模块模块的主要功能：首页轮播图、图书公告栏、热卖推荐、模糊搜索商品。购物车管理模块的主要功能包括：向购物车中添加图书、修改购物车中图书数量、删除购物车中图书、我的购物车；商品信息管理模块的主要功能包括：添加商品、修改商品、删除商品、查询商品。公告栏管理模块的主要功能包括：添加公告、删除公告、查询公告、删除公告。
Javaweb书城实现jsp页面
m0_55680156的博客
11-17 1490
javaweb 传智书城 1、创建head.jsp文件 在web工程的WebContent目录下创建一个名称为client的文件 在其中创建一个head.jsp文件，用来盛放网页的头部，相关代码如下： <%@ page language=“java” contentType=“text/html; charset=UTF-8” pageEncoding=“UTF-8”%>  购物车 | 帮助中心
第13章 传智书城项目设计
qq_55682497的博客
01-04 2039
一、项目概述 近年来，随着Internet的迅速崛起，互联网已成为收集信息的最佳渠道并逐步进入传统的流通领域。于是电子商务开始流行起来，越来越多的商家在网上建起在线商店，向消费者展示出一种新颖的购物理念。网上购物系统作为B2B、B2C（Business to Customer，即企业对消费者），C2C（Customer to Customer，即消费者对消费者)电子商务的前端商务平台，在其商务活动全过程中起着举足轻重的作用。在传智书城项目中主要讲解的是如何建设B2C的网上购物系统。 传智书城项目分为前台和后
第06讲 连接到MySQL数据库02之jdbc
sinat_26814541的博客
10-16 1221
本案例用于建立一个较为完整的案例，实现书本的增加删除修改查询 1 创建数据库 案例使用Mysql，数据库脚本代码如下： CREATE DATABASE IF NOT EXISTS `itcaststore` /*!40100 DEFAULT CHARACTER SET utf8 */; USE `itcaststore`; -- MySQL dump 10.13 Distrib 5.6.13,...
传智书城前端JSP代码
11-30
使用JSP实现了传智书城的前台页面。包含js，css，jsp以及相关的图片素材（注意！此资源不含数据库，仅仅是一个前台页面，仅仅适合新手操作）
传智网上书城项目(非SSH,纯Jsp+Servlet完成)
08-11
传智网上书城项目(非SSH,纯Jsp+Servlet完成)
JSP技术(2)和阶段案例：传智书城
m0_55689562的博客
11-19 1416
学习目标 1.JSP 动作元素 2.阶段案例：传智书城JSP页面 学习内容 1.JSP 动作元素 SP动作元案用来控制JSP的行为，执行一些常用的JSP页面动作。通过动作元素可以吸 91现使用多行Java代码能够实现的效果，如包含页面文件、实现请求转发等。 1.1 jsp:include 动作元素：动态包含 动态包含：把其它资源页面的内容，合并到当前要包含的页面，最后一块输出。 基本语法格式： <jsp:include page="被包含页面的url" flush="true或者false">&
传智书城（功能完整）
12-29
实现了传智书城的前台和后端页面。包含js，css，jsp以及相关的图片素材。用户修改信息和新用户注册功能也已完善，适合新手使用。
传智书城项目jsp servlet c3p0 完整版.rar
06-24
压缩包内包含《Java Web程序设计任务教程》教材第13-15章的教材资源，即传智书城项目，包括数据库文件。 说明文件： 【代码相关】 语言：java 【运行环境】 jdk1.8+tomcat8+mysql8 【运行说明】 1、将系统源码导入到eclipse 2、修改c3p0-config.xml文件的数据库连接地址、账号和密码 3、db_itcaststore.sql脚本导入到你的mysql数据库 4、启动项目 5、访问连接：http://127.0.0.1:8080/itcaststore/index.jsp http://127.0.0.1:8080/itcaststore/login/ 6、登录账号：admin 密码：123456 账号：madan 密码：123456 网上书城开发记录、注册功能邮箱调试、(基本语法)EL表达式与JSTL
传智博客网上书城
09-19
在传智博客网上书城的基础上进行了一些改造
javaWeb传智播客网上书城项目源码设计以及实现论文
03-20
javaWeb传智播客网上书城项目源码设计以及实现论文+方立勋《30天轻松掌握JavaWeb视频》笔记
传智书城项目设计源代码
08-25
书城项目设计全过程及源代码，涉及java web网站开发方面的
传智书城项目源代码+数据库（包含用户登录、注册、浏览及购买支付）
12-09
传智书城项目源代码（全，包含数据库），有完整的流程，包含用户登录、注册、浏览及购买支付。不太适合新手，但可以加强对servlet的理解。
JSP Servlet MySQL IDEA实现传智书城商城.zip
03-28
JSP Servlet MySQL IDEA实现传智书城商城.zip
传智书城项目修改（修改图片、文本），使用eclipse修改， 以及解决出现的乱码问题
qq_52674444的博客
06-27 1491
本教程用于修改传智书城项目，使用前请确保项目已经成功导入到eclipse中并能在浏览器上显示，使用到的工具有eclipse和Navicat，解决乱码导致的图片无法显示问题
jsp传智书城前台代码完善（图书查找+我的账户+用户退出）
qq_52108058的博客
06-14 2964
搜索框输入java，点击搜索到购物车页面 menu_search.jsp info.jsp 2.1 selectBooksServlet 二、用户退出 1.案例演示 点击用户退出，返回到主页面 head.jsp login.jsp 2.2 UsersServlet 新版可以用value当做路径，旧版需要配置xml，这里UserServlet用映射路径client/logins 三、我的账户 1.案例演示 myAccount.jsp modifyuserinfo.jsp orderlist.j
jsp的学习，传智书城
qq_45725487的博客
05-12 251
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 sr
jsp传智书城源代码
11-09
JSP传智书城源代码是一种用于构建传智书城网站的开发工具。它是基于JavaServer Pages（JSP）技术的一种网站开发框架，用于实现网站前端页面的动态生成和交互功能。 通过jsp传智书城源代码，我们可以实现以下功能： 1. 网站首页：展示传智书城的品牌信息、促销活动等内容，并提供导航链接到不同的书籍分类页面。 2. 书籍分类页面：根据不同的书籍类别，展示相应的图书目录，并提供图书详情页的链接。 3. 图书详情页面：展示一本书的详细信息，如书名、作者、出版社、价格等，并提供添加到购物车的按钮。 4. 购物车页面：展示用户已选择的图书列表，包括图书的名称、价格和数量，并提供修改数量、删除图书、结算等功能。 5. 用户登录：提供用户注册、登录、注销等功能，使用户可以登录并管理自己的购物车和订单信息。 6. 订单管理：用户可以查看已生成的订单列表、订单详情，并提供订单支付、取消等操作。 通过jsp传智书城源代码，我们可以理解和学习关于网站开发的基本知识和技术，并且可以根据需要对代码进行定制和修改，以满足个性化的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值