Java web应用案例：西蒙购物网（下）

最新推荐文章于 2023-12-24 15:28:39 发布

喜乐天的邪爪

最新推荐文章于 2023-12-24 15:28:39 发布

阅读量203

点赞数

本文链接：https://blog.csdn.net/weixin_45097269/article/details/103557000

版权

四、实现步骤

（九）准备图片资源

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

（十）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;
}

（十一）JavaScript脚本文件

在这里插入图片描述

/**
 * 检验登录表单
 *
 * @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;
}

（十二）添加JSTL的jar包

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

下载后全部导入进web的lib包下

再全部解开

（十三）展现层页面（XXX.jsp）

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

最低0.47元/天解锁文章

喜乐天的邪爪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Java web应用案例：西蒙购物网（下）

四、实现步骤（九）准备图片资源在web目录里创建images目录，存放项目所需图片文件（十）CSS样式文件在web目录里常见css子目录，在里面创建main.css文件/* 样式 */body { margin: 0px; text-align: center; background: url("../images/frontBack.jpg") no-...
复制链接

扫一扫