服务器渲染技术

服务器渲染技术
- JSP基本介绍
- 运行原理
- 常用指令和标签
- 常用脚本
- JSP 注释
- JSP 内置对象
- JSP 域对象
- - pageContext
  - request
  - session
  - application
  - 代码示例
- EL 表达式
- - 概述
  - 常用输出形式
  - 运算操作
  - empty运算
  - 内置对象
- JSTL
- - 概述
  - 核心标签库

大家好呀，我是小笙，我和大家分享下我学习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.HttpJspBaseimplements 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 指的是是否会自动创建JSESSIONIDJSP 请求转发标签
<%--<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时，输出的时字符串nullEL 表达式在输出 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;//话题@Overridepublic 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>