JAVA WEB:西蒙购物网实现页面资源及代码

最新推荐文章于 2023-05-29 15:07:21 发布

Dirty.

最新推荐文章于 2023-05-29 15:07:21 发布

阅读量415

点赞数 1

分类专栏：学习小结作业

本文链接：https://blog.csdn.net/qq_5664654/article/details/103591126

版权

本文档详细介绍了JAVA WEB项目——西蒙购物网的页面实现过程，包括登陆、注册、商品类别展示、购物车、订单生成等页面的创建和功能测试。同时，涉及到资源如图片、CSS、JS文件的准备，以及JSTL架包的添加。文章还展示了不同操作下的页面效果和控制台输出，便于读者理解每个功能的工作原理。

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

一、准备资源

1、图片

在web目录里创建images目录，存放项目所需图片文件：
在这里插入图片描述

2、css样式文件

在web里创建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、JS脚本

在web目录下创建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、添加JSTL架包

在WEB-INF\lib目录里添加支持jstl的jar包：
jar包下载地址：http://tomcat.apache.org/taglibs/standard/
在这里插入图片描述

5、实现页面

5.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>

在web.xml文件里将login.jsp设置为首页文件：
在这里插入图片描述

<welcome-file-list>
        <welcome-file>login.jsp</welcome-file>
    </welcome-file-list>

启动服务器
在这里插入图片描述
不输入用户名与密码，单击【登录】按钮：

输入用户名，但不输入密码，单击【登录】按钮：

输入管理员用户名与密码：admin，12345

查看控制台

重启服务器，再以普通用户登录：郑晓红，11111
在这里插入图片描述

查看控制台

重启服务器，输入错误的用户名或密码：111，11111

点击确定，返回登录页

查看控制台

5.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" %>

<