JavaWeb 使用JSP實現傳智書城前臺頁面（教材學習筆記）
阿新 • • 發佈：2018-12-03
注：因為需要用到一些圖片素材以及相關的css所以講工程放在了下載裡面，如果需要的話可以點選下載（相關素材點這裡）
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" /> <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"> <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="#"> <img src="${pageContext.request.contextPath}/client/images/serchbutton.gif" border="0" style="margin-bottom:-4px" onclick="search()"/> </a> </td> </tr> </table> </form> </div>
3、建立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="#"> <font color="#747556"><b>CONTACT US</b> </font> </a> </td> </tr> <tr> <td style="padding-left: 50px"><font color="#CCCCCC"> <b>COPYRIGHT 2015 © BookStore All Rights RESERVED.</b> </font> </td> </tr> </table> </div>
4、建立index.jsp檔案
並使用include指令將上述三個檔案插入到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}/client/js/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="#">
<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="#">
<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>5、建立register.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="${pageContext.request.contextPath}/client/registersuccess.jsp" 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> </td>
</tr>
<tr>
<td style="text-align: right">性別：</td>
<td colspan="2">
<input type="radio" name="gender" value="男" checked="checked" /> 男
<input type="radio" name="gender" value="女" /> 女
</td>
<td> </td>
</tr>
<tr>
<td style="text-align: right">聯絡電話：</td>
<td colspan="2">
<input type="text" class="textinput"
style="width: 350px" name="telephone" />
</td>
<td> </td>
</tr>
<tr>
<td style="text-align: right">個人介紹：</td>
<td colspan="2">
<textarea class="textarea" name="introduce"></textarea>
</td>
<td> </td>
</tr>
</table>
<table width="70%" border="0" cellspacing="0">
<tr>
<td style="padding-top: 20px; text-align: center">
<input type="image" src="images/signup.gif" name="submit" border="0"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
<!-- 網上書城使用者註冊 end -->
<!--4. 網上書城下方顯示 start -->
<%@ include file="foot.jsp" %>
<!-- 網上書城下方顯示 start -->
</body>
</html>6、測試
將web專案釋出到tomcat伺服器中，輸入http://localhost:8080/web-chapter06/client/index.jsp進行訪問，結果如下：
