JSP基础知识总结

Love The Way You Lie 2023-09-29 11:31 12阅读 0赞

## JSP学习笔记 ##

### 1.简介 ###

JSP：Java Server Page，是Java Web服务器端动态资源。

![image-20220127095402847][]

### 2.相关配置 ###

文件—>设置—>（搜索）编码—>都改成UTF-8

![image-20220216164532434][]

### 3.注释 ###

![image-20220127101050119][]

显示注释：能在客户端（网页源代码中）查看的注释

隐式注释：不能在客户端（网页源代码中）查看的注释

在jsp中自己的注释<%----%>

快捷键也为

Ctrl+/

--------------------

### 4.Scriptlet ###

![image-20220127102218484][]

1.  定义局部变量—生成的代码在servlet中的service的方法体中
2.  声明全局变量—生成的代码在servlet的方法体中
3.  输出表达式，可以输出变量或字面量—生成的代码在servlet的类体中

<%--第一种：Java脚本段，可以写Java的代码，定义局部变量，编写语句等--%>
    <%//定义局部变量
        String str= "Hello jsp";
        //输出内容到控制台
        System.out.println(str);
        //输出内容到浏览器
        out.print(str);
        //输出全局变量
        out.write("全局变量"+num);
    %>
    <%--第二种：声明，声明全局变量，方法，类等--%>
    <%!
    int num =10;
    %>
    <%--第三种：输出表达式，可以输出变量或字面量--%>
    <%=str%>

![image-20220127144636507][]

### 5.小问题—jsp中out.println报错 ###

*  应将Tomcat关联到File->Project Structure->modules->Dependencies

如图

![image-20220216164653698][]

选择library后点击确定

![image-20220216164702962][]

选择tomcat后点击add selected 再点击确定

### 6.include的静态包含 ###

在说包含之前，先来说说

#### 1.JSP指令标签 ####

![image-20220127150212844][]

#### 2.include静态包含 ####

![image-20220127152248713][]

格式：<%@include file="要包含的页面地址"%>

eg：

主文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>静态包含</title>
    </head>
    <body>
       <%@include file="04-head.jsp"%>
        <h2>主体部分</h2>
        <%@include file="04-foot.jsp"%>
    </body>
    </html>

04-head.jsp文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>头部</title>
    </head>
    <body>
    <h2>头部内容</h2>
    </body>
    </html>

04-foot.jsp文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>尾部</title>
    </head>
    <body>
    <h2>尾部内容</h2>
    </body>
    </html>

最后效果：

![image-20220127152029106][]

**特点：**

1.  **将内容直接替换**
2.  **静态包含只会生成一个源码文件，最终的全部在ispservlet方法体中（源码文件中）**
3.  不能出现同名变量（因为最终是把文件都拼接在一起的）
4.  运行效率高一点点，耦合度较高，不够灵活

--------------------

#### 3.include动态包含 ####

格式： <jsp:include page="要包含页面路径"></jsp:include>

主文件：

04-head.jsp文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>头部</title>
    </head>
    <body>
    <h2>头部内容</h2>
    </body>
    </html>

04-foot.jsp文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>尾部</title>
    </head>
    <body>
    <h2>尾部内容</h2>
    </body>
    </html>

最后效果：  
![image-20220127153412580][]

特点：

1.  动态包含相当于方法中的调用
2.  动态包含会生成多个源码文件
3.  可以定义同名变量
4.  效率高，耦合度低

注意：当动态包含不需要传递参数时，include双标签之间不要出现任何内容，包括换行和空格

eg：

![image-20220127153817174][]

在head文件后加入空格键

运行效果：

![image-20220127153905045][]  
原因：

因为当输入空格或者特殊符号时，这时候会把输入的内容看成参数

使用动态包含传递参数

<%--动态包含
        格式：
             <jsp:include page="要包含页面路径"></jsp:include>

<%--动态包含传递参数
         <jsp:include page="要包含的页面路径">
            <jsp:param name="参数名" value="参数值"/>
        </jsp:include>
        注：name属性不支持表达式，value支持表达式
        获取参数：
        requset.getParameter(name);通过指定的参数名获取参数值
        --%>

主函数：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>动态包含</title>
    </head>
    <body>
    
        <jsp:include page="04-head.jsp"></jsp:include>
        <h2>主题内容</h2>
        <%
            int a = 1;
        %>
        <jsp:include page="04-foot.jsp"></jsp:include>
    
        <%
            String str = "HEELO";
        %>
        <jsp:include page="04-foot.jsp">
            <jsp:param name="uname" value="admin"/>
            <jsp:param name="msg" value="<%=str%>"/>
        </jsp:include>
        </body>
    </html>

04-foot.jsp文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>尾部</title>
    </head>
    <body>
    <h2>尾部内容</h2>
    <%
        int a = 10;
        //获取动态包含传递的参数
        String uname = request.getParameter("uname");
        String msg =request.getParameter("msg");
        out.print(uname+","+msg);
    %>
    </body>
    </html>

04-head.jsp文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>头部</title>
    </head>
    <body>
    <h2>头部内容</h2>
    </body>
    </html>

![image-20220127162226981][]

--------------------

### 7.JSP的四大域对象 ###

![image-20220127162516743][]

**验证属性范围的特点**

![image-20220127162615205][]

![image-20220127162700268][]

JSP的四大域对象
      page作用域
        在当前页面跳转有效，跳转后无效
      request作用域
        在一次请求中有效，服务器端跳转有效，客户端跳转无效
      session作用域
        在一次会话中有效，服务器和客户端跳转有效
      qpplication作用域
        整个应用都有效
    
      JSP服务端跳转
      1.服务端跳转
      <jsp:forward page="跳转的页面地址"></jsp:forward>
      2.服务端跳转
      超链接<a href="跳转的页面地址">跳转</a>

(超链接跳转)主文件：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JSP的四大域对象</title>
    </head>
    <body>
        <%
      //设置page范围的域对象
      pageContext.setAttribute("name1","张三");
      //设置request对象
      request.setAttribute("name2","李四");
      //设置session范围对象
      session.setAttribute("name3","王五");
      //设置application范围的域对象
      application.setAttribute("name4","赵六");
    %>
            <a href="06-JSP的四大域对象-02.jsp">跳转</a>
    </body>
    </html>

06-JSP的四大域对象-02.jsp文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JSP的四大域对象</title>
    </head>
    <body>
      //获取与对象中的值
      out.print("page范围:"+pageContext.getAttribute("name1")+"<br>");
      out.print("page范围:"+request.getAttribute("name2")+"<br>");
      out.print("page范围:"+session.getAttribute("name3")+"<br>");
      out.print("page范围:"+application.getAttribute("name4")+"<br>");
    
    %>
    </body>
    </html>

运行结果:

![image-20220127193900686][]

![image-20220127193907482][]

--------------------

(服务端跳转)主文件：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JSP的四大域对象</title>
    </head>
    <body>
        <%
      //设置page范围的域对象
      pageContext.setAttribute("name1","张三");
      //设置request对象
      request.setAttribute("name2","李四");
      //设置session范围对象
      session.setAttribute("name3","王五");
      //设置application范围的域对象
      application.setAttribute("name4","赵六");
    %>
    
    <jsp:forward page="06-JSP的四大域对象-02.jsp"></jsp:forward>
    </body>
    </html>

06-JSP的四大域对象-02.jsp文件

运行结果:

![image-20220127194030010][]

--------------------

### 8.简易版用户登录功能 ###

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>用户登录</title>
    </head>
    <body>
        <form action="loginServlet" method="post">
            姓名: <input type="text" name="uname"> <br>
            密码: <input type="password" name="upwd"> <br>
            <button>登录</button>   <span style="color: red;font-size: 12px"><%=request.getAttribute("msg")%></span>
        </form>
    </body>
    </html>

index.jsp：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
      <head>
        <title>$Title$</title>
      </head>
      <body>
        <h2>欢迎<%=session.getAttribute("uname")%>登录</h2>
      </body>
    </html>

LoginServlet.java

@WebServlet("/loginServlet")
    public class LoginServlet extends HttpServlet {
        
    
        @Override
        protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
            //设置客户端的编码格式(防止乱码)
            req.setCharacterEncoding("UTF-8");
            //接受客户端传递的参数
            String uname = req.getParameter("uname");
            String upwd = req.getParameter("upwd");
            //判断参数是否为空
            if (uname == null ||"".equals(uname.trim())) {
        
                //提示用户信息
                req.setAttribute("msg", "用户姓名不能为空");
                //请求转发跳转到login.jsp
                req.getRequestDispatcher("login.jsp").forward(req, resp);
                return;
            }
            if (upwd == null||"".equals(upwd.trim())) {
        
                //提示用户信息
                req.setAttribute("msg", "用户密码不能为空");
                //请求转发跳转到login.jsp
                req.getRequestDispatcher("login.jsp").forward(req, resp);
                return;
            }
            //判断账号密码是否正确
            if (!"admin".equals(uname)||!"admin".equals(upwd)) {
        
                //提示用户信息
                req.setAttribute("msg", "登录失败");
                //请求转发跳转到login.jsp
                req.getRequestDispatcher("login.jsp").forward(req, resp);
                return;
            }
            //登录成功
            //设置登录信息到session
            req.getSession().setAttribute("uname",uname);
            //跳转到index.jsp
            resp.sendRedirect("index.jsp");
        }
    }

--------------------

### 9.EL表达式 ###

eg：

**通过EL表达式**，可以把在简单用户功能中在页面中显示的null改为空的字符串

#### 1.表达式的语法![image-20220128000421009][] ####

当获取指定的域对象的时候

${与对象的名称.数据名称}

#### 2.表达式的使用-获取数据 ####

##### 1.获取list #####

获取list
        获取list的size ${list.size()}
        获取list的指定下标：${list[下标]}
        注：list代表的是限域变量名

##### 2.获取Map #####

获取Map
        获取Map中指定的key的value
        ${map.key}
        或者
        ${map["key"]}
        注：Map代表的是限域变量名

eg：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>表达式的使用</title>
    </head>
    <body>
    <%
        //list
        List<String> list = new ArrayList<>();
        list.add("aaa");
        list.add("bbb");
        list.add("ccc");
        request.setAttribute("list",list);
        //Map
        Map map = new HashMap();
        map.put("aaa","111");
        map.put("bbb","222");
        map.put("ccc","333");
        request.setAttribute("map",map);
    %>
    <h4>获取list</h4>
    获取list的size：${
        list.size()}<br>
    获取list的指定下标：${
        list[1]}<br>
    <h4>获取Map</h4>
    获取list的size：${
        map.aaa}<br>
    获取list的指定下标：${
        map["bbb"]}<br>
    
    </body>
    </html>

![image-20220128003924943][]

##### 3.JavaBean #####

![image-20220128003652768][]

##### 4.empty #####

![image-20220128003952388][]

###### 1.字符串 ######

域对象是字符串

不存在的域对象：ture

空字符串：ture

null：ture

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>表达式的使用</title>
    </head>
    <body>
    <%
        request.setAttribute("str1","abc");
        request.setAttribute("str2","");
        request.setAttribute("str3",null);
    %>
    ${empty str}<br>
    ${empty str1}<br>
    ${empty str2}<br>
    ${empty str3}<br>
    </body>
    </html>

![image-20220128014025349][]

###### 2.List ######

没有长度—true

null-true

<%@ page import="java.util.List" %>
    <%@ page import="java.util.ArrayList" %><%--
      Created by IntelliJ IDEA.
      User: lenovo
      Date: 2022/1/28
      Time: 1:36
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>表达式的使用</title>
    </head>
    <body>
    
    <%
        List list1 =new ArrayList<>();
        List list2 = null;
        List list3 = new ArrayList<>();
        list3.add(1);
        request.setAttribute("list1",list1);
        request.setAttribute("list2",list2);
        request.setAttribute("list3",list3);
    %>
    ${
        empty list1}<br>
    ${
        empty list2}<br>
    ${
        empty list3}<br>
    </body>
    </html>

![image-20220128015250245][]

###### 3.Map ######

null：true

空map对象：true

<%@ page import="java.util.Map" %>
    <%@ page import="java.util.HashMap" %><%--
      Created by IntelliJ IDEA.
      User: lenovo
      Date: 2022/1/28
      Time: 1:36
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>表达式的使用</title>
    </head>
    <body>
    
    <%
        Map map1 = null;
        Map map2 = new HashMap<>();
        Map map3 = new HashMap<>();
        map3.put(1,2);
        request.setAttribute("map1",map1);
        request.setAttribute("map2",map2);
        request.setAttribute("map3",map3);
    %>
    ${empty map1}<br>
    ${empty map2}<br>
    ${empty map3}<br>
    
    </body>
    </html>

![image-20220128015905919][]

###### 4.JavaBean ######

null：true

空对象：false

![image-20220128020204032][]

![image-20220128020235373][]

![image-20220128020305951][]

#### 3.EL运算 ####

![image-20220128020447954][]

![image-20220128020641249][]

--------------------

## JSTL学习 ##

### 1.标签的使用 ###

![image-20220128021250000][]

![image-20220128021452441][]

JSTL的使用
        1.下载JSTL所需要的jar包
        （standard.jar和jstl.jar）
        2.在项目的web目录下的WEB-INF中新建lib目录，将jar拷进去
        3.选择“文件”————>项目结构————>模块————>依赖————>“+”————>将对应的lib目录导进去

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <html>
    <head>
        <title>11</title>
    <%--    JSTL的使用
        1.下载JSTL所需要的jar包
        （standard.jar和jstl.jar）
        2.在项目的web目录下的WEB-INF中新建lib目录，将jar拷进去
        3.选择“文件”————>项目结构————>模块————>依赖————>“+”————>将对应的lib目录导进去
    --%>
    </head>
    <body>
    <c:if test="${1==1}">
        Hello JSTL
    </c:if>
    </body>
    </html>

![image-20220128101843633][]

### 2.if标签 ###

![image-20220128101913859][]

格式:
        <c:if test="${num > 100}" var="String" scope="String">
        ...
        </c:if>

注：

1.  标签操作的一般都是域对象
2.  if标签没有else，如果想要else的效果，就需要设置两个完全相反的条件

### 3.条件标签 ###

choose，when和otherwise标签

![image-20220128103737388][]

语法格式

![image-20220128103756950][]

属性

1.  choose标签没有属性
2.  when标签中只有一个test属性，必须属性
3.  otherwise标签中必须设置在最后一个when标签之后

注意：

1.  choose标签和otherwise标签没有属性，而when标签必须有一个test属性
2.  choose标签必须包含至少一个when标签，可以没有otherwise标签
3.  otherwise标签必须设置在最后一个when标签之后

![image-20220128103415652][]

### 4.迭带标签 ###

语法格式

![image-20220128104941729][]

属性

![image-20220128104958665][]

![image-20220128105016000][]

eg:

(遍历主题内容多次)

![image-20220128105053045][]

如下

![image-20220128105111238][]

（循环）

![image-20220128105128665][]

如下

![image-20220128105428826][]

![image-20220128105525405][]

[image-20220127095402847]: https://img-blog.csdnimg.cn/img_convert/c650c800ee86bb2c4bc7fd52a23eaf20.png
[image-20220216164532434]: https://img-blog.csdnimg.cn/img_convert/2978605ccf660045f6ed816ebbbea437.png
[image-20220127101050119]: https://img-blog.csdnimg.cn/img_convert/62e977c341a6a0e4716608d8139bf566.png
[image-20220127102218484]: https://img-blog.csdnimg.cn/img_convert/4054c303d08c243b5090d9b14b3e75ca.png
[image-20220127144636507]: https://img-blog.csdnimg.cn/img_convert/ef65e88b776978fd8d19718ed64c4e94.png
[image-20220216164653698]: https://img-blog.csdnimg.cn/img_convert/2a68d4c527ac05f3d8a3cced721fe1bd.png
[image-20220216164702962]: https://img-blog.csdnimg.cn/img_convert/089b95d29a55c0db4b5fe9c664cb0b2a.png
[image-20220127150212844]: https://img-blog.csdnimg.cn/img_convert/787aec0b69ba98d9acb2fa45ba9a14da.png
[image-20220127152248713]: https://img-blog.csdnimg.cn/img_convert/48f4a53eba594d269f7ee65b606057dc.png
[image-20220127152029106]: https://img-blog.csdnimg.cn/img_convert/732044ea84c85b5458ab3b7fd7e78f54.png
[image-20220127153412580]: https://img-blog.csdnimg.cn/img_convert/ba046960368a16708040225f1aea8c73.png
[image-20220127153817174]: https://img-blog.csdnimg.cn/img_convert/a9e0aa3e4234a29aacb3abae7742001a.png
[image-20220127153905045]: https://img-blog.csdnimg.cn/img_convert/521f596379cf3a145379c69ecdda3e4d.png
[image-20220127162226981]: https://img-blog.csdnimg.cn/img_convert/be29c20ac05546c6b3d0d4696f0fa2eb.png
[image-20220127162516743]: https://img-blog.csdnimg.cn/img_convert/08f498b0339f3935209d12d493119fed.png
[image-20220127162615205]: https://img-blog.csdnimg.cn/img_convert/03e338cd527301b4e0308e030b31f1df.png
[image-20220127162700268]: https://img-blog.csdnimg.cn/img_convert/5ebb3ea9a7b55d2a52dd6faab78aaea2.png
[image-20220127193900686]: https://img-blog.csdnimg.cn/img_convert/435caf8832cd499e2d644ea9735b02f9.png
[image-20220127193907482]: https://img-blog.csdnimg.cn/img_convert/9b07ebd0b8cd1fd3348badd279a465b5.png
[image-20220127194030010]: https://img-blog.csdnimg.cn/img_convert/d04789733effb750bc78003da5403a37.png
[image-20220128000421009]: https://img-blog.csdnimg.cn/img_convert/4a15709a892a8658eaf89e1e4ce97329.png
[image-20220128003924943]: https://img-blog.csdnimg.cn/img_convert/9a3d620967078da1bba9a44fd3fd1468.png
[image-20220128003652768]: https://img-blog.csdnimg.cn/img_convert/a6199cb94cafaa73cdd4457cef806f15.png
[image-20220128003952388]: https://img-blog.csdnimg.cn/img_convert/bb52f5a8ccaa981b18dfecd993a5590d.png
[image-20220128014025349]: https://img-blog.csdnimg.cn/img_convert/f146eb69ee79ec0915799fa6669ac907.png
[image-20220128015250245]: https://img-blog.csdnimg.cn/img_convert/3ca92104e991b1509484a30182471390.png
[image-20220128015905919]: https://img-blog.csdnimg.cn/img_convert/29250e45355484f75bb5e9c4e61c61f3.png
[image-20220128020204032]: https://img-blog.csdnimg.cn/img_convert/f2dd61aeeec87b3902380a8449effc41.png
[image-20220128020235373]: https://img-blog.csdnimg.cn/img_convert/9f1373c7c5e171bf8149b79c0200488a.png
[image-20220128020305951]: https://img-blog.csdnimg.cn/img_convert/df2ec409fbcd871c2b173367b59f3f0b.png
[image-20220128020447954]: https://img-blog.csdnimg.cn/img_convert/74e69f8602868dd82babf42a09387f18.png
[image-20220128020641249]: https://img-blog.csdnimg.cn/img_convert/d8f1f4f613ab043b0afa195c01ed366c.png
[image-20220128021250000]: https://img-blog.csdnimg.cn/img_convert/02faf9abd5ff383f49c8cf1ebef148fe.png
[image-20220128021452441]: https://img-blog.csdnimg.cn/img_convert/6b11714dae9b26b1452a3b06d3e66af6.png
[image-20220128101843633]: https://img-blog.csdnimg.cn/img_convert/63d6438457808e52d8ba97e922eeaff9.png
[image-20220128101913859]: https://img-blog.csdnimg.cn/img_convert/a198fc83692576a2b0f281394b3fa973.png
[image-20220128103737388]: https://img-blog.csdnimg.cn/img_convert/6bf6ebf867049839983c9b2d61f73225.png
[image-20220128103756950]: https://img-blog.csdnimg.cn/img_convert/608f12f592f0ad528b43f22372974daf.png
[image-20220128103415652]: https://img-blog.csdnimg.cn/img_convert/ad02fe24ba9d3cf472b84abe3d4c32c9.png
[image-20220128104941729]: https://img-blog.csdnimg.cn/img_convert/c43268bf13b18a03cfff8ef9873785df.png
[image-20220128104958665]: https://img-blog.csdnimg.cn/img_convert/5d38e61059e988118837493e52c859ce.png
[image-20220128105016000]: https://img-blog.csdnimg.cn/img_convert/8d18e848c9295ff4d20fc497eab80ad8.png
[image-20220128105053045]: https://img-blog.csdnimg.cn/img_convert/8cfc6d4f3007ba203dd5705c4c40a847.png
[image-20220128105111238]: https://img-blog.csdnimg.cn/img_convert/137688c076114de4dd0c4ebd6a885efa.png
[image-20220128105128665]: https://img-blog.csdnimg.cn/img_convert/51896a8728d92f3392e624e5b77a9188.png
[image-20220128105428826]: https://img-blog.csdnimg.cn/img_convert/e147de57abbd86b7c95b94ccb8849d47.png
[image-20220128105525405]: https://img-blog.csdnimg.cn/img_convert/2bc1b635cdbae43700c8bc5b80040912.png