JavaWeb简单实例——JSP技术的简单应用

最新推荐文章于 2022-11-05 12:22:45 发布

原创最新推荐文章于 2022-11-05 12:22:45 发布 · 469 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#java #servlet #tomcat

本文介绍如何使用JSP页面请求转发实现页面跳转，并通过实例演示如何将复杂的HTML页面分解为头部、主体和底部模块，提高代码复用和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单案例：当我们访问一个JSP页面的时候，将转发到另一个JSP页面并展示这个JSP页面中的内容

访问页面：

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/10/23
  Time: 20:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>测试请求转发</title>
</head>
<body>
<jsp:forward page="/Login.jsp">
  
</jsp:forward>
</body>
</html>

转发页面：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/10/17
  Time: 19:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登陆界面</title>
</head>
<body>
<form action="<c:url value="/LoginServlet"/>">
    <table>
        <tr>
            <td>用户名：</td><td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>密码：</td><td><input type="password" name="password"></td>
        </tr>
    </table>
    <button type="submit">提交</button>
</form>
</body>
</html>

最终效果是我们访问访问页面，最终显示的是转发页面中的内容

复杂案例：实现一个比较复杂的案例，将一个复杂的HTML页面进行模块化分解后，将不同的页面引入到一个页面中进行拼接

最终效果：

结构图解：

页面的模块化是一个非常重要的概念，提取页面中重复的部分并整合成一个单独的页面文件或是组件，可以增加组建的复用率，减少页面内组件的耦合度，方便维护等优点；该案例是将三个文件分别写在三个不同的JSP页面中，并在页面文件中引入头部和底部的文件完成整个页面的组合

头部文件：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="header">
    <div class="container">
        <nav class="navbar navbar-default" role="navigation">
            <!--navbar-header-->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="/index" >首页</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle " data-toggle="dropdown">商品分类
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu multi-column columns-2">
                            <li>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <h4>商品分类</h4>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#" >热销</a></li>
                    <li><a href="#" >新品</a></li>
                    <li><a href="#" class="active">注册</a></li>
                    <li><a href="#" >登录</a></li>
                </ul>
                <!--/.navbar-collapse-->
            </div>
            <!--//navbar-header-->
        </nav>
        <div class="header-info">
            <div class="header-right search-box">
                <a href="javascript:;">
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></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" aria-label="Left Align">
                            搜索
                        </button>
                    </form>
                </div>
            </div>
            <div class="header-right cart">
                <a href="goods_cart.jsp">
                    <span class="glyphicon glyphicon-shopping-cart " aria-hidden="true">
                        <span class="card_num"></span>
                    </span>
                </a>
            </div>
            <div class="clearfix"> </div>
        </div>
        <div class="clearfix"> </div>
    </div>
</div>
<!--//header-->

页面文件：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
	<title>用户注册</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link type="text/css" rel="stylesheet" href="css/bootstrap.css">
	<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body>
	<!--header-->
	<jsp:include page="header.jsp"/>
	<!--//header-->
	<!--account-->
	<div class="account">
		<div class="container">
			<div class="register">
				<form action="/user_rigister" method="post">
					<div class="register-top-grid">
						<h3>注册新用户</h3>
						<div class="input">
							<span>用户名 <label style="color:red;">*</label></span>
							<input type="text" name="username" placeholder="请输入用户名" required="required">
						</div>
						<div class="input">
							<span>邮箱 <label style="color:red;">*</label></span>
							<input type="text" name="email" placeholder="请输入邮箱" required="required">
						</div>
						<div class="input">
							<span>密码 <label style="color:red;">*</label></span>
							<input type="password" name="password" placeholder="请输入密码" required="required">
						</div>
						<div class="input">
							<span>收货人<label></label></span>
							<input type="text" name="name" placeholder="请输入收货">
						</div>
						<div class="input">
							<span>收货电话<label></label></span>
							<input type="text" name="phone" placeholder="请输入收货电话">
						</div>
						<div class="input">
							<span>收货地址<label></label></span>
							<input type="text" name="address" placeholder="请输入收货地址">
						</div>
						<div class="clearfix"> </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>
	<!--//account-->
	<!--footer-->
	<jsp:include page="footer.jsp"/>
	<!--//footer-->
</body>
</html>

底部文件：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!--footer-->
<div class="footer">
    <div class="container">
        <div class="text-center">
            <p>heima www.itcast.cn © All rights Reseverd</p>
        </div>
    </div>
</div>
<!--//footer-->