javaEE 初阶 — 第一个 servlet 程序

今天药忘吃喽~ 2023-10-09 16:25 15阅读 0赞

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

*  Servlet 是什么
 *  第一个 Servlet 程序
 *   *  1 创建项目
     *  2 引入依赖
     *  3 创建目录结构
     *  4 代码编写
     *  5 打包程序
     *  6 部署
     *  7 验证
 *  如何使用 tomcat 插件打包及部署
 *   *  1 什么是插件
     *  2 插件的安装
     *  3 插件的使用
     *  4 可能会出现的问题

## Servlet 是什么 ##

**Servlet** 是一种实现 **动态页面** 的技术，是一组 **Tomcat** 提供给程序猿的 API，  
帮助程序猿简单高效的开发一个 web app。  
  
网页是分为两大类的：

1、**静态页面**：页面的内容始终是固定不变的，静态页面就只是单纯的 html ，例如搜狗主页。

2、**动态页面**：页面内容随着输入参数的不同而改变，动态页面则是 html + 数据，例如搜狗结构页。

## 第一个 Servlet 程序 ##

先来实现一个 hello world ，预期写一个 servlet 程序，部署到 tomcat 上。  
通过浏览器访问得到 hello world 字符串。

这里的操作一共分为 7 个步骤：

1、创建项目

2、引入依赖

3、创建目录结构

4、编写代码

5、打包程序

6、部署程序

7、验证

### 1 创建项目 ###

选择 **maven**，不要选择左边的。  
  
![8538f287f58442888db879057890ccdd.png_pic_center][]  
  
点击完成即可。  
  
![93a21ed7f4dd469fb6d9e06c00a2d1f6.png_pic_center][]

**main** 底下存放的是 **业务代码**，**java** 目录底下存放的是 java 代码。  
**resources** 里存放的是程序依赖的文件，此处再是不涉及。  
**test** 目录下的 java 存放的是 测试代码，**pom.xml** 是 maven 项目的配置文件，后面会经常用到。

![6d4706c10baf4b1a89f4a2f238b3e82f.png_pic_center][]  
  
项目创建好以后，上面的代码是自带的。

### 2 引入依赖 ###

搜索 **https://mvnrepository.com/** 打开 maven 仓库。  
  
![0afcb57d461d4b478bba06292325d225.png_pic_center][]  
  
需要先验证。  
  
搜索 servlet 选择当前的圈出的。  
  
![64f6e687b45a4b19b4dc09f4e1518a13.png_pic_center][]  
  
点击进去，选择 **3.1.0** 版本。  
  
![29abdd8978774c7a980cad0262dd032d.png_pic_center][]  
  
![88fd6517667f4d5582177cba56637dc9.png_pic_center][]  
  
选中当前的 maven，将上述的代码复制到 **pom.xml** 里，要复制到 **dependencies** 标签里。

![7ad1c77130864e57a3524cb4c76d248d.png_pic_center][]  
  
为红色说明未下载完成。

### 3 创建目录结构 ###

虽然 maven 已经帮我们自动的创建了一些目录，但是还是不够。  
此处需要使用 maven 开发一个 web 程序，还需要别的目录。

1、**在 main 目录下创建一个 webapp 目录**  
  
![c6732a6b20524e7e8f304988c4ff88f1.png_pic_center][]  
  
选择 **Directory**，创建 webapp 目录。

2、**在 webapp 下创建一个 WEB-INF 目录**  
  
![3e3849e8e48a4d27963aedc27b9a1667.png_pic_center][]  
  
选择 **Directory**，创建 **WEB-INF** 目录。

3、**在 WEB-INF 目录下创建一个 web.xml 文件**  
  
![2e4a1d255a444472872a31084386b67b.png_pic_center][]  
  
选择 File 创建文件。

4、**给 web.xml 写点东西进去**

<!DOCTYPE web-app PUBLIC
            "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
            "http://java.sun.com/dtd/web-app_2_3.dtd" >
    <web-app>
        <display-name>Archetype Created Web Application</display-name>
    </web-app>

直接将上面的这段代码复制到 web.xml 文件中。  
  
![c67513d30b94498e924d785a36ebdd64.png_pic_center][]  
  
圈出的部分可能会是红色的，但是不一定是错误的，可以使用 alt + enter 使使。

### 4 代码编写 ###

创建一个 **HelloServlet** 类。  
  
![f1dc3abf93db4fba96d1d94c93d5f7e9.png_pic_center][]

import javax.servlet.http.HttpServlet;
    
    public class HelloWorld extends HttpServlet {
        
    
    }

**HttpServlet** 是 **servlet api** 里提供的现成的类，一般写 servlet 代码一般都是继承 HttpServlet

这个类需要重写 **doGet** 方法，如果是一个 Post 请求，那就是重写一个 doPost 请求。

public class HelloWorld extends HttpServlet {
        
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
           //super.doGet(req, resp);
        }
    }

**@Override** 表示的是**方法重写**，  
**HttpServletRequest request** 这个参数表示一个 http 请求。  
**HttpServletResponse response** 这个参数表示一个 http 响应。

doGet 方法的效果就是 **根据请求计算响应**， **Tomcat** 收到 get 请求就会触发 doGet 方法，Tomcat 就会构造好两个参数，  
一个是 **rep**一个是 **resp**。

rep 是 TCP socket 中读出来的字符串，按照 http 协议解析得到的对象。  
resp 则只是一个 空的对象。

**super.doGet(req, resp);** 这儿条语句一定要注释掉。

编写业务代码，也就是我们的 hello world 。

// 这是一个注解
    @WebServlet("/hello")
    public class HelloServlet extends HttpServlet {
        
    
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
            //super.doGet(req, resp);
            System.out.println("Hello World"); // 这是控制台打印
            // 返回到客户端的打印
            // getWriter 会得到一个 Writer 对象
            resp.getWriter().write("Hello World");
        }
    }

这里的注解类似于一个导购员，作用是针对一个类/方法，进行额外的 “解释说明”，  
赋予这个类/方法额外的功能/含义。

需要注意的是，**doGet** 是 **Tomcat** 收到 **GET** 请求的时候就会调用。  
具体要不要调用 doGet，还要看当前的 GET 请求的路径是什么，不同的路径可以触发不同的代码。  
（关联到不同的类上）  
  
举一个例子，比如说，我到饭店吃饭，向老板点了一份蛋炒饭，我的要求是葱要多放。  
此时就是 **http://ip:port/蛋炒饭?葱=多放**。  
老板再收到请求的时候就需要按照 “制作蛋炒饭” 的流程来做饭，也就是根据请求计算响应。

如果我点的是一个多放辣椒的炒面，那就是 **http://ip:port/炒面?辣椒=多放**。  
此时老板收到的请求之后，就是按照 “制作炒面” 的流程来制作饭，也就是根据请求计算响应。

这很明显是两个不同的流程，相当于是两个不同的类/方法。

一个 Servlet 程序中，可以有很多的 Servlet 类，每个 Servlet 都可以关联到不同的路径，也就是对应到不同的资源，因此多个 Servlet 就实现了不同的功能，但是一个 Servlet 类是不可以对应多个路径的。对应的，一个路径也不能对应多个 Servlet，**路径 和 Servlet 类之间是一对一之间的关系**。

### 5 打包程序 ###

程序编译好之后，会得到一些.class 文件，此时要把这文件打成 **war** 包。  
war 是 tomcat 专属的用来描述 webapp 的程序，一个 war 就是一个 webapp。

1、**点击右侧的 maven ，打开面板**  
  
![8d160a1f7aef4654bf5e6a24291e87bd.png_pic_center][]  
  
2、**选中此时的 Lifecyle 下的 package**  
  
![b2c89a216bcc44898dc09ca2c8ea5a97.png_pic_center][]  
  
可以直接双击运行。  
  
![d0563b5942a34d9780850c1e5c91ddfe.png_pic_center][]  
  
也可以右键选中上面的 **Run** 运行。

3、**成功之后就会显示 build success**  
  
![526421371f954a04964cb9c2f251aadf.png_pic_center][]  
  
如果打包错误了，就会产生一个报错。  
  
打完之后再左侧的 target 目录里就包含了 所打的包，默认情况下打的是一个 **jar** 包  
  
![5f7be137ffb9414ba07fbcaab226b715.png_pic_center][]

4、**修改 jar 包 为 war 包**  
  
先在 **pom.xml** 文件中的 **project** 标签里加入一个 **packaging** 标签。  
在这标签里写下指定的包是哪一种，我们打的是 war 包，此处就写的是 war 包。

还需要有一个 **build** 标签，在 这个 build 标签里也要有一个 **finalName** 标签。  
此处的 finalName 标签里写的就是包的名字。

![f6b7d3bb81aa470daa1500b53ac2b5e2.png_pic_center][]  
  
可以看到此时打的 war 包。

5、**右键打开 war 包**  
  
![ce8ae80eff3445fdbf452d7527852f0c.png_pic_center][]  
  
打开之后，可以看到 target 目录下的 war 包。  
  
![7c7aeb09dae94d3899e794cb85620e75.png_pic_center][]

### 6 部署 ###

部署就是将之前的 war 文件 拷贝到 tomcat 的 webapps 目录即可，无论 tomcat 是不是在你的同一个电脑上，都是如此拷贝。

拷贝后，启动 tomcat。

如果 tomcat 正在运行，直接拷贝的时候 tomcat 也可以识别，但是在 windows 中可能存在 bug，  
实际工作中，tomcat 基本都是在 linux 上运行的。

![5346b448a8534925837d3f9ae00c35e9.png_pic_center][]  
  
之后启动 tomcat 。  
  
![6725ff28e1844025bab7b38021a7b19c.png_pic_center][]  
  
看到上面的即为启动成功。

### 7 验证 ###

打开地址栏，输入 url ，测试写好的代码。  
  
![b0d48c8fdc41426c9019b1aab741bec4.png_pic_center][]  
  
test01 是 **第一级目路径**，也叫做 **context path / application path**，这个目录就代表了一个 webapp，也就是一个网站。

/hello 是 **第二级路径** 也叫做 **servlet path**，如果这两个路径有一个出现了错误，就会出现 404

![a0e1f5eeef5c40ba849b43904f0be213.png_pic_center][]  
  
![e73644d490f54d70a8ef0621f42e6a63.png_pic_center][]  
  
第一级路径对应的是 war 包名，第二级路径对应的是 **注解** 里的内容。  
  
![5006ee75c87b41719a8c658516ed1d2c.png_pic_center][]  
  
![f50234cfae8348ccb1ead41298581f8f.png_pic_center][]  
  
可以看到在服务器和客户端都打印出了 Hello World。

小结  
  
在浏览器地址栏输入 url 之后，浏览器就构造了一个对应的 HTTP GET 请求，发给了 tomcat 。  
tomcat 就根据第一级路径确定了具体的 webapp，根据第二级路径确定了是调用哪个类。  
然后再通过 GET/POST 方法确定调用 HelloSevlet 类里的哪个方法，是 doGet、doPost，还是其他的方法。

## 如何使用 tomcat 插件打包及部署 ##

**打包** 和 **部署** 是可以使用 idea 的 tomcat 插件，把 tomcat 集成到 idea 中。  
就可以省去手动打包和部署的过程，只需要按一下运行就会自动打包部署。  
  
基于 tomcat 插件自动打包部署，适用于开发阶段，频繁修改代码，频繁验证的场景。  
手动打包部署，适用于上线阶段，发布程序时使用。

### 1 什么是插件 ###

插件就是对现有的功能进行的拓展，很多程序都是有插件功能的。  
  
![be756957d3d84a43a5a09fb92cece4c1.png_pic_center][]  
  
就比如上图中的 m4，射击是它的一个功能，但是说如果目标距离过远导致没有办法很容易的命中，  
此时就可以装上一个瞄准镜，此时的瞄准镜就是一个插件，作用就是添加一个远距离瞄准的功能。

如果没有添加瞄准镜这个插件，它也是可以开火射击的，只是对于远距离目标就没有那么精准了。  
相当于是没有了插件后，功能比以前更少了。

如果此时在夜间看不见目标，就可以在添加上一个夜视仪，这个插件就保证了夜间也可以命中目标。  
夜视仪就是另外的一个插件，另外的一个功能。

### 2 插件的安装 ###

1、**打开左上角的 File 选择点击 Settings**  
  
![fd431e09fa89434aafc8919ff5bdb85e.png_pic_center][]

2、**点击 Plugins**  
  
![7040584254134ab382ee1c7a8b032f3f.png_pic_center][]  
  
在点击后出现的页面中，  
  
![5d688aeee94f46ed99ec3598d20e7b49.png_pic_center][]  
  
**Marketplace** 表示的是插件市场，要在这里搜索下载插件。  
**Installed** 页面表示的是已经装好了的插件。

3、**搜索 smart tomcat**  
  
![d70750977aaa4a31a850a1aa7779b0d8.png_pic_center][]  
  
**smart tomcat** 就是我们要下载的插件，点击 **Install** 开始下载。  
下载完成之后，重启 idea 即可。

### 3 插件的使用 ###

首次使用 smart tomcat 的时候，需要配置一下，当然之后就不需要配置了。  
  
1、新增一个运行配置  
  
单击右上角的 **Add Configuration…**  
  
![2877afa67c4544a183174babc4ea02d8.png_pic_center][]  
  
![9bf3afe318f649b2aa97d3ce3a8d6853.png_pic_center][]  
  
在出现的页面中，点击圈出的部分。

2、**在出现的页面中选择 smart tomcat**  
  
![f469a5c76e2e44e58bb981075c7eca9e.png_pic_center][]  
  
![92e4d6612ba24fc7a2a9504635cae96b.png_pic_center][]  
  
点击后出现的页面就是上图中的页面，我们只需要配置绿色圈出的部分，这部分默认即可。

3、**设置一下 tomcat 所在的路径**  
  
第一次配置好了，以后就不需要再配置了。  
  
![fb98db07a6a74998a68ef4edfc2e68d1.png_pic_center][]

4、**运行 tomcat**  
  
![0275531bc2714337a9215d498be71295.png_pic_center][]  
  
点击右上角的 三角形 运行。  
  
![ef6dbd3831d547088b0100420d245eb3.png_pic_center][]  
  
运行后发现报错了，此时报的错误是 地址已被占用。  
  
![f4adc3c616f6473f801b1505dc966bf1.png_pic_center][]  
  
可以发现此时的使用的端口是 8080。

此时就可以打开 cmd ，键入 **netstat -ano | findstr 8080**  
  
![f6cf94a14f8b488ea28a3b96fccf4ea8.png_pic_center][]  
  
此时就可以看到 16620 这个进程占用了 8080 这个 端口。

打开 **任务资源管理器**  
  
![9446a7cf35fe48b780599c7c61b4dce9.png_pic_center][]  
  
可以看到 16620 这个进程就是我们的 tomcat 对应到的 java 进程，因此，关掉 tomcat 即可。

关掉之后，就可以发现此时 8080 不再被占用了。  
  
![9ed9b2f2b63445d28f1a5f413539bed4.png_pic_center][]  
  
![5ded096c9db7429ba384e2397254cb58.png_pic_center][]  
  
可以发现此时，就运行成功了。

此时还需要再验证一下，在地址栏输入 **http://127.0.0.1:8080/test01/hello**。  
  
![1854db3cd3184ba2b386e3b74b5ec5fc.png_pic_center][]  
  
smart tomcat 的工作原理  
  
**smart tomcat** 不是自动把 war 包拷贝了，也就是 webapps 里是不变的，  
而是通过另一种方式来启动的 tomcat 的。

tomcat 支持启动时显示指定一个特定的 webapp 目录，相当于是让 tomcat 加载单个 webapp 运行。  
idea 直接调用 tomcat 让 tomcat 加载当前项目中的目录。这个过程中其实并没有打 war 包，也没有拷贝，也没有解压缩。

### 4 可能会出现的问题 ###

1、**404**  
  
导致 404 出现的原因，可能是**路径写错**了。也有可能是 **webapp 没有被正确部署**，  
例如，web.xml 文件里的内容写错了、文件名写错了、文件路径写错了、文件位置错了…  
  
![fe2e6f5855af42188e56820830ec3072.png_pic_center][]  
此时就是一个 404 错误。

2、**405**  
  
如果出现了 405，可能是浏览器发了一个 GET 请求，但是此时的代码里是没写 doGet 方法的。  
  
![42fcee5d963d4692848d6d08b7022705.png_pic_center][]  
  
如果 **super.doGet(req, resp);** 这条语句没有注释掉，也会报 405。  
  
![f0c0d873b4a142b79083aedb2f0e2750.png_pic_center][]

3、**500**  
  
出现 500 ，本质上就是代码抛出异常了，抛出 500 的时候**日志**会明确的告诉你异常调用栈，  
会告诉你哪一行代码出问题了。

String s = null;
    System.out.println(s.length());

此时的代码肯定会报一个 **空指针异常**。  
  
![41364c7a34204cc3bd83832d9f4aa48e.png_pic_center][]  
  
可以看到在报 500 的同时，也报出了空指针异常，而且连出现问题的代码行数也报出来了。

4、**出现空白页面**  
  
出现空白页面，是因为代码里没写 **resp.getWriter().write()** 这条语句。

5、**出现无法访问网站**  
  
这表明 tomcat 未启动，此时就需要检查 tomcat 是否启动了，如果没启动，那就启动。

![76b7f68f4e1445419aa9727d17a06ce4.png_pic_center][]

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

[8538f287f58442888db879057890ccdd.png_pic_center]: https://img-blog.csdnimg.cn/8538f287f58442888db879057890ccdd.png#pic_center
[93a21ed7f4dd469fb6d9e06c00a2d1f6.png_pic_center]: https://img-blog.csdnimg.cn/93a21ed7f4dd469fb6d9e06c00a2d1f6.png#pic_center
[6d4706c10baf4b1a89f4a2f238b3e82f.png_pic_center]: https://img-blog.csdnimg.cn/6d4706c10baf4b1a89f4a2f238b3e82f.png#pic_center
[0afcb57d461d4b478bba06292325d225.png_pic_center]: https://img-blog.csdnimg.cn/0afcb57d461d4b478bba06292325d225.png#pic_center
[64f6e687b45a4b19b4dc09f4e1518a13.png_pic_center]: https://img-blog.csdnimg.cn/64f6e687b45a4b19b4dc09f4e1518a13.png#pic_center
[29abdd8978774c7a980cad0262dd032d.png_pic_center]: https://img-blog.csdnimg.cn/29abdd8978774c7a980cad0262dd032d.png#pic_center
[88fd6517667f4d5582177cba56637dc9.png_pic_center]: https://img-blog.csdnimg.cn/88fd6517667f4d5582177cba56637dc9.png#pic_center
[7ad1c77130864e57a3524cb4c76d248d.png_pic_center]: https://img-blog.csdnimg.cn/7ad1c77130864e57a3524cb4c76d248d.png#pic_center
[c6732a6b20524e7e8f304988c4ff88f1.png_pic_center]: https://img-blog.csdnimg.cn/c6732a6b20524e7e8f304988c4ff88f1.png#pic_center
[3e3849e8e48a4d27963aedc27b9a1667.png_pic_center]: https://img-blog.csdnimg.cn/3e3849e8e48a4d27963aedc27b9a1667.png#pic_center
[2e4a1d255a444472872a31084386b67b.png_pic_center]: https://img-blog.csdnimg.cn/2e4a1d255a444472872a31084386b67b.png#pic_center
[c67513d30b94498e924d785a36ebdd64.png_pic_center]: https://img-blog.csdnimg.cn/c67513d30b94498e924d785a36ebdd64.png#pic_center
[f1dc3abf93db4fba96d1d94c93d5f7e9.png_pic_center]: https://img-blog.csdnimg.cn/f1dc3abf93db4fba96d1d94c93d5f7e9.png#pic_center
[8d160a1f7aef4654bf5e6a24291e87bd.png_pic_center]: https://img-blog.csdnimg.cn/8d160a1f7aef4654bf5e6a24291e87bd.png#pic_center
[b2c89a216bcc44898dc09ca2c8ea5a97.png_pic_center]: https://img-blog.csdnimg.cn/b2c89a216bcc44898dc09ca2c8ea5a97.png#pic_center
[d0563b5942a34d9780850c1e5c91ddfe.png_pic_center]: https://img-blog.csdnimg.cn/d0563b5942a34d9780850c1e5c91ddfe.png#pic_center
[526421371f954a04964cb9c2f251aadf.png_pic_center]: https://img-blog.csdnimg.cn/526421371f954a04964cb9c2f251aadf.png#pic_center
[5f7be137ffb9414ba07fbcaab226b715.png_pic_center]: https://img-blog.csdnimg.cn/5f7be137ffb9414ba07fbcaab226b715.png#pic_center
[f6b7d3bb81aa470daa1500b53ac2b5e2.png_pic_center]: https://img-blog.csdnimg.cn/f6b7d3bb81aa470daa1500b53ac2b5e2.png#pic_center
[ce8ae80eff3445fdbf452d7527852f0c.png_pic_center]: https://img-blog.csdnimg.cn/ce8ae80eff3445fdbf452d7527852f0c.png#pic_center
[7c7aeb09dae94d3899e794cb85620e75.png_pic_center]: https://img-blog.csdnimg.cn/7c7aeb09dae94d3899e794cb85620e75.png#pic_center
[5346b448a8534925837d3f9ae00c35e9.png_pic_center]: https://img-blog.csdnimg.cn/5346b448a8534925837d3f9ae00c35e9.png#pic_center
[6725ff28e1844025bab7b38021a7b19c.png_pic_center]: https://img-blog.csdnimg.cn/6725ff28e1844025bab7b38021a7b19c.png#pic_center
[b0d48c8fdc41426c9019b1aab741bec4.png_pic_center]: https://img-blog.csdnimg.cn/b0d48c8fdc41426c9019b1aab741bec4.png#pic_center
[a0e1f5eeef5c40ba849b43904f0be213.png_pic_center]: https://img-blog.csdnimg.cn/a0e1f5eeef5c40ba849b43904f0be213.png#pic_center
[e73644d490f54d70a8ef0621f42e6a63.png_pic_center]: https://img-blog.csdnimg.cn/e73644d490f54d70a8ef0621f42e6a63.png#pic_center
[5006ee75c87b41719a8c658516ed1d2c.png_pic_center]: https://img-blog.csdnimg.cn/5006ee75c87b41719a8c658516ed1d2c.png#pic_center
[f50234cfae8348ccb1ead41298581f8f.png_pic_center]: https://img-blog.csdnimg.cn/f50234cfae8348ccb1ead41298581f8f.png#pic_center
[be756957d3d84a43a5a09fb92cece4c1.png_pic_center]: https://img-blog.csdnimg.cn/be756957d3d84a43a5a09fb92cece4c1.png#pic_center
[fd431e09fa89434aafc8919ff5bdb85e.png_pic_center]: https://img-blog.csdnimg.cn/fd431e09fa89434aafc8919ff5bdb85e.png#pic_center
[7040584254134ab382ee1c7a8b032f3f.png_pic_center]: https://img-blog.csdnimg.cn/7040584254134ab382ee1c7a8b032f3f.png#pic_center
[5d688aeee94f46ed99ec3598d20e7b49.png_pic_center]: https://img-blog.csdnimg.cn/5d688aeee94f46ed99ec3598d20e7b49.png#pic_center
[d70750977aaa4a31a850a1aa7779b0d8.png_pic_center]: https://img-blog.csdnimg.cn/d70750977aaa4a31a850a1aa7779b0d8.png#pic_center
[2877afa67c4544a183174babc4ea02d8.png_pic_center]: https://img-blog.csdnimg.cn/2877afa67c4544a183174babc4ea02d8.png#pic_center
[9bf3afe318f649b2aa97d3ce3a8d6853.png_pic_center]: https://img-blog.csdnimg.cn/9bf3afe318f649b2aa97d3ce3a8d6853.png#pic_center
[f469a5c76e2e44e58bb981075c7eca9e.png_pic_center]: https://img-blog.csdnimg.cn/f469a5c76e2e44e58bb981075c7eca9e.png#pic_center
[92e4d6612ba24fc7a2a9504635cae96b.png_pic_center]: https://img-blog.csdnimg.cn/92e4d6612ba24fc7a2a9504635cae96b.png#pic_center
[fb98db07a6a74998a68ef4edfc2e68d1.png_pic_center]: https://img-blog.csdnimg.cn/fb98db07a6a74998a68ef4edfc2e68d1.png#pic_center
[0275531bc2714337a9215d498be71295.png_pic_center]: https://img-blog.csdnimg.cn/0275531bc2714337a9215d498be71295.png#pic_center
[ef6dbd3831d547088b0100420d245eb3.png_pic_center]: https://img-blog.csdnimg.cn/ef6dbd3831d547088b0100420d245eb3.png#pic_center
[f4adc3c616f6473f801b1505dc966bf1.png_pic_center]: https://img-blog.csdnimg.cn/f4adc3c616f6473f801b1505dc966bf1.png#pic_center
[f6cf94a14f8b488ea28a3b96fccf4ea8.png_pic_center]: https://img-blog.csdnimg.cn/f6cf94a14f8b488ea28a3b96fccf4ea8.png#pic_center
[9446a7cf35fe48b780599c7c61b4dce9.png_pic_center]: https://img-blog.csdnimg.cn/9446a7cf35fe48b780599c7c61b4dce9.png#pic_center
[9ed9b2f2b63445d28f1a5f413539bed4.png_pic_center]: https://img-blog.csdnimg.cn/9ed9b2f2b63445d28f1a5f413539bed4.png#pic_center
[5ded096c9db7429ba384e2397254cb58.png_pic_center]: https://img-blog.csdnimg.cn/5ded096c9db7429ba384e2397254cb58.png#pic_center
[1854db3cd3184ba2b386e3b74b5ec5fc.png_pic_center]: https://img-blog.csdnimg.cn/1854db3cd3184ba2b386e3b74b5ec5fc.png#pic_center
[fe2e6f5855af42188e56820830ec3072.png_pic_center]: https://img-blog.csdnimg.cn/fe2e6f5855af42188e56820830ec3072.png#pic_center
[42fcee5d963d4692848d6d08b7022705.png_pic_center]: https://img-blog.csdnimg.cn/42fcee5d963d4692848d6d08b7022705.png#pic_center
[f0c0d873b4a142b79083aedb2f0e2750.png_pic_center]: https://img-blog.csdnimg.cn/f0c0d873b4a142b79083aedb2f0e2750.png#pic_center
[41364c7a34204cc3bd83832d9f4aa48e.png_pic_center]: https://img-blog.csdnimg.cn/41364c7a34204cc3bd83832d9f4aa48e.png#pic_center
[76b7f68f4e1445419aa9727d17a06ce4.png_pic_center]: https://img-blog.csdnimg.cn/76b7f68f4e1445419aa9727d17a06ce4.png#pic_center
[3a6fd91ddfcd40c7bfae3c46ec03e158.png_pic_center]: https://img-blog.csdnimg.cn/3a6fd91ddfcd40c7bfae3c46ec03e158.png#pic_center