任务目标：
使用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服务器
本文转载自: https://blog.csdn.net/weixin_53312151/article/details/127962562
版权归原作者 q弹软糯诶 所有， 如有侵权，请联系我们删除。
版权归原作者 q弹软糯诶 所有， 如有侵权，请联系我们删除。