JavaWeb-06-WEB的Jsp

ゝ一纸荒年。 2023-10-06 11:05 15阅读 0赞

**Table of Contents**

四：WEB的Jsp

1：jsp简介

1.1：什么是jsp

1.2：如何创建一个 jsp 动态页面程序

1.3：如何修改 jsp 文件的默认编码。

2：jsp 运行原理

3：jsp 的语法（重点掌握）

3.1 、jsp 文件头部声明介绍（page 指令介绍） 指令介绍）

3.2：jsp 中的三种脚本介绍

3.3：jsp中的注释

4：jsp九大内置对象

5、jsp 四大域对象

6、jsp 中 中 out 流 输出流 和 和 response.getwriter()输出流

6.1： jsp 中 中 out 和 和 response 的 的 writer 的区别演示

6.2： 图解 out 流和 writer 流的两个缓冲区如何工作

7：jsp 的常用标签（重点\*\*\*\*）

7.1：静态包含 静态包含--很常用 很常用

7.2：动态包含--很少用 很少用

7.3：页面转发--常用 常用

8：EL表达式

8.1：什么是 EL 表达式，EL 表达式的作用?

8.2：EL 表达式搜索域数据的顺序

8.3：EL 表达式输出 Bean 的普通属性，数组属性。List 集 集合属性， 合属性，map 集合属性 集合属性

8.4:EL 表达式 ---运算

8.5：EL 表达式的 11 个隐含对象

9：JSTL 标签库( 次重点\*\*\*\*)

9.1：引入标签库

9.2：core 核心库使用

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

# 四：WEB的Jsp #

## 1：jsp简介 ##

### 1.1：什么是jsp ###

JSP(全称 Java Server Pages)java服务器端页面；是由 Sun 公司专门为了解决动态生成 HTML 文档的技术。

在传统的html页面文件中加入java脚本（java片段）和jsp标签，就构成了jsp网页

jsp标记变量，方法，和表达式，有服务器计算，结果返回浏览器显示；

jsp 页面的访问千万不能像 HTML 页面一样。托到浏览器中。只能通过浏览器访问 Tomcat 服务器再访问 jsp 页面

### 1.2：如何创建一个 jsp 动态页面程序 ###

1 ）选中 WebContent 目录，右键创建一个 jsp

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70][]

2) 浏览器访问

http://ip:端口号/工程名/文件名

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 1][]

### 1.3：如何修改 jsp 文件的默认编码。 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 2][]

注意事项：  
1、jsp 页面是一个类似于 html 的一个页面。 jsp 直接存放到 WebContent 目录下，和 html 一样  
访问 jsp 的时候，也和访问 html 一样  
2、jsp 的默认编码集是 iso-8859-1 修改 jsp 的默认编码为 UTF-8

## 2：jsp 运行原理 ##

jsp 质 的本质，其实是一个 Servlet

当我们访问一个jsp的时候，会生成两个文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 3][]

index\_jsp.class 文件很明显是 index\_jsp.java 源文件编译后的字节码文件。那么 index\_jsp.java 是个什么内容呢?  
生成的 java 文件名，是以原来的文件名加上\_jsp 得到。 xxxx\_jsp.java 文件的名字

我们打开 index\_jsp.java 文件查看里面的内容：  
发现，生成的类继承于 HttpJspBase 类。这是一个 jsp 文件生成 Servlet 程序要继承的基类！！！

于是，我们关联源代码。去查看一下 HttpJspBase 类的内容。从源码的类注释说明中，我们发现。HttpJspBase 这个类就是所有 jsp 文件生成 Servlet 程序

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 4][]

## 3：jsp 的语法（重点掌握） ##

### 3.1 、jsp 文件头部声明介绍（page 指令介绍） 指令介绍） ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 5][]

### 3.2：jsp 中的三种脚本介绍 ###

**1 ）第一种，声明脚本：**  
声明脚本格式如下：  
<%!  
java 代码  
%>  
干 在声明脚本块中，我们可以干 4 件事情  
1.我们可以定义全局变量。  
2.定义 static 静态代码块  
3.定义方法  
4.定义内部类  
几乎可以写在类的内部写的代码，都可以通过声明脚本来实现

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 6][]

**2 ） 第二种，表达式脚本（\*\*\* 重点，使用很多）：**

表达式脚本格式如下：<%=表达式 %>  
表达式脚本 用于向页面输出内容。表达式脚本 翻译到 Servlet 程序的 service 方法中 以 out.print() 打印输出  
out 是 jsp 的一个内置对象，用于生成 html 的源代码；注意：表达式不要以分号结尾，否则会报错  
表达式脚本可以输出任意类型。比如：

*  1.输出整型
 *  2.输出浮点型
 *  3.输出字符串
 *  4.输出对象

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 7][]

**3 ） 第三种，代码脚本（\*\*\*\*\* 重点，使用最多 ）：**

代码脚本如下：<% java 代码 %>  
代码脚本里可以书写任意的 java 语句。  
代码脚本的内容都会被翻译到 service 方法中。  
所以 service 方法中可以写的 java 代码，都可以书写到代码脚本中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 8][]

### 3.3：jsp中的注释 ###

**// 单行 java 注释**  
/\*  
**多行 java 代码注释**  
\*/  
单行注释和多行注释能在翻译后的 java 源代码中看见。  
**<%-- jsp 注释 --%>**  
jsp 注释在翻译的时候会直接被忽略掉

## 4：jsp九大内置对象 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 9][]

九大内置对象 ， 都是我们可以在 【 代码脚本 】 中或 【 表达式脚本 】 中直接使用的对象。

## 5、jsp 四大域对象 ##

![20200614225807740.png][]

## 6、jsp 中 中 out 流 输出流 和 和 response.getwriter()输出流 ##

### 6.1： jsp 中 中 out 和 和 response 的 的 writer 的区别演示 ###

<%--
      Created by IntelliJ IDEA.
      User: wkl
      Date: 2020/6/14
      Time: 下午 10:21
      state:
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>hello</title>
    </head>
    <body>
        <h1>这是hello.jsp页面！</h1>
    <%
        // out 输出
        out.write("这是 out 的第一次输出<br/>");
        // out flush 之后。会把输出的内容写入 writer 的缓冲区中
        out.flush();
        // 最后一次的输出，由于没有手动 flush，会在整个页面输出到客户端的时候，自动写入到 writer缓冲区
        out.write("这是 out 的第二次输出<br/>");
        // writer 的输出
        response.getWriter().write("这是 writer 的第一次输出<br/>");
        response.getWriter().write("这是 writer 的第二次输出<br/>");
    %>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 10][]

### 6.2： 图解 out 流和 writer 流的两个缓冲区如何工作 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 11][]

## 7：jsp 的常用标签（重点\*\*\*\*） ##

### 7.1：静态包含 静态包含--很常用 很常用 ###

<%@ include file="" %>  
静态包含是把包含的页面内容原封装不动的输出到包含的位置。

### 7.2：动态包含--很少用 很少用 ###

<jsp:include page=""></jsp:include>  
动态包含会把包含的 jsp 页面单独翻译成 servlet 文件，然后在执行到时候再调用翻译的 servlet 程序。并把计算的结果返回。  
动态包含是在执行的时候，才会加载。所以叫动态包含。

### 7.3：页面转发--常用 常用 ###

<jsp:forward page=""></jsp:forward>  
<jsp:forward 转发功能相当于 request.getRequestDispatcher("/xxxx.jsp").forward(request, response); 的功能

静态包含和动态包含的区别：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 12][]

## 8：EL表达式 ##

### 8.1：什么是 EL 表达式，EL 表达式的作用? ###

EL 表达式的全称是：Expression Language。是表达式语言。  
EL 表达式的什么作用：EL 表达式主要是代替 jsp 页面中的表达式脚本在 jsp 页面中进行数据的输出。  
因为 EL 表达式在输出数据的时候，要比 jsp 的表达式脚本要简洁很多。

<body>
    <%
    request.setAttribute("key"," 值");
    %>
    表达式脚本输出 key 的值是：
    <%=request.getAttribute("key1")==null?"":request.getAttribute("key1")%><br/>
    EL 表达式输出 key 的值是：${key1}
    </body>

EL 表达式的格式是：$\{表达式\}  
EL 表达式在输出 null 值的时候，输出的是空串。jsp 表达式脚本输出 null 值的时候，输出的是 null 字符串。

## 8.2：EL 表达式搜索域数据的顺序 ##

EL 表达式主要是在 jsp 页面中输出数据。  
主要是输出域对象中的数据。  
当四个域中都有相同的 key 的数据的时候，EL 表达式会按照四个域的从小到大的顺序去进行搜索，找到就输出。

### 8.3：EL 表达式输出 Bean 的普通属性，数组属性。List 集 集合属性， 合属性，map 集合属性 集合属性 ###

1： 需求——输出 Person 类中普通属性，数组属性。list 集合属性和 map 集合属性。

<body>
    输出 Person：${ p }<br/>
    输出 Person 的 name 属性：${p.name} <br>
    输出 Person 的 pnones 数组属性值：${p.phones[2]} <br>
    输出 Person 的 cities 集合中的元素值：${p.cities} <br>
    输出 Person 的 List 集合中个别元素值：${p.cities[2]} <br>
    输出 Person 的 Map 集合: ${p.map} <br>
    输出 Person 的 Map 集合中某个 key 的值: ${p.map.key3} <br>
    输出 Person 的 age 属性：${p.age} <br>
    </body>

### 8.4:EL 表达式 ---运算 ###

语法：$\{ 运算表达式 \} ， EL 表达式支持如下运算符

1：关系运算

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 13][]

2：逻辑运算

![20200614231331190.png][]

3：算术运算

![202006142313536.png][]

### 8.5：EL 表达式的 11 个隐含对象 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 14][]

<body>
    <%--
    request.getScheme() 它可以获取请求的协议
    request.getServerName() 获取请求的服务器 ip 或域名
    request.getServerPort() 获取请求的服务器端口号
    getContextPath() 获取当前工程路径
    request.getMethod() 获取请求的方式（ GET 或 POST ）
    request.getRemoteHost() 获取客户端的 ip 地址
    session.getId() 获取会话的唯一标识
    --%>
    <%
    pageContext.setAttribute("req", request);
    %>
    <%=request.getScheme() %> <br>
    1.协议： ${ req.scheme }<br>
    2.服务器 ip：${ pageContext.request.serverName }<br>
    3.服务器端口：${ pageContext.request.serverPort }<br>
    4.获取工程路径：${ pageContext.request.contextPath }<br>
    5.获取请求方法：${ pageContext.request.method }<br>
    6.获取客户端 ip 地址：${ pageContext.request.remoteHost }<br>
    7.获取会话的 id 编号：${ pageContext.session.id }<br>
    </body>

## 9：JSTL 标签库( 次重点\*\*\*\*) ##

JSTL 标签库 全称是指 JSP Standard Tag Library JSP 标准标签库。是一个不断完善的开放源代码的 JSP 标签库。  
EL 表达式主要是为了替换 jsp 中的表达式脚本，而标签库则是为了替换代码脚本。这样使得整个 jsp 页面变得更佳简洁。

### 9.1：引入标签库 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 15][]

CORE 标签库
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    XML 标签库
    <%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml" %>
    FMT 标签库
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
    SQL 标签库
    <%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %>
    FUNCTIONS 标签库
    <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

### 9.2：core 核心库使用 ###

<c:set /> 作用：set 标签可以往域中保存数据

<c:if /> if 标签用来做 if 判断。

<%--
    ii.<c:if />
    if 标签用来做 if 判断。
    test 属性表示判断的条件（使用 EL 表达式输出）
    --%>
    <c:if test="${ 12 == 12 }">
    <h1>12 等于 12</h1>
    </c:if>
    <c:if test="${ 12 != 12 }">
    <h1>12 不等于 12</h1>
    </c:if>

<c:choose> <c:when> <c:otherwise> 标签作用：多路判断。跟 switch ... case .... default 非常接近

<%--
      Created by IntelliJ IDEA.
      User: wkl
      Date: 2020/6/14
      Time: 下午 10:21
      state:
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>hello</title>
    </head>
    <body>
    <h1>这是hello.jsp页面！</h1>
    <%--
    iii.<c:choose> <c:when> <c:otherwise> 标签
    作用：多路判断。跟 switch ... case .... default 非常接近
    choose 标签开始选择判断
    when 标签表示每一种判断情况
    test 属性表示当前这种判断情况的值
    otherwise 标签表示剩下的情况
    <c:choose> <c:when> <c:otherwise> 标签使用时需要注意的点：
    1 、标签里不能使用 html 注释，要使用 jsp 注释
    2 、 when 标签的父标签一定要是 choose 标签
    --%>
    <%
        request.setAttribute("height", 180);
    %>
    <c:choose>
        <%-- 这是 html 注释 --%>
        <c:when test="${ requestScope.height > 190 }">
            <h2>小巨人</h2>
        </c:when>
        <c:when test="${ requestScope.height > 180 }">
            <h2>很高</h2>
        </c:when>
        <c:when test="${ requestScope.height > 170 }">
            <h2>还可以</h2>
        </c:when>
        <c:otherwise>
            <c:choose>
                <c:when test="${requestScope.height > 160}">
                    <h3>大于 160</h3>
                </c:when>
                <c:when test="${requestScope.height > 150}">
                    <h3>大于 150</h3>
                </c:when>
                <c:when test="${requestScope.height > 140}">
                    <h3>大于 140</h3>
                </c:when>
                <c:otherwise>
                    其他小于 140
                </c:otherwise>
            </c:choose>
        </c:otherwise>
    </c:choose>
    </body>
    </html>

<c:forEach />作用：遍历输出使用。

<table border="1">
        <c:forEach begin="1" end="10" var="i">
            <tr>
                <td>第${i}行</td>
            </tr>
        </c:forEach>
    </table>
    
    
    <c:forEach begin="2" end="7" step="2" varStatus="status" items="${requestScope.stus}" var="stu">
        <tr>
            <td>${stu.id}</td>
            <td>${stu.username}</td>
            <td>${stu.password}</td>
            <td>${stu.age}</td>
            <td>${stu.phone}</td>
            <td>${status.step}</td>
        </tr>
    </c:forEach>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020061422230659.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200614222327613.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200614222356779.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200614222600578.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200614222654386.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200614222922500.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200614223014564.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200614223111321.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200614223140226.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200614223419536.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[20200614225807740.png]: https://img-blog.csdnimg.cn/20200614225807740.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200614224016968.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20200614224057599.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20200614224632998.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20200614231320735.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[20200614231331190.png]: https://img-blog.csdnimg.cn/20200614231331190.png
[202006142313536.png]: https://img-blog.csdnimg.cn/202006142313536.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/2020061423150325.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20200614231757909.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjk0OTA2,size_16,color_FFFFFF,t_70