zoukankan      html  css  js  c++  java

  • JSP 学习笔记 | 二、JSP 脚本 & 案例实现 & 缺点分析

    前文：JSP 学习笔记 | 一、JSP 原理理解

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

    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 文件，该脚本的内容被放在了成员位置

    案例

    使用JSP脚本展示品牌数据

    注意：在该案例中数据不从数据库中查询，而是在 JSP 页面上写死

    案例实现

    • 编写 Brand.java 文件并放置在项目的 com.riotian.pojo 包下

      /**
 * 品牌实体类
 */

public class Brand {
    // id 主键
    private Integer id;
    // 品牌名称
    private String brandName;
    // 企业名称
    private String companyName;
    // 排序字段
    private Integer ordered;

    @Override
    public String toString() {
        return "Brand{" +
                "id=" + id +
                ", brandName='" + brandName + '\'' +
                ", companyName='" + companyName + '\'' +
                ", ordered=" + ordered +
                ", description='" + description + '\'' +
                ", status=" + status +
                '}';
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getBrandName() {
        return brandName;
    }

    public void setBrandName(String brandName) {
        this.brandName = brandName;
    }

    public String getCompanyName() {
        return companyName;
    }

    public void setCompanyName(String companyName) {
        this.companyName = companyName;
    }

    public Integer getOrdered() {
        return ordered;
    }

    public void setOrdered(Integer ordered) {
        this.ordered = ordered;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public Integer getStatus() {
        return status;
    }

    public void setStatus(Integer status) {
        this.status = status;
    }

    // 描述信息
    private String description;
    // 状态：0：禁用  1：启用
    private Integer status;

    public Brand() {
    }

    public Brand(Integer id, String brandName, String companyName, String description) {
        this.id = id;
        this.brandName = brandName;
        this.companyName = companyName;
        this.description = description;
    }

    public Brand(Integer id, String brandName, String companyName, Integer ordered, String description, Integer status) {
        this.id = id;
        this.brandName = brandName;
        this.companyName = companyName;
        this.ordered = ordered;
        this.description = description;
        this.status = status;
    }
}
      • 在项目的 webapp 中创建 brand.jsp ，并将下面内容拷贝过来。brand.jsp 内容如下
      <%@ 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 中准备一些数据，注意：这里的类是需要导包的

      <%
    // 查询数据库
    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 标签中的数据改为动态的

      <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 标签包裹起来，这样才能实现循环的效果，代码改进为

      <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 标签中的数据都需要是动态的，所以还需要改进

      <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>

    完整代码

    <%--
  Created by IntelliJ IDEA.
  User: 64129
  Date: 2021/12/5
  Time: 18:04
--%>

<%@ page import="com.riotian.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>Brand.jsp</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 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>

    运行测试

    在浏览器地址栏输入 http://localhost:8080/jsp-demo/brand.jsp ，页面展示效果如下

    JSP 缺点

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

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

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

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

    • 阅读麻烦

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

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

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

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

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

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

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

    image-20210818150346332

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

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

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

      image-20210818151232955

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

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

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

    The desire of his soul is the prophecy of his fate
    你灵魂的欲望，是你命运的先知。
  • 相关阅读:
    VA插件突然不能使用，彈出“the security key for....”
    【WIN10】Segoe MDL2 Assets
    【WIN10】WIN2D——圖層
    【WIN10】WIN2D——圖像處理
    【WIN10】WIN2D——繪製文字
    【WIN10】WIN2D——基本圖形的繪製
    為你的文件夾添加“使用CMD命令打開”菜單
    【WIN10】移植opencc到WIN10-UWP，實現自己的繁簡轉換工具
    【WIN10】判斷程序運行在哪個平台
    【WIN10】使用VS生成appx安裝包，並安裝測試
  • 原文地址：https://www.cnblogs.com/RioTian/p/15646434.html
Copyright © 2011-2022 走看看