图床小世界(基于Java Servlet搭建的图片服务器)

蔚落 2023-07-13 13:44 165阅读 0赞

### 文章目录 ###

*  一、前言
 *   *  1）背景需求
     *  2）重要知识点
 *  二、项目设计
 *   *  1）整体架构及设计
     *  2）数据库设计
     *  3）服务器 API 设计（前后端交互接口设计）
     *  4）进行源代码的开发
     *   *  4.1 封装数据库操作
         *  4.2 基于Servlet来搭建服务器
     *  5）前端页面设计
     *   *  5.1使用HTML模板
         *  5.2基于模板进行删减
         *  5.3使用Vue.js
         *  5.4 实现展示图片
         *  5.5实现展示图片
         *  5.6 完善功能
 *  三、后期加入
 *   *  1）实现基于白名单方式的防盗链
     *  2）基于 MD5 实现相同内容图片只存一份：类似于百度网盘的 "秒传" 功能

# 一、前言 #

## 1）背景需求 ##

1.  在我们的日常生活或者工作过程中，有时候我们需要在写博客或者写文档的时候需要插入图片，这个时候我们就需要给定一个链接就把图片的内容获取出来。
2.  这个服务器可以进行把我们的图片进行上传，下载，查看等等操作，可以适当的作为一个云储存图片的地方。

## 2）重要知识点 ##

1.  简单的Web服务器设计的能力
2.  通过JDBC来操作MySQL数据库
3.  进行数据库的设计
4.  Gson库的使用，更好的去理解JSON
5.  强化对HTTP协议的理解
6.  对Servlet的理解及使用
7.  基于Md5对图片进行校验
8.  加深对Postman，Filddler,Tomcat工具的使用
9.  软件测试的基本理解和方法

# 二、项目设计 #

## 1）整体架构及设计 ##

*  核心就是一个HTTP服务器，提供对图片的增删改查操作，同时搭配简单的前端页面辅助完成图片的操作展示。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4_size_16_color_FFFFFF_t_70]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4_size_16_color_FFFFFF_t_70 1]

## 2）数据库设计 ##

数据库的属性：
    图片编号：imageId  --> int型非空且自增
    图片的名字：imageName   -->  varchar(50)
    图片的大小：size  -->   int型
    图片的上传时间：uploadTime varchar(50)
    图片正文类型：contentType varchar(50)
    图片路径：path  varchar(1024)
    校验和：md5算法:图片的md5校验和   --> varchar(1024)

![在这里插入图片描述][20200312153827236.png]

*  数据库存储的是图片的属性（元信息）,而图片正文是以文件的形式直接存在磁盘上的，当有一个图片上传到服务器上时，数据库就记录一个path对应到磁盘上的这个文件
    
        校验和：通过一个更短的字符串，来验证整体数据是否正确。短的字符串是根据原串内容通过一定的规则来计算出来的
        这是一种常见字符串 hash 算法, 具有三个特性:
           1.不管源字符串多长, 得到的最终 md5 值都是固定长度
           2.源字符串稍微变化一点点内容, md5 值会变化很大(降低冲突概率)
           3.通过原字符串很容易计算得到 md5 值, 但是根据 md5 推导出原字符串很难(几乎不可能).

## 3）服务器 API 设计（前后端交互接口设计） ##

3.1 Gson的使用

*  这里我们使用JSON来组织数据。Json 是一种常见是数据格式组织方式. 源于 JavaScript, 是一种键值对风格的数据格式.
 *  Java 中可以使用 Gson 库来完成 Json 的解析和构造.

在Maven 中新增 Gson 的依赖  
![在这里插入图片描述][20200312154527202.png]  
一般的时候它会是这个样子：  
![在这里插入图片描述][20200312154832633.png]

3.2 新增图片

我们先写一个简单的 html 来实现上传图片  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4_size_16_color_FFFFFF_t_70 2]  
3.3 查看所有图片元信息  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4_size_16_color_FFFFFF_t_70 3]

3.4 查看指定图片元信息

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4_size_16_color_FFFFFF_t_70 4]

3.5 删除图片

![在这里插入图片描述][20200312163655317.png]

3.6 查看图片内容

![在这里插入图片描述][20200312164020125.png]

## 4）进行源代码的开发 ##

### 4.1 封装数据库操作 ###

4.1.1 创建dao包

（1）先创建DBUtil类实现了封装获取数据库连接的操作

*  创建一个单例类DBUtail辅助创建连接，其中URL为我的云服务器的MySQL链接

![在这里插入图片描述][20200312170652235.png]

*  这个类主要包含3个方法：
    
        创建DateSource的实例：DataSource getDataSource()
          获取连接：Connection getConnection()
          关闭连接：void close(Connection connection, PreparedStatement statement, ResultSet resultSet)
              这里关闭的时候要注意：先创建的对象后关闭，后创建的对象先关闭
              close也不是真的销毁连接，只是回收到池子里了，后边还可以用，因为DataSource内置了连接池

（2）创建Image类，每一个image对象对应到一个图片对象（包含图片的相关属性）  
（3）创建imageDao类：作为image对象的管理器，借助这个类完成image对象的增删改查操作  
（4）使用JDBC的时候是用DataSourse访问数据库的，稍微要比JDBCDriver方式高效一些  
（5）当写完一组功能后用单元测试的思想进行测试，也就是将一个类或者方法作为一个单元，然后分开测试，一旦出现了问题，就能及时发现BUG。

4.1.2 了解加回顾

*  回顾：受查异常与非受查异常
    
        出现异常之后，处理的具体措施：
        1）当前接触的大部分都是打印调用栈
        2）让程序直接直接终止：及时止损
        3）监控报警通知程序猿
 *  了解jar与war包：类似于zip这样的压缩包，也就是将一大堆.class文件放到一起打包成一个文件
 *  使用maven打包成war包放在服务器上的Tomcat的安装目录里的webapps目录下

### 4.2 基于Servlet来搭建服务器 ###

Servlet负责处理客户端发来的请求，生成服务器所需要生成的响应

4.2.1  创建api包

（1）在包下创建ImageServlet类继承HttpServlet父类并且重写这个父类中的一些方法，完成图片的增删改查

*  这个类的 doPost 对应插入图片, doGet 对应查看图片信息, doDelete 对应删除图片.
 *  这里的doGet要分成两种情况, 一个是获取所有图片信息, 一个是获取单个图片信息,根据请求中是否带有 image\_id 参数来决定
 *  记得将这个类加到web.xml中,其中的类名要写完整的带包的名字

（2）在包下创建ImageShowServlet类继承HttpServlet父类并且重写这个父类中的doGet方法实现展示图片详细内容

4.2.2 了解加回顾

*  对Servlet的理解：  
    Servlet相关的代码执行方式和平时写的不太一样，平时的代码是从main方法运行的，而Servlet里面没有main方法，而是靠Tomcat来自动调用到Servlet的代码，Tomcat的工作原理和曾经写的Http服务器是很相似的
 *  Tomcat的工作步骤：  
    （1）启动的时候要绑定端口号（一般是8080）  
    （2）进入一个循环  
    （3）在主循环里面，调用accept获取到当前的请求的链接  
    （4）读取客户端发生的数据（字符串）  
    （5）把这个字符串按照Http协议来进行解析  
    （6）解析出的Http请求的方法和URL之后，找到对应的Servlet，并执行对应的doXXX方法  
    （7）生成响应，回复客户端
 *  理解Tomcat中URL与Servlet的映射关系,步骤如下：  
    （1）Tomcat根据URL查找映射关系表（在那个web.xml文件中）,找到api.ImageServlet类  
    （2）Tomcat根据get方法，决定给你api.ImageServlet类创建一个对象，并且调用其中的doGet方法（这个方法我们一般要进行重写）  
    （3）执行doGet方法，往resp对象中写入一些内容  
    （4）Tomcat构造resp对象，根据这个对象生成Http响应报文，再通过socket写回给客户端（浏览器或者其他）

## 5）前端页面设计 ##

### 5.1使用HTML模板 ###

*  因为当前的知识对前端不是很了解，所以我们采用对别人的HTML模板就行删减，下载好一个比较好看的模板之后下载到项目的webapp目录中。
    
        前置知识
 *  HTML:网页的骨架 --骨架
 *  CSS：描述网页上组件的样式（位置，颜色，大小，字体，背景等等） --皮囊
 *  JavaScript：描述前端页面上的一些动作（和用户具体交互的行为） --灵魂
 *  HTML，CSS，JavaScript都可以写到同一个HTML文件中，也可以分开写，浏览器加载这个HTML的时候，就会运行到这些代码

### 5.2基于模板进行删减 ###

（1）导航栏实现上传

*  文件上传和提交按钮：在原来的input标签下载增加一个input标签，将type改为file,增加name=“filename”,新的input标签type=“submit”
 *  修改form标签属性，新增method(请求方式)=“POST” enctype（上传到服务器上数据的组织类型）=“multipart/form-data” action（访问的路径）="/java\_image\_server/image"
 *  小问题：发现“上传按钮”和前面不一样高，用style="height:41px"修饰它

（2）页面主题展示图片预览

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4_size_16_color_FFFFFF_t_70 5]

### 5.3使用Vue.js ###

前置知识

*  把网页上显示的预览图片替换成我们服务器上保存的图片：将img标签中src改成服务器存的图片的url就可以了，需要获取服务器上所有的图片的url(ImageServlet)，需要通过JS先获取到所有图片的属性，在分别加载每一个图片，使用JS来完成。
 *  此处引入Vue JS的框架来帮助我们更方便的编写代码：JS中变量类型都是在初始化的时候自动推导的。
 *  var声明这是一个“变量”，const声明这是一个“常量”。
 *  Vue所做的最核心的工作，就是把页面显示的内容和JS中的代码相互关联在一起，修改JS的变量就能很方便的影响到页面的显示情况
 *  \{ \{author\}\}称为“差值表达式”：
    
        如果是在标签内部使用Vue对象中的数据，就需要使用插值表达式；
         如果是在标签属性中使用Vue对象中的数据就不需要用插值表达式，但是需要搭配Vue的命令
         Vue的命令：v-for:循环访问一个数据
                   v-bind:把数据绑定到html标签上的
                   v-on:绑定某种事件的处理函数，比如点击鼠标,双击,右键,按下某个键盘,调整窗口大小...

**Vue创建对象**  
![在这里插入图片描述][2020031310231241.png]  
示例图片：  
![在这里插入图片描述][20200313102624915.png]

### 5.4 实现展示图片 ###

修改 html 代码, 和数据关联

*  使用v-bind:src 把图片的src通过imageShow接口获取到
 *  使用 \{ \{image.imageName\}\} 表示图片标题

![在这里插入图片描述][20200313102957609.png]

从服务器获取数据

*  在methods中新增获取所有图片的方法
 *  **ajax: JS中构造HTTP请求发送给服务器的一种实现方式.**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4_size_16_color_FFFFFF_t_70 6]
    
        解决小bug
 *  为了解决浏览器能自动适配图片位置的问题，我们用 $("\#app").resize(); 主动触发浏览器 resize 事件即可.

### 5.5实现展示图片 ###

当前的上传请求会返回一个 JSON 格式的数据. 而我们更需要的是直接能看到上传的效果，解决如下：

*  修改上传接口的响应, 直接返回一个 302 响应, 重定向回主页.
 *  修改 ImageServlet.doPost 在上传成功代码最后, 加上一个重定向resp.sendRedirect(“index.html”);

### 5.6 完善功能 ###

图片下方新增删除按钮

![在这里插入图片描述][20200313104723206.png]

实现事件处理函数

*  浏览器给服务器发送一个DELETE /image?imageld= xxx这样的请求就可以了. (ajax完成)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4_size_16_color_FFFFFF_t_70 7]

解决小bug

1.  点击删除按钮之后, 会触发预览图片效果:  
    这是因为 JavaScript 的事件冒泡机制导致的. 一个标签接受到的事件会依次传给父级标签.  
    此处需要阻止 click 事件冒泡. Vue 中使用 v-on:click.stop 即可.  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4_size_16_color_FFFFFF_t_70 8]  
    ![在这里插入图片描述][20200313105145516.png]

# 三、后期加入 #

## 1）实现基于白名单方式的防盗链 ##

1.  当我们不想让别人在别的网站直接使用我们的图片链接时，可以采用如下方法：
2.  通过 HTTP 中的 refer 字段判定是否是指定网站请求图片.修改 ImageShowServlet.doGet 方法
3.  refer记录了它的上一个请求页面是哪  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4_size_16_color_FFFFFF_t_70 9]

## 2）基于 MD5 实现相同内容图片只存一份：类似于百度网盘的 “秒传” 功能 ##

（1）前置知识

**Md5的特点:**

1.不管原串多长，得到的MD5值是固定长度.  
2.原串哪怕变动一点点(一个字节), MD5值就会变动很大.  
3.计算MD5值的过程很简单,但是通过MD5值无法推测出原字符串的. (应用在密码学)

**在我们的项目里Md5的应用：**

1.如果两个图片内容完全一样, 就在磁盘上只存-份文件就可以了. 通过MD5就能判定两个图片内容是否是一样的.  
2.图片文件虽然是二进制数据,但是本质上也是字符串,针对图片内容计算MD5. 如果两个图片内容相同,得到的MD5 一定是相同的.  
3.反之,近似的认为MD5相同,原图片内容一定相同. 理论上是有可能两个图片内容不同,  
MD5相同,但是实际，上出现概率极低(MD5自身算法设计.上弓|起的特性)  
4.通过Md5计算出的字符串是无法在推算出原文件的，即这是一个不可逆的过程

（2）整体思路

1.修改dao层的代码，在imageDao类里边增加selectByMd5方法,再根据Md5来查找数据库中的图片信息  
2.修改上传图片的代码，上传文件时先进行判定，如果这个md5对应的文件存在就不会上传并提示用户该图片已经存在

（3）计算md5

1.在pom.xml中引入依赖  
![在这里插入图片描述][20200313111329652.png]  
2.修改ImageServlet.doPost方法，计算md5  
![在这里插入图片描述][20200313111513509.png]  
3.修改ImageDao类，新增selectByMd5方法

public static Image selectByMd5(String md5) { 
            // 1. 获取数据库连接
            Connection connection = DBUtil.getConnection();
            // 2. 构造 SQL 语句
            String sql = "select * from image_table where md5 = ?";
            PreparedStatement statement = null;
            ResultSet resultSet = null;
            try { 
                // 3. 执行 SQL 语句
                statement = connection.prepareStatement(sql);
                statement.setString(1, md5);
                resultSet = statement.executeQuery();
                // 4. 处理结果集
                if (resultSet.next()) { 
                    Image image = new Image();
                    image.setImageId(resultSet.getInt("imageId"));
                    image.setImageName(resultSet.getString("imageName"));
                    image.setSize(resultSet.getInt("size"));
                    image.setUploadTime(resultSet.getString("uploadTime"));
                    image.setContentType(resultSet.getString("contentType"));
                    image.setPath(resultSet.getString("path"));
                    image.setMd5(resultSet.getString("md5"));
                    return image;
                }
            } catch (SQLException e) { 
                e.printStackTrace();
            } finally { 
                // 5. 关闭链接
                DBUtil.close(connection, statement, resultSet);
            }
            return null;
        }

4.根据md5决定是否写入文件

*  修改ImageServlet.doPost方法，如果该md5值的文件存在，则不会存入数据库和磁盘  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4_size_16_color_FFFFFF_t_70 10]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200313135719871.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200313143642811.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4,size_16,color_FFFFFF,t_70
[20200312153827236.png]: https://img-blog.csdnimg.cn/20200312153827236.png
[20200312154527202.png]: https://img-blog.csdnimg.cn/20200312154527202.png
[20200312154832633.png]: https://img-blog.csdnimg.cn/20200312154832633.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200313112856655.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200312163524449.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200312163555204.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4,size_16,color_FFFFFF,t_70
[20200312163655317.png]: https://img-blog.csdnimg.cn/20200312163655317.png
[20200312164020125.png]: https://img-blog.csdnimg.cn/20200312164020125.png
[20200312170652235.png]: https://img-blog.csdnimg.cn/20200312170652235.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200313101339868.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4,size_16,color_FFFFFF,t_70
[2020031310231241.png]: https://img-blog.csdnimg.cn/2020031310231241.png
[20200313102624915.png]: https://img-blog.csdnimg.cn/20200313102624915.png
[20200313102957609.png]: https://img-blog.csdnimg.cn/20200313102957609.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200313103456516.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4,size_16,color_FFFFFF,t_70
[20200313104723206.png]: https://img-blog.csdnimg.cn/20200313104723206.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200313104826195.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200313142426871.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4,size_16,color_FFFFFF,t_70
[20200313105145516.png]: https://img-blog.csdnimg.cn/20200313105145516.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200313105917671.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4,size_16,color_FFFFFF,t_70
[20200313111329652.png]: https://img-blog.csdnimg.cn/20200313111329652.png
[20200313111513509.png]: https://img-blog.csdnimg.cn/20200313111513509.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200313112247553.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODQwMTQ4,size_16,color_FFFFFF,t_70