通用JSP页面 jsp入门级文章

针对文章“通用JSP页面 jsp入门级文章”的完整攻略,我可以提供以下细致的讲解:

一、什么是通用JSP页面?

通用JSP页面是一种可以在多个JSP页面中复用的模板文件,通过抽象出相同的页面结构和样式,减少重复的代码编写,提高代码的可复用性和代码编写效率。

二、如何创建通用JSP页面?

1.新建一个JSP文件,并把公共的HTML代码片段放到这个文件中。例如,我们新建了名为"common.jsp"的文件。

示例代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>${title}</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <header>
        <h1>${title}</h1>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于我们</a></li>
                <li><a href="contact.html">联系我们</a></li>
            </ul>
        </nav>
    </header>
    <main>
        ${content}
    </main>
    <footer>
        版权信息:myweb.com
    </footer>
</body>
</html>

代码中使用了JSP的EL表达式来获取参数,例如${title}${content},用于动态设置文件的标题和页面内容。

2.在其他JSP页面中引用这个公共文件,使用JSP的include指令,例如:

示例代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <%@ include file="common.jsp" %>
    <%
        String content = "这是我的页面内容";
        String title = "我的页面标题";
        request.setAttribute("content", content);
        request.setAttribute("title", title);
    %>
</body>
</html>

这里使用<%@ include file="common.jsp" %>将公共JSP模板文件引入当前页面中,然后设置contenttitle两个参数,这些参数将被传递到公共文件中的<title>${content}标记中。

三、通用JSP页面的基本语法

通用JSP页面采用JSP的EL表达式和JSP标签库实现动态渲染页面。

  1. EL表达式

EL表达式是一种在JSP页面中可以使用的表达式语言,它可以用来访问JavaBean对象的属性、调用JavaBean对象的方法等。通用JSP页面中,我们常用的两种EL表达式是${}#{},分别用于获取参数和执行方法。

示例代码:

${param.key}        // 获取参数值
${session.key}      // 获取Session值
${request.key}      // 获取Request值
${pageContext.key}  // 获取页上下文环境中的值
${header["key"]}    // 获取HTTP头中的值
${cookie.key}       // 获取Cookie值
${initParam.key}    // 获取web.xml中初始化参数的值
${pageScope.key}    // 获取页面范围(page)中的值
${requestScope.key} // 获取请求范围(request)中的值
${sessionScope.key} // 获取会话范围(session)中的值
${applicationScope.key} // 获取应用范围(application)中的值
  1. JSP标签库

JSP标签库是一种自定义的标记语言,可以用来封装Java类的功能,实现更复杂的数据处理和页面渲染。通用JSP页面中,我们常用的标签库有:JSTL、EL和Custom Tags。

示例代码:

<c:forEach var="item" items="${list}">
    <tr>
        <td>${item.name}</td>
        <td>${item.age}</td>
    </tr>
</c:forEach>

<customTag:param1/>

上面的代码中,<c:forEach>是JSTL的标签库,用于遍历集合对象;${item.name}${item.age}使用了EL表达式,获取了JavaBean对象的属性;<customTag:param1/>是自定义标签的示例,这里省略了标签体部分的代码。

四、通用JSP页面的注意事项

在使用通用JSP页面的时候,需要注意以下几点:

1.公共文件中的变量名需要和引用它的各个文件中的变量名一致,否则无法正确渲染页面。

2.在公共文件中使用EL表达式时,需要确保这个表达式在所有引用它的文件中都有对应的值,否则会在渲染页面时出错。

3.在使用标签库的时候,需要注意在引入标签库前,需要导入相关的JAR包。

五、示例说明

1.使用通用JSP页面来实现页面布局

我们有一个项目需要开发一个简单的用户管理系统,包括用户的注册、登录和查看用户信息等功能。这里我们可以先创建一个注册页面,再引用通用JSP页面来实现整体的页面布局。

注册页面示例代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
    <%@ include file="common.jsp" %>
    <%
        String title = "用户注册";
        request.setAttribute("title", title);
    %>
    <form action="register.do" method="post">
        <label>用户名:</label><input type="text" name="username"/><br>
        <label>密码:</label><input type="password" name="password"/><br>
        <label>确认密码:</label><input type="password" name="password2"/><br>
        <input type="submit" value="注册"/>
    </form>
</body>
</html>

在这个页面中,我们通过<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>引入了JSTL的标签库,并使用了${title}${content}两个EL表达式来动态设置页面的标题和主要内容。这个页面中除了表单之外,其他的样式和排版都会和通用JSP页面中的代码一致。

2.使用JSP标签库来处理数据

我们有一个需求,需要展示一系列商品信息,包括商品的名称、价格和库存等。这里我们可以通过使用JSP标签库来实现数据的展示和处理。

示例代码:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<c:set var="products" value='<%=[{"name":"商品1","price":100,"count":20},{"name":"商品2","price":200,"count":10}]%>'/>

<table>
    <thead>
        <tr>
            <th>商品名称</th>
            <th>价格</th>
            <th>库存</th>
        </tr>
    </thead>
    <tbody>
        <c:forEach var="product" items="${products}">
            <tr>
                <td>${product.name}</td>
                <td>${product.price}</td>
                <td>${product.count}</td>
            </tr>
        </c:forEach>
    </tbody>
</table>

这个示例中,我们使用<c:set>标签设置了一个商品列表,包含商品名称、价格和库存等信息。然后使用<c:forEach>标签遍历这个列表,并在表格中展示了每个商品的名称、价格和库存等信息。这样,我们就可以通过使用JSP标签库来实现更复杂的数据处理和页面渲染了。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:通用JSP页面 jsp入门级文章 - Python技术站

(0)
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • JavaScript改变HTML元素的样式改变CSS及元素属性

    JavaScript可以用来操作HTML元素,这包括改变元素的样式以及元素的属性。我们可以使用JavaScript来动态地改变网页的展示效果和交互性。下面是改变HTML元素的样式和属性的完整攻略。 改变HTML元素的样式 通过JavaScript设置CSS样式 可以使用JavaScript代码来操控CSS样式,以改变HTML元素的外观和表现。JavaScri…

    css 2023年6月9日
    00
  • 详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法

    详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法 在网页设计中,常常需要控制元素的透明度。CSS 中提供了 opacity 属性来实现透明度的效果,但在 IE 浏览器中,使用 opacity 属性会导致一些问题。因此,也有一种名为“透明度滤镜(filter)”的方式可以用来实现透明度效果。本文将详细讲解这两种方式的最准确用法。 CS…

    css 2023年6月10日
    00
  • CSS中背景background-position负值定位深入理解[图文]

    CSS中背景background-position负值定位深入理解[图文] 什么是background-position? background-position属性用于指定背景图像的起始位置(也就是背景图像在容器中的位置)。在未指定background-position属性时,背景图像的起始位置默认为左上角。 background-position属性可以…

    css 2023年6月9日
    00
  • jQuery中outerHeight()方法用法实例

    jQuery中outerHeight()方法用法实例 概述 outerHeight()方法是jQuery中一个常用的方法,用于获取元素的大小,包括边框(border)、内边距(padding)、外边距(margin)和元素的高度(height)。 语法 outerHeight([includeMargin])其中,可选参数includeMargin是一个布尔…

    css 2023年6月11日
    00
  • element-plus 在vue3 中不生效的原因解决方法(element-plus引入)

    问题背景:在 Vue3 项目中,使用 Element Plus UI 库,但是页面中没有任何样式和交互效果。 问题原因:Element Plus 中的部分功能依赖于 Vue2 的写法,与 Vue3 有所不符,因此导致了 Element Plus 在 Vue3 中不生效。 解决方法:需要以下两个步骤: 第一步:安装 Element Plus 库在项目根目录下打…

    css 2023年6月9日
    00
  • CSS中使用inline-block来进行居中的示例

    下面详细讲解一下“CSS中使用inline-block来进行居中的示例”的完整攻略。 确定html结构 首先,需要为元素确定合适的 html 结构。在示例中,我们使用一个 div 元素包裹内部要居中的内容。并给包裹元素设置一个唯一的 class 名称,为 .center。 <div class="center">这里是需要居中…

    css 2023年6月10日
    00
  • css 解决英文字符与阿位伯数字自动换行

    为了解决英文字符与阿拉伯数字的自动换行问题,我们可以使用word-wrap和word-break属性来实现。word-wrap属性定义了在何处断开单词或者长单词换行;word-break属性则定义了在何处断开一个单词来实现自动换行。 具体来说,我们可以使用以下代码来实现自动换行: word-wrap: break-word; // 当单词太长时,自动换行,防…

    css 2023年6月10日
    00
  • javaScript+turn.js实现图书翻页效果实例代码

    JavaScipt + turn.js 实现图书翻页效果实例 介绍 在网站开发中,我们经常需要将一些电子书或者pdf格式的文档转化为网页形式,同时保留原有的阅读体验,这时候实现图书翻页效果就显得尤为重要。 turn.js 是一个基于 JQuery 的图书翻页插件,通过 turn.js 插件,我们可以方便快捷地实现 Web 端的图书翻页效果。 本文将讲解 tu…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部