15天深度复习JavaWeb的详细笔记(六)——HTTP、Tomcat、Servlet

逃离我推掉我的手 2023-10-02 21:16 35阅读 0赞

#### 文章目录 ####

*  Demo06-HTTP、Tomcat、Servlet
 *   *  1，Web概述
     *   *  1.1 Web和JavaWeb的概念
         *  1.2 JavaWeb技术栈
         *   *  1.2.1 B/S架构
             *  1.2.2 资源
             *  1.2.3 HTTP协议
             *  1.2.4 Web服务器
     *  2, HTTP
     *   *  2.1 简介
         *  2.2 请求数据格式
         *  2.3 响应数据格式
         *   *  2.3.1 格式介绍
             *  2.3.2 响应状态码
             *  2.3.3 自定义服务器
     *  3, Tomcat
     *   *  3.1 简介
         *   *  3.1.1Web服务器
             *  3.1.2Tomcat
             *  3.1.3总结
         *  3.2 基本使用
         *   *  3.2.1 目录
             *  3.2.2 启动
             *  3.2.5 关闭
             *  3.2.6 配置
             *  3.2.7 部署
         *  3.3 Maven创建Web项目
         *   *  3.3.1 Web项目结构
             *  3.3.2 创建Maven Web项目
         *  3.4 IDEA使用Tomcat
         *   *  3.4.1 集成本地Tomcat
             *  3.4.2 Tomcat Maven插件
     *  4， Servlet
     *   *  4.1 简介
         *  4.2 快速入门
         *  4.3 执行流程
         *  4.4 生命周期
         *  4.5 方法介绍
         *  4.6 体系结构
         *  4.7 urlPattern配置
         *  4.8 XML配置

## Demo06-HTTP、Tomcat、Servlet ##

### 1，Web概述 ###

#### 1.1 Web和JavaWeb的概念 ####

*  Web是全球广域网，也称为万维网(www)，能够通过浏览器访问的网站。
 *  我们知道了什么是Web，那么JavaWeb又是什么呢？顾名思义JavaWeb就是用Java技术来解决相关web互联网领域的技术栈。

#### 1.2 JavaWeb技术栈 ####

了解JavaWeb技术栈之前，有一个很重要的概念要介绍。

##### 1.2.1 B/S架构 #####

1.什么是B/S架构?

*  B/S 架构：Browser/Server，浏览器/服务器 架构模式，它的特点是，客户端只需要浏览器，**应用程序的逻辑和数据都存储在服务器端**。浏览器只需要请求服务器，获取Web资源，服务器把Web资源发送给浏览器即可。大家可以通过下面这张图来回想下我们平常的上网过程:

2.B/S架构的好处:

*  易于维护升级：服务器端升级后，客户端无需任何部署就可以使用到新的版本。

了解了什么是B/S架构后，作为后台开发工程师的我们将来主要关注的是服务端的开发和维护工作。在服务端将来会放很多资源,都有哪些资源呢?

##### 1.2.2 资源 #####

*  静态资源主要包含HTML、CSS、JavaScript、图片等，主要负责页面的展示。
 *  动态资源主要包含Servlet、JSP等，主要用来负责逻辑处理。
 *  数据库主要负责存储数据。  
    整个Web的访问过程如下图所示:  
    ![在这里插入图片描述][839cedb7870d4d1ab3be2e3e123f304b.png_pic_center]

(1)浏览器发送一个请求到服务端，去请求所需要的相关资源;  
(2)资源分为动态资源和静态资源,动态资源可以是使用Java代码按照Servlet和JSP的规范编写的内容;  
(3)在Java代码中可以进行业务处理也可以从数据库中读取数据;  
(4)拿到数据后，把数据交给HTML页面进行展示,再结合CSS和JavaScript使展示效果更好;  
(5)服务端将静态资源响应给浏览器;  
(6)浏览器将这些资源进行解析;  
(7)解析后将效果展示在浏览器，用户就可以看到最终的结果。  
在整个Web的访问过程中，会设计到很多技术，这些技术有已经学习过的，也有还未涉及到的内容，都有哪些还没有涉及到呢?

##### 1.2.3 HTTP协议 #####

*  HTTP协议:主要定义通信规则
 *  浏览器发送请求给服务器，服务器响应数据给浏览器，这整个过程都需要遵守一定的规则，之前大家学习过TCP、UDP，这些都属于规则，这里我们需要使用的是HTTP协议，这也是一种规则。

##### 1.2.4 Web服务器 #####

*  Web服务器:负责解析 HTTP 协议，**解析请求数据，并发送响应数据**
 *  浏览器按照HTTP协议发送请求和数据，后台就**需要一个Web服务器软件来根据HTTP协议解析请求和数据，然后把处理结果再按照HTTP协议发送给浏览器**
 *  Web服务器软件有很多，我们课程中将学习的是目前最为常用的Tomcat服务器

到这为止，关于JavaWeb中用到的技术栈我们就介绍完了，这里面就只有HTTP协议、Servlet、JSP以及Tomcat这些知识是没有学习过的，所以整个Web核心主要就是来学习这些技术。

### 2, HTTP ###

#### 2.1 简介 ####

1.  **HTTP概念**

HyperText Transfer Protocol，超文本传输协议，规定了浏览器和服务器之间数据传输的规则。

*  数据传输的规则指的是**请求数据和响应数据需要按照指定的格式进行传输。**
    
     *  所以学习HTTP主要就是学习请求和响应数据的具体格式内容
 *  如果想知道具体的格式，可以打开浏览器，点击`F12`打开开发者工具，点击`Network`来查看某一次请求的请求数据和响应数据具体的格式内容，如下图所示:

![在这里插入图片描述][956cdd2aadec4651923e5d275e7938ff.png_pic_center]

1.  **HTTP协议特点**

*  基于TCP协议: 面向连接，安全
    
    TCP是一种面向连接的(建立连接之前是需要经过三次握手)、可靠的、基于字节流的传输层通信协议，在数据传输方面更安全。
 *  基于请求-响应模型的:**一次请求对应一次响应**
    
    请求和响应是一一对应关系
 *  HTTP协议是无状态协议:对于事物处理没有记忆能力。每次请求-响应都是独立的
    
    无状态指的是客户端发送HTTP请求给服务端之后，服务端根据请求响应数据，响应完后，不会记录任何信息。这种特性有优点也有缺点，
    
     *  缺点:多次请求间不能共享数据
     *  优点:速度快
    
    请求之间无法共享数据会引发的问题，如:
    
     *  京东购物，`加入购物车`和`去购物车结算`是两次请求，
     *  HTTP协议的无状态特性，加入购物车请求响应结束后，并未记录加入购物车是何商品
     *  发起去购物车结算的请求后，因为无法获取哪些商品加入了购物车，会导致此次请求无法正确展示数据
    
    具体使用的时候，我们发现京东是可以正常展示数据的，原因是Java早已考虑到这个问题，并提出了使用`会话技术(Cookie、Session)`来解决这个问题。具体如何来做，我们后面会详细讲到

#### 2.2 请求数据格式 ####

请求数据总共分为三部分内容，分别是请求行、请求头、请求体

*  请求行: HTTP请求中的第一行数据
    
    > GET / HTTP1.1
    > 
    > GET+空格+/+空格+HTTP1.1
    
    GET是请求方式,请求方式有七种,最常用的是GET和POST
 *  请求头: 第二行开始，格式为key: value形式
    
    请求头中会包含若干个属性，常见的HTTP请求头有:
    
        Host: 表示请求的主机名
        User-Agent: 浏览器版本,例如Chrome浏览器的标识类似Mozilla/5.0 ...Chrome/79，IE浏览器的标识类似Mozilla/5.0 (Windows NT ...)like Gecko；
        Accept：表示浏览器能接收的资源类型，如text/*，image/*或者*/*表示所有；
        Accept-Language：表示浏览器偏好的语言，服务器可以据此返回不同语言的网页；
        Accept-Encoding：表示浏览器可以支持的压缩类型，例如gzip, deflate等。
    
    这些数据有什么用处?
    
    举例说明:服务端可以根据请求头中的内容来获取客户端的相关信息，有了这些信息服务端就可以处理不同的业务需求，比如:
    
     *  不同浏览器解析HTML和CSS标签的结果会有不一致，所以就会导致相同的代码在不同的浏览器会出现不同的效果
     *  服务端根据客户端请求头中的数据获取到客户端的浏览器类型，就可以根据不同的浏览器设置不同的代码来达到一致的效果
     *  这就是我们常说的浏览器兼容问题
 *  请求体: **POST请求特有的部分**,是post请求的最后一部分，存储请求参数

![在这里插入图片描述][d195ca56f9404ff9ab4b47e09fca2c79.png_pic_center]

如上图红线框的内容就是请求体的内容，**请求体和请求头之间是有一个空行隔开**。

*  **GET请求**请求参数在请求行中，**没有请求体**，POST请求请求参数在请求体中
 *  GET请求请求参数大小有限制，POST没有

#### 2.3 响应数据格式 ####

##### 2.3.1 格式介绍 #####

响应数据总共分为三部分内容，分别是响应行、响应头、响应体

![在这里插入图片描述][64ade3e807df4979aaaade685008a642.png_pic_center]

*  响应行：响应数据的第一行,响应行包含三块内容，分别是 HTTP/1.1\[HTTP协议及版本\] 200\[响应状态码\] ok\[状态码的描述\]
 *  响应头：第二行开始，格式为key：value形式
    
    响应头中会包含若干个属性，常见的HTTP响应头有:
    
        Content-Type：表示该响应内容的类型，例如text/html，image/jpeg；
        Content-Length：表示该响应内容的长度（字节数）；
        Content-Encoding：表示该响应压缩算法，例如gzip；
        Cache-Control：指示客户端应如何缓存，例如max-age=300表示可以最多缓存300秒
 *  响应体： 最后一部分。存放响应数据
    
    上图中…这部分内容就是响应体，**它和响应头之间有一个空行隔开**。

##### 2.3.2 响应状态码 #####

**1. 状态码大类**

<table> 
 <thead> 
 <tr> 
 <th>状态码分类</th> 
 <th>说明</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>1xx</td> 
 <td>响应中——临时状态码，表示请求已经接受，告诉客户端应该继续请求或者如果它已经完成则忽略它</td> 
 </tr> 
 <tr> 
 <td>2xx</td> 
 <td>成功——表示请求已经被成功接收，处理已完成</td> 
 </tr> 
 <tr> 
 <td>3xx</td> 
 <td>重定向——重定向到其它地方：它让客户端再发起一个请求以完成整个处理。</td> 
 </tr> 
 <tr> 
 <td>4xx</td> 
 <td>客户端错误——处理发生错误，责任在客户端，如：客户端的请求一个不存在的资源，客户端未被授权，禁止访问等</td> 
 </tr> 
 <tr> 
 <td>5xx</td> 
 <td>服务器端错误——处理发生错误，责任在服务端，如：服务端java代码抛出异常，路由出错，HTTP版本不支持等</td> 
 </tr> 
 </tbody> 
</table>

状态码大全：https://cloud.tencent.com/developer/chapter/13553

**2. 常见的响应状态码**

<table> 
 <thead> 
 <tr> 
 <th>状态码</th> 
 <th>英文描述</th> 
 <th>解释</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>200</td> 
 <td><code>OK</code></td> 
 <td>客户端请求成功，即处理成功，这是我们最想看到的状态码</td> 
 </tr> 
 <tr> 
 <td>302</td> 
 <td><code>Found</code></td> 
 <td>指示所请求的资源已移动到由<code>Location</code>响应头给定的 URL，浏览器会自动重新访问到这个页面</td> 
 </tr> 
 <tr> 
 <td>304</td> 
 <td><code>Not Modified</code></td> 
 <td>告诉客户端，你请求的资源至上次取得后，服务端并未更改，你直接用你本地缓存吧。隐式重定向</td> 
 </tr> 
 <tr> 
 <td>400</td> 
 <td><code>Bad Request</code></td> 
 <td>客户端请求有语法错误，不能被服务器所理解</td> 
 </tr> 
 <tr> 
 <td>403</td> 
 <td><code>Forbidden</code></td> 
 <td>服务器收到请求，但是拒绝提供服务，比如：没有权限访问相关资源</td> 
 </tr> 
 <tr> 
 <td>404</td> 
 <td><code>Not Found</code></td> 
 <td>请求资源不存在，一般是URL输入有误，或者网站资源被删除了</td> 
 </tr> 
 <tr> 
 <td>428</td> 
 <td><code>Precondition Required</code></td> 
 <td>服务器要求有条件的请求，告诉客户端要想访问该资源，必须携带特定的请求头</td> 
 </tr> 
 <tr> 
 <td>429</td> 
 <td><code>Too Many Requests</code></td> 
 <td>太多请求，可以限制客户端请求某个资源的数量，配合 Retry-After(多长时间后可以请求)响应头一起使用</td> 
 </tr> 
 <tr> 
 <td>431</td> 
 <td><code> Request Header Fields Too Large</code></td> 
 <td>请求头太大，服务器不愿意处理请求，因为它的头部字段太大。请求可以在减少请求头域的大小后重新提交。</td> 
 </tr> 
 <tr> 
 <td>405</td> 
 <td><code>Method Not Allowed</code></td> 
 <td>请求方式有误，比如应该用GET请求方式的资源，用了POST</td> 
 </tr> 
 <tr> 
 <td>500</td> 
 <td><code>Internal Server Error</code></td> 
 <td>服务器发生不可预期的错误。服务器出异常了，赶紧看日志去吧</td> 
 </tr> 
 <tr> 
 <td>503</td> 
 <td><code>Service Unavailable</code></td> 
 <td>服务器尚未准备好处理请求，服务器刚刚启动，还未初始化好</td> 
 </tr> 
 <tr> 
 <td>511</td> 
 <td><code>Network Authentication Required</code></td> 
 <td>客户端需要进行身份验证才能获得网络访问权限</td> 
 </tr> 
 </tbody> 
</table>

关于响应状态码，我们先主要认识三个状态码，其余的等后期用到了再去掌握:

*  200 ok 客户端请求成功
 *  404 Not Found 请求资源不存在
 *  500 Internal Server Error 服务端发生不可预期的错误

状态码大全：https://cloud.tencent.com/developer/chapter/13553

##### 2.3.3 自定义服务器 #####

在前面我们导入到IDEA中的http项目中，有一个Server.java类，这里面就是自定义的一个服务器代码，主要使用到的是`ServerSocket`和`Socket`

public class Server {
        
        public static void main(String[] args) throws IOException {
        
            ServerSocket ss = new ServerSocket(8080); // 监听指定端口
            System.out.println("server is running...");
            while (true){
        
                Socket sock = ss.accept();
                System.out.println("connected from " + sock.getRemoteSocketAddress());
                Thread t = new Handler(sock);
                t.start();
            }
        }
    }
    
    class Handler extends Thread {
        
        Socket sock;
    
        public Handler(Socket sock) {
        
            this.sock = sock;
        }
    
        public void run() {
        
            try (InputStream input = this.sock.getInputStream()) {
        
                try (OutputStream output = this.sock.getOutputStream()) {
        
                    handle(input, output);
                }
            } catch (Exception e) {
        
                try {
        
                    this.sock.close();
                } catch (IOException ioe) {
        
                }
                System.out.println("client disconnected.");
            }
        }
    
        private void handle(InputStream input, OutputStream output) throws IOException {
        
            BufferedReader reader = new BufferedReader(new InputStreamReader(input, StandardCharsets.UTF_8));
            BufferedWriter writer = new BufferedWriter(new OutputStreamWriter(output, StandardCharsets.UTF_8));
            // 读取HTTP请求:
            boolean requestOk = false;
            String first = reader.readLine();
            if (first.startsWith("GET / HTTP/1.")) {
        
                requestOk = true;
            }
            System.out.println(first);
            for (;;) {
        
                String header = reader.readLine();
                if (header.isEmpty()) {
         // 读取到空行时, HTTP Header读取完毕
                    break;
                }
                System.out.println(header);
            }
            System.out.println(requestOk ? "Response OK" : "Response Error");
            if (!requestOk) {
        
                // 发送错误响应:
                writer.write("HTTP/1.0 404 Not Found\r\n");
                writer.write("Content-Length: 0\r\n");
                writer.write("\r\n");
                writer.flush();
            } else {
        
                // 发送成功响应:
    
                //读取html文件，转换为字符串
                BufferedReader br = new BufferedReader(new FileReader("demo03-http/html/a.html"));
                StringBuilder data = new StringBuilder();
                String line = null;
                while ((line = br.readLine()) != null){
        
                    data.append(line);
                }
                br.close();
                int length = data.toString().getBytes(StandardCharsets.UTF_8).length;
    
                writer.write("HTTP/1.1 200 OK\r\n");
                writer.write("Connection: keep-alive\r\n");
                writer.write("Content-Type: text/html\r\n");
                writer.write("Content-Length: " + length + "\r\n");
                writer.write("\r\n"); // 空行标识Header和Body的分隔
                writer.write(data.toString());
                writer.flush();
            }
        }
    }

上面代码，大家不需要自己写，主要通过上述代码，只需要大家了解到服务器可以使用java完成编写，是可以接受页面发送的请求和响应数据给前端浏览器的，真正用到的Web服务器，我们不会自己写，都是使用目前比较流行的web服务器，比如Tomcat

**小结**

1.  响应数据中包含三部分内容，分别是响应行、响应头和响应体
2.  掌握200，404，500这三个响应状态码所代表含义，分布是成功、所访问资源不存在和服务的错误

### 3, Tomcat ###

#### 3.1 简介 ####

##### 3.1.1Web服务器 #####

**1.什么是Web服务器**

*  Web服务器是一个应用程序（软件），对HTTP协议的操作进行封装，使得程序员不必直接对协议进行操作，让Web开发更加便捷。主要功能是"提供网上信息浏览服务"。
 *  Web服务器是安装在服务器端的一款软件，将来我们把自己写的Web项目部署到Web Tomcat服务器软件中，当Web服务器软件启动后，部署在Web服务器软件中的页面就可以直接通过浏览器来访问了。

**2.Web服务器软件使用步骤**

*  准备静态资源
 *  下载安装Web服务器软件
 *  将静态资源部署到Web服务器上
 *  启动Web服务器使用浏览器访问对应的资源

##### 3.1.2Tomcat #####

Tomcat的相关概念:

*  Tomcat是Apache软件基金会一个核心项目，是一个开源免费的轻量级Web服务器，支持Servlet/JSP少量JavaEE规范。
 *  概念中提到了JavaEE规范，那什么又是JavaEE规范呢?
    
    JavaEE: Java Enterprise Edition,Java企业版。指Java企业级开发的技术规范总和。包含13项技术规范:JDBC、JNDI、EJB、RMI、JSP、Servlet、XML、JMS、Java IDL、JTS、JTA、JavaMail、JAF。
 *  因为Tomcat支持Servlet/JSP规范，所以Tomcat也被称为Web容器、Servlet容器。Servlet需要依赖Tomcat才能运行。
    
     *  Servlet是动态的外部资源,将来呢其实就是一个java类,但是这个类没有main方法,不能独立运行,需要依赖于Tomcat服务器才能运行起来,所以称Tomcat为Servlet容器,它里面放了一堆Servlet
 *  Tomcat的官网: https://tomcat.apache.org/ 从官网上可以下载对应的版本进行使用。

##### 3.1.3总结 #####

*  Web服务器作用:
    
     *  封装HTTP协议操作,简化开发
     *  可以将web项目部署到服务器中,对外提供网上浏览服务
 *  Tomcat是一个轻量级的Web服务器,支持Servlet/JSP少量JavaEE规范,也称为Web容器,Servlet容器

#### 3.2 基本使用 ####

##### 3.2.1 目录 #####

![在这里插入图片描述][348509f7cac346688d822fb8323b5212.png_pic_center]

bin:目录下有两类文件，一种是以`.bat`结尾的，是Windows系统的可执行文件，一种是以`.sh`结尾的，是Linux系统的可执行文件。

webapps:就是以后项目部署的目录

##### 3.2.2 启动 #####

双击: bin\\startup.bat

启动后，通过浏览器访问 `http://localhost:8080`能看到Apache Tomcat的内容就说明Tomcat已经启动成功。

注意: 启动的过程中，控制台有中文乱码:

*  因为Tomcat输出的日志信息是UTF-8的,而我们用的windows的控制台的编码是GBK的,所以需要修改conf/logging.prooperties:
    
     *  将java.util.logging.ConsoleHandler.encoding = UTF-8中的UTF-8改为GBK

##### 3.2.5 关闭 #####

关闭有三种方式

*  直接x掉运行窗口:强制关闭\[不建议,这相当于直接拔电源\]
 *  bin\\shutdown.bat：正常关闭
 *  ctrl+c： 正常关闭

##### 3.2.6 配置 #####

**修改端口**

*  Tomcat默认的端口是8080，要想修改Tomcat启动的端口号，需要修改 conf/server.xml(修改的端口号范围是0-65535)

![在这里插入图片描述][df637b7a95cf44c6a4d48ea0b763bb6d.png_pic_center]

> 注: HTTP协议默认端口号为80，如果将Tomcat端口号改为80，则将来访问Tomcat时，将不用输入端口号。访问时会自动带上80,即localhost:80

**启动时可能出现的错误**

*  Tomcat的端口号取值范围是**0-65535之间**任意未被占用的端口，如果设置的端口号被占用，启动的时候就会包如下的错误

![在这里插入图片描述][5c1d0e18b6a443bfa44a71291b5669fb.png_pic_center]

*  Tomcat启动的时候，启动窗口一闪而过: 需要检查JAVA\_HOME环境变量是否正确配置
    
     *  因为Tomcat是java编写的,运行时需要借助jdk才能正常运行

##### 3.2.7 部署 #####

*  Tomcat部署项目： 将项目放置到webapps目录下，即部署完成。
    
    但是呢随着项目的增大，项目中的资源也会越来越多，项目在拷贝的过程中也会越来越费时间，该如何解决呢:
    
     *  一般JavaWeb项目会被打包称war包，然后将war包放到Webapps目录下，**Tomcat会自动解压缩war文件**

#### 3.3 Maven创建Web项目 ####

##### 3.3.1 Web项目结构 #####

*  先说一下Maven项目和Maven Web项目目录结构的区别:
    
     *  后者多个一个webapp目录
     *  后者的pom.xml文件中多了war,表明打包方式是打成war包,而Maven的pom.xml中没有写这个标签,默认就是打成jar包

Web项目的结构分为:开发中的项目和开发完可以部署的Web项目,这两种项目的结构是不一样的，我们一个个来介绍下:

*  Maven Web项目结构: 开发中的项目

![在这里插入图片描述][80f0f6fbca12432e9f734ffaceee2ba3.png_pic_center]

*  开发完成部署的Web项目

![在这里插入图片描述][c53fccd4896a49eda7604626951e07d9.png_pic_center]

*  开发项目通过执行Maven打包命令package,可以获取到部署的Web项目目录
 *  编译后的Java字节码文件和resources的资源文件，会被放到WEB-INF下的classes目录下
 *  pom.xml中依赖坐标对应的jar包，会被放入WEB-INF下的lib目录下

##### 3.3.2 创建Maven Web项目 #####

介绍完Maven Web的项目结构后，接下来使用Maven来创建Web项目，创建方式有两种:使用骨架和不使用骨架

**使用骨架**

> 具体的步骤包含:
> 
> 1.创建Maven项目
> 
> 2.选择使用Web项目骨架
> 
> 3.输入Maven项目坐标创建项目
> 
> 4.确认Maven相关的配置信息后，完成项目创建
> 
> 5.删除pom.xml中多余内容
> 
> 6.补齐Maven Web项目缺失的目录结构

1.  创建Maven项目

![在这里插入图片描述][f6f90b5e7af0451ea0d80cc477e0ac6d.png_pic_center]

1.  选择使用Web项目骨架

![在这里插入图片描述][6fe8b2acdfcc4208b5dbe1b73e5100b0.png_pic_center]

1.  输入Maven项目坐标创建项目

![在这里插入图片描述][915cb4a76d614364b1d35e453060bb74.png_pic_center]

1.  确认Maven相关的配置信息后，完成项目创建

![在这里插入图片描述][338860b0ef9d405cbf6ebba44bf4f487.png_pic_center]

1.  删除pom.xml中多余内容，只留下面的这些内容，注意打包方式 jar和war的区别

![在这里插入图片描述][a69bda2281014aa3b17fc50cd2fefe27.png_pic_center]

1.  补齐Maven Web项目缺失的目录结构，默认没有java和resources目录，需要手动完成创建补齐，最终的目录结果如下

![在这里插入图片描述][369a5d08c57c4c41b600335fc9ac1c44.png_pic_center]

**不使用骨架**

> 具体的步骤包含:
> 
> 1.创建Maven项目
> 
> 2.选择不使用Web项目骨架
> 
> 3.输入Maven项目坐标创建项目
> 
> 4.在pom.xml设置打包方式为war
> 
> 5.补齐Maven Web项目缺失webapp的目录结构
> 
> 6.补齐Maven Web项目缺失WEB-INF/web.xml的目录结构

1.  创建Maven项目

![在这里插入图片描述][d01a5e50005e4cd78286e595157d7fed.png_pic_center]

1.  选择不使用Web项目骨架

![在这里插入图片描述][e238451ae2ad44f7af969f5f713fba05.png_pic_center]

1.  输入Maven项目坐标创建项目

![在这里插入图片描述][8610952caeae4954b58fb59d4a258886.png_pic_center]

1.  在pom.xml设置打包方式为war,默认是不写代表打包方式为jar

![在这里插入图片描述][5dde9e7cbd10499aafc43a7201af0244.png_pic_center]

1.  补齐Maven Web项目缺失webapp的目录结构

![在这里插入图片描述][2014567f5cb144e6b66182a05aaa5581.png_pic_center]

1.  补齐Maven Web项目缺失WEB-INF/web.xml的目录结构

![在这里插入图片描述][02ed304d030842f78772a627bb85095f.png_pic_center]

1.  补充完后，最终的项目结构如下:

![在这里插入图片描述][4ac9f9b8baed4db2b44e3219ad7bc191.png_pic_center]

上述两种方式，创建的web项目，都不是很全，需要手动补充内容，至于最终采用哪种方式来创建Maven Web项目，都是可以的，根据各自的喜好来选择使用即可。

#### 3.4 IDEA使用Tomcat ####

*  Maven Web项目创建成功后，通过Maven的package命令可以将项目打包成war包，将war文件拷贝到Tomcat的webapps目录下，启动Tomcat就可以将项目部署成功，然后通过浏览器进行访问即可。
 *  然而我们在开发的过程中，项目中的内容会经常发生变化，如果按照上面这种方式来部署测试，是非常不方便的
 *  如何在IDEA中能快速使用Tomcat呢?

在IDEA中集成使用Tomcat有两种方式，分别是集成本地Tomcat和Tomcat Maven插件

##### 3.4.1 集成本地Tomcat #####

目标: 将刚才本地安装好的Tomcat8集成到IDEA中，完成项目部署，具体的实现步骤

1.  打开添加本地Tomcat的面板

![在这里插入图片描述][68f5de9041ae4613bcd400c72114ccb7.png_pic_center]

1.  指定本地Tomcat的具体路径

![在这里插入图片描述][2d1157d586154b82809b1f5301dbe5bb.png_pic_center]

1.  修改Tomcat的名称，此步骤可以不改，只是让名字看起来更有意义，HTTP port中的端口也可以进行修改，比如把8080改成80

![在这里插入图片描述][76fe0c01760a43e182f36384360cbdb2.png_pic_center]

1.  将开发项目部署项目到Tomcat中

![在这里插入图片描述][9f8f74cfffe746a2ab4f1e8b85653ac4.png_pic_center]

扩展内容： xxx.war和 xxx.war exploded这两种部署项目模式的区别?

*  war模式是将WEB工程打成war包，把war包发布到Tomcat服务器上
 *  war exploded模式是将WEB工程以当前文件夹的位置关系发布到Tomcat服务器上
 *  war模式部署成功后，**Tomcat的webapps目录下会有部署的项目内容**
 *  war exploded模式部署成功后，Tomcat的webapps目录下没有，而**使用的是项目的target目录下的内容进行部署**
 *  建议大家都选war模式进行部署，更符合项目部署的实际情况

1.  部署成功后，就可以启动项目，为了能更好的看到启动的效果，可以在webapp目录下添加a.html页面

![在这里插入图片描述][093de24087ad4768a4d90ded476a89de.png_pic_center]

1.  启动成功后，可以通过浏览器进行访问测试

![在这里插入图片描述][0eb843c6b4b241b09912275cb7f04542.png_pic_center]

1.  最终的注意事项

![在这里插入图片描述][eb1cc15f0a5f4978bf3dc07b89d88b14.png_pic_center]

##### 3.4.2 Tomcat Maven插件 #####

在IDEA中使用本地Tomcat进行项目部署，相对来说步骤比较繁琐，所以我们需要一种更简便的方式来替换它，那就是直接使用Maven中的Tomcat插件来部署项目，具体的实现步骤，只需要两步，分别是:

1. 在pom.xml中添加Tomcat插件
 
 <build>
 <plugins>
 	
 <plugin>
 <groupId>org.apache.tomcat.maven</groupId>
 <artifactId>tomcat7-maven-plugin</artifactId>
 <version>2.2</version>
 </plugin>
 </plugins>
 </build>
2. 使用Maven Helper插件快速启动项目，选中项目，右键–>Run Maven --> tomcat7:run

![在这里插入图片描述][124581f3b478414eaf554ccc09b8c5a2.png_pic_center]

注意:

*  如果选中项目并右键点击后，看不到Run Maven和Debug Maven，这个时候就需要在IDEA中下载Maven Helper插件，具体的操作方式为: File --> Settings --> Plugins --> Maven Helper —> Install,安装完后按照提示重启IDEA，就可以看到了。
 *  Maven Tomcat插件目前只有Tomcat7版本，没有更高的版本可以使用
 *  使用Maven Tomcat插件，要想修改Tomcat的端口和访问路径，可以直接修改pom.xml

<build>
 <plugins>
 	
 <plugin>
 <groupId>org.apache.tomcat.maven</groupId>
 <artifactId>tomcat7-maven-plugin</artifactId>
 <version>2.2</version>
 <configuration>
 	<port>80</port>
 
 <path>/</path>
 </configuration>
 </plugin>
 </plugins>
 </build>

### 4， Servlet ###

#### 4.1 简介 ####

*  Servlet是JavaWeb最为核心的内容，它是Java提供的一门动态web资源开发技术。(Servlet是java中的接口)
 *  使用Servlet就可以实现，**根据不同的登录用户在页面上动态显示不同内容**。
 *  Servlet是JavaEE规范之一\*\*,java中的规范实际上就是接口\*\*，将来我们需要定义Servlet类实现Servlet接口，并由web服务器运行Servlet

介绍完Servlet是什么以后，接下来我们就按照`快速入门`\->`执行流程`\->`生命周期`\->`体系结构`\->`urlPattern配置`\->`XML配置`的学习步骤，一步步完成对Servlet的知识学习，首选我们来通过一个入门案例来快速把Servlet用起来。

#### 4.2 快速入门 ####

需求分析: 编写一个Servlet类，并使用IDEA中Tomcat插件进行部署，最终通过浏览器访问所编写的Servlet程序。

1.创建项目模块demo-servlet,导入Servlet依赖坐标和Tomcat插件:

<dependencies>
 <dependency>
 <groupId>javax.servlet</groupId>
 <artifactId>javax.servlet-api</artifactId>
 <version>3.1.0</version>
 
 <scope>provided</scope>
 </dependency>
 </dependencies>
 
 <build>
 <plugins>
 
 <plugin>
 <groupId>org.apache.tomcat.maven</groupId>
 <artifactId>tomcat7-maven-plugin</artifactId>
 <version>2.2</version>
 <configuration>
 </configuration>
 </plugin>
 </plugins>
 </build>

2.定义一个类com.itheima.web.MyTestMXY，实现Servlet接口，并重写接口中所有方法

public class MyTestMXY implements Servlet {
        
        @Override
        public void init(ServletConfig servletConfig) throws ServletException {
        
        }
        @Override
        public ServletConfig getServletConfig() {
        
            return null;
        }
        @Override
        public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
        
            HttpServletRequest request = (HttpServletRequest) servletRequest;
            HttpServletResponse response = (HttpServletResponse) servletResponse;
    
            String username = request.getParameter("username");
            response.setContentType("text/html;charset=utf-8");
            PrintWriter writer = response.getWriter();
            if ("zhangsan".equals(username)) {
        
                writer.write("张三,欢迎你");
            } else if ("lisi".equals(username)) {
        
                writer.write("李四,欢迎你");
            } else {
        
                writer.write("您没有权限访问");
            }
        }
        @Override
        public String getServletInfo() {
        
            return null;
        }
        @Override
        public void destroy() {
        
        }
    }

3.在类上使用@WebServlet注解，配置该Servlet的访问路径

@WebServlet("/login")

4.访问:启动Tomcat,浏览器中输入URL地址访问该Servlet

http://localhost:8080/demo05-servlet/login?username=zhangsan

会发现页面中输出了"张三,欢迎你"

如果在地址栏输入:

http://localhost:8080/demo05-servlet/login?username=lisi

如果这就解释了为什么说"Servlet是一门动态web资源开发技术"

至此，Servlet的入门案例就已经完成,这也印证了前面说的一句话:**我们常说的Servlet其实就是一个Servlet接口的实现类,但是这个类没有main方法,不能独立运行,需要依赖于Tomcat服务器才能运行起来**

#### 4.3 执行流程 ####

我们并没有创建ServletDemo1类的对象，也没有调用对象中的service方法，为什么在控制台就打印了`servlet hello world~`这句话呢?我们需要知道Servlet的执行流程:

*  浏览器发出`http://localhost:8080/demo05-servlet/login`请求，从请求中可以解析出三部分内容，分别是`localhost:8080`、`demo05-servlet`、`login`
    
     *  根据`localhost:8080`可以找到要访问的Tomcat Web服务器
     *  根据`demo05-servlet`可以找到部署在Tomcat服务器上的demo05-servlet项目
     *  根据`login`可以找到要访问的是项目中的哪个Servlet类，根据@WebServlet后面的值进行匹配
 *  找到MyTestMXY这个类后，Tomcat Web服务器就会为MyTestMXY这个类**创建一个对象**，然后**调用对象中的service方法**
    
     *  MyTestMXY实现了Servlet接口，所以类中必然会重写service方法供Tomcat Web服务器进行调用
     *  service方法中有ServletRequest和ServletResponse两个参数，ServletRequest封装的是请求数据，ServletResponse封装的是响应数据，后期我们可以通过这两个参数实现前后端的数据交互

**小结**

介绍完Servlet的执行流程，需要大家掌握两个问题：

1.  Servlet由谁创建?Servlet方法由谁调用?

> Servlet由web服务器创建，Servlet方法由web服务器调用

1.  服务器怎么知道Servlet中一定有service方法?

> 因为我们自定义的Servlet,必须实现Servlet接口并复写其方法，而Servlet接口中有service方法

#### 4.4 生命周期 ####

介绍完Servlet的执行流程后，我们知道Servlet是由Tomcat Web服务器帮我们创建的。

接下来咱们再来思考一个问题:Tomcat什么时候创建的Servlet对象?

要想回答上述问题，我们就需要对Servlet的生命周期进行一个学习。

*  生命周期: 对象的生命周期指一个对象从被创建到被销毁的整个过程。
 *  Servlet运行在Servlet容器(web服务器)中，其生命周期由容器来管理，分为4个阶段：
    
    1.  加载和实例化：默认情况下，当Servlet第一次被访问时，由容器创建Servlet对象
    
        默认情况，Servlet会在第一次访问被容器创建并初始化，但是如果创建或初始化Servlet比较耗时的话，那么第一个访问的人等待的时间就比较长，用户的体验就比较差，那么我们能不能把Servlet的创建并初始化放到服务器启动的时候来创建，具体如何来配置?
        
        @WebServlet(urlPatterns = "/demo1",loadOnStartup = 1)
        loadOnstartup的取值有两类情况
        	（1）负整数:第一次访问时创建Servlet对象
        	（2）0或正整数:服务器启动时创建Servlet对象，数字越小优先级越高
    
    1.  初始化：在Servlet实例化之后，容器将调用Servlet的init()方法初始化这个对象，完成一些如加载配置文件、创建连接等初始化的工作。该方法只调用一次
    2.  请求处理：每次请求Servlet时，Servlet容器都会调用Servlet的==service()==方法对请求进行处理
    3.  服务终止：当需要释放内存或者容器关闭时，容器就会调用Servlet实例的==destroy()==方法完成资源的释放。在destroy()方法**调用之后，容器会释放这个Servlet实例，该实例随后会被Java的垃圾收集器所回收**
 *  通过案例演示下上述的生命周期
    
        @WebServlet(urlPatterns = "/demo2",loadOnStartup = 1)
        public class ServletDemo2 implements Servlet {
              
            /**
             *  初始化方法调用时机：
             *	默认情况下，Servlet被第一次访问时，调用
             *   	loadOnStartup: 默认为-1，修改为0或者正整数，则会在服务器启动的时候调用
             */
            @Override
            public void init(ServletConfig config) throws ServletException {
              
                System.out.println("init...");
            }
            @Override
            public void service(ServletRequest req, ServletResponse res) throws ServletException, IOException {
              
                System.out.println("servlet hello world~");
            }
            @Override
            public void destroy() {
              
                System.out.println("destroy...");
            }
            /**这里我省略写getServletConfig和getServletInfo方法**/
        }
    
     *  以前说过,注解里面如果只配一个value值且该注解中其他值设有默认值,那么可以省略"value="
        
         *  urlPatterns属性和value属性作用是一样的,这里我们用的是urlPatterns
         *  当然我也可以用value：@WebServlet(“/demo2”,loadOnStartup = 1)
     *  内存释放或者服务器关闭的时候，Servlet对象会被销毁，此时才会调用destroy方法,但是不能直接让程序终止(这相当于拔电源了,和3.2.5说的直接x掉运行窗口是一样的),那么怎么才能让Servlet中的destroy方法被执行:**在Terminal命令行中，先使用`mvn tomcat7:run`启动，然后再使用`ctrl+c`关闭tomcat**(有细节需要处理,我还没成功,我认为对我来说目前只需要知道destroy执行时机就行了)

![在这里插入图片描述][ac16713848d342f18d0487cf3c331308.png_pic_center]

#### 4.5 方法介绍 ####

Servlet中总共有5个方法，我们已经介绍过其中的三个，剩下的两个方法作用分别是什么？

我们先来回顾下前面讲的三个方法，分别是:

*  初始化方法，在Servlet被创建时执行，只执行一次

void init(ServletConfig config)

*  提供服务方法， 每次Servlet被访问，都会调用该方法

void service(ServletRequest req, ServletResponse res)

*  销毁方法，当Servlet被销毁时，调用该方法。在内存释放或服务器关闭时销毁Servlet

void destroy()

剩下的两个方法是:

*  获取Servlet信息

String getServletInfo() 
    //该方法用来返回Servlet的相关信息，没有什么太大的用处，一般我们返回一个空字符串即可
    public String getServletInfo() {
        
        return "";
    }

*  获取ServletConfig对象

ServletConfig getServletConfig()

ServletConfig对象，在init方法的参数中有，而Tomcat Web服务器在创建Servlet对象的时候会调用init方法，必定会传入一个ServletConfig对象，我们只需要将服务器传过来的ServletConfig进行返回即可。具体如何操作?

*  因为给init方法传的ServletConfig对象是局部变量,所以需要提升作用域:
    
     *  在类中声明一个ServletConfig类型的变量servletConfig
     *  在init方法中添加代码:this.servletConfig=config
     *  这样作用域就提升了,我们就可以在getServletConfig()方法中返回ServletConfig对象了

getServletInfo()和getServletConfig()这两个方法几乎不用，了解下即可

#### 4.6 体系结构 ####

通过上面的学习，我们知道要想编写一个Servlet就必须要实现Servlet接口，重写接口中的5个方法，虽然已经能完成要求，但是编写起来还是比较麻烦的，因为我们更关注的其实只有service方法，那有没有更简单方式来创建Servlet呢?

要想解决上面的问题，我们需要先对Servlet的体系结构进行下了解:

![在这里插入图片描述][23259c20e6514c39857d72a86a985309.png_pic_center]

因为我们将来开发B/S架构的web项目，都是针对HTTP协议，所以以后我们创建Servlet实现类时都会选择继承HttpServlet类而不是实现Servlet接口

具体的编写格式如下:

@WebServlet("/demo4")
    public class ServletDemo4 extends HttpServlet {
        
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
            //TODO GET 请求方式处理逻辑
            System.out.println("get...");
        }
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
            //TODO Post 请求方式处理逻辑
            System.out.println("post...");
        }
    }

Servlet的简化编写就介绍完了，接着需要思考两个问题:

1.  HttpServlet中为什么要根据请求方式的不同，调用不同的方法?
2.  如何调用?

针对问题一，我们需要回顾之前的知识点前端发送GET和POST请求的时候，参数的位置不一致，GET请求参数在请求行中，POST请求参数在请求体中，为了能处理不同的请求方式，我们得在service方法中进行判断，然后写不同的业务处理

@WebServlet("/demo5")
    public class ServletDemo5 implements Servlet {
        
        /**这里我省略写init,destroy,getServletConfig和getServletInfo方法**/
        @Override
        public void service(ServletRequest req, ServletResponse res) throws ServletException, IOException {
        
            //如何调用?
            //获取请求方式，根据不同的请求方式进行不同的业务处理
            HttpServletRequest request = (HttpServletRequest)req;
           //1. 获取请求方式
            String method = request.getMethod();
            //2. 判断
            if("GET".equals(method)){
        
                // get方式的处理逻辑
            }else if("POST".equals(method)){
        
                // post方式的处理逻辑
            }
        }
    }

虽然实现了能根据不同的请求方式写不同的业务，但是每个Servlet类中都将有相似的代码，针对这个问题，有什么可以优化的策略吗：对Servlet接口进行继承封装，来简化代码开发

public class MyHttpServlet implements Servlet {
        
        /**这里我省略写init,destroy,getServletConfig和getServletInfo方法**/
        @Override
        public void service(ServletRequest req, ServletResponse res) throws ServletException, IOException {
        
            HttpServletRequest request = (HttpServletRequest)req;
            //1. 获取请求方式
            String method = request.getMethod();
            //2. 判断
            if("GET".equals(method)){
        
                // get方式的处理逻辑
                doGet(req,res);
            }else if("POST".equals(method)){
        
                // post方式的处理逻辑
                doPost(req,res);
            }
        }
        protected void doPost(ServletRequest req, ServletResponse res) {
        
        }
        protected void doGet(ServletRequest req, ServletResponse res) {
        
        }
    }

*  有了MyHttpServlet这个类，以后我们再编写Servlet类的时候，只需要继承MyHttpServlet，重写父类中的doGet和doPost方法，就可以用来处理GET和POST请求的业务逻辑。
 *  注意:**MyHttpServlet类上不能写@WebServlet注解**,因为这个类是用来被别的类继承的,我们应该在继承MyHttpServlet的类上写注解

接下来，创建类ServletDemo6并使其继承MyHttpServlet,在类中重写父类的doGet和doPost方法

@WebServlet("/demo6")
    public class ServletDemo6 extends MyHttpServlet {
        
        @Override
        protected void doGet(ServletRequest req, ServletResponse res) {
        
            System.out.println("get...");
        }
        @Override
        protected void doPost(ServletRequest req, ServletResponse res) {
        
            System.out.println("post...");
        }
    }

将来页面发送的是GET请求，则会进入到doGet方法中进行执行，如果是POST请求，则进入到doPost方法。这样代码在编写的时候就相对来说更加简单快捷。

*  类似MyHttpServlet这样的类Servlet中已经为我们提供好了，就是HttpServlet,翻开源码，会发现HttpServlet就相当于我们自己创建的MyHttpServlet,只是人家还在里面做了很多的细节处理
    
     *  HttpServlet不仅做了这个简化处理,还做了其他很多事情,就像4.6开头的图片中说的"HttpServlet是对HTTP协议封装的Servlet实现类",所以我们以后创建Servlet实现类时都会选择继承HttpServlet类而不是实现Servlet接口

#### 4.7 urlPattern配置 ####

Servlet类编写好后，要想被访问到，就需要配置其访问路径（urlPattern）

1.一个Servlet,可以配置多个urlPattern

*  @WebServlet(urlPatterns = \{“/demo7”,“/demo8”\})
 *  为什么需要加大括号\{\}呢,看WebServlet注解的源码:

public @interface WebServlet {
        
        //省略
        String[] urlPatterns() default {
        };
        //省略
    }

会发现人家定义的是一个字符串数组类型,所以多个参数时需要用\{\},我有个疑问,为啥单个参数时不需要\{\}?难道是因为一个参数时会自动给它转为数组类型?

2.urlPattern配置规则

*  精确匹配
    
     *  配置路径:@WebServlet(urlPatterns = “/user/select”)
     *  访问路径:`localhost:8080/web-demo/user/select`
 *  目录匹配
    
     *  配置路径:@WebServlet(urlPatterns = “/user/\*”)
     *  访问路径:`http://localhost:8080/web-demo/user/任意`
     *  特殊情况:
        
         *  `http://localhost:8080/web-demo/user`和`http://localhost:8080/web-demo/user/`也都可以访问
         *  `http://localhost:8080/web-demo/user/a/b`也可以访问
         *  所以我们可以得到的结论是`/user/*`中的`/*`代表的是零或多个层级访问目录
    
    注意:**如果一个路径既满足精确匹配又满足目录匹配,那么按照精确匹配的(谁生效范围小谁优先级高)**
 *  扩展名匹配
    
     *  配置路径:@WebServlet(urlPatterns = “\*.do”)
     *  访问路径:`http://localhost:8080/web-demo/任意.do`
    
    注意:
    
    1.  如果路径配置的不是扩展名，那么在路径的前面就必须要加`/`否则会报错
    2.  如果路径配置的是`*.do`,那么在\*.do的前面不能加`/`,否则会报错
 *  任意匹配
    
     *  配置路径:@WebServlet(urlPatterns = “/\*”)或@WebServlet(urlPatterns = “/”)
     *  访问路径`http://localhost:8080/demo-web/任意`
    
    注意:
    
     *  tomcat中有一个默认的DefaultServlet,这个Servlet配置的路径就是`/`,所以当其他的url-pattern都匹配不上时就会走这个Servlet，然后tomcat又在DefaultServlet类中做了一些逻辑处理,所做的一切的最终目的是为了:**在url地址栏中输入项目的静态资源文件名时(带有扩展名)就可以访问到静态资源了**.比如我在url输入`http://localhost:8080/demo05-servlet/a.html`就可以访问到a.html了
     *  而当我们的项目中的Servlet配置了 “/”,会覆盖掉tomcat中默认的Servlet,就会引发请求静态资源的时候没有走默认的而是走了自定义的Servlet类，最终导致静态资源不能被访问
     *  当我们的项目中配置了`/*`,虽然并没有覆盖掉tomcat中默认的Servlet,但因为`/*`的优先级比`/`的高,并且`/*`意味着匹配任意访问路径,所以最终结果也是请求静态资源的时候没有走默认的而是走了自定义的Servlet类，最终导致静态资源不能被访问
     *  所以`/*`和`/`是非常危险的,我们不要轻易使用
 *  五种配置的优先级为 *精确匹配 > 目录匹配> 扩展名匹配 > / > /*\*

#### 4.8 XML配置 ####

前面对应Servlet的配置，我们都使用的是@WebServlet,这个是Servlet从3.0版本后开始支持注解配置，3.0版本前只支持XML配置文件的配置方法。

对于XML的配置步骤有两步:

*  编写Servlet类

public class ServletDemo13 extends MyHttpServlet {
        
        @Override
        protected void doGet(ServletRequest req, ServletResponse res) {
        
            System.out.println("demo13 get...");
        }
        @Override
        protected void doPost(ServletRequest req, ServletResponse res) {
        
        }
    }

*  在web.xml中配置该Servlet

<servlet>
 
 <servlet-name>demo13</servlet-name>
 
 <servlet-class>com.itheima.web.ServletDemo13</servlet-class>
 </servlet>
 
 
 <servlet-mapping>
 
 <servlet-name>demo13</servlet-name>
 
 <url-pattern>/demo13</url-pattern>
 </servlet-mapping>

这种配置方式和注解比起来，确认麻烦很多，所以建议使用注解来开发

[839cedb7870d4d1ab3be2e3e123f304b.png_pic_center]: https://img-blog.csdnimg.cn/839cedb7870d4d1ab3be2e3e123f304b.png#pic_center
[956cdd2aadec4651923e5d275e7938ff.png_pic_center]: https://img-blog.csdnimg.cn/956cdd2aadec4651923e5d275e7938ff.png#pic_center
[d195ca56f9404ff9ab4b47e09fca2c79.png_pic_center]: https://img-blog.csdnimg.cn/d195ca56f9404ff9ab4b47e09fca2c79.png#pic_center
[64ade3e807df4979aaaade685008a642.png_pic_center]: https://img-blog.csdnimg.cn/64ade3e807df4979aaaade685008a642.png#pic_center
[348509f7cac346688d822fb8323b5212.png_pic_center]: https://img-blog.csdnimg.cn/348509f7cac346688d822fb8323b5212.png#pic_center
[df637b7a95cf44c6a4d48ea0b763bb6d.png_pic_center]: https://img-blog.csdnimg.cn/df637b7a95cf44c6a4d48ea0b763bb6d.png#pic_center
[5c1d0e18b6a443bfa44a71291b5669fb.png_pic_center]: https://img-blog.csdnimg.cn/5c1d0e18b6a443bfa44a71291b5669fb.png#pic_center
[80f0f6fbca12432e9f734ffaceee2ba3.png_pic_center]: https://img-blog.csdnimg.cn/80f0f6fbca12432e9f734ffaceee2ba3.png#pic_center
[c53fccd4896a49eda7604626951e07d9.png_pic_center]: https://img-blog.csdnimg.cn/c53fccd4896a49eda7604626951e07d9.png#pic_center
[f6f90b5e7af0451ea0d80cc477e0ac6d.png_pic_center]: https://img-blog.csdnimg.cn/f6f90b5e7af0451ea0d80cc477e0ac6d.png#pic_center
[6fe8b2acdfcc4208b5dbe1b73e5100b0.png_pic_center]: https://img-blog.csdnimg.cn/6fe8b2acdfcc4208b5dbe1b73e5100b0.png#pic_center
[915cb4a76d614364b1d35e453060bb74.png_pic_center]: https://img-blog.csdnimg.cn/915cb4a76d614364b1d35e453060bb74.png#pic_center
[338860b0ef9d405cbf6ebba44bf4f487.png_pic_center]: https://img-blog.csdnimg.cn/338860b0ef9d405cbf6ebba44bf4f487.png#pic_center
[a69bda2281014aa3b17fc50cd2fefe27.png_pic_center]: https://img-blog.csdnimg.cn/a69bda2281014aa3b17fc50cd2fefe27.png#pic_center
[369a5d08c57c4c41b600335fc9ac1c44.png_pic_center]: https://img-blog.csdnimg.cn/369a5d08c57c4c41b600335fc9ac1c44.png#pic_center
[d01a5e50005e4cd78286e595157d7fed.png_pic_center]: https://img-blog.csdnimg.cn/d01a5e50005e4cd78286e595157d7fed.png#pic_center
[e238451ae2ad44f7af969f5f713fba05.png_pic_center]: https://img-blog.csdnimg.cn/e238451ae2ad44f7af969f5f713fba05.png#pic_center
[8610952caeae4954b58fb59d4a258886.png_pic_center]: https://img-blog.csdnimg.cn/8610952caeae4954b58fb59d4a258886.png#pic_center
[5dde9e7cbd10499aafc43a7201af0244.png_pic_center]: https://img-blog.csdnimg.cn/5dde9e7cbd10499aafc43a7201af0244.png#pic_center
[2014567f5cb144e6b66182a05aaa5581.png_pic_center]: https://img-blog.csdnimg.cn/2014567f5cb144e6b66182a05aaa5581.png#pic_center
[02ed304d030842f78772a627bb85095f.png_pic_center]: https://img-blog.csdnimg.cn/02ed304d030842f78772a627bb85095f.png#pic_center
[4ac9f9b8baed4db2b44e3219ad7bc191.png_pic_center]: https://img-blog.csdnimg.cn/4ac9f9b8baed4db2b44e3219ad7bc191.png#pic_center
[68f5de9041ae4613bcd400c72114ccb7.png_pic_center]: https://img-blog.csdnimg.cn/68f5de9041ae4613bcd400c72114ccb7.png#pic_center
[2d1157d586154b82809b1f5301dbe5bb.png_pic_center]: https://img-blog.csdnimg.cn/2d1157d586154b82809b1f5301dbe5bb.png#pic_center
[76fe0c01760a43e182f36384360cbdb2.png_pic_center]: https://img-blog.csdnimg.cn/76fe0c01760a43e182f36384360cbdb2.png#pic_center
[9f8f74cfffe746a2ab4f1e8b85653ac4.png_pic_center]: https://img-blog.csdnimg.cn/9f8f74cfffe746a2ab4f1e8b85653ac4.png#pic_center
[093de24087ad4768a4d90ded476a89de.png_pic_center]: https://img-blog.csdnimg.cn/093de24087ad4768a4d90ded476a89de.png#pic_center
[0eb843c6b4b241b09912275cb7f04542.png_pic_center]: https://img-blog.csdnimg.cn/0eb843c6b4b241b09912275cb7f04542.png#pic_center
[eb1cc15f0a5f4978bf3dc07b89d88b14.png_pic_center]: https://img-blog.csdnimg.cn/eb1cc15f0a5f4978bf3dc07b89d88b14.png#pic_center
[124581f3b478414eaf554ccc09b8c5a2.png_pic_center]: https://img-blog.csdnimg.cn/124581f3b478414eaf554ccc09b8c5a2.png#pic_center
[ac16713848d342f18d0487cf3c331308.png_pic_center]: https://img-blog.csdnimg.cn/ac16713848d342f18d0487cf3c331308.png#pic_center
[23259c20e6514c39857d72a86a985309.png_pic_center]: https://img-blog.csdnimg.cn/23259c20e6514c39857d72a86a985309.png#pic_center