java 購物商城小專案訓練
阿新 • • 發佈:2019-02-07
- java web 模擬購物車練習(專案一)
- 首頁(index.jsp)
<div align="center" class="index">
<h1>Estore商城</h1>
<marquee class="work_text" scrollamount="4" width="800" height="100" direction="left" loop="-1">
<b>歡迎大家訪問的我的首頁!煙花散盡13141!</b>
</marquee>
<br/><br/><br/><b>
<c:if test="${user==null }">
歡迎光臨,遊客!<br/><br/>
<a href="${pageContext.request.contextPath }/register.jsp"><img alt="註冊" src=".//images/Rej_s.png">註冊</a><br/><br/>
<a href="${pageContext.request.contextPath }/login.jsp"><img alt="登入" src=".//images/Log_s.png">登入</a><br/><br/>
</c:if>
<c:if test="${user!=null }">
歡迎回來!${user.username }<br/><br/>
<a href="${pageContext.request.contextPath }/addProd.jsp"><img alt="新增商品" src=".//images/List_s.png">新增商品</a><br/><br/>
<a href="${pageContext.request.contextPath }/LogOutServlet"><img alt="登出使用者" src=".//images/out_s.jpg">登出使用者</a><br/><br/>
<a href="${pageContext.request.contextPath }/OrderListServlet"><img alt="訂單查詢" src=".//images/list_s.jpg">訂單查詢</a><br/><br/>
</c:if>
<a href="${pageContext.request.contextPath }/ProdListServlet"><img alt="商品列表" src=".//images/List_s.png">商品列表</a><br/><br/>
<a href="${pageContext.request.contextPath }/SaleListServlet"><img alt="榜單下載" src=".//images/List_s.png">榜單下載</a><br/><br/>
<a href="${pageContext.request.contextPath }/car.jsp"><img alt="檢視購物車" src=".//images/SeeBuy_s.jpg">檢視購物車</a>
</b>
</div>
- 在首頁中我們大體上為兩種身份的人提供介面欣賞,一個是管理員另外一個是普通使用者還有一個是以有課的身份去瀏覽本網頁的。在我們的註冊頁面中我們只提供註冊普通使用者的,由於時間緊張我們並沒有提供對管理員的身份的認證,下面我簡單說一下普通員工的身份的認證,
- 註冊(register.jsp)
- 在註冊頁面中我們比較首頁而言是複雜的,在註冊的頁面我們需要在提交前對使用者提交的資料進行相關的檢查,首先使用者需要提交的資料是使用者名稱+密碼+密碼2+暱稱+郵箱+驗證碼對於這六個資料大前提是我們使用者提交的資料不能為空,其次就是兩次密碼必須是一致的,還有提交的郵箱要符合郵箱的格式。這些都符合了才能通過客戶端提交到伺服器上,在伺服器上為了安全起見我們還是得在進行這些資料的檢查目的就是為了防止別人擷取到我們的資料進行修改。為了給使用者呈現一種友好的介面我有使用了無閃重新整理,這樣就會在使用者焦點離開某項時就會對使用者進行相應的提示,總的說來在這個註冊頁面中我們還是做了不少的前期工作的,。前期標準都符合的才能提交有服務起判斷是否合法。這個資料的合法性有後面我們要介紹的RegisteServlet來解決,
- 剛才也說了資料最後是提交到伺服器上的,那麼我們下面說的是伺服器是如何處理伺服器的(RegisteServlet)
- 第一步驗證使用者提交的驗證碼是否正確
if(code!=null && !code.equals("") && !code.equals(AuthCode))
{
//驗證碼錯誤
request.setAttribute("msg", "驗證碼錯誤!請核實");
request.getRequestDispatcher("/register.jsp").forward(request, response);
}
- 第二步對提交的資料進行封裝,方便資料庫進行相關操作
User user=new User();
BeanUtils.populate(user, request.getParameterMap());
- 第三步業務類呼叫資料方法操作資料的註冊
user.setPassword(MD5Utils.md5(user.getPassword()));
/**
* 第四步 呼叫service方法註冊
*/
service.regist(user);
- 第五步成功調回首頁這裡也可以直接調到登陸頁
response.getWriter().write("註冊成功!請注意留意郵箱的啟用碼進行賬號啟用!");
- 講完註冊當然就是登入了,有了註冊的頁面基礎上我們的登入做起來就得心應手了,所以登入我就不說了,那麼現在我們已經可以登入我們的購物商城的系統中去了,那麼我們在這個商城中到底能幹什麼呢,下面才是我們的重點,針對兩個身份我們有不同的功能,首先我來說普通使用者
- 下訂單
- 首先我們的使用者能夠看到商城先所有的代售商品,並可以將他們加入到屬於自己的購物車中,並進行支付或者取消支付,在我們上面的一句話轉換到我們的程式中我們就需要好幾個類來實現
- 第一個我們需要一個ProdList.jsp介面來將商城中的所有商品進行展示,在展示之前我們需要ProdListServlet來獲取商城中到底有哪些東西,獲得到商城中商品後我們需要一個購物車car.jsp相當於容器來裝下我們選擇購買的東西,這裡我們將自己購買的東西放在一個HashMap中,而這個Map我們將他放在session中,讀者如果想實現客戶端快取的話可以將這個map儲存到cookie中,最後想要支付我們還需要一個pay.jsp和計算金額的Servlet來實現支付功能。
- ProdListServlet
ProdService service=(ProdService) BasicFactory.getFactory().getInstance("ProdService");
User user=(User) request.getSession().getAttribute("user");
List<Prod> list=null;
/*
if(user!=null && "admin".equals(user.getRole()))
{
int uid=user.getId();
list=service.getAllProds(uid);
}
else
{
list=service.getAllProds();
}
加入監聽器後就不需要再這裡進行判斷了
*/
list=service.getAllProds();
request.getSession().setAttribute("list", list);
request.getRequestDispatcher("/prodlist.jsp").forward(request, response);
- ProdList.jsp
<c:forEach items="${list }" var="l">
- 只需要取到在ProdListServlet中儲存的list就可以進行遍歷了,就可以實現購物商城中的商品的瀏覽,到這裡我們的購物商城已經實現了,
- 下面就是加入購物車,加入購物車筆者建議在加入之前我們就開始判斷數資料的合法性,基本合法就是購買數量不能為0 還有就是不能大於商城中商品的數量,在合法的資料中我們就將這個商品加入到我們自己的購物車(HashMap)。計入購物車中我們得將他展現出來供使用者操作Car.jsp
- car.jsp
<c:forEach items="${carMap }" var="car" varStatus="status">
<c:set var="i" value="${i+1 }"></c:set>
<tr align="center">
<td><img src="${pageContext.request.contextPath }/GetImgServlet?id=${car.key.id }"></td>
<td>${car.key.name }</td>
<td>${car.key.category }</td>
<td>${car.key.price }元</td>
<td><b><a href="${pageContext.request.contextPath }/ChangeCarServlet?id=${car.key.id}&buynum=${car.value-1}"> - </a></b><input type="text" name="pnum" value="${car.value }" style="width: 30px;" onblur="check('${car.key.id }',this,'${car.value }','${status.count }')" /><b><a href="${pageContext.request.contextPath }/ChangeCarServlet?id=${car.key.id}&buynum=${car.value+1}"> + </a></b></td>
<td><input type="text" name="oneprice" value="${car.value * car.key.price }" width="5px;"/>元</td>
<c:set var="sum" value="${sum + car.value * car.key.price }"></c:set>
<td name="price"><a href="${pageContext.request.contextPath }/DeleteProdServlet?id=${car.key.id}">刪除商品</a></td>
</tr>
</c:forEach>
- 第一個我們需要一個ProdList.jsp介面來將商城中的所有商品進行展示,在展示之前我們需要ProdListServlet來獲取商城中到底有哪些東西,獲得到商城中商品後我們需要一個購物車car.jsp相當於容器來裝下我們選擇購買的東西,這裡我們將自己購買的東西放在一個HashMap中,而這個Map我們將他放在session中,讀者如果想實現客戶端快取的話可以將這個map儲存到cookie中,最後想要支付我們還需要一個pay.jsp和計算金額的Servlet來實現支付功能。
- 到這裡我們購物商城的框架就已經搭建好了,下面還剩下的就是管理員的一些操作和使用者購物車結算或取消的一些相關操作,這些只是我們留在下一節進行講解,在文章的最後我也會將我們的開發過程的筆記和最終的專案原始碼奉上。盡請期待!