网上蛋糕商城JSP页面

时间：2024-03-26 20:26:00 来源：网络cs 作者：纳雷武栏目：培训机构阅读：

标签：商城蛋糕

任务目标：

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