JavaWeb項目筆記網上商城(一)環境搭建

原創 666666郎 2019-04-09 18:32

1.前端
先寫通用頭header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!-- 登錄 註冊 購物車... -->
<div class="container-fluid">
	<div class="col-md-4">
		<img src="img/logo2.png" />
	</div>
	<div class="col-md-5">
		<img src="img/header.png" />
	</div>
	<div class="col-md-3" style="padding-top:20px">
		<ol class="list-inline">
			<li><a href="login.jsp">登錄</a></li>
			<li><a href="register.jsp">註冊</a></li>
			<li><a href="cart.jsp">購物車</a></li>
			<li><a href="order_list.jsp">我的訂單</a></li>
		</ol>
	</div>
</div>

<!-- 導航條 -->
<div class="container-fluid">
	<nav class="navbar navbar-inverse">
		<div class="container-fluid">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">首頁</a>
			</div>

			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li class="active"><a href="product_list.htm">手機數碼<span class="sr-only">(current)</span></a></li>
					<li><a href="#">電腦辦公</a></li>
					<li><a href="#">電腦辦公</a></li>
					<li><a href="#">電腦辦公</a></li>
				</ul>
				<form class="navbar-form navbar-right" role="search">
					<div class="form-group">
						<input type="text" class="form-control" placeholder="Search">
					</div>
					<button type="submit" class="btn btn-default">Submit</button>
				</form>
			</div>
		</div>
	</nav>
</div>

在寫通用腳foot.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<div class="container-fluid">
	<div style="margin-top:50px;">
		<img src="img/footer.jpg" width="100%" height="78" alt="我們的優勢" title="我們的優勢" />
	</div>

	<div style="text-align: center;margin-top: 5px;">
		<ul class="list-inline">
			<li><a href="info.jsp">關於我們</a></li>
			<li><a>聯繫我們</a></li>
			<li><a>招賢納士</a></li>
			<li><a>法律聲明</a></li>
			<li><a>友情鏈接</a></li>
			<li><a>支付方式</a></li>
			<li><a>配送方式</a></li>
			<li><a>服務聲明</a></li>
			<li><a>廣告聲明</a></li>
		</ul>
	</div>
	<div style="text-align: center;margin-top: 5px;margin-bottom:20px;">
		Copyright &copy; 2005-2016 傳智商城 版權所有
	</div>
</div>

然後寫首頁index.jsp
引入通用頭腳

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>黑馬商城首頁</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
		<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
		<script src="js/bootstrap.min.js" type="text/javascript"></script>
	</head>

	<body>
		<div class="container-fluid">

			<!-- 引入header.jsp -->
			<jsp:include page="/header.jsp"></jsp:include>

			<!-- 輪播圖 -->
			<div class="container-fluid">
				<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
					<!-- 輪播圖的中的小點 -->
					<ol class="carousel-indicators">
						<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
						<li data-target="#carousel-example-generic" data-slide-to="1"></li>
						<li data-target="#carousel-example-generic" data-slide-to="2"></li>
					</ol>
					<!-- 輪播圖的輪播圖片 -->
					<div class="carousel-inner" role="listbox">
						<div class="item active">
							<img src="img/1.jpg">
							<div class="carousel-caption">
								<!-- 輪播圖上的文字 -->
							</div>
						</div>
						<div class="item">
							<img src="img/2.jpg">
							<div class="carousel-caption">
								<!-- 輪播圖上的文字 -->
							</div>
						</div>
						<div class="item">
							<img src="img/3.jpg">
							<div class="carousel-caption">
								<!-- 輪播圖上的文字 -->
							</div>
						</div>
					</div>

					<!-- 上一張 下一張按鈕 -->
					<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
						<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
						<span class="sr-only">Previous</span>
					</a>
					<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
						<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
						<span class="sr-only">Next</span>
					</a>
				</div>
			</div>
			
			<!-- 熱門商品 -->
			<div class="container-fluid">
				<div class="col-md-12">
					<h2>熱門商品&nbsp;&nbsp;<img src="img/title2.jpg"/></h2>
				</div>
				<div class="col-md-2" style="border:1px solid #E7E7E7;border-right:0;padding:0;">
					<img src="products/hao/big01.jpg" width="205" height="404" style="display: inline-block;"/>
				</div>
				<div class="col-md-10">
					<div class="col-md-6" style="text-align:center;height:200px;padding:0px;">
						<a href="product_info.htm">
							<img src="products/hao/middle01.jpg" width="516px" height="200px" style="display: inline-block;">
						</a>
					</div>
				
					<div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;">
						<a href="product_info.htm">
							<img src="products/hao/small03.jpg" width="130" height="130" style="display: inline-block;">
						</a>
						<p><a href="product_info.html" style='color:#666'>冬瓜</a></p>
						<p><font color="#E4393C" style="font-size:16px">&yen;299.00</font></p>
					</div>
	
					<div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;">
						<a href="product_info.htm">
							<img src="products/hao/small04.jpg" width="130" height="130" style="display: inline-block;">
						</a>
						<p><a href="product_info.html" style='color:#666'>冬瓜</a></p>
						<p><font color="#E4393C" style="font-size:16px">&yen;299.00</font></p>
					</div>

					<div class="col-md-2 yes-right-border" style="text-align:center;height:200px;padding:10px 0px;">
						<a href="product_info.htm">
							<img src="products/hao/small05.jpg" width="130" height="130" style="display: inline-block;">
						</a>
						<p><a href="product_info.html" style='color:#666'>冬瓜</a></p>
						<p><font color="#E4393C" style="font-size:16px">&yen;299.00</font></p>
					</div>
					
					<div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;">
						<a href="product_info.htm">
							<img src="products/hao/small03.jpg" width="130" height="130" style="display: inline-block;">
						</a>
						<p><a href="product_info.html" style='color:#666'>冬瓜</a></p>
						<p><font color="#E4393C" style="font-size:16px">&yen;299.00</font></p>
					</div>
	
					<div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;">
						<a href="product_info.htm">
							<img src="products/hao/small04.jpg" width="130" height="130" style="display: inline-block;">
						</a>
						<p><a href="product_info.html" style='color:#666'>冬瓜</a></p>
						<p><font color="#E4393C" style="font-size:16px">&yen;299.00</font></p>
					</div>

					<div class="col-md-2 yes-right-border" style="text-align:center;height:200px;padding:10px 0px;">
						<a href="product_info.htm">
							<img src="products/hao/small05.jpg" width="130" height="130" style="display: inline-block;">
						</a>
						<p><a href="product_info.html" style='color:#666'>冬瓜</a></p>
						<p><font color="#E4393C" style="font-size:16px">&yen;299.00</font></p>
					</div>
					<div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;">
						<a href="product_info.htm">
							<img src="products/hao/small03.jpg" width="130" height="130" style="display: inline-block;">
						</a>
						<p><a href="product_info.html" style='color:#666'>冬瓜</a></p>
						<p><font color="#E4393C" style="font-size:16px">&yen;299.00</font></p>
					</div>
	
					<div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;">
						<a href="product_info.htm">
							<img src="products/hao/small04.jpg" width="130" height="130" style="display: inline-block;">
						</a>
						<p><a href="product_info.html" style='color:#666'>冬瓜</a></p>
						<p><font color="#E4393C" style="font-size:16px">&yen;299.00</font></p>
					</div>

					<div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;">
						<a href="product_info.htm">
							<img src="products/hao/small05.jpg" width="130" height="130" style="display: inline-block;">
						</a>
						<p><a href="product_info.html" style='color:#666'>冬瓜</a></p>
						<p><font color="#E4393C" style="font-size:16px">&yen;299.00</font></p>
					</div>
				</div>
			</div>
			
			<!-- 廣告條 -->
            <div class="container-fluid">
				<img src="products/hao/ad.jpg" width="100%"/>
			</div>
			
			<!-- 最新商品 -->
			<div class="container-fluid">
				<div class="col-md-12">
					<h2>最新商品&nbsp;&nbsp;<img src="img/title2.jpg"/></h2>
				</div>
				<div class="col-md-2" style="border:1px solid #E7E7E7;border-right:0;padding:0;">
					<img src="products/hao/big01.jpg" width="205" height="404" style="display: inline-block;"/>
				</div>
				<div class="col-md-10">
					<div class="col-md-6" style="text-align:center;height:200px;padding:0px;">
						<a href="product_info.htm">
							<img src="products/hao/middle01.jpg" width="516px" height="200px" style="display: inline-block;">
						</a>
					</div>
				
					<div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;">
						<a href="product_info.htm">
							<img src="products/hao/small03.jpg" width="130" height="130" style="display: inline-block;">
						</a>
						<p><a href="product_info.html" style='color:#666'>冬瓜</a></p>
						<p><font color="#E4393C" style="font-size:16px">&yen;299.00</font></p>
					</div>
	
					<div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;">
						<a href="product_info.htm">
							<img src="products/hao/small04.jpg" width="130" height="130" style="display: inline-block;">
						</a>
						<p><a href="product_info.html" style='color:#666'>冬瓜</a></p>
						<p><font color="#E4393C" style="font-size:16px">&yen;299.00</font></p>
					</div>

					<div class="col-md-2 yes-right-border" style="text-align:center;height:200px;padding:10px 0px;">
						<a href="product_info.htm">
							<img src="products/hao/small05.jpg" width="130" height="130" style="display: inline-block;">
						</a>
						<p><a href="product_info.html" style='color:#666'>冬瓜</a></p>
						<p><font color="#E4393C" style="font-size:16px">&yen;299.00</font></p>
					</div>
					
					<div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;">
						<a href="product_info.htm">
							<img src="products/hao/small03.jpg" width="130" height="130" style="display: inline-block;">
						</a>
						<p><a href="product_info.html" style='color:#666'>冬瓜</a></p>
						<p><font color="#E4393C" style="font-size:16px">&yen;299.00</font></p>
					</div>
	
					<div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;">
						<a href="product_info.htm">
							<img src="products/hao/small04.jpg" width="130" height="130" style="display: inline-block;">
						</a>
						<p><a href="product_info.html" style='color:#666'>冬瓜</a></p>
						<p><font color="#E4393C" style="font-size:16px">&yen;299.00</font></p>
					</div>

					<div class="col-md-2 yes-right-border" style="text-align:center;height:200px;padding:10px 0px;">
						<a href="product_info.htm">
							<img src="products/hao/small05.jpg" width="130" height="130" style="display: inline-block;">
						</a>
						<p><a href="product_info.html" style='color:#666'>冬瓜</a></p>
						<p><font color="#E4393C" style="font-size:16px">&yen;299.00</font></p>
					</div>
					<div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;">
						<a href="product_info.htm">
							<img src="products/hao/small03.jpg" width="130" height="130" style="display: inline-block;">
						</a>
						<p><a href="product_info.html" style='color:#666'>冬瓜</a></p>
						<p><font color="#E4393C" style="font-size:16px">&yen;299.00</font></p>
					</div>
	
					<div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;">
						<a href="product_info.htm">
							<img src="products/hao/small04.jpg" width="130" height="130" style="display: inline-block;">
						</a>
						<p><a href="product_info.html" style='color:#666'>冬瓜</a></p>
						<p><font color="#E4393C" style="font-size:16px">&yen;299.00</font></p>
					</div>

					<div class="col-md-2 yes-right-border" style="text-align:center;height:200px;padding:10px 0px;">
						<a href="product_info.htm">
							<img src="products/hao/small05.jpg" width="130" height="130" style="display: inline-block;">
						</a>
						<p><a href="product_info.html" style='color:#666'>冬瓜</a></p>
						<p><font color="#E4393C" style="font-size:16px">&yen;299.00</font></p>
					</div>
				</div>
			</div>			
			
			<!-- 引入footer.jsp -->
			<jsp:include page="/footer.jsp"></jsp:include>
			
		</div>
	</body>

</html>

加入圖片，你看到
在這裏插入圖片描述
寫下所需的css後，你看到
在這裏插入圖片描述
這樣首頁就完成了，接下來是註冊頁面
註冊頁面

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head></head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>會員註冊</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!-- 引入自定義css文件 style.css -->
<link rel="stylesheet" href="css/style.css" type="text/css" />

<style>
body {
	margin-top: 20px;
	margin: 0 auto;
}

.carousel-inner .item img {
	width: 100%;
	height: 300px;
}

font {
	color: #3164af;
	font-size: 18px;
	font-weight: normal;
	padding: 0 10px;
}
</style>
</head>
<body>

	<!-- 引入header.jsp -->
	<jsp:include page="/header.jsp"></jsp:include>

	<div class="container"
		style="width: 100%; background: url('image/regist_bg.jpg');">
		<div class="row">
			<div class="col-md-2"></div>
			<div class="col-md-8"
				style="background: #fff; padding: 40px 80px; margin: 30px; border: 7px solid #ccc;">
				<font>會員註冊</font>USER REGISTER
				<form class="form-horizontal" action="${pageContext.request.contextPath }/register" method="post" style="margin-top: 5px;">
					<div class="form-group">
						<label for="username" class="col-sm-2 control-label">用戶名</label>
						<div class="col-sm-6">
							<input type="text" class="form-control" id="username" name="username"
								placeholder="請輸入用戶名">
						</div>
					</div>
					<div class="form-group">
						<label for="inputPassword3" class="col-sm-2 control-label">密碼</label>
						<div class="col-sm-6">
							<input type="password" class="form-control" id="inputPassword3" name="password"
								placeholder="請輸入密碼">
						</div>
					</div>
					<div class="form-group">
						<label for="confirmpwd" class="col-sm-2 control-label">確認密碼</label>
						<div class="col-sm-6">
							<input type="password" class="form-control" id="confirmpwd"
								placeholder="請輸入確認密碼">
						</div>
					</div>
					<div class="form-group">
						<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
						<div class="col-sm-6">
							<input type="email" class="form-control" id="inputEmail3" name="email"
								placeholder="Email">
						</div>
					</div>
					<div class="form-group">
						<label for="usercaption" class="col-sm-2 control-label">姓名</label>
						<div class="col-sm-6">
							<input type="text" class="form-control" id="usercaption" name="name"
								placeholder="請輸入姓名">
						</div>
					</div>
					<div class="form-group opt">
						<label for="inlineRadio1" class="col-sm-2 control-label">性別</label>
						<div class="col-sm-6">
							<label class="radio-inline"> <input type="radio"
								name="sex" id="sex1" value="male">
								男
							</label> <label class="radio-inline"> <input type="radio"
								name="sex" id="sex2" value="female">
								女
							</label>
						</div>
					</div>
					<div class="form-group">
						<label for="date" class="col-sm-2 control-label">出生日期</label>
						<div class="col-sm-6">
							<input type="date" class="form-control" name="birthday">
						</div>
					</div>

					<div class="form-group">
						<label for="date" class="col-sm-2 control-label">驗證碼</label>
						<div class="col-sm-3">
							<input type="text" class="form-control" name="checkCode">

						</div>
						<div class="col-sm-2">
							<img src="./image/captcha.jhtml" />
						</div>

					</div>

					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
							<input type="submit" width="100" value="註冊" name="submit"
								style="background: url('./images/register.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0); height: 35px; width: 100px; color: white;">
						</div>
					</div>
				</form>
			</div>

			<div class="col-md-2"></div>

		</div>
	</div>

	<!-- 引入footer.jsp -->
	<jsp:include page="/footer.jsp"></jsp:include>

</body>
</html>

提交表單很關鍵，必須和java代碼連接，如何連接？
${pageContext.request.contextPath}
${pageContext.request.contextPath}等價於<%=request.getContextPath()%> 或者可以說是<%=request.getContextPath()%>的EL版 意思就是取出部署的應用程序名或者是當前的項目名稱。比如我的項目名稱是ajax01 在瀏覽器中輸入爲http://localhost:8080/ajax01/login.jsp ${pageContext.request.contextPath}或<%=request.getContextPath()%>取出來的就是/ajax01,而"/"代表的含義就是http://localhost:8080
這樣就可以將表單行動配置爲Servlet了，這樣就能能Java代碼控制了提交行爲。
你問我什麼是Servlet?
在JavaEE平臺上，Servlet用於響應終端用戶的請求，JavaEE API規範定義爲：Servlet是一個運行在Web服務器上的Java小程序。接收和響應來自web客戶端的請求，使用HTTP通信。
是專門用來響應請求的。

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Idea項目系列--創建gradle工程

從0創建基本gradle工程 1.創建空gradle工程 File=> new=> Project=> 輸入GroupId、ArtifactId=> 輸入Idea工程名及路徑 本處ArtifactId和工程名都使用test_gradle

feiying0canglang 2020-07-07 16:09:32

常用包系列--Swagger--詳述

簡介 官網 https://swagger.io/tools/swagger-ui/ github swagger-springmvc: https://github.com/martypitt/swagger-springmvc

feiying0canglang 2020-07-07 15:29:22

項目常用包系列--rxjava

其他網址 在wab項目中學習rxjava - 簡書 RxJava系列1(簡介) - 知乎  

feiying0canglang 2020-07-07 15:29:22

常用包系列--Swagger--實例

其他網址 swagger 介紹及兩種使用方法_程序猿-HZQ-CSDN博客_swagger Spring Boot中使用Swagger2構建強大的RESTful API文檔 - 簡書 Swagger - 簡書 方案1：swagger-sp

feiying0canglang 2020-07-07 15:29:22

插件系列--Jenkins

其他網址 自動化部署--Jenkins--簡介安裝(一) - 簡書 Jenkins詳細教程_A1229451567的博客-CSDN博客_jenkins a使用 Jenkins的詳細安裝及使用_hc_ttxs的博客-CSDN博客_jenki

feiying0canglang 2020-07-07 15:29:19

簡單的SSH整合（基於註解和xml文件的配置）

SSH(SpringMVC,Spring,Hibernate)簡單整合的配置(基於註解和xml文件配置),附帶用戶登陸註冊的簡單實現 1.開發環境 Eclipse Maven插件 JDK1.8 MySQL5.7 2.項目目錄

wating1112 2020-07-06 19:19:15

JavaWeb企業實戰項目（五）：後臺模塊1

文章目錄1、任務總述2、權限過濾器3、查看所有分類4、添加分類信息5、查看商品信息6、上傳商品信息原理分析7、實現上傳商品信息 1、任務總述 1、權限過濾器 2、查詢所有分類 3、修改分類信息 4、查詢商品信息 5、上傳商品信息(

Hillain 2020-06-26 16:41:43

Hibernate （開放源代碼的對象關係映射框架）

每個6大接口進行一句話總結。 1、Configuration接口:負責配置並啓動Hibernate 2、SessionFactory接口:負責初始化Hibernate 3、Session接口:負責持久化對象的CRUD操作

eyyeyyeyy11 2020-06-22 20:39:12

javaweb網上書城

一.常用的工具： 1.c3p0數據庫連接池<c3o0> xml 2.common-Beanutils 3.common-dbutils TxQueryRunner類是common-dbutils下QueryRunner類的子類， T qu

eyyeyyeyy11 2020-06-22 20:39:12

項目軟知識系列--微服務爲什麼要有網關

其他網址 (十)爲什麼微服務一定要有網關？ - 簡書微服務爲什麼要使用網關服務 - Yezhiwei的博客 另見：《SpringCloud微服務實戰》=> 第7章 API網關服務：Spring Cloud Zuul 網關作用 服務網關 =

feiying0canglang 2020-06-22 04:15:51

項目軟知識系列--分層領域模型

分層領域模型簡介 其他網址 04.分層領域模型使用解讀 - 個人文章 - SegmentFault 思否 摘自：《阿里巴巴Java開發手冊》 一、分層領域模型規約 項 說明 DO（Data Object） 與數據庫表結構一一對應，通

feiying0canglang 2020-06-22 04:15:51

項目應用系列--序列化

其他網址 02.Java序列化引發的血案 - 個人文章 - SegmentFault 思否

feiying0canglang 2020-06-22 04:15:51

插件系列--Lombok

簡介 其他網址 官網地址：https://www.projectlombok.org/ gitbub網址：https://github.com/rzwitserloot/lombok         Automatic Resourc

feiying0canglang 2020-06-22 04:15:40

項目軟知識系列--訪問網址到出現頁面歷程

其他網址 輸入一個網址後發生了什麼_forever-and-ever的博客-CSDN博客_輸入網址 簡介         當你在瀏覽器輸入一個網址，如http://www.taobao.com，按回車之後發生了什麼？請從技術的角度描述，如

feiying0canglang 2020-06-22 04:15:40

項目應用系列--項目實戰

單體項目 實踐項目 |Java全棧工程師 | 以實例驅動學習 | how2j.cn 分佈式項目 xubinux/xbin-store: 模仿國內知名B2C網站,實現的一個分佈式B2C商城  

feiying0canglang 2020-06-22 04:15:40