Java?web實(shí)現(xiàn)購(gòu)物車(chē)案例

更新時(shí)間：2022年08月25日 14:09:41 作者：內(nèi)涵神仙

這篇文章主要為大家詳細(xì)介紹了Java?web實(shí)現(xiàn)購(gòu)物車(chē)案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Java web實(shí)現(xiàn)購(gòu)物車(chē)的具體實(shí)現(xiàn)代碼，供大家參考，具體內(nèi)容如下

一. 簡(jiǎn)介:

本項(xiàng)目使用jsp,js,Java,html,css,EL表達(dá)式,JSTL所實(shí)現(xiàn)
使用編輯器:idea
使用Oracle數(shù)據(jù)庫(kù)

新增:

EL表達(dá)式
JSTL標(biāo)簽庫(kù)

二. 前臺(tái)

1.包括用戶(hù)注冊(cè)，登錄

Html +js+jsp

效果展示

<body>
<div class="jq22-container" style="padding-top:100px">
? ? <div class="login-wrap">
? ? ? ? <div class="login-html">
? ? ? ? ? ? <input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">登錄</label>
? ? ? ? ? ? <input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">注冊(cè)</label>
? ? ? ? ? ? <div class="login-form">
? ? ? ? ? ? ? ? <div class="sign-in-htm">
? ? ? ? ? ? ? ? ? ? <form action="${pageContext.request.contextPath }/LoginServlet.do" method="post" onsubmit="return checkAll()">
? ? ? ? ? ? ? ? ? ? ? ? <div class="group">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <label for="user1" class="label">賬號(hào)</label>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <input name="uname" id="uname" type="text" class="input">
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <div class="group">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <label for="upwd" class="label">密碼</label>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <input name="upwd" id="upwd" type="password" class="input" data-type="password">
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <div class="group">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <input id="check" type="checkbox" class="check">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <label for="check"><span class="icon"></span>自動(dòng)登錄</label>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <div class="group">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <input type="submit" class="button" value="登錄">
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? </form>
? ? ? ? ? ? ? ? ? ? <div class="hr"></div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <div class="sign-up-htm">
? ? ? ? ? ? ? ? ? ? <form action="${pageContext.request.contextPath }/registerServlet.do" method="post">
? ? ? ? ? ? ? ? ? ? ? ? <div class="group">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <label for="user1" class="label">賬號(hào)</label>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <input id="user1" type="text" class="input">
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <div class="group">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <label for="upwd" class="label">密碼</label>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <input id="upwd1" type="password" class="input" data-type="password">
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <div class="group">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <label for="pass3" class="label">確認(rèn)密碼</label>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <input id="pass3" type="password" class="input" data-type="password">
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <div class="group">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <input type="submit" class="button" value="注冊(cè)">
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <div class="hr"></div>
? ? ? ? ? ? ? ? ? ? ? ? <div class="foot-lnk">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <label for="tab-1"></label>
? ? ? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? </form>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </div>
</div>

</body>

2.主界面(效果圖);

使用了List集合保存數(shù)據(jù)并綁定頁(yè)面

<body>
<div class="container">
? ? <h3 style="text-align: center">商城列表</h3>
? ? ? ? ? ? <form>

? ? ? ? ? ? ? ? <table border="1" class="table table-bordered table-hover">
? ? ? ? ? ? ? ? ? ? <tr class="success">
? ? ? ? ? ? ? ? ? ? ? ? <th>商品序號(hào)</th>
? ? ? ? ? ? ? ? ? ? ? ? <th>商品名稱(chēng)</th>
? ? ? ? ? ? ? ? ? ? ? ? <th>商品價(jià)格</th>
? ? ? ? ? ? ? ? ? ? ? ? <th>商品描述</th>
? ? ? ? ? ? ? ? ? ? ? ? <th>商品圖片</th>
? ? ? ? ? ? ? ? ? ? ? ? <th>操作</th>
? ? ? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? ? ? <c:forEach var="good" items="goods">
? ? ? ? ? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <td>${good.gid()}</td>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <td>${good.gname()}</td>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <td>${good.gprice()}</td>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <td>${good.ginfo()}</td>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <td><img src="../static/${good.gpath()}"></td>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <td><a class="btn btn-default btn-sm" href="${pageContext.request.contextPath }/goodsServlet.do?nid=${good.gid()}" >購(gòu)買(mǎi)</a> </td>

? ? ? ? ? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? ? ? </c:forEach>

? ? ? ? ? ? ? ? </table>

? ? ? ? ? ? </form>
</div>
</body>

3.購(gòu)物車(chē)(效果圖):

使用了session保存數(shù)據(jù)從主界面?zhèn)鲄?shù)

這是jsp代碼,里面加入了EL表達(dá)式和jstl

<body>
<div class="container">
? ? <h3 style="text-align: center">購(gòu)物車(chē)列表</h3>
? ? <table border="1" class="table table-bordered table-hover">
? ? ? ? <tr class="success">
? ? ? ? ? ? <th><input type="checkbox" id="chElt" onclick="checkOrCancelAll()"><span id="mySpan"></span></th>
? ? ? ? ? ? <th>商品序號(hào)</th>
? ? ? ? ? ? <th>商品名稱(chēng)</th>
? ? ? ? ? ? <th>商品描述</th>
? ? ? ? ? ? <th>商品圖片</th>
? ? ? ? ? ? <th>商品數(shù)量</th>
? ? ? ? ? ? <th>商品總價(jià)</th>
? ? ? ? ? ? <th>操作</th>
? ? ? ? </tr>
? ? ? ? <c:forEach var="s" items="listshopping">

? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td><input type="checkbox" class="interest"></td>
? ? ? ? ? ? ? ? <td>${s.Sid()}</td>
? ? ? ? ? ? ? ? <td>${s.Sname()}</td>
? ? ? ? ? ? ? ? <td>${s.Sinfo()}</td>
? ? ? ? ? ? ? ? <td><img src="../static/${s.Spath()}"></td>
? ? ? ? ? ? ? ? <input id="${s.Sid()}" style="width: 40px;text-align: center;" type="text" value="${s.Count()}"/>
? ? ? ? ? ? ? ? <td>總價(jià)錢(qián)</td>
? ? ? ? ? ? ? ? <td>
? ? ? ? ? ? ? ? ? ? <a class="btn btn-default btn-sm" href="${pageContext.request.contextPath }/goodsServlet.do" >購(gòu)買(mǎi)</a>&nbsp
? ? ? ? ? ? ? ? ? ? <a class="btn btn-default btn-sm" href="${pageContext.request.contextPath }/shoppingServlet.do?nid=${s.Sid()}" >刪除</a>
? ? ? ? ? ? ? ? ? ? <a class="btn btn-default btn-sm" href="/updateOrder.do?nid=${s.Sid()}" >修改</a> 
? ? ? ? ? ? ? ? </td>
? ? ? ? ? ? </tr>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td colspan="8" align="left"><a href="${pageContext.request.contextPath }/admin/xmb.jsp" >返回商品頁(yè)面</a></td>
? ? ? ? ? ? ? ? <td colspan="8" align="right"><a href="${pageContext.request.contextPath }/closeServlet.do?nid=${s.Sid()}" >我要結(jié)賬</a></td>
? ? ? ? ? ? </tr>
? ? ? ? </c:forEach>

? ? </table>
</div>

</body>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: