JavaWeb基础(四) JSP介绍

JavaWeb基础(四) JSP介绍

1，JSP 概述

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

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

2，JSP 快速入门

接下来我们做一个简单的快速入门代码。

2.1 搭建环境

pom.xml 文件内容如下：

<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0modelVersion>

    <groupId>org.examplegroupId>
    <artifactId>jsp-demoartifactId>
    <version>1.0-SNAPSHOTversion>
    <packaging>warpackaging>

    <properties>
        <maven.compiler.source>8maven.compiler.source>
        <maven.compiler.target>8maven.compiler.target>
    properties>

    <dependencies>
      <dependency>
            <groupId>javax.servletgroupId>
            <artifactId>javax.servlet-apiartifactId>
            <version>3.1.0version>
            <scope>providedscope>
        dependency>
    dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.tomcat.mavengroupId>
                <artifactId>tomcat7-maven-pluginartifactId>
                <version>2.2version>
            plugin>
        plugins>
    build>
project>

2.2 导入 JSP 依赖

在 dependencies 标签中导入 JSP 的依赖，如下

<dependency>
    <groupId>javax.servlet.jspgroupId>
    <artifactId>jsp-apiartifactId>
    <version>2.2version>
    <scope>providedscope>
dependency>

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

2.3 创建 jsp 页面

在项目的 webapp 下创建jsp页面

通过上面方式创建一个名为 hello.jsp 的页面。

2.4 编写代码

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

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


    


    
hello jsp

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

2.5 测试

启动服务器并在浏览器地址栏输入 http://localhost:8080/jsp-demo/hello.jsp

3，JSP 原理

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

因为 ==JSP 本质上就是一个 Servlet。

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

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

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

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

4，JSP 脚本

4.1 JSP 脚本分类

JSP 脚本有如下三个分类：

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

代码演示：

在 hello.jsp 中书写

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

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

在 hello.jsp 中书写

<%="hello"%>
<%=i%>

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

在 hello.jsp 中书写

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

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

4.2 案例

4.2.1 需求

使用JSP脚本展示品牌数据

4.2.2 实现

brand.jsp 内容如下

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



    
    





    

        

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

        
        

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

        

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

            
修改 删除
        

        

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

            
修改 删除
        
    

现在页面中的数据都是假数据。

• 在 brand.jsp 中准备一些数据

  <%
      // 查询数据库
      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));
  %>
  

  ==注意：==这里的类是需要导包的

• 将 brand.jsp 页面中的 table 标签中的数据改为动态的

  
      
      <%
       for (int i = 0; i < brands.size(); i++) {
           //获取集合中的 每一个 Brand 对象
           Brand brand = brands.get(i);
       }
      %>
      
  
      
  
          
  序号
          
  品牌名称
          
  企业名称
          
  排序
          
  品牌介绍
          
  状态
          
  操作
  
      
  
          
  1
          
  三只松鼠
          
  三只松鼠
          
  100
          
  三只松鼠，好吃不上火
          
  启用
          
  修改 删除
      
  
  

  上面的for循环需要将 tr 标签包裹起来，这样才能实现循环的效果，代码改进为

  
      
      <%
       for (int i = 0; i < brands.size(); i++) {
           //获取集合中的 每一个 Brand 对象
           Brand brand = brands.get(i);
      %>
      	 
      <%
       }
      %>
     
  
      
  
          
  序号
          
  品牌名称
          
  企业名称
          
  排序
          
  品牌介绍
          
  状态
          
  操作
  
      
  
              
  1
              
  三只松鼠
              
  三只松鼠
              
  100
              
  三只松鼠，好吃不上火
              
  启用
              
  修改 删除
          
  

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

  上面代码中的 td 标签中的数据都需要是动态的，所以还需要改进

  
      
      <%
       for (int i = 0; i < brands.size(); i++) {
           //获取集合中的 每一个 Brand 对象
           Brand brand = brands.get(i);
      %>
      	 
      <%
       }
      %>
     
  
      
  
          
  序号
          
  品牌名称
          
  企业名称
          
  排序
          
  品牌介绍
          
  状态
          
  操作
  
      
  
              
  <%=brand.getId()%>
              
  <%=brand.getBrandName()%>
              
  <%=brand.getCompanyName()%>
              
  <%=brand.getOrdered()%>
              
  <%=brand.getDescription()%>
              
  <%=brand.getStatus() == 1 ? "启用":"禁用"%>
              
  修改 删除
          
  

4.2.3 成品代码

<%@ 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);
    %>

    

    <%
        }
    %>

    

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

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

4.2.4 测试

在浏览器地址栏输入 http://localhost:8080/jsp-demo/brand.jsp

4.3 JSP 缺点

通过上面的案例，我们可以看到 JSP 的很多缺点。

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

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

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

• 阅读麻烦

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

• 复杂度高：运行需要依赖于各种环境，JRE，JSP容器，JavaEE…

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

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

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

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

由于上述的问题， ==JSP 已逐渐退出历史舞台，==以后开发更多的是使用 HTML + Ajax 来替代。有个这个技术后，前端工程师负责前端页面开发，而后端工程师只负责前端代码开发。

• 一些公司可能有些老项目还在用 JSP ，所以要求我们必须动 JSP
• 我们如果不经历这些复杂的过程，就不能体现后面阶段开发的简单

接下来学习第三阶段，使用 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);
      }
  }
  

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

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

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

• 在浏览器的地址栏输入 http://localhost:8080/jsp-demo/demo1

5.3 域对象

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

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

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

例如： ${brands}，el 表达式获取数据，会先从page域对象中获取数据，如果没有再到 requet 域对象中获取数据，如果再没有再到 session 域对象中获取，如果还没有才会到 application 中获取数据。

6，JSTL标签

6.1 概述

JSP标准标签库(Jsp Standarded Tag Library) ，使用标签取代JSP页面上的Java代码。如下代码就是JSTL标签

    男


    女

JSTL 提供了很多标签，如下图

我们只对两个最常用的标签进行讲解， 标签和 标签。

JSTL 使用也是比较简单的，分为如下步骤：

• 导入坐标

  <dependency>
      <groupId>jstlgroupId>
      <artifactId>jstlartifactId>
      <version>1.2version>
  dependency>
  <dependency>
      <groupId>taglibsgroupId>
      <artifactId>standardartifactId>
      <version>1.1.2version>
  dependency>
  

• 在JSP页面上引入JSTL标签库

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

• 使用标签

6.2 if 标签

：相当于 if 判断

• 属性：test，用于定义条件表达式

    男


    女

代码演示：

• 定义一个 servlet ，在该 servlet 中向 request 域对象中添加 键是 status ，值为 1 的数据

  @WebServlet("/demo2")
  public class ServletDemo2 extends HttpServlet {
      @Override
      protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
          //1. 存储数据到request域中
          request.setAttribute("status",1);
  
          //2. 转发到 jstl-if.jsp
          数据request.getRequestDispatcher("/jstl-if.jsp").forward(request,response);
      }
  
      @Override
      protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
          this.doGet(request, response);
      }
  }
  

• 定义 jstl-if.jsp 页面，在该页面使用 标签

  <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  
  
      
  
  
      <%--
          c:if：来完成逻辑判断，替换java  if else
      --%>
      
          启用
      
  
      
          禁用
      
  
  
  

  注意： 在该页面已经要引入 JSTL核心标签库

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

6.3 forEach 标签

：相当于 for 循环。java中有增强for循环和普通for循环，JSTL 中的 也有两种用法

6.3.1 用法一

类似于 Java 中的增强for循环。涉及到的 中的属性如下

• items：被遍历的容器

• var：遍历产生的临时变量

• varStatus：遍历状态对象

如下代码，是从域对象中获取名为 brands 数据，该数据是一个集合；遍历遍历，并给该集合中的每一个元素起名为 brand，是 Brand对象。在循环里面使用 EL表达式获取每一个Brand对象的属性值

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

代码演示：

• servlet 还是使用之前的名为 ServletDemo1 。

• 定义名为 jstl-foreach.jsp 页面，内容如下：

  <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  
  
  
  
      
      
  
  
  
  
  
  
          
              <%----%>
              
                  
                  
  
      
  
          
  序号
          
  品牌名称
          
  企业名称
          
  排序
          
  品牌介绍
          
  状态
          
  操作
      
  
      
  ${brand.id}
  ${status.count}
              
  ${brand.brandName}
              
  ${brand.companyName}
              
  ${brand.ordered}
              
  ${brand.description}
              
  启用
              
              
  禁用
              
              
  修改 删除
          
      
  
  
  
  

6.3.2 用法二

类似于 Java 中的普通for循环。涉及到的 中的属性如下

• begin：开始数

• end：结束数

• step：步长

实例代码：

从0循环到10，变量名是 i ，每次自增1

    ${i}

7，MVC模式和三层架构

7.1 MVC模式

MVC 是一种分层开发的模式，其中：

• M：Model，业务模型，处理业务

• V：View，视图，界面展示

• C：Controller，控制器，处理请求，调用模型和视图

控制器（serlvlet）用来接收浏览器发送过来的请求，控制器调用模型（JavaBean）来获取数据，比如从数据库查询数据；控制器获取到数据后再交由视图（JSP）进行数据展示。

MVC 好处：

• 职责单一，互不影响。每个角色做它自己的事，各司其职。

• 有利于分工协作。

• 有利于组件重用

7.2 三层架构

三层架构是将我们的项目分成了三个层面，分别是 表现层、业务逻辑层、数据访问层。

• 数据访问层：对数据库的CRUD基本操作
• 业务逻辑层：对业务逻辑进行封装，组合数据访问层层中基本功能，形成复杂的业务逻辑功能。例如 注册业务功能 ，我们会先调用 数据访问层 的 selectByName() 方法判断该用户名是否存在，如果不存在再调用 数据访问层 的 insert() 方法进行数据的添加操作
• 表现层：接收请求，封装数据，调用业务逻辑层，响应数据

而整个流程是，浏览器发送请求，表现层的Servlet接收请求并调用业务逻辑层的方法进行业务逻辑处理，而业务逻辑层方法调用数据访问层方法进行数据的操作，依次返回到serlvet，然后servlet将数据交由 JSP 进行展示。

三层架构的每一层都有特有的包名称：

• 表现层： com.yyds.controller 或者 com.yyds.web
• 业务逻辑层：com.yyds.service
• 数据访问层：com.yyds.dao 或者 com.yyds.mapper

7.3 MVC 和 三层架构

如上图上半部分是 MVC 模式，上图下半部分是三层架构。 MVC 模式 中的 C（控制器）和 V（视图）就是 三层架构 中的表现层，而 MVC 模式 中的 M（模型）就是 三层架构 中的 业务逻辑层 和 数据访问层。

可以将 MVC 模式 理解成是一个大的概念，而 三层架构 是对 MVC 模式 实现架构的思想。 那么我们以后按照要求将不同层的代码写在不同的包下，每一层里功能职责做到单一，将来如果将表现层的技术换掉，而业务逻辑层和数据访问层的代码不需要发生变化。