【Java - 项目开发】网上书城项目

深山老Java

已于 2022-09-20 16:05:10 修改

阅读量1.7k

点赞数 1

分类专栏： Java - 项目开发文章标签：经验分享 html5 javascript jquery css

于 2022-07-20 17:55:20 首次发布

本文链接：https://blog.csdn.net/woailuo8214/article/details/125895881

版权

网上书城项目

创作日期：2021-12-23

第一阶段登录注册的验证（表单验证）

技术方法：

使用 jQuery 技术对登录中的用户名、密码进行非空验证

使用 jQuery 技术和正则表达式对注册中的用户名、密码、确认密码、邮箱进行格式验证，对验证码进行非空验证

实现要求：

验证用户名：必须由字母，数字下划线组成，并且长度为 5 到 12 位

验证密码：必须由字母，数字下划线组成，并且长度为 5 到 12 位

验证确认密码：和密码相同

邮箱验证：xxxxx.@xxx.com

验证码：需要验证用户已输入

新建项目工程和模块：

新建 JavaWeb 项目工程，命名为：JavaWeb

新建工程模块，命名为：book_static

导入项目静态资源：将 pages，static，index.html 等静态资源文件拷贝到 Web 目录下

导入图片资源：将 logo.jpeg 图片资源导入到文件 web/static/img 中

页面搭建：

网上书城首页：index.jsp（在 web 目录下创建，用于转发到前端首页）

网上书城前端首页：index.jsp （在 web/pages/client 目录下创建）

书城会员登录页面：login.jsp（在 web/pages/user 目录下创建）

书城会员登录成功页面：login_success.jsp（在 web/pages/user 目录下创建）

书城会员注册页面：regist.jsp（在 web/pages/user 目录下创建）

书城会员注册成功页面：regist_success.jsp（在 web/pages/user 目录下创建）

书城会员图书管理页面：book_manage.jsp（在 web/pages/manage 目录下创建）

书城会员订单管理页面：order_manage.jsp （在 web/pages/manage 目录下创建）

书城会员后台管理页面：manage.jsp（在 web/pages/manage 目录下创建）

书城会员图书编辑页面：book_edit.jsp（在 web/pages/manage 目录下创建）

jsp 通用脚本带入页面：footer.jsp，head.jsp，login_success_menu.jsp，manage_menu.jsp，page_ngv.jsp

页面样式：style.css（在 web/static/css 目录下创建）

index.jsp（用于转发到前端首页）

<!-- index.jsp -->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%-- 只负责请求转发 --%>
<jsp:forward page="/client/bookServlet?action=page"></jsp:forward>

index.jsp

<!-- index.jsp -->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>书城首页</title>
    <%@ include file="/pages/common/head.jsp" %>
</head>
<body>

<div id="header">
    <img alt="" class="logo_img" src="static/img/logo.jpeg">
    <span class="wel_word">网上书城</span>
    <div>
        <a href="pages/user/login.jsp">登录</a> |
        <a href="pages/user/regist.jsp">注册</a> &nbsp;&nbsp;
        <a href="pages/cart/cart.jsp">购物车</a>
        <a href="pages/manage/manage.jsp">后台管理</a>
    </div>
</div>
<div id="main">
    <div id="book">
        <div class="book_cond">
            <form action="" method="get">
                价格：<input id="min" name="min" type="text" value=""> 元 -
                <input id="max" name="max" type="text" value=""> 元
                <input type="submit" value="查询"/>
            </form>
        </div>
        <div style="text-align: center">
            <span>您的购物车中有3件商品</span>
            <div>
                您刚刚将<span style="color: red">时间简史</span>加入到了购物车中
            </div>
        </div>
        <div class="b_list">
            <div class="img_div">
                <img alt="" class="book_img" src="static/img/default.jpg"/>
            </div>
            <div class="book_info">
                <div class="book_name">
                    <span class="sp1">书名:</span>
                    <span class="sp2">时间简史</span>
                </div>
                <div class="book_author">
                    <span class="sp1">作者:</span>
                    <span class="sp2">霍金</span>
                </div>
                <div class="book_price">
                    <span class="sp1">价格:</span>
                    <span class="sp2">￥30.00</span>
                </div>
                <div class="book_sales">
                    <span class="sp1">销量:</span>
                    <span class="sp2">230</span>
                </div>
                <div class="book_amount">
                    <span class="sp1">库存:</span>
                    <span class="sp2">1000</span>
                </div>
                <div class="book_add">
                    <button>加入购物车</button>
                </div>
            </div>
        </div>

        <div class="b_list">
            <div class="img_div">
                <img alt="" class="book_img" src="static/img/default.jpg"/>
            </div>
            <div class="book_info">
                <div class="book_name">
                    <span class="sp1">书名:</span>
                    <span class="sp2">时间简史</span>
                </div>
                <div class="book_author">
                    <span class="sp1">作者:</span>
                    <span class="sp2">霍金</span>
                </div>
                <div class="book_price">
                    <span class="sp1">价格:</span>
                    <span class="sp2">￥30.00</span>
                </div>
                <div class="book_sales">
                    <span class="sp1">销量:</span>
                    <span class="sp2">230</span>
                </div>
                <div class="book_amount">
                    <span class="sp1">库存:</span>
                    <span class="sp2">1000</span>
                </div>
                <div class="book_add">
                    <button>加入购物车</button>
                </div>
            </div>
        </div>

        <div class="b_list">
            <div class="img_div">
                <img alt="" class="book_img" src="static/img/default.jpg"/>
            </div>
            <div class="book_info">
                <div class="book_name">
                    <span class="sp1">书名:</span>
                    <span class="sp2">时间简史</span>
                </div>
                <div class="book_author">
                    <span class="sp1">作者:</span>
                    <span class="sp2">霍金</span>
                </div>
                <div class="book_price">
                    <span class="sp1">价格:</span>
                    <span class="sp2">￥30.00</span>
                </div>
                <div class="book_sales">
                    <span class="sp1">销量:</span>
                    <span class="sp2">230</span>
                </div>
                <div class="book_amount">
                    <span class="sp1">库存:</span>
                    <span class="sp2">1000</span>
                </div>
                <div class="book_add">
                    <button>加入购物车</button>
                </div>
            </div>
        </div>

        <div class="b_list">
            <div class="img_div">
                <img alt="" class="book_img" src="static/img/default.jpg"/>
            </div>
            <div class="book_info">
                <div class="book_name">
                    <span class="sp1">书名:</span>
                    <span class="sp2">时间简史</span>
                </div>
                <div class="book_author">
                    <span class="sp1">作者:</span>
                    <span class="sp2">霍金</span>
                </div>
                <div class="book_price">
                    <span class="sp1">价格:</span>
                    <span class="sp2">￥30.00</span>
                </div>
                <div class="book_sales">
                    <span class="sp1">销量:</span>
                    <span class="sp2">230</span>
                </div>
                <div class="book_amount">
                    <span class="sp1">库存:</span>
                    <span class="sp2">1000</span>
                </div>
                <div class="book_add">
                    <button>加入购物车</button>
                </div>
            </div>
        </div>
    </div>

    <div id="page_nav">
        <a href="#">首页</a>
        <a href="#">上一页</a>
        <a href="#">3</a>
        【4】
        <a href="#">5</a>
        <a href="#">下一页</a>
        <a href="#">末页</a>
        共10页，30条记录 到第<input id="pn_input" name="pn" value="4"/>页
        <input type="button" value="确定">
    </div>

</div>
<%@ include file="pages/common/login_success_menu.jsp" %>
</body>
</html>

login.jsp

<!-- login.jsp -->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网上书店会员登录页面</title>
    <%@ include file="/pages/common/head.jsp" %>
</head>
<body>
<div id="login_header">
    <img alt="" class="logo_img" src="static/img/logo.jpeg">
</div>

<div class="login_banner">

    <div id="l_content">
        <span class="login_word">欢迎登录</span>
    </div>

    <div id="content">
        <div class="login_form">
            <div class="login_box">
                <div class="tit">
                    <h1>网上书店会员</h1>
                    <a href="pages/user/regist.jsp">立即注册</a>
                </div>
                <div class="msg_cont">
                    <b></b>
                    <span class="errorMsg">
                        ${empty requestScope.msg ?"请输入用户名和密码":requestScope.msg}
                    </span>
                </div>
                <div class="form">
                    <form action="userServlet" method="post">
                        <input type="hidden" name="action" value="login"/>
                        <label>用户名称：</label>
                        <input autocomplete="off" class="itxt" name="username" placeholder="请输入用户名" tabindex="1"
                               type="text"
                               value="${empty requestScope.username ?"":requestScope.username}"/>
                        <br/>
                        <br/>
                        <label>用户密码：</label>
                        <input autocomplete="off" class="itxt" name="password" placeholder="请输入密码" tabindex="1"
                               type="password"/>
                        <br/>
                        <input id="sub_btn" type="submit" value="登录"/>
                        <br/>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<%@ include file="/pages/common/footer.jsp" %>
</body>
</html>

login_success.jsp

<!-- login_success.jsp -->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网上会员页面</title>
    <%@ include file="/pages/common/head.jsp" %>
    <style type="text/css">
        h1 {
            text-align: center;
            margin-top: 200px;
        }

        h1 a {
            color: red;
        }
    </style>
</head>
<body>
<div id="header">
    <img alt="" class="logo_img" src="static/img/logo.jpeg">
    <%@ include file="/pages/common/login_success_menu.jsp" %>
</div>

<div id="main">

    <h1>欢迎回来 <a href="index.html">转到