jsp

jsp 专栏收录该内容
1 篇文章 0 订阅

第一章 JSP

1、JSP概述

1.1 JSP的应用场景

在前几天的登录案例中,登录失败后为了能够响应登录的错误信息。我们特意创建了一个LoginErrorServlet用来动态地拼接错误信息。

【代码如下】

  1. LoginServlet:登录失败,手动拼接login.html页面,并将错误信息动态地添加进去。

在这里插入图片描述

  1. LoginErrorServlet:手动拼接html页面,动态展示登录错误信息。
    在这里插入图片描述

【结论】

在Servlet中,能够直接获取后台服务器中的数据:获取数据方便 

     通过拼接字符串的形式,给浏览器响应html:操作麻烦,效率太低 

如果能够有一个既能直接书写html代码,又能书写Servlet代码的页面。就能够在客户端和服务端直接进行数据交互了。

1.2 JSP是什么

JSP全名为Java Server Pages,中文名叫java服务器页面,其本质是一个简化的Servlet 设计,它 是由Sun 公司倡导、许多公司参与一起建立的一种动态网页 技术标准。其实就是一个既能书写Servlet代码又能书写HTML代码的文件。

1.3 JSP文件

在web目录下,新建一个jsp文件夹,点击鼠标右键New — JSP—给这个文件取个名字。
在这里插入图片描述

							 【图1  创建JSP】

文件内容如下:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>

</body>
</html>

在这里插入图片描述

1.5 在JSP中书写代码

【需求】

  1. 在jsp页面上书写html代码和java代码;

【参考代码】

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>我的第一个JSP页面</title>
</head>
<body>
<%--html代码--%>
<h1>Hello JSP</h1>
System.out.println("Hello Java!");

<%--java代码--%>
<%
    System.out.println("hello  java.........");
%>
</body>
</html>

【运行结果】启动tomcat,并且访问这个jsp页面

【控制台输出】

hello  java.........

2、JSP运行原理

我们通过浏览器访问到的jsp页面,最终访问的是tomcat服务器中的jsp页面。所以,我们可以到tomcat中查看一下上面案例中的jsp页面是怎么样的一种存在。IntilliJ IDEA借助tomcat发布web项目的机制是动态发布(为每一个web项目创建一个单独的发布文件)。我们可以通过tomcat其中日志中的CATALINA_BASE路径找到我们当前这个JSP页面在tomcat中的位置:

在这里插入图片描述

							【图1 IDEA发布项目的路径】

找到这个目录后,会看到以下3个文件夹:

在这里插入图片描述

					【图2  文件目录】

我们打开\work\Catalina\localhost\ROOT\org\apache\jsp\jsp目录发现有两个文件:

在这里插入图片描述

						【图3  JSP被翻译后的代码】

打开hello_jsp.java文件后,发现我们在JSP页面上写的代码都在_jspService方法中:
在这里插入图片描述

      out.write("\r\n");
      out.write("<html>\r\n");
      out.write("<head>\r\n");
      out.write("    <title>我的第一个JSP页面</title>\r\n");
      out.write("</head>\r\n");
      out.write("<body>\r\n");
      out.write("\r\n");
      out.write("<h1>Hello JSP</h1>\r\n");
      out.write("System.out.println(\"hello World!\");\r\n");
      out.write("\r\n");
      out.write('\r');
      out.write('\n');

      System.out.println("hello  java.........");

      out.write("\r\n");
      out.write("</body>\r\n");
      out.write("</html>\r\n");

小结:

1、JSP运行原理:
	1、第一次访问JSP页面: JSP页面被tomcat翻译成Servlet;
	2、HTML代码:被Servlet以response对象响应字符串的形式,响应给浏览器;
	3、java代码:在Servlet中被原样输出;
2、JSP本质:是一个Servlet

3、JSP页面书写java代码

在JSP页面的body标签中,可以直接书写html代码和JS代码。但是,如果在JSP页面中书写java代码。必须遵循固定的格式,才能够生效;JSP页面中书写java代码有三种方式:1.脚本片段;2.脚本声明;3.脚本表达式;

方式一:脚本片段

脚本片段指的是一段java代码。书写格式:<%  java 代码    %>。

【需求】在JSP页面编写java代码,在页面输出0-9这10个数字。

【示例】

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>jsp-demo1</title>
</head>
<body>
    <%--脚本片段--%>
    <%
        for (int i=0;i<10;i++) {
            response.getWriter().println("i="+i);
        }
    %>
</body>
</html>

【被翻译后的源码】

方式二:脚本表达式

虽然脚本声明和脚本片段已经可以书写Java代码了,但是如果我们要使用java代码向页面输出一些内容,还是需要 使用原来的response对象,比较繁琐,因此,我们需要一个更加简便的方式,可以代替response向页面输出内容  ——这个就是脚本表达式。

脚本表达式的格式:<%= 内容 %>     等价于:response.getWriter().println("内容")

【示例】在页面输出信息

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>

    <%--脚本表达式:直接在页面输出内容--%>
    <%= "传智播客" %>

</body>
</html>

【被翻译后的代码】

【注意】不要同时使用脚本表达式和response同时往页面输出信息,会出现顺序不一致。如下代码:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>

    <%--脚本表达式:直接在页面输出内容--%>
    <%= "传智播客" %>
    <%
        response.getWriter().println("黑马程序员");
    %>
</body>
</html>

【打印结果】

方式三:脚本声明

脚本片段虽然可以嵌入java代码,但是如果,我们要给当前的jsp中定义一些成员方法或者成员变量,就行需要一个新的技术——脚本声明.

脚本声明的格式:<%! 书写Java代码 %>

【示例一】声明成员变量

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>

<%--声明全局变量--%>
<%! int i=10; %>

</body>
</html>

【被翻译后的代码】成员变量

在这里插入图片描述

【示例二】声明成员方法

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <%--声明一个成员方法--%>
    <%!
        public String getContact(String str1, String str2) {
            return  str1+str2;
        }
    %>
</body>
</html>

【被翻译后的代码】成员方法

在这里插入图片描述

【小结】

  1. 脚本表达式<%= str %> :在页面输出内容,在service方法中起作用;
  2. 脚本片段<% %> :在service方法中,原样输出的代码片段;
  3. 脚本声明:<%! String str = “黑马程序员” %> :定义成员变量;

4、JSP应用

4.1 JSP页面可直接使用的对象

我们发现,我们在JSP页面中书写的代码最终都会翻译到_jspService()方法中,我们发现这个方法中有两个入参:HttpServletRequest对象 ,HttpServletResponse对象 。所以说,JSP的本质就是一个Servlet。我们可以直接在JSP页面上使用这两个对象。

在这里插入图片描述

4.2 【案例】登录失败后转发到login.jsp页面

在这里插入图片描述

4.3 【案例】登录成功后重定向到success.jsp页面

在这里插入图片描述

第二章 EL表达式

1、EL概述

1.1 引入

回顾刚刚改造的登录案例,发现在success.jsp获取session中的信息写了很多的java代码:
在这里插入图片描述

因为,脚本表达式在JSP页面上书写起来比较麻烦。而在页面上取值在开发中使用的又比较多,所以Sun公司为了简化在页面上的取值操作。

【需求】使用EL表达式改造success.jsp页面的取值操作

提示:EL表达式从session中取值:${sessionScope.loginUser.userName}

【代码示例】success.jsp

<%@ page import="com.heima.pojo.Student" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <h1>首页 -- JSP页面</h1>
    <%--使用EL表达式从session中取出userName--%>
    <h3>欢迎您!${loginUser.userName}</h3>
</body>
</html>

1.2 EL简介

EL全称: Expression Language 
作用:代替jsp中脚本表达式的功能,简化对java代码的操作,从【域对象】中取值。 EL表达式简化<%= %>方式取值
EL语法表达式的格式:${域对象} 

2、EL取值

2.1 JSP的四大域对象

JSP的四大域对象指的是:page域,request域,session域,application域。我们通常使用EL表达式从这4个域对象用取值。以下是这4个域对象的详细信息:

域对象 对象名称 说明
page域 pageScope page域指的是当前JSP页面,其中存储的数据只在当前页面有效
request域 requestScope request域:一次请求或请求链中request域
session域 sessionScope session域:一次会话过程中,session域
application域 applicationScope application域:服务启动后整个项目对应的ServletContext域

在这里插入图片描述

2.2 EL表达式从四大域中取值

EL表达式从指定的域中取值的方式如下:

域对象 取值方式
page域 ${pageScope.xxx}
request域 ${requestScope.xxx}
session域 ${sessionScope.xxx}
application域==ServletContext ${applicationScope.xxx}

【需求】

  1. 在一个JSP页面中,使用脚本表达式分别往request域,session域,ServletContext域和pageContext域中存储数据;
  2. 使用EL表达式从这4个域中取值;

【参考代码】

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<%--
    分别往request域,session域,servletContext域和pageContext中存值
--%>
<%
    request.setAttribute("requestName","requestScope中的值");
    request.getSession().setAttribute("sessionName","sessionScope中的值");
    request.getServletContext().setAttribute("servletContextName", "servletContext中的值");
    pageContext.setAttribute("pageName","page域中的值");
%>
<%--
    使用EL表达式从上述4个域中取值
--%>
从request域中取值:${requestScope.requestName}<br>
从session域中取值:${sessionScope.sessionName}<br>
从servletContext域中取值:${applicationScope.servletContextName}<br>
从page域中取值:${pageScope.pageName}
</body>
</html>

2.3 EL表达式搜索数据

EL表达式取值的时候也可以不指定域,如果取值的时候不指定域对象。就会按照从page域--->request域--->session域--->servletContext域从小到大逐级根据name属性值查找。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<h2>EL的域搜索 </h2>

<%
    //page域
    pageContext.setAttribute("msg", "hello pageScope");
    //request 域
    request.setAttribute("msg", "hello requestScope");
    //session
    session.setAttribute("msg", "sessionScope");
    //servletContext域
    application.setAttribute("msg", "applicationScope");
%>
<!-- el表达式 搜索顺序  pageContext  request  session  application从小到大 一旦 找打数据  不在搜索了 -->
域搜索:<font color='pink'>${msg}</font><br>
</body>
</html>

2.4 EL表达式从cookie中取值

${cookie.JSESSIONID}      <%--根据cookie的名字获取cookie对象 --%>
${cookie.JSESSIONID.name}  <%--获得cookie的名称,对应方法getName()--%>
${cookie.JSESSIONID.value} <%--获得cookie的值,对应方法getValue() --%>

 从cookie中获取cookie对象:${cookie.JSESSIONID}<br>
 从cookie中获取name值:${cookie.JSESSIONID.name}<br>
 从cookie中获取value值:${cookie.JSESSIONID.value}<br>

3、EL运算符

EL表达式获取到值之后可以直接通过运算符进行运算。EL表达式的运算符主要有以下几类:算术运算,关系运算,逻辑运算,三元运算,empty运算符。

【素材】页面数据准备

<%
    request.setAttribute("n1", "10");
    request.setAttribute("n2", "20");
%>

3.1 算术运算

顾名思义,算术运算是进行算术运算的符号,主要包括:加,减,乘,除。具体使用如下表:

运算符 说明 使用示例 结果

  • 	加   	${n1+n2}	30  
    
  • 	减   	${n1-n2}	-10 
    
  • 	乘   	${n1*n2}	200 
    

/或 div 除 ${n1/n2}
%或 mod 取余

【代码示例】

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<%
    pageContext.setAttribute("n1", "10");
    pageContext.setAttribute("n2", "20");
%>

加法运算:${n1+n2}<br>
减法运算:${n1-n2}<br>
乘法运算:${n1*n2}<br>
除法运算:${n1/n2}或${n1 div n2}<br>
取余运算:${n1%n2}或${n1 mod n2}<br>
</body>
</html>

3.2 关系运算

关系运算符是判断两个数据的大小关系的,关系运算符有:==,!=,<,<=,>,>=。具体使用方法如下:

运算符 说明 使用示例 结果
== 或 eq 等于 equal ${n1 == n2} false
!= 或 ne 不等于 not equal ${n1 != n2} true

或 gt 大于 greater than ${n1 > n2} false
= 或 ge 大于等于 greater than or equal ${n1 >= n2} false
< 或 lt 小于 less than ${n1 < n2} true
<= 或 le 小于等于 less than or equal ${n1 <= n2} true

【代码示例】

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<%
    pageContext.setAttribute("n1", "10");
    pageContext.setAttribute("n2", "20");
%>

==:${n1 == n2}或 ${n1 eq n2}<br>
!=:${n1 != n2}或 ${n1 ne n2}<br>
>:${n1 > n2}或 ${n1 gt n2}<br>
>=:${n1 >= n2}或 ${n1 ge n2}<br>
"<":${n1 < n2}或 ${n1 lt n2}<br>
<=:${n1 <= n2}或 ${n1 le n2}<br>
</body>
</html>

3.3 逻辑运算

逻辑运算符包括:&& ,||,! 使用方法如下:

运算符 说明 使用示例 结果
&& 或 and 逻辑与 ${true && false} false
|| 或 or 逻辑或 ${true || false} true
! 或 not 非 ${!false} true

3.4 三元运算

EL表达式也支持三元运算符:如,判断n1是否是正数,可以写成如下:

${n1 >0 ?"正数":"负数"}

3.5 empty运算

empyt运算符对以下数据运算返回true:

  1. 字符串:"";
  2. 空集合(size=0):List list = new ArrayList();
  3. 空对象(null):Student stu = null;

【代码示例】

<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="com.heima.domain.Student" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<%
    String str = "";
    List list = new ArrayList();
    Student student = null;

    request.setAttribute("str", str);
    request.setAttribute("list", list);
    request.setAttribute("student",student);
%>

    空字符串:${empty str}<br>
    集合size=0:${empty list}<br>
    空对象null:${empty student}<br>
</body>
</html>

【注】not empty可以用在EL表达式中,判断非空的情况。

EL表达式小结:

  • EL:Expression Language;
  • EL语法:${ }
  • 作用:简化脚本表达式的取值,简化<%= request.getAttribute(“name”) %> ===> ${name}
  • jsp的四大域对象
    • page域:pageContext pageContext.setAttrubute() pageContext.getAttribute() JSP特有 作用范围:当前的JSP页面
    • requst域:request request.setAttribute() request.getAttribute() 作用范围:一次请求和响应之间
    • session域: session session.setAttribute() session.getAttribute() 作用范围:会话期间(多次请求和响应)
    • servletContext域:application application.setAttribute() application.getAttribute() 作用范围:整个项目;
  • jsp从四大域中取值(指定域对象):
    • ${pageScope.name}
    • ${requestScope.name}
    • ${sessionScope.name}
    • ${applicationScope.name}
  • JSP搜索域对象中的值:page — request — session — servletContext
    • ${name}
  • 运算
    • 算术运算
    • 关系运算
    • 逻辑运算:&& || !
    • 三元运算
    • empty运算:empty not empty
      • 空字符串:""
      • 空对象:null
      • 空集合:list.size = 0;

第三章 JSTL标签库

1、JSTL概述

1.1 、JSTL引入

【案例】在页面中遍历集合,并以红色字体显示出所有的人:

<body>
  <%
        //创建一个List集合  存储一列字符串信息  然后遍历
        List<String> strList = new ArrayList<>();
        strList.add("张三");
        strList.add("张三丰");
        strList.add("张无忌");
        request.setAttribute("strList",strList);
    %>

    <%
        //从request域中获取数据
        List<String> strs = (List<String>) request.getAttribute("strList");
        //遍历数据
        for (String str  :strs ) {
    %>
          <%--在页面上输出--%>
          <span style="color: red"><%=str%> </span>  <br>
    <%
        }
    %>

  </body>

在这里插入图片描述

1.2、JSTL是什么

从JSP 1.1规范开始JSP就支持使用自定义标签,使用自定义标签大大降低了JSP页面的复杂度,同时增强了代码的重
用性,因此自定义标签在WEB应用中被广泛使用。

许多WEB应用厂商都开发出了自己的一套标签库提供给用户使用,这导致出现了许多功能相同的标签,令网页制作者无所适从,不知道选择哪一家的好。

为了解决这个问题,
Apache Jakarta小组归纳汇总了那些网页设计人员经常遇到的问题,
开发了一套用于解决这些常用问题的自定义标签库,
这套标签库被SUN公司定义为标准标签库(The JavaServer Pages Standard Tag Library),简称JSTL。

使用JSTL可以解决用户选用不同WEB厂商的自定义标签时的困惑,JSP规范同时也允许WEB容器厂商按JSTL标签库的
标准提供自己的实现,以获取最佳性能

1.3、JSTL核心标签库

JSTL 1.0 发布于 2002 年 6 月,由四个定制标记库(core、format、xml 和 sql)和一对通用标记库验证器(ScriptFreeTLV 和 PermittedTaglibsTLV)组成。JSTL核心标签库指的是标签库core中的把;

 标签名称    	                   作用                   
 c:out   	通常用于输出一段文本内容到客户端浏览器: response.getWtriter().print("aa")  <%=""%>
 c:set   	             用于设置各种Web域中的属性             

c:remove 用于删除各种Web域中的属性
c:catch 用于捕获嵌套在标签体中的内容抛出的异常
c:if 用户java代码if(){}语句功能
c:choose 用于指定多个条件选择的组合边界,它必须与c:when和c:otherwise标签一起使用
c:forEach 用户代替java代码for循环语句
c:forTokens 用户迭代操作String字符
c:param 给请求路径添加参数
c:url 重写url,在请求路径添加sessionid
c:import 用于在JSP页面中导入一个URL地址指向的资源内容
c:redirect 用于将当前的访问请求转发或重定向到其他资源

2、JSTL标签应用

2.1 安装JSTL

我们知道JSTL标签是将一段java代码功能封装成一个标签来使用。所以,我们使用JSTL标签之前必须导入被封装的java代码---jar包。JSTL标签库主要依赖以下两个jar包:

在这里插入图片描述

我们在IDEA的web项目的WEB-INF目录下创建一个lib文件夹,然后将jar包复制到这个文件夹里。选中这些jar包,右键---add as library即可将jar包导入到项目中。

2.2 将标签库资源引入JSP页面

在JSP页面中通过以下标签,通过taglib标签引入JSTL资源: 

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

【注意】

  1. prefix:是jstl标签在使用的时候的前缀;
  2. uri:是标签库的资源路径;

2.3 在JSP页面中使用JSTL标签

在JSP页面中书写"<c: ",如果出现如下图的提示则说明标签库引入成功,我们可以根据提示信息使用自己需要的标签。
在这里插入图片描述

【代码示例】

<%@ 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>
   <%--c:out 就相当于out.print("")--%>
    <c:out value="传智播客"></c:out>
</body>
</html>

3、常用JSTL标签

3.1、c:if标签

3.1.1 作用

<c:if>标签的作用相当于java中的if判断语句。

3.1.3 属性

test:if的判断条件

3.1.2 使用示例

【案例】完善登录案例,成功页面

【需求】在success.jsp页面上进行如下判断

  1. 使用<c:if> 标签判断session中的用户信息是否为空;
  2. 如果不为空:获取session中的用户信息,并将其展示在页面上;
  3. 如果为空:提示用户登录;

【代码实现】

<%@ page import="com.heima.pojo.Student" %>
<%@ 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>
    <h1>首页 -- JSP页面</h1>

    <%--
        判断session中的loginUser是否为空:
        1.如果不为空,获取session中的信息,并将用户名显示在页面上;
        2.如果为空,则提示用户登录;
    --%>

    <c:if test="${not empty loginUser}">
        <h3>欢迎您!${loginUser.userName}</h3>
    </c:if>
    <c:if test="${empty loginUser}">
        <h3>对不起,请先<a href="login.html">登录</a></h3>
    </c:if>
</body>
</html>

3.2 c:foreach标签

3.2.1 c:foreach标签的作用

<c:foreach >标签的作用相当于java中的for循环。主要是对数组和集合进行遍历。

3.2.2 c:foreach标签的属性
在这里插入图片描述

var:在不循环对象的时候,保存的是控制循环的变量;在循环对象的时候,保存的是被循环对象中的元素
items:指定要循环的对象
varStatus:保存了当前循环过程中的信息(循环的开始、结束、步长、次数等)
begin:设置循环的开始
end:设置循环的结束
step:设置步长——间隔几次循环,执行一次循环体中的内容

3.2.3 c:foreach标签的使用

【案例】c:foreach遍历案例

【需求】

  1. 遍历普通数组;
  2. 遍历实体类对象list集合;
  3. 遍历map集合;

【需求一】遍历普通数组

    <%--
        需求一:遍历普通数组
    --%>
    <%
        String[] strArr = new String[5];
        strArr[0] = "hello";
        strArr[1] = "world";
        strArr[2] = "传智";
        strArr[3] = "播客";
        strArr[4] = "黑马";
        request.setAttribute("strArr",strArr);
    %>

<c:forEach items="${strArr}" var="str">
    ${str} <br>
</c:forEach>

【需求二】遍历Student的list集合

<%--
    需求二:遍历Student的list集合
--%>

<%
    List<Student> stuList = new ArrayList<>();
    Student stu1 = new Student(1, "张三1", "123");
    Student stu2 = new Student(2, "张三2", "123");
    Student stu3 = new Student(3, "张三3", "123");
    stuList.add(stu1);
    stuList.add(stu2);
    stuList.add(stu3);
   request.setAttribute("stus",stuList);
%>

<c:forEach items="${stus}" var="stu">
    ${stu.name} <br>
</c:forEach>

【需求三】遍历map集合

<%
    Map<String, String> map = new HashMap<>();
    map.put("张三", "123");
    map.put("李四", "123");
    map.put("王五", "123");
    request.setAttribute("maps",map);
%>

<c:forEach items="${maps}" var="stuMap">
    ${stuMap.key} = ${stuMap.value}<br>
</c:forEach>

第四章 JSP的发展

1、model1时代—一个JSP页面搞定前端和后台

JSP技术主要用来简化动态网页的开发过程,由于它在形式上和html文档比较相似,因此与Servlet相比,用JSP来编写动态网页更加直观。  

2、弱化在JSP页面书写java代码

但是,当网页非常复杂时,JSP文件中的大量的html标记和java程序片段混杂在一起,会大大削弱JSP代码的可读性和可维护性,而且会增加调试JSP文件的难度。于是,出现了EL表达式帮助我们在JSP页面上简化从容器中取值的操作。【EL表达式】---简化取值

如果是在JSP页面上处理一些业务逻辑,JSTL标签库给我们提供了一个解决思路。将java代码封装成标签。直接在JSP页面书写标签,如<c:if> 即可完成相应逻辑。【JSTL标签库】---将java代码封装成标签。

3、服务器渲染和前端渲染(科普)

开发网站,网站页面渲染你知道吗?

关键字: 服务器渲染(后端渲染)

服务器渲染(后端渲染)
浏览器发送请求到服务器端,服务器端处理请求并处理好数据,然后生成html文件,并返回给浏览器。 

传统的jsp、php都是属于服务器渲染。

关键字: 前端渲染

客户端渲染(前端渲染)

服务器端处理请求后将数据返回给浏览器,浏览器通过拼接html字符串或者使用js模板引擎,或者React这类框架进行页面渲染,又称作 : 局部渲染

前端渲染的优势:
1. 局部更新页面,无需每次都进行完整页面请求
2. 懒加载。页面初始时只加载可视区域内的数据,随着滚动等操作再加载其他数据
3. 节约服务器成本。
4. 关注分离设计。服务器只用于访问数据库提供接口,前端关注展现。
5. 富交互,使用 JS 实现各种酷炫效果

前后端分离(前端渲染)未来视图层的趋势。

前端框架: Vue      React       AngularJS     NodeJS  
前后台分离(前端):
		前端:html js
		后台:写接口(web-service-dao 一整套实现)

第五章 小结

JSP:
	概述:
		1、JSP作用:书写html代码+java代码;
		2、JSP概念:动态网页技术;本质是一个Servlet;
	JSP页面书写代码:
		html代码:直接书写html标签;
		java代码:
			脚本片段:
				格式:<%  java代码片段     %>
				特点:翻译到service方法中
				
			脚本表达式:
				格式:<%= str %> <%=request.getAttribute("name") %>
				作用:response.getWriter().print("aa");
				特点:翻译到service方法中
				
			脚本声明:
				格式:<%! int a = 10 %>
				作用:定义成员变量或方法
				特点:成员位置

EL:
	概述:
		1、作用:简化取值(四大域,cookie);
		2、写法: ${域对象.name}
 	取值:
 		1、jsp的四大域: pageContext,request,session,servletContext;
 		2、指定域取值:
 				${pageScope.name} ---
 		3、EL搜索:${name}     从小到大
		4、EL从cookie中取值:
				${cookie.cookieName}
				${cookie.cookieName.name}
				${cookie.cookieName.value}
		5、empty运算:判空   ${empty obj}
				字符串: ""
				集合:空集合 size=0
				对象:null
JSTL:	
	概述:
		1、作用:简化java通用的业务操作,把java的通用代码封装成标签;
		2、使用:
			1、导入jar包:2个
			2、在jsp页面中导入jstl的名称空间;
			3、书写jstl标签: <c:if></c:if>
	c:if
    	写法:<c:if></c:if>
    	特点:
    		true:标签中的内容生效
    		fale:标签中的内容不生效
    	属性:test
    		<c:if test=${true}>aaaaaa</c:if>
    c:forEach:遍历
    	写法:
    		1、forEach:   <c:forEach  items=${strArr} var=str >  ${str}  </c:forEach>
    		2、for i  :   <c:forEach begin=0 end=10 var=i >  ${i}  </c:forEach>
  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值