您现在的位置是:首页 > 正文

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

2024-01-31 00:15:33阅读 0

一、准备资源

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目录里添加支持jstljar包:
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>

启动服务器
在这里插入图片描述
不输入用户名与密码,单击【登录】按钮:
在这里插入图片描述
输入用户名,但不输入密码,单击【登录】按钮:
在这里插入图片描述
在这里插入图片描述
输入管理员用户名与密码:admin12345
在这里插入图片描述
在这里插入图片描述
查看控制台
在这里插入图片描述
重启服务器,再以普通用户登录:郑晓红11111
在这里插入图片描述
在这里插入图片描述
查看控制台
在这里插入图片描述
重启服务器,输入错误的用户名或密码:11111111
在这里插入图片描述
在这里插入图片描述
点击确定,返回登录页
在这里插入图片描述
查看控制台
在这里插入图片描述

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

网站文章

  • Mysql  ----------  安装

    Mysql ---------- 安装

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。优点:关联数据库将数据保存在不同的表中,而不是将所有数据放在一个大仓库内,这样就增加了速度并提高了灵活性。可以在官网下载地址: https://dev.mysql.com/downloads/安装:同意选择完整安装...

    2024-01-31 00:15:04
  • Django ORM:数据库操作的Python化艺术

    Django的对象关系映射器(ORM)是其核心功能之一,允许开发者使用Python代码来定义、操作和查询数据库。

    2024-01-31 00:14:57
  • kubernetes env资源引用

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 @关于kubernetes env资源注入 前言 关于kubernetes env引用变量方式有configMap,DownwardA...

    2024-01-31 00:14:51
  • 蓝桥杯开发板CT107D使用 IAP15F2K61S2芯片时晶振频率的选择

    蓝桥杯开发板CT107D使用 IAP15F2K61S2芯片时晶振频率的选择

    蓝桥杯开发板CT107D上使用的晶振为12MHZ,在进行烧录和软件延时需要对晶振频率进行选择。而烧录软件一般默认为11.0592MHZ. 只需要将两个频率保持一致即可(一般在12和11.0592中选择一个),直接上图 选择 12MHZ 11.0592MHZ ...

    2024-01-31 00:14:45
  • Workerman ThinkPHP5 宝塔 安装Event拓展

    Workerman ThinkPHP5 宝塔 安装Event拓展

    Workerman 结合 TP5在宝塔环境下安装Event拓展操作系统是CentOS7先用workerman官方给的检查环境的脚本进行检查curl -Ss http://www.workerman.n...

    2024-01-31 00:14:18
  • selenium自动化-下拉列表

    selenium自动化-下拉列表

    selenium操作下拉列表select/option标签举个例子ul/li标签验证js是否能选中未显示的值结论python代码实现 selenium自动化获取对象时,肯定会涉及到下拉列表,项目中遇到...

    2024-01-31 00:14:10
  • Vue基础升级

    Vue基础升级

    生命周期函数面试题 1.什么是 vue 生命周期;2.vue生命周期的作用是什么 Vue每个组件都是独立的,每个组件都有一个属于它的生命周期,从一个组件创建、数据初始化、挂载、更新、销毁,这就是一个组...

    2024-01-31 00:14:03
  • Excel之单元格数字格式

    Excel之单元格数字格式

    文本与常规格式的正常转换 单元格格式一般分两种文本与常规 分列工具大部分是用于修改单元格的格式 文本数据不能正常的运算,像身份证号电话等等这些一般都是文本 常规的数据可以正常运算 文本如何转换成常规格...

    2024-01-31 00:13:33
  • Python进阶

    Python进阶

    Python

    2024-01-31 00:13:24
  • 如何在6个月内成为某一领域的专家

    1.文章大约5156字,大概需要十分钟阅读完2.为了不把这篇文章写的特别像方法论,举了很多例子,也不想把这篇帖子写成xx指导手册,像第一篇文章教你安装linux一样,因为这一类的文章很多,我也很难写的...

    2024-01-31 00:13:17