服务器渲染技术jsp

Posted 2022-05-30 Al_tair

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了服务器渲染技术jsp相关的知识，希望对你有一定的参考价值。

服务器渲染技术

服务器渲染技术

大家好呀，我是小笙，我和大家分享下我学习Javaweb的笔记

服务器渲染技术

JSP基本介绍

JSP 全称是 Java Server Pages，Java 的服务器页面,jsp 本质也是实现了Servlet接口

相比 html 而言，html 只能为用户提供静态数据，而 JSP 技术允许在页面中嵌套 java 代码，为用户提供动态数据
相比 Servlet 而言，Servlet很难对数据进行排版，而 jsp很容易对数据进行排版

代码示例

<!-- 简易计算器 -->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>jsp计算器</title>
    </head>
    <body>
        <h1>
            <%
                int i = 20;
                int j = 70;
                int res = i + j;
                out.println(i + " + " + j + " = " + res);
            %>
        </h1>
    </body>
</html>

运行原理

jsp 页面本质是一个 Servlet 程序

第1次访问 jsp 页面的时候，Tomcat 服务器会把 jsp 页面解析成为一个 java源文件，并且对它进行编译成为 class 字节码程序

// sum_jsp java的核心代码
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.jsp.*;
public final class sum_jsp extends org.apache.jasper.runtime.HttpJspBase
    implements org.apache.jasper.runtime.JspSourceDependent,
org.apache.jasper.runtime.JspSourceImports 
 try 
      // 部分代码
      out.write("\\n");
      out.write("\\n");
      out.write("<html>\\n");
      out.write("    <head>\\n");
      out.write("        <title>jsp计算器</title>\\n");
      out.write("    </head>\\n");
      out.write("    <body>\\n");
      out.write("        <h1>\\n");
      out.write("            ");

                int i = 20;
                int j = 70;
                int res = i + j;
                out.println(i + " + " + j + " = " + res);
            
      out.write("\\n");
      out.write("        </h1>\\n");
      out.write("    </body>\\n");
      out.write("</html>\\n");

HttpJspBase 继承了HttpServlet类

常用指令和标签

<%@ page import="java.util.HashMap" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" session="false" pageEncoding="utf-8" %>

1. language 表示支持 java 
2. contentType 表示jsp返回的数据类型
3. pageEncoding 表示当前 jsp 页面文件本身的字符集 
4. import 用于导包，导类
5. session 指的是是否会自动创建JSESSIONID

JSP 请求转发标签
<%--
    <jsp:forward page=""></jsp:forward> 是请求转发标签， 
        它的功能就是请求转发 page 属性设置请求转发的路径 
--%>
<jsp:forward page="/bb.jsp"></jsp:forward>

常用脚本

声明脚本基本语法

声明脚本的格式是： <%! 声明 java 代码 %>

作用：定义 jsp 的需要属性、方法、静态代码块和内部类等

代码示例

<html>
    <head>
        <title>xxx</title>
    </head>
    <body>
        <h1>
            <%!
    		   // 定义属性
                private String name = "jack";
            	// 定义方法
                public String getName()
                    return name;
                
            	// 静态代码块
            	static
            	// 内部类等等
            %>
        </h1>
    </body>
</html>

表达式脚本基本语法

表达式脚本的格式是：<%=表达式%> 表达式后不能以分号结束

作用：在 jsp 页面上输出数据

代码示例

<html>
    <head>
        <title>xxx</title>
    </head>
    <body>
        <h1>
            <%!
    		   // 定义属性
                String name = "jack";
            	// 定义方法
                public String getName()
                    return name;
                
            	// 静态代码块
            	static
            	// 内部类等等
            %>
            用户名:<%=name%>
            工作<%="java工程师"%>
        </h1>
    </body>
</html>

代码脚本基本语法

代码脚本的格式是：<% java代码 %>

作用：可以在 jsp 页面中，编写我们需要的功能

代码示例

public class Monster 
    private Integer id;
    private String name;
    private String skill;

    public Monster(Integer id, String name, String skill) 
        this.id = id;
        this.name = name;
        this.skill = skill;
    

    public Integer getId() 
        return id;
    

    public void setId(Integer id) 
        this.id = id;
    

    public String getName() 
        return name;
    

    public void setName(String name) 
        this.name = name;
    

    public String getSkill() 
        return skill;
    

    public void setSkill(String skill) 
        this.skill = skill;

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>代码脚本基本语法</title>
    </head>
    <body>
        <%
            ArrayList<Monster> list = new ArrayList<>();
            Monster monster = new Monster(1, "牛魔王", "芭蕉扇");
            Monster monster1 = new Monster(2, "孙悟空", "金箍棒");
            list.add(monster);
            list.add(monster1);
        %>
    <table>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>skill</th>
        </tr>
        <%
            for (int i = 0; i < list.size(); i++) 
                Monster monster2 = list.get(i);
        %>
            <tr>
                <td><%= monster2.getId() %></td>
                <td><%= monster2.getName() %></td>
                <td><%= monster2.getSkill() %></td>
            </tr>
        <%
            
        %>
    </table>
    </body>
</html>

JSP 注释

<%-- jsp注释 --%>
<% 
// 单行注释
/* 多行注释 */ 
/** 文档注释 */ 
%>
<!-- html注释 -->

JSP 内置对象

JSP 内置对象指的是已经创建好的对象, 直接使用 inbuild

JSP 九大内置对象

JSP 域对象

域对象的作用:保存数据,获取数据,共享数据

从作用域范围排序 pageContext < request < session < application

pageContext

存放的数据只能在当前页面使用

request

存放的数据在一次 request 请求有效

session

存放的数据在一次会话有效

application

存放的数据在整个 web 应用运行期间有效, 范围更大

代码示例

<!-- areaObject1 -->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>areaObject1</title>
</head>
<body>
<h1>areaObject1</h1>
<%
    pageContext.setAttribute("username","罗念笙");
    application.setAttribute("hobby","java");
    session.setAttribute("age","18");
    request.setAttribute("email","1079936125@qq.com ");
%>

<%
    out.println("pageContext: " + pageContext.getAttribute("username").toString());
    out.println("application: " + application.getAttribute("hobby").toString());
    out.println("session: " + session.getAttribute("age").toString());
    out.println("request: " + request.getAttribute("email").toString());
    // request.getRequestDispatcher("/areaObject2.jsp").forward(request,response);
    // response.sendRedirect("/jsp/areaObject2.jsp");
%>
</body>
</html>

<!-- areaObject2 -->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>areaObject2</title>
</head>
<body>
<h1>areaObject2</h1>
<%
    // out.write(pageContext.getAttribute("username").toString()); 不在同一个页面，无法获取数据
    out.println("application: " + application.getAttribute("hobby").toString()); // 只有当web服务关才无法访问（重新发布就无法访问）
    // out.println("session: " + session.getAttribute("age").toString()); // 会话关闭则无法访问
    // out.println("request: " + request.getAttribute("email").toString()); // 重定向之后无法获取
%>
</body>
</html>

EL 表达式

概述

EL 表达式全称：Expression Language，是表达式语言

EL 表达式主要是代替 jsp 页面的表达式脚本<%=%>（$）

代码示例

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <%
        request.setAttribute("username","罗念笙");
    %>
    <h1>jsp表达式</h1>
    name:<%=request.getAttribute("username")%>
    <h1>el表达式</h1>
    name:$username
</body>
</html>
<!--
	JSP 表达式在输出 null时，输出的时字符串null
	EL 表达式在输出 null 时，输出的是 ""
-->

常用输出形式

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Book</title>
</head>
<body>
    <%
        Book book = new Book();
        book.setName("你是我不及的梦");
        book.setWriter(new String[]"三毛");
        List<String> list = new ArrayList<>();
        list.add("罗念笙");
        list.add("张洛融");
        book.setReader(list);
        Map<String, String> map = new HashMap<>();
        map.put("1","很不错的一本书");
        map.put("2","nice");
        book.setTopics(map);
        request.setAttribute("book",book);
    %>
    book:$book<br/>
    bookName:$book.name<br/>
    bookWriter:$book.writer[0]<br/>
    bookReader:$book.reader<br/>
    bookTopics:$book.topics<br/>
</body>
</html>

public class Book 
    private String name;
    private String[] writer;//作者
    private List<String> reader;//读者
    private Map<String, String> topics;//话题

    @Override
    public String toString() 
        return "Book" +
                "name='" + name + '\\'' +
                ", writer=" + Arrays.toString(writer) +
                ", reader=" + reader +
                ", topics=" + topics +
                '';
    

    public String getName() 
        return name;
    

    public void setName(String name) 
        this.name = name;
    

    public String[] getWriter() 
        return writer;
    

    public void setWriter(String[] writer) 
        this.writer = writer;
    

    public List<String> getReader() 
        return reader;
    

    public void setReader(List<String> reader) 
        this.reader = reader;
    

    public Map<String, String> getTopics() 
        return topics;
    

    public void setTopics(Map<String, String> topics) 
        this.topics = topics;

运算操作

语法：$ 运算表达式

关系运算符

关系运算符	说明	例子	结果
== 或 eq	等于	$5==5 或 $5eq5	true
!= 或 ne	不等于	$5!=5 或 $5ne5	false
< 或 lt	小于	$3<5 或 $3lt5	true
> 或 gt	大于	$3>5 或 $3gt5	false
<= 或 le	小于等于	$3<=5 或 $3le5	true
>= 或 ge	大于等于	$3>=5 或 $3ge5	false

逻辑运算符

逻辑运算符	说明	例子	结果
&& 或 and	与运算	$12=12&&12<11 或 $12=12and12<11	false
\|\| 或 or	或运算	$12=12\|\|12<11 或 $12=12or12<11	true
！或 not	取反运算	$!true 或 $not true	false

算术运算

算术运算符	说明	例子	结果
+	加法	$12+18	30
-	减法	$(18-8	10
*	乘法	$[12*12	144
/ 或 div	除法	$144/12 或 $144div12	12
% 或 mod	取模	$144%10 或 $144mod10	4

三元运算

表达式 1?表达式 2: 表达式 3

如果表达式1的值为真，返回表达式2的值，反之返回表达式3的值。

empty运算

● 值为 null

● 值为空串

● 值是 Object 类型数组，长度为零

● list 集合，元素个数为零

● map 集合，元素个数为零

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>EL empty运算</title>
    </head>
    <body><h1>EL 的 empty 运算</h1>
        <% request.setAttribute("k1", null);
            request.setAttribute("k2", "");
            request.setAttribute("k3", new Object[]);
            request.setAttribute("k4", new ArrayList<String>());
            request.setAttribute("k5", new HashMap<String, Object>()); 
        %> 
        k1 是否为空= $empty k1<br/> 
        k2 是否为空= $empty k2<br/> 
        k3是否为空= $empty k3<br/> 
        k4 是否为空= $empty k4<br/> 
        k5 是否为空= $empty k5<br/> 
    </body>
</html>

内置对象

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
	<head>
    	<title>EL 获取四个特定域中的属性</title>
    </head>
    <body><h1>EL 获取四个特定域中的属性</h1> 
        <% 
        	pageContext.setAttribute("k", "pageContext");
        	request.setAttribute("k", "request");
        	session.setAttribute("k", "session");
        	application.setAttribute("k", "application"); 
        %>
    <hr/>
    	application 的 key1: $applicationScope.k<br/> 
    	pageContext 的 key1: $pageScope.k<br/>
   	 	session 的 key1: $sessionScope.k<br/> 
        request 的 key1: $requestScope.k<br/>
    </body>
</html>

pageContext 对象介绍

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>pageContext 对象的使用</title>
    </head>
    <body>
        <h1>pageContext 对象的使用</h1> 
        <%--
            通过 request 对象来获取和 HTTP 协议相关的数据 
            request.getScheme() 它可以获取请求的协议 
            request.getServerName() 获取请求的服务器ip或域名 
            request.getServerPort() 获取请求的服务器端口号 
            request.getContextPath() 获取当前工程路径 
            request.getMethod() 获取请求的方式（GET或POST） 
            request.getRemoteHost() 获取客户端的ip地址 
            session.getId() 获取会话的唯一标识
		--%>
    <hr/>
    协议： $pageContext.request.scheme<br> 
    服务器 ip：$pageContext.request.serverName<br>
    服务器端口：$pageContext.request.serverPort<br> 
    工程路径：$pageContext.request.contextPath<br>
    请求方法：$pageContext.request.method<br> 
    客户端 ip 地址：$pageContext.request.remoteHost<br> 
    会话 id：$pageContext.session.id<br>
        
    <h1>简化pageContext.request获取</h1> 
    <% pageContext.setAttribute("req", request); %> 
    获取请求方法: $req.method <br>
    </body>
</html>

JSTL

概述

JSTL 标签库是指 JSP Standard Tag Library JSP 标准标签库

JSTL 是为了替换代码脚本

需要导入的jar包

JSTL 由五个标签库组成

功能	前缀	URI
核心标签库（重点）	c	http://java.sun.com/jsp/jstl/core
格式化	fmt	http://java.sun.com/jsp/jstl/fmt
函数	fn	http://java.sun.com/jsp/jstl/functions
数据库（不使用）	sql	http://java.sun.com/jsp/jstl/sql
XML（不使用）	x	http://java.sun.com/jsp/jstl/xml

核心标签库

<c:set />

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>JSTL</title>
    </head>
    <body>
        <%--
            <c:set/> set 标签可以往域中保存数据 
            1. 等价于域对象.setAttribute(key,value); 
            2. scope 属性设置保存的域 
                page 表示 PageContext 域（默认值） 
                request 表示 Request 域 
                session 表示 Session 域 
                application 表示 ServletContext 域 
            3. var 属性设置key
        --%>
        <c:set scope="request" var="username" value="罗念笙"/>
        $username
    </body>
</html>

<c:if />

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>JSTL</title>
    </head>
    <body>
        <c:if test="$ 10 > 2 ">
            <h1>10 > 2 为真</h1>
        </c:if>
    </body>
</html>

< c:choose > < c:when > < c:otherwise >

多路判断，类似 switch … case … default

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>jstl_choose 标签使用</title>
</head>
<body>
    <h1>jstl_choose 标签使用</h1>
<hr/>
	<% request.setAttribute("money", 100000); %> 
    <c:choose> 
        <c:when test="$ requestScope.money > 20000 "> 有钱人</c:when>
        <c:when test="$ requestScope.money > 15000 "> 比较有钱 </c:when> 
        <c:otherwise> 
            <c:choose>
                <c:when test="$ requestScope.money > 10000 ">没啥钱</c:when>
                <c:when test="$requestScope.money > 5000"> 只够温饱了 </c:when>
                <c:otherwise>饿死</c:otherwise>
            </c:choose>
        </c:otherwise> 
    </c:choose>
</body>
</html>

<c:forEach />

● 普通遍历输出 i 到 j

● 遍历数组

● 遍历 Map

● 遍历 List

代码示例

<%@ page import="java.util.HashMap" %>
<%@ page import="java.util.Map" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <%--
        循环 等价 for (int n = 1; n <= 5; n++)
        1. 遍历 1 到 5，
        2. 输出 begin 属性设置开始的索引 end 属性设置结束的索引
        3. step 每次遍历增加的值
        4. var 属性表示循环的变量
    --%>
    <h1>循环</h1>
    <c:forEach begin="1" end="5" step="1" var="n">
        $n<br>
    </c:forEach>

    <%--
        遍历数组 等价 for (Object item: arr)
        1. items 遍历的数组或者集合
        2. var 遍历到的数据
    --%>
    <h1>遍历数组</h1>
    <%
        request.setAttribute("key",new String[]"罗念笙","张洛融");
    %>
    <c:forEach items="$requestScope.key" var="item">
        $item<br>
    </c:forEach>

    <h1>遍历集合</h1>
    <%
        Map<String, Object> map = new HashMap<>();
        map.put("key1", "北京");
        map.put("key2", "上海");
        map.put("key3", "天津");
        request.setAttribute("map", map);
    %>
    <c:forEach items="$requestScope.map" var="city">
        $city.key -- $city.value<br>
    </c:forEach>
</body>
</html>

以上是关于服务器渲染技术jsp的主要内容，如果未能解决你的问题，请参考以下文章

java中的渲染是啥意思?

将 Spring MVC 应用程序从 JSP 迁移到 AngularJS

根据存储在db中的用户服务渲染jsp页面的不同部分

Servlet处理业务逻辑，JSP处理视图渲染，Servlet处理请求后，把输出的结果转到JSP页面的解决方法

前端路由（history+hash）

SSI服务端包含技术