網上購物框架

questy發表於2024-06-16
框架

javaweb專案實戰

1.功能概述
網上購物商城分為管理員和普通使用者頁面，使用者可以自行註冊登入，使用者可以加入商品到購物車中，可以檢視商品的詳情，管理員可以對商品進行增刪改查，比如釋出商品，下架商品，修改商品，搜尋商品。
本專案採用mysql資料庫進行儲存資料，所以先搭建專案所需資料庫結構，此專案有
使用者和管理員表，商品資訊表，客戶訂單資訊表等資訊表。
利用搭建好的jsp+servlet框架提供http請求及響應檢視能力，展示專案所需各個jsp頁
面。根據響應顯示註冊頁面進行註冊操作。根據註冊所填寫的帳號和密碼進行系統登入。
2.專案基本結構

filter：過濾器當使用者訪問伺服器資源時，過濾器將請求攔截下來，完成一些通用的操作。
listener：在java程式中，有時也需要監視某些事情，一旦被監聽的物件發生相應的變化，我們應該採取相應的操作。
監聽web三大域物件：HttpServletRequest、HttpSession、ServletContext，透過監聽器監聽三大域物件它們的建立和銷燬。
utils：工具類層。
dao：持久層，介面（應用層和資料層的介面），資料訪問物件，主要做的事情就是對資料庫單表進行增刪改操作。
model：儲存與資料庫表所對應的結構體，作用是方便用表的結構體，增加Mapper的易用性，把所有SQL欄位變成變數放在裡面，根據表結構自動生成。
service: 業務層（應用層），對應介面上的操作，增刪改查，涉及到幾個dao，就呼叫幾個dao。
Servlet：主要是跳轉頁面：1、接受使用者請求，進行處理（doget/dopost)呼叫service,得到資料。
2、做出響應:透過PrintWriter out = response.getWriter()輸出程式碼。
c3p0-config.xml:設定連線資料庫的資訊。
3.專案實戰
本案例實現使用者登入介面
使用者登入介面包括使用者的使用者名稱或郵箱，密碼。
本案例的主要程式碼如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html>
<html>
<head>
	<title>使用者登入</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link type="text/css" rel="stylesheet" href="css/bootstrap.css">
	<link type="text/css" rel="stylesheet" href="css/style.css">
	<link type="text/css" href="css/login.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/simpleCart.min.js"></script>
	<style>

	</style>
</head>
<body>
	<!--header-->
	<jsp:include page="header.jsp">
		<jsp:param name="flag" value="9"></jsp:param>
	</jsp:include>
	<!--account-->
	<div class="account">
		<div class="container">
			<div class="register">
				<c:if test="${!empty msg }">
					<div class="alert alert-success">${msg }</div>
				</c:if>
				<c:if test="${!empty failMsg }">
					<div class="alert alert-danger">${failMsg }</div>
				</c:if>
				<form action="/user_login" method="post" style="position:relative;right: 90px;
																width: 900px;
																height: 560px;
																display: flex;
																border-radius: 20px;
																overflow: hidden;
																box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);">
					<div class="left" style="width: 500px;height: 560px;">
						<img src="picture/3.jpg" alt="" style="width:100%;height:100%;object-fit: cover;">
					</div>
					<div class="right" style="width: 400px;
												height: 760px;
												background: rgba(255,255,255,0.9);
												position: relative; top: 22%">
					<div class="register-top-grid text-center">
						<h3>使用者登入</h3>
						<div class="input">
							<span>使用者名稱/郵箱 <label style="color:red;">*</label></span>
							<input type="text" name="ue" placeholder="請輸入使用者名稱" required="required" style="width: 280px;height: 40px;border-radius: 20px;">
						</div>
						<div class="input">
							<span>密碼 <label style="color:#ff0000;">*</label></span>
							<input type="password" name="password" placeholder="請輸入密碼" required="required"style="width: 280px;height: 40px;border-radius: 20px;" >
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="register-but text-center">
						<input type="submit" value="提交" style=" width: 180px;
																			height: 40px;
																			border-radius: 20px;
																			border: none;
																			color: #fff;
																			font-size: 16px;
																			cursor: pointer;
																			margin-top: 50px;
																			background-image: linear-gradient(120deg, #76daec 0%, #c5a8de 100%);">
						<div class="clearfix"> </div>
					</div>
					</div>
				</form>
				<div class="clearfix"> </div>
			</div>
	    </div>
	</div>
	<!--footer-->
	<jsp:include page="footer.jsp"></jsp:include>
	<!--//footer-->
</body>
</html>

執行結構圖如下：

相關文章