03-10 JSP

JSP

今日目标：

理解 JSP 及 JSP 原理
能在 JSP中使用 EL表达式 和 JSTL标签
理解 MVC模式 和 三层架构
能完成品牌数据的增删改查功能

4，JSP 脚本

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

4.1 JSP 脚本分类

JSP 脚本有如下三个分类：

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

代码演示：

在 hello.jsp 中书写










xxxxxxxxxx





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

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

在 hello.jsp 中书写










xxxxxxxxxx





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

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

在 hello.jsp 中书写










xxxxxxxxxx





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

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

4.2 案例

4.2.1 需求

使用JSP脚本展示品牌数据

说明：

在资料 资料\1. JSP案例素材 中提供了 brand.html 静态页面
在该案例中数据不从数据库中查询，而是在 JSP 页面上写死

4.2.2 实现

将资料 资料\1. JSP案例素材 中的 Brand.java 文件放置到项目的 com.itheima.pojo 包下

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










xxxxxxxxxx





<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="新增"><br>
<hr>
    <table border="1" cellspacing="0" width="800">
        <tr>
            <th>序号</th>
            <th>品牌名称</th>
            <th>企业名称</th>
            <th>排序</th>
            <th>品牌介绍</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <tr align="center">
            <td>1</td>
            <td>三只松鼠</td>
            <td>三只松鼠</td>
            <td>100</td>
            <td>三只松鼠，好吃不上火</td>
            <td>启用</td>
            <td><a href="#">修改</a> <a href="#">删除</a></td>
        </tr>
        <tr align="center">
            <td>2</td>
            <td>优衣库</td>
            <td>优衣库</td>
            <td>10</td>
            <td>优衣库，服适人生</td>
            <td>禁用</td>
            <td><a href="#">修改</a> <a href="#">删除</a></td>
        </tr>
        <tr align="center">
            <td>3</td>
            <td>小米</td>
            <td>小米科技有限公司</td>
            <td>1000</td>
            <td>为发烧而生</td>
            <td>启用</td>
            <td><a href="#">修改</a> <a href="#">删除</a></td>
        </tr>
    </table>
</body>
</html>

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

在 brand.jsp 中准备一些数据










xxxxxxxxxx





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

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

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










xxxxxxxxxx





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

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










xxxxxxxxxx





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

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

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










xxxxxxxxxx





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

4.2.3 成品代码










xxxxxxxxxx





<%@ 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<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));
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="新增"><br>
<hr>
<table border="1" cellspacing="0" width="800">
    <tr>
        <th>序号</th>
        <th>品牌名称</th>
        <th>企业名称</th>
        <th>排序</th>
        <th>品牌介绍</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    <%
        for (int i = 0; i < brands.size(); i++) {
            Brand brand = brands.get(i);
    %>
    <tr align="center">
        <td><%=brand.getId()%></td>
        <td><%=brand.getBrandName()%></td>
        <td><%=brand.getCompanyName()%></td>
        <td><%=brand.getOrdered()%></td>
        <td><%=brand.getDescription()%></td>
        <td><%=brand.getStatus() == 1 ? "启用":"禁用"%></td>
        <td><a href="#">修改</a> <a href="#">删除</a></td>
    </tr>
    <%
        }
    %>
</table>
</body>
</html>

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== 来替代。Ajax 是我们后续会重点学习的技术。有个这个技术后，前端工程师负责前端页面开发，而后端工程师只负责前端代码开发。下来对技术的发展进行简单的说明

第一阶段：使用 servlet 即实现逻辑代码编写，也对页面进行拼接。这种模式我们之前也接触过
第二阶段：随着技术的发展，出现了 JSP ，人们发现 JSP 使用起来比 Servlet 方便很多，但是还是要在 JSP 中嵌套 Java 代码，也不利于后期的维护
第三阶段：使用 Servlet 进行逻辑代码开发，而使用 JSP 进行数据展示
第四阶段：使用 servlet 进行后端逻辑代码开发，而使用 HTML 进行数据展示。而这里面就存在问题，HTML 是静态页面，怎么进行动态数据展示呢？这就是 ajax 的作用了。

那既然 JSP 已经逐渐的退出历史舞台，那我们为什么还要学习 JSP 呢？原因有两点：

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

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