网上蛋糕商城JSP页面

任务目标:

使用JSP页面实现网上蛋糕商城注册页面,实现效果如图所示

实现步骤:

1.创建顶部文件

创建用于显示页面导航栏的顶部文件header.jsp,代码实现如下

<%--<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<%--  引入初始化Servlet--%>
<jsp:include page="/init"></jsp:include>
<div class="header">
    <div class="container">
        <nav class="navbar navbar-default" role="navigation">
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">首页</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">商品分类<b class="caret"></b></a>
                       <ul class="dropdown-menu columns-2">
                           <c:forEach var="type" items="${ sessionScope.alltypes }">
                               <li class="list-group-item">${type.name}</li>
                           </c:forEach>
                        </ul>
                    </li>
                    <li><a href="#">热销</a></li>
                    <li><a href="#">新品</a></li>
                    <li><a href="#">登录</a></li>
                    <li><a href="#" class="active">注册</a></li>
                </ul>
            </div>
        </nav>
        <div class="header-info">
            <div class="header-right search-box">
                <a href="javascript:;"><span class="glyphicon glyphicon-search"></span></a>
                <div class="search">
                    <form class="navbar-form" action="#">
                        <input type="text" class="form-control" name="keyword">
                        <button type="submit" class="btn btn-default">搜索</button>
                    </form>
                </div>
            </div>
            <div class="header-right search-box">
                <span class="glyphicon glyphicon-shopping-cart"></span>
            </div>
        </div>
    </div>
</div>
</body>
</html>

 2.创建底部文件

创建用于显示提示信息的底部文件footer.jsp,代码实现如下

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>

<!--footer-->
<div class="footer">
    <div class="container">
        <div class="text-center">
            <p>www.XXXX.com  </p>
        </div>
    </div>
</div>
<!--//footer-->
</body>
</html>

3.创建用户注册文件

创建用于用户注册的文件user_register.jsp,页面中编写用户注册的表单,并在表单的顶端和底端分别引入页面的顶部文件和底部文件,其中页面所需的样式在资源已经提供,代码实现如下

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户注册页面</title>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.css">
    <link type="text/css" rel="stylesheet" href="css/style.css">
    <!--    <link type="text/css" rel="stylesheet" href="css/flexslider.css">-->
    <script src="js/jquery-3.6.0.js"></script>
    <script src="js/bootstrap.js"></script>
</head>
<body>
<%--导航栏页面--%>
<%@include file="header.jsp" %>
<%--注册部分--%>
<div class="account">
    <div class="container">
        <div class="register">
            <form action="/ch06/user_register" method="post">
                <div class="register-top-grid">
                    <h3>注册新用户</h3>
                    <div class="input">
                        <label for="username" >用户名:<label style="color: red">*   ${ sessionScope.msg } </label></label>
                        <input type="text" name="username" id="username" placeholder="请输入用户名" required="required">
                    </div>
                    <div class="input">
                        <label for="psd" >密码:<label style="color: red">*</label></label>
                        <input type="password" name="password" id="psd" placeholder="请输入用户名" required="required">
                    </div>
                    <div class="input">
                        <label for="add" >地址:<label style="color: red">*</label></label>
                        <input type="text" name="address" id="add" placeholder="请输入地址" required="required">
                    </div>
                    <div class="input">
                        <label for="phone" >电话号码:<label style="color: red">*</label></label>
                        <input type="text" name="phone" id="phone" placeholder="请输入电话号码" required="required">
                    </div>
                    <div class="input">
                        <label for="eml" >邮箱:<label style="color: red">*</label></label>
                        <input type="text" name="email" id="eml" placeholder="请输入用户名" required="required">
                    </div>
                    <div class="input">
                        <label for="na" >收货人:<label style="color: red">*</label></label>
                        <input type="text" name="name" id="na" placeholder="请输入收获人名字" required="required">
                    </div>
                </div>
                <div class="register-but text-center">
                    <input type="submit" value="提交">
                    <div class="clearfix"></div>
                </div>
            </form>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<%--底部信息页面--%>
<%@include file="footer.jsp"%>
</body>
</html>

4.运行项目查看结果

在IDEA中启动Tomcat服务器