demo08-jsp

1，JSP 概述

==JSP（全称：Java Server Pages）：Java 服务端页面。==是一种动态的网页技术，其中既可以定义 HTML、JS、CSS等静态内容，还可以定义 Java代码的动态内容，也就是 JSP = HTML + Java。如下就是jsp代码

    
        
    
    
        
JSP,Hello World
        <%
        	System.out.println("hello,jsp~");
        %>
    

1
2
3
4
5
6
7
8
9
10
11

上面代码 h1 标签内容是展示在页面上，而 Java 的输出语句是输出在 idea 的控制台。

那么，JSP 能做什么呢:

• 现在我们只用 servlet 实现功能，看存在什么问题:当我们登陆某网站成功后，需要在页面上展示用户名,那么就需要在servlet中直接输出HTML标签:
  • 大量使用到 writer 对象向页面写标签内容

• 当我们用了jsp后就可以直接在html页面中编写代码,页面里面基本都是 HTML 标签，而动态数据使用 Java 代码进行展示；这样操作看起来要比用 servlet 实现要舒服很多

我们也就知道了jsp的作用了:简化开发，避免了在Servlet中直接输出HTML标签

2，JSP 快速入门

2.1 导入 JSP 依赖

在pom.xml中导入jsp依赖坐标

<dependency>
    <groupId>javax.servletgroupId>
    <artifactId>javax.servlet-apiartifactId>
    <version>3.1.0version>
    <scope>providedscope>
dependency>
1
2
3
4
5
6

该依赖的 scope 必须设置为 provided，因为 tomcat 中有这个jar包了，所以在打包时我们是不希望将该依赖打进到我们工程的war包中。

2.2 创建 jsp 页面

在项目的 webapp 下创建jsp页面,命名为hello.jsp

2.3 编写代码

在 hello.jsp 页面中书写 HTML 标签和 Java 代码，如下

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


    


    
hello jsp
    <%
        System.out.println("hello,jsp~");
    %>


1
2
3
4
5
6
7
8
9
10
11
12

启动服务器并在浏览器地址栏输入 http://localhost:8080/demo07-jsp/hello.jsp进行测试

3，JSP 原理

我们之前说 JSP 就是一个页面，那么在 JSP 中写 html 标签，我们能理解，但是为什么还可以写 Java 代码呢？

因为 ==JSP 本质上就是一个 Servlet。==接下来我们聊聊访问jsp时的流程

1. 浏览器第一次访问 hello.jsp 页面
2. jsp容器(tomcat) 会将 hello.jsp 转换为名为 hello_jsp.java 的一个 Servlet
3. jsp容器(tomcat) 再将转换的 servlet 编译成字节码文件 hello_jsp.class
4. tomcat 会执行该字节码文件，向外提供服务

我们可以到项目所在磁盘目录下找target\tomcat\work\Tomcat\localhost\demo07-jsp\org\apache\jsp 目录，而这个目录下就能看到转换后的 servlet:hello_jsp.java

打开 hello_jsp.java 文件，来查看里面的代码

由上面的类的继承关系可以看到继承了名为 HttpJspBase 这个类，那我们再看该类的继承关系:打开tomcat源码,找到:java\org\apache\jasper\runtime ，该目录下就有 HttpJspBase 类，查看该类的继承关系

可以看到该类继承了 HttpServlet ；那么 hello_jsp 这个类就间接的继承了 HttpServlet ，也就说明 hello_jsp 是一个 servlet。

继续阅读 hello_jsp 类的代码，可以看到有一个名为 _jspService() 的方法，该方法就是每次访问 jsp 时自动执行的方法，和 servlet 中的 service 方法一样 。

而在 _jspService() 方法中可以看到往浏览器写标签的代码：

以前我们自己写 servlet 时，这部分代码是由我们自己来写，现在有了 jsp 后，由tomcat完成这部分功能。

4，JSP 脚本

JSP脚本用于在 JSP页面内定义 Java代码。在之前的入门案例中我们就在 JSP 页面定义的 Java 代码就是 JSP 脚本。

4.1 JSP 脚本分类

JSP 脚本有如下三个分类：

• <%…%>：内容会直接放到_jspService()方法之中
• <%=…%>：内容会放到out.print()中，作为out.print()的参数
• <%!…%>：内容会放到_jspService()方法之外，被类直接包含

代码演示：

在 hello.jsp 中书写

<%
    System.out.println("hello,jsp~");
    int i = 3;
%>
1
2
3
4

通过浏览器访问 hello.jsp 后，查看转换的 hello_jsp.java 文件，i 变量定义在了 _jspService() 方法中

在 hello.jsp 中书写

<%="hello"%>
<%=i%>
1
2

通过浏览器访问 hello.jsp 后，查看转换的 hello_jsp.java 文件，该脚本的内容被放在了 out.print() 中，作为参数

在 hello.jsp 中书写

<%!
    void  show(){}
	String name = "zhangsan";
%>
1
2
3
4

通过浏览器访问 hello.jsp 后，查看转换的 hello_jsp.java 文件，该脚本的内容被放在了成员位置

4.2 案例

4.2.1 需求

使用JSP脚本展示品牌数据

说明：

• 静态页面 brand.html已经提供
• 在该案例中数据不从数据库中查询，而是在 JSP 页面上写死

4.2.2 实现

• 在项目的 com.itheima.pojo 包下编写实体类

public class Brand {
    // id 主键
    private Integer id;
    // 品牌名称
    private String brandName;
    // 企业名称
    private String companyName;
    // 排序字段
    private Integer ordered;
    // 描述信息
    private String description;
    // 状态：0：禁用  1：启用
    private Integer status;
    
    /*
    有参无参构造
    getter和setter方法
    toString方法
    */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

• 在项目的 webapp 中创建 brand.jsp ，并将 brand.html页面中的内容拷贝过来。brand.jsp 内容如下

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



    
    





    

        

            
序号
            
品牌名称
            
企业名称
            
排序
            
品牌介绍
            
状态
            
操作

        
        

            
1
            
三只松鼠
            
三只松鼠
            
100
            
三只松鼠，好吃不上火
            
启用
            
修改 删除
        

        

            
2
            
优衣库
            
优衣库
            
10
            
优衣库，服适人生
            
禁用

            
修改 删除
        

        

            
3
            
小米
            
小米科技有限公司
            
1000
            
为发烧而生
            
启用

            
修改 删除
        
    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

• 修改brand.jsp代码:

<%@ page import="com.itheima.pojo.Brand" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%
    // 查询数据库
    List brands = new ArrayList();
    brands.add(new Brand(1,"三只松鼠","三只松鼠",100,"三只松鼠，好吃不上火",1));
    brands.add(new Brand(2,"优衣库","优衣库",200,"优衣库，服适人生",0));
    brands.add(new Brand(3,"小米","小米科技有限公司",1000,"为发烧而生",1));

%>



    
    






    <%
        for (int i = 0; i < brands.size(); i++) {
            Brand brand = brands.get(i);
    %>
    
    
        <%
            if(brand.getStatus() == 1){
                //显示启用
        %>
            
        <%
            }else {
                // 显示禁用
        %>
            
        <%
            }
        %>
        

    <%
        }
    %>

    

        
序号
        
品牌名称
        
企业名称
        
排序
        
品牌介绍
        
状态
        
操作
    

        
<%=brand.getId()%>
        
<%=brand.getBrandName()%>
        
<%=brand.getCompanyName()%>
        
<%=brand.getOrdered()%>
        
<%=brand.getDescription()%>
<%="启用"%>
<%="禁用"%>
修改 删除
    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

注意：

• 这里的类是需要导包的

• <%%> 里面写的是 Java 代码，而外边写的是 HTML 标签

• 其中第44-55行的代码可以进行简化:

  <%=brand.getStatus() == 1 ? "启用":"禁用"%>
  1

  对应的tomcat处理后的servlet是:

  out.print(brand.getStatus() == 1 ? "启用":"禁用");
  1

4.2.3测试

启动项目,在地址栏输入http://localhost:8080/demo07-jsp/brand.jsp进行测试

看一下tomcat为我们转换后的servlet(brand_jsp.java)部分代码:

4.3 JSP 缺点

由于 JSP页面内，既可以定义 HTML 标签，又可以定义 Java代码，造成了以下问题：

• 书写麻烦：特别是复杂的页面

  既要写 HTML 标签，还要写 Java 代码

• 阅读麻烦

  上面案例的代码，相信你后期再看这段代码时还需要花费很长的时间去梳理

• 复杂度高：因为jsp本质是一个servlet,运行需要依赖于各种环境，JRE，JSP容器(负责将jsp转为java并进行编译)，JavaEE…

• 占内存和磁盘：JSP会自动生成.java和.class文件占磁盘，运行的是.class文件占内存

• 调试困难：出错后，需要找到自动生成的.java文件进行调试

• 不利于团队协作：前端人员不会 Java，后端人员不精 HTML

  如果页面布局发生变化，前端工程师对静态页面进行修改，然后再交给后端工程师，由后端工程师再将该页面改为 JSP 页面

由于上述的问题， ==JSP 已逐渐退出历史舞台，==以后开发更多的是使用 HTML + Ajax 来替代。Ajax 是我们后续会重点学习的技术。有个这个技术后，前端工程师负责前端页面开发，而后端工程师只负责前端代码开发。下来对技术的发展进行简单的说明

1. 第一阶段：使用 servlet 即实现逻辑代码编写，也对页面进行拼接。这种模式我们之前也接触过

2. 第二阶段：随着技术的发展，出现了 JSP ，人们发现 JSP 使用起来比 Servlet 方便很多，但是还是要在 JSP 中嵌套 Java 代码，也不利于后期的维护

3. 第三阶段：使用 Servlet 进行逻辑代码开发，而使用 JSP 进行数据展示

4. 第四阶段：使用 servlet 进行后端逻辑代码开发，而使用 HTML 进行数据展示。而这里面就存在问题，HTML 是静态页面，怎么进行动态数据展示呢？这就是 ajax 的作用了。

接下来我们来学习第三阶段，使用 EL表达式 和 JSTL 标签库替换 JSP 中的 Java 代码。

5，EL 表达式

5.1 概述

EL（全称Expression Language ）表达式语言，用于简化 JSP 页面内的 Java 代码。

EL 表达式的主要作用是 获取数据。其实就是从域对象中获取数据，然后将数据展示在页面上。

而 EL 表达式的语法也比较简单，==$expression==。例如：${brands} 就是获取域中存储的 key 为 brands 的数据。

5.2 代码演示

• 定义servlet，在 servlet 中封装一些数据并存储到 request 域对象中并转发到 el-demo.jsp 页面。

  @WebServlet("/demo1")
  public class ServletDemo1 extends HttpServlet {
      @Override
      protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
          //1. 准备数据
          List<Brand> brands = new ArrayList<Brand>();
          brands.add(new Brand(1,"三只松鼠","三只松鼠",100,"三只松鼠，好吃不上火",1));
          brands.add(new Brand(2,"优衣库","优衣库",200,"优衣库，服适人生",0));
          brands.add(new Brand(3,"小米","小米科技有限公司",1000,"为发烧而生",1));
  
          //2. 存储到request域中
          request.setAttribute("brands",brands);
  
          //3. 转发到 el-demo.jsp
          request.getRequestDispatcher("/el-demo.jsp").forward(request,response);
      }
      @Override
      protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
          this.doGet(request, response);
      }
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21

  注意： 此处需要用转发，因为转发才可以使用 request 对象作为域对象进行数据共享

• 在 el-demo.jsp 中通过 EL表达式 获取数据

  <%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
  
  
      
  
  
      ${brands}
  
  
  1
  2
  3
  4
  5
  6
  7
  8
  9

  • 注意第一行要给page标签加上isELIgnored="false"表示不忽略el表达式

  • 第7行的${brands}实际上就相当于:

    <%=
        request.getAttribute("brands")
    %>
    1
    2
    3

    但是呢,在jsp中最好不要直接写java代码,而是用el表达式和jstl标签替换

• 在浏览器的地址栏输入 http://localhost:8080/demo07-jsp/demo1 进行测试

5.3 域对象

JavaWeb中有四大域对象，分别是：

• page：当前页面有效
• request：当前请求有效
• session：当前会话有效
• application：当前应用有效

el 表达式获取数据，会依次从这4个域中寻找，直到找到为止。这四个域对象的作用范围:page

    男


    女

1
2
3
4
5
6

<dependency>
    <groupId>jstlgroupId>
    <artifactId>jstlartifactId>
    <version>1.2version>
dependency>
<dependency>
    <groupId>taglibsgroupId>
    <artifactId>standardartifactId>
    <version>1.1.2version>
dependency>
1
2
3
4
5
6
7
8
9
10

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

    男


    女

1
2
3
4
5
6

@WebServlet("/demo2")
public class ServletDemo2 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setAttribute("status",1);
        数据request.getRequestDispatcher("/jstl-if.jsp").forward(request,response);
    }
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


    


    <%--
        c:if：来完成逻辑判断，替换java  if else
    --%>
    
        启用
    

    
        禁用
    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

    
        ${brand.id}
        ${brand.brandName}
        ${brand.companyName}
        ${brand.description}
    

1
2
3
4
5
6
7
8

    ${i}

1
2
3

@WebServlet("/demo1")
public class ServletDemo1 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        List<Brand> brands = new ArrayList<Brand>();
        brands.add(new Brand(1,"三只松鼠","三只松鼠",100,"三只松鼠，好吃不上火",1));
        brands.add(new Brand(3,"优衣库","优衣库",200,"优衣库，服适人生",0));
        brands.add(new Brand(4,"小米","小米科技有限公司",1000,"为发烧而生",1));
        request.setAttribute("brands",brands);
        request.getRequestDispatcher("/jstl-foreach.jsp").forward(request,response);
    }
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>



    
    






        
<%--            --%>
<%--            --%>
            
                
                

    

        
序号
        
品牌名称
        
企业名称
        
排序
        
品牌介绍
        
状态
        
操作
    
    
${brand.id}
${status.index}
${status.count}
            
${brand.brandName}
            
${brand.companyName}
            
${brand.ordered}
            
${brand.description}
            
启用
            
            
禁用
            
            
修改 删除
        
    



    ${i}



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46