Java Web实训项目之西蒙购物网（页面）_web实训在线商城网站-CSDN博客

本文链接：https://blog.csdn.net/lnxcw/article/details/103557406

本文详细介绍了如何使用Java Web开发西蒙购物网的各个功能模块，包括用户注册、登录、商品类别显示、购物车管理、订单生成等，并涉及页面结构、Servlet处理和数据库交互。通过实例展示了每个功能的实现步骤和可能出现的问题及解决方案。

摘要由CSDN通过智能技术生成

项目实现要求：
1、新用户可以注册购物网站账号，并进入后台浏览或购买商品。
2、用户通过网页可以登录浏览后台的商品类别表单，并且能够实现加入购物车、生成个人订单等项目。
3、管理员用户可以通过登录后台网页增加、删除、更新商品表、商品类别表、管理员表，用户注册表
项目步骤
一：在web目录里创建子目录，存放项目所需文件：
1、创建images目录，存放项目所需图片文件：
在这里插入图片描述

2、创建css目录，在里面新建main.css文件：
在这里插入图片描述

/* 样式 */
body {
   
    margin: 0px;
    text-align: center;
    background: url("../images/frontBack.jpg") no-repeat;
    background-size: 100%
}

table {
   
    margin: 0 auto;
    font-size: 14px;
    color: #333333;
    border-width: 1px;
    border-color: khaki;
    border-collapse: collapse;
}

table th {
   
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: gainsboro;
    background-color: honeydew;
}

table td {
   
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: gainsboro;
    background-color: #ffffff;
}

/*登录页面样式*/
.login {
   
    width: 400px;
    height: 340px;
    background-color: honeydew;
    border: solid 2px darkgrey;
    left: 50%;
    top: 50%;
    position: absolute;
    margin: -170px 0 0 -200px;
}

.login .websiteTitle, .title {
   
    border: solid 1px floralwhite;
}

/*注册页面样式*/
.register {
   
    width: 400px;
    height: 350px;
    background-color: honeydew;
    border: solid 2px darkgrey;
    left: 50%;
    top: 50%;
    position: absolute;
    margin: -175px 0 0 -200px;
}

/*显示类别页面样式*/
.showCategory {
   
    width: 400px;
    height: 350px;
    background-color: honeydew;
    border: solid 2px darkgrey;
    left: 50%;
    top: 50%;
    position: absolute;
    margin: -150px 0 0 -200px;
}

/*生成订单页面样式*/
.makeOrder {
   
    width: 400px;
    height: 400px;
    background-color: honeydew;
    border: solid 2px darkgrey;
    left: 50%;
    top: 50%;
    position: absolute;
    margin: -200px 0 0 -200px;
}

/*显示订单页面样式*/
.showOrder {
   
    width: 400px;
    height: 400px;
    background-color: honeydew;
    border: solid 2px darkgrey;
    left: 50%;
    top: 50%;
    position: absolute;
    margin: -200px 0 0 -200px;
}

3、创建scripts目录，在里面新建check.js文件：
在这里插入图片描述

/**
 * 检验登录表单
 *
 * @returns {Boolean}
 */
function checkLoginForm() {
   
    var username = document.getElementById("username");
    var password = document.getElementById("password");
    if (username.value == "") {
   
        alert("用户名不能为空！");
        username.focus();
        return false;
    }
    if (password.value == "") {
   
        alert("密码不能为空！");
        password.focus();
        return false;
    }
    return true;
}

/**
 * 检验注册表单
 *
 * @returns {Boolean}
 */
function checkRegisterForm() {
   
    var username = document.getElementById("username");
    var password = document.getElementById("password");
    var telephone = document.getElementById("telephone");
    if (username.value == "") {
   
        alert("用户名不能为空！");
        username.focus();
        return false;
    }
    if (password.value == "") {
   
        alert("密码不能为空！");
        password.focus();
        return false;
    }

    var pattern = "/^(13[0-9]|14[0-9]|15[0-9]|18[0-9])\d{8}$/";
    if (!pattern.exec(telephone)) {
   
        alert("非法手机号！");
        telephone.focus();
        return false;
    }
    return true;
}

4、在WEB-INF\lib目录里添加支持jstl的jar包：
标签库jar包下载地址：http://tomcat.apache.org/taglibs/standard/
在这里插入图片描述二：页面结构
1.1、登录页面login.jsp

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

<c:set var="path" value="${pageContext.request.contextPath}"/>
<c:set var="basePath"
       value="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${path}/"/>
<!DOCTYPE html>
<html>
<head>
    <title>用户登录</title>
    <base href="${basePath}">
    <script src="scripts/check.js" type="text/javascript"></script>
    <link href="css/main.css" rel="stylesheet" type="text/css"/>
</head>
<body>

<div class="login">
    <div class="websiteTitle">
        <h1>西蒙购物网</h1>
    </div>
    <div class="title">
        <h3>用户登录</h3>
    </div>
    <div class="main">
        <form id="frmLogin" action="login" method="post">
            <table>
                <tr>
                    <td align="center">账号</td>
                    <td><input id="username" type="text" name="username"/></td>
                </tr>
                <tr>
                    <td align="center">密码</td>
                    <td><input id="password" type="password" name="password"/></td>
                </tr>
                <tr align="center">
                    <td colspan="2">
                        <input type="submit" value="登录" οnclick="return checkLoginForm();"/>
                        <input type="reset" value="重置"/>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <div class="footer">
        <p>如果你不是本站用户，单击<a href="frontend/register.jsp">此处</a>注册。</p>
    </div>
</div>

<c:if test="${registerMsg!=null}">
    <script type="text/javascript">alert("${registerMsg}")</script>
    <c:remove var="registerMsg"/>
</c:if>

<c:if test="${loginMsg!=null}">
    <script type="text/javascript">alert("${loginMsg}")</script>
    <c:remove var="loginMsg"/>
</c:if>
</body>
</html>

1.2 修改web.xml文件，将login.jsp设置为首页文件：
在这里插入图片描述
重启服务器，查看效果
（1）不输入用户名，直接点击登录：
（2）只输入用户名，不输入密码，直接点击登录：
（3）输入管理员用户名与密码：admin，12345
出现404错误，服务器端控制台查看输出信息：
在这里插入图片描述重启服务器，再以普通用户登录：郑晓红，11111：
出现404错误，服务器端控制台查看输出信息：
重启服务器，输入错误的用户名或密码：李莉，12121
单击确定，返回登录页面：
2、注册页面register.jsp

在这里插入图片描述

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

<c:set var="path" value="${pageContext.request.contextPath}"/>
<c:set var="basePath"
       value="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${path}/"/>
<!DOCTYPE html>
<html>
<head>
    <title>用户注册</title>
    <base href="${basePath}">
    <link href="css/main.css" rel="stylesheet" type="text/css"/>
    <script src="scripts/check.js" type="text/javascript"></script>
</head>
<body>

<div class="register">
    <div class="websiteTitle">
        <h1>西蒙购物网</h1>
    </div>
    <div class="title">
        <h3>用户注册</h3>
    </div>
    <div class="main">
        <form action="register" method="post">
            <table>
                <tr>
                    <td>账号</td>
                    <td><input id="username" type="text" name="username"/></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input id="password" type="password" name="password"/></td>
                </tr>
                <tr>
                    <td align="center">电话</td>
                    <td><input id="telephone" type="text" name="telephone"/></td>
                </tr>
                <tr align="center">
                    <td colspan="2">
                        <input type="submit" value="注册" onclick="return checkRegisterForm();"/>
                        <input type="reset" value="重置"/></td>
                </tr>
            </table>
        </form>
    </div>
    <div class="footer">
        <p><a href="login.jsp">切换到登录页面</a></p>
    </div>
</div>

<c:if test="${registerMsg!=null}">
    <script type="text/javascript">alert("${registerMsg}")</script>
    <c:set var="registerMsg" value=""/>
</c:if>
</body>
</html>

启动服务器，点击注册：
在这里插入图片描述（1）不输入任何内容，单击注册：
（2）输入账号，不输入密码和电话，点击注册：
（3）输入账号、密码和电话号码：
点击确定按钮，返回登录页面：
打开用户表，查看新添加的用户：
3、显示商品类别页面showCategory.jsp
在这里插入图片描述

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

<c:set var="path" value="${pageContext.request.contextPath}"/>
<c:set var="basePath"
       value="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${path}/"/>
<!DOCTYPE html>
<html>
<head>
    <title>显示商品类别</title>
    <base href="${basePath}">
    <link href="css/main.css" rel="stylesheet" type="text/css"/>
</head>
<body>

<div class="showCategory">
    <div class="websiteTitle">
        <h1>西蒙购物网</h1>
    </div>
    <div>
        登录用户：<span style="color: red;">${
   username}</span>
        <c:forEach var="i" begin="1" end="5">             
        </c:forEach>
        <a href="logout">注销</a>
    </div>
    <div class="title">
        <h3>商品类别</h3>
    </div>
    <div class="main">
        <table>
            <tr>
                <th>类别编号</th>
                <th>商品类别</th>
            </tr>
            <c:forEach var="category" items="${categories}">
                <tr align='center'>
                    <td>${
   category.id}</td>
                    <td width="150">
                        <a href="showProduct?categoryId=${category.id}">${
   category.name}</a>
                    </td>
                </tr>
            </c:forEach>
        </table>
    </div>
</div>
</body>
</html>

启动服务器，显示登录页面，输入普通用户：郑晓红，11111
在这里插入图片描述单击【登录】按钮，跳转到显示商品类别页面：
单击【家用电器】超链接：
去服务器端控制台查看输出信息：
返回到刚才显示商品类别页面：
单击【注销】超链接，返回登录页面：
4、显示购物车页面showCart.jsp
在这里插入图片描述

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

<c:set var="path" value="${pageContext.request.contextPath}"/>
<c:set var="basePath"
       value="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${path}/"/>
<!DOCTYPE html>
<html>
<head>
    <title>显示购物车</title>
    <base href="${basePath}">
</head>
<body>
<h3>${
   username}的购物车</h3>
<table>
    <tr>
        <th>商品编号</th>
        <th>商品名称</th>
        <th>销售价格</th>
        <th>购买数量</th