Java web實現購物車案例

2022-08-25 18:03:28

本文範例為大家分享了Java web實現購物車的具體實現程式碼，供大家參考，具體內容如下

一. 簡介:

本專案使用jsp,js,Java,html,css,EL表示式,JSTL所實現
使用編輯器:idea
使用Oracle資料庫

新增:

EL表示式
JSTL標籤庫

二. 前臺

1.包括使用者註冊，登入

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">註冊</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">賬號</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>自動登入</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">賬號</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">確認密碼</label>
                            <input id="pass3" type="password" class="input" data-type="password">
                        </div>
                        <div class="group">
                            <input type="submit" class="button" value="註冊">
                        </div>
                        <div class="hr"></div>
                        <div class="foot-lnk">
                            <label for="tab-1"></label>
                        </div>

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

</body>

2.主介面(效果圖);

使用了List集合儲存資料並繫結頁面

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

                <table border="1" class="table table-bordered table-hover">
                    <tr class="success">
                        <th>商品序號</th>
                        <th>商品名稱</th>
                        <th>商品價格</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()}" >購買</a> </td>

                        </tr>
                    </c:forEach>

                </table>

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

3.購物車(效果圖):

使用了session儲存資料從主介面傳引數

這是jsp程式碼,裡面加入了EL表示式和jstl

<body>
<div class="container">
    <h3 style="text-align: center">購物車列表</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>商品序號</th>
            <th>商品名稱</th>
            <th>商品描述</th>
            <th>商品圖片</th>
            <th>商品數量</th>
            <th>商品總價</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>總價錢</td>
                <td>
                    <a class="btn btn-default btn-sm" href="${pageContext.request.contextPath }/goodsServlet.do" >購買</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" >返回商品頁面</a></td>
                <td colspan="8" align="right"><a href="${pageContext.request.contextPath }/closeServlet.do?nid=${s.Sid()}" >我要結賬</a></td>
            </tr>
        </c:forEach>

    </table>
</div>

</body>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

Java web實現購物車案例

一. 簡介:

二. 前臺

熱門文章