【Web通识】通过Web构成解读Web组件

末蓝、 2023-07-08 12:25 9阅读 0赞

### 文章目录 ###

*   *  一、总述
     *  二、Web组件
     *   *   *  1、第三方内容
             *  2、Web前端框架
             *  3、Web应用
             *  4、Web开发框架
             *   *  附：MVC架构
             *  5、Web服务端语言
             *  6、Web服务器
             *   *  附：Web服务器与Web容器
             *  7、存储
             *  8、操作系统

## 一、总述 ##

最早的Web只是用户通过客户端（浏览器）来访问服务器（站点主机）上的固定内容文件，且Web内容也仅由简单的HTML静态文件构成，因此称作**静态网站（Static Website）**，用户访问的内容是提前写好的放在服务器上的固定文件。

但是随着互联网的发展，Web也由最初的形态发展为现在的**动态化、多维化、模块化**，称之为**动态网站（Dynamic website）**，一个这样的Web站点既有静态文件，还有动态文件，以及第三方插件、前端框架、服务端语言、Web容器、数据库等，这些统称为**Web组件**，一个Web站点由许多Web组件构成。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70]  
之所以Web发展为现在的组件化、模块化，是因为这样的模式不仅能满足用户的需求，达到高效、便捷的使用，更便于开发人员协同开发，方便管理。

总结起来就是：**高聚合、低耦合、便于开发与维护。**

## 二、Web组件 ##

通过剖析Web的构成，可将Web组件（该组件可理解为组成部件）大致分为以下几种：

1.  第三方内容
2.  Web前端框架
3.  Web应用
4.  Web开发框架
5.  Web服务端语言
6.  Web服务器
7.  存储
8.  操作系统

下面对其逐一进行简要介绍。

#### 1、第三方内容 ####

> 第三方内容就是位于Web站点上的一段代码，用于引用第三方网站的某些功能。

常见第三方内容组件：

*  **广告统计、第三方UI、页面插件**

这类第三方组件比如广告统计，就是在网站页面插入一段JS，引用第三方的数据统计服务，用于本页面的各类数据，如访问量、停留时间等。

#### 2、Web前端框架 ####

> Web前端框架是用于将一些网页需要实现的功能比如图片效果、滑动效果、翻页效果、点击效果、显示效果等，集成到一起，便与开发。

常见Web前端框架：

*  **AngularJS、jQuery、Bootstrap、Vue.JS**

**1）AngularJS**

*  AngularJS是一个 JavaScript框架，它是一个以 JavaScript 编写的库，可通过 `<script>`  
    标签添加到HTML 页面。
    
    AngularJS诞生于2009年，后被Google所收购，已经被用于Google的多款产品当中。

**2）jQuery**

*  jQuery是一个快速、简洁的JavaScript框架，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
    
    jQuery的核心特性可以总结为：`具有独特的链式语法和短小清晰的多功能接口`；`具有高效灵活的css选择器`，`并且可对CSS选择器进行扩展`；`拥有便捷的插件扩展机制和丰富的插件`。jQuery兼容各种主流浏览器，如`IE 6.0+`、`FF 1.5+`、`Safari 2.0+`、`Opera 9.0+`等。

**3）Bootstrap**

*  来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得Web 开发更加快捷。

**4）Vue.JS**

*  Vue 是一套用于构建用户界面的渐进式JavaScript框架，属于小体量级的框架，与其它大型框架不同的是，`Vue被设计为可以自底向上逐层应用`。
    
    Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。

除此之外，一些常用的前端框架（还包括一些应用框架）还有  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 1]

#### 3、Web应用 ####

> Web应用是一种介于Web前端和后端（内容创作）之间的软件系统，为了简化创作，因为不是所有使用Web进行编辑创作的工作人员，都熟悉SQL语法。

常见Web应用：

*  **BBS、CMS、BLOG**

**1）BBS（Bulletin Board System）网络论坛系统**

*  `BBS（Bulletin Board System）`翻译为中文就是“电子布告栏系统”，早期的BBS与一般街头和校园内的公告板性质相同，只不过是通过电脑来传播或获得消息而已。
    
    BBS多用于大型公司或中小型企业，开放给客户交流的平台，也就是我们现在熟知的**论坛**，提供给用户注册、登陆、发帖、删帖、回帖等功能。

**2）CMS（Content Management System）内容管理系统**

*  CMS是一种位于Web前端（Web 服务器）和后端办公系统或流程（内容创作、编辑）之间的软件系统。
    
    内容的创作人员、编辑人员、发布人员`使用内容管理系统`来提交、修改、审批、发布内容。这里指的“内容”可能包括文件、表格、图片、数据库中的数据甚至视频等一切你想要发布到Internet、Intranet以及Extranet网站的信息。
    
    内容管理`还可选地提供内容抓取工具`，将第三方信息来源，比如将文本文件、HTML网页、Web服务、关系数据库等的内容自动抓取，并经分析处理后放到自身的内容库中。
 *  **常见CMS系统：**
    
    `php类`cms系统：dedecms、帝国cms、php168、phpcms、cmstop、discuz、phpwind等  
    `asp类`cms系统：zblog、KingCMS等  
    `.net类`cms系统：EoyooCMS等  
    国外的著名cms系统：joomla、WordPress 、magento、drupal 、mambo。
    
    （CMS内容管理系统的流行程度统计排名）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 2]

**3）BLOG 博客系统**

*  博客系统分为公共博客平台（比如CSDN）和个人博客平台，用于实现写文章、发文章、点赞、评论等功能。
 *  **常见的BLOG系统：**
    
    `mblog：`  
    mblog开源免费的博客系统, Java语言开发, 支持mysql/h2数据库, 采用spring-boot、jpa、shiro、bootstrap等流行框架开发。
    
    `JPress：`  
    一个类似 WordPress 的系统，使用 JFinal 和 Jboot 开发。模板安装 模板卸载 在线编辑，完善的开发文档 极致的开发体验 用户独立登录和注册入口手机短信和邮箱激活配置，对于新手来讲有点部署难度。
    
    `b3log-solo：`  
    Solo 是一个专业、简约、稳定、极速的开源 Java 博客程序。你可以自己搭建使用，也可以通过购买我们搭建好的服务来直接使用，社区活跃，功能齐全，部署难度同 jpress。

#### 4、Web开发框架 ####

> Web开发框架也可认为是Web应用框架（Web application framework），是将用于实现网站功能的一些模块，集成到一起的一个开发平台，用来支持动态网站、网络应用程序及网络服务的开发。  
> 其类型有**基于请求**和**基于组件**两种架构

常见Web开发框架：

*  **Django、Rails、ThinkPHP**

**1）Django**

*  Django是`Python`的一个Web开发框架，基于`MVC模式`，诞生于2003年秋天，2005年发布正式版本，性能良好，且足够应对比较大的项目，与Flask相比，体量更大，由于创建使用Django项目后，所有的位置、目录均已生成好，因此灵活度比较低。
    
    下图是一个使用Django框架创建的blog项目：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 3]

**2）Rails**

*  Ruby on Rails，简称 `RoR` 或 `Rails`，是一个使用 `Ruby` 语言写的开源 Web 应用框架，基于`MVC模式`，它结合了PHP体系的优点（快速开发）和Java体系的优点（程序规整），因此发展迅速。

**3）ThinkPHP**

*  ThinkPHP是`PHP`语言的Web开发框架，免费开源、快速简单、面向对象、轻量，创立于2006年初，遵循Apache2开源协议。

**除此之外，一些其他的Web开发框架：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 4]

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

##### 附：MVC架构 #####

在说Web开发框架时，一直提到MVC模式，那到底什么是MVC模式？

MVC全称 `Model View Controller`，是模型(model)－视图(view)－控制器(controller)的缩写，是一种将业务逻辑、数据处理、用户界面分离组织的软件设计典范。

该设计模式**将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑**，达到了模块化的开发，让软件更加具有可维护性、可移植性和代码的可重用性，提高开发效率。其中

*  **M：** 模型（Model） ，即数据层，负责定义一些数据对象和一些操作类；  
    **V：** 视图（View），即界面显示层，负责对数据进行对点创建试图；  
    **C：** 控制器（Controller），即业务逻辑层，负责从视图读取数据，控制用户输入，并调用合适的模型处理数据，为视图准备合适的数据。

模型层又分两层：

*  **Dao层**`（Database Accept Object）`：负责数据的读取，也就是直接对数据库进行查询操作，获取结果集，将结果集中的数据装到OV`（Object Value）`对象中，之后再返回给Service层。
 *  **Service层**：负责一些业务处理，比如说：获取数据库连接，关闭数据库连接，事务回滚或者一些复杂的逻辑业务处理。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 5]  
整个MVC的逻辑图如下：  
![选自百度图库][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 6]  
也就是说，**控制器模块（Controller）在MVC框架的软件系统中起一个桥梁作用**，它负责从视图模块（View）中读取数据并选择合适的模型模块（Model）继续宁数据处理，，当模型中发生数据变化时，再将相应变化告知并及时更新视图。

但是在实际开发中，并不能完全按照以上理想模型进行设计，在小型项目中，Ｍ和Ｖ之间还是可能会有部分数据交互，比如Ｖ调用Ｍ的方法从数据库取数据等。

如果小型项目一味地严格追寻MVC模式，只会**使得开发更加困难，增加结构的复杂性**，并可能产生过多的更新操作，降低运行效率。

*MVC暂时总结至此，后续有理解再进行补充*

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

#### 5、Web服务端语言 ####

> Web服务端语言也就是后端语言，即服务器开发语言，嵌入在HTML中的语言。

常见的Web服务端语言：

*  **PHP、ASP.NET、Java、**

**1）PHP（Hypertext Preprocessor）**

*  开源免费的服务端编程语言，1995-06-08首次使用，1997-11-01PHP首个发行版。

**2）ASP.NET（Active Server Page .NET）**

*  ASP.NET又称为ASP+，不仅仅是ASP的简单升级，而是微软公司推出的新一代脚本语言。ASP.NET基于`.NET Framework`的Web开发平台，不但吸收了ASP以前版本的最大优点并参照Java、VB语言的开发优势加入了许多新的特色，同时也修正了以前的ASP版本的运行错误。

**3）Java**

*  Java是一门`面向对象编程`语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。
    
    Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程。
 *  Java语言的特点有：  
    1-> 面向对象  
    2-> 语法简单  
    3-> 安全性高  
    4-> 平台无关性  
    5-> 支持多线程

（服务端编程语言的流行程度统计排名）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 7]

#### 6、Web服务器 ####

> Web服务器（软件）是配置在服务器主机（硬件）上的一个服务支持软件，负责处理浏览器的请求（通过响应HTML静态文档，来处理浏览器HTTP请求），向浏览器提供其请求的文档，但是只能处理静态文档。

常见Web服务器：

*  **Apache、Nginx、IIS**

**1）Apache**

*  Apache全称`Apache HTTP Server`，是一款开源、免费、跨平台的Web服务器软件，也是目前最流行的服务器，它简单、速度快、性能稳定，并可做代理服务器来使用。
 *  目前许多中小型站点都采用`Wamp`来建立站点，即`Windows + Apache + PHP + MySQL`的，这三款产品都是开源免费，且高效稳定。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 8]

**2）Nginx（engine x）**

*  `Nginx`是一款轻量级的Web 服务器、反向代理服务器，其特点是占有内存少，并发能力强，与`Apache`相比较有更好的性能，在**高并发**下，由于其基于事件为导向的处理方式，可以达到比`Apache`更好的性能，因此目前发展极其迅速。
 *  国内使用Nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。

**3）IIS（Internet Information Services）**

*  IIS是微软的一款付费Web服务器软件，只适用于**Windows操作系统**，主要支持ASP语言环境，配置简单。因此如果语言环境是ASP则选择IIS服务器，若是PHP语言环境则选择Apache服务器，且Apache服务器比较稳定。

（Web服务器的流行程度统计排名）   
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 9]

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

##### 附：Web服务器与Web容器 #####

在写Web服务器部分时，发现对**Web服务器**和**Web容器**的概念不清楚，经过查询各种文章最终有了一个大概的理解：

**<Web服务器>**

*  Web服务器（`Web Server`）可以视为存在于服务器主机（硬件）上**用于提供Web服务**的最底层软件系统，为其余Web应用提供环境（更多是为Web容器提供环境），负责响应浏览器的请求，属于被动软件系统，只有当浏览器主动发起请求时才会进行响应，只能处理（响应）静态文档如HTML，使用的协议是`HTTP`，因此也可以理解为响应`HTTP`请求。
 *  以Apache服务器为例，Web请求与响应如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 10]

**<Web容器>**

*  web容器是一种服务程序，在服务器一个端口就有一个提供相应服务的程序，而这个程序就是处理从客户端发出的请求，如JAVA中的Tomcat容器，ASP的IIS或PWS都是这样的容器。一个服务器可以有多个容器。

以上是Web容器的百科词条，不太好理解，我理解如下：

*  Web容器就是**为Web应用程序组件提供环境**，如`PHP`、`JSP`、`ASP`等，可以解析动态页面，弥补了Web服务器只能处理静态页面的短板，一个Web服务器可以部署多个Web容器。
 *  当服务器（如Apache）收到用户请求时，如果是静态页面请求，则直接将响应的静态页面反馈给浏览器；若是**动态**页面请求，则将该请求交给相应的**Web容器处理**，如jsp请求交给Tomcat，Tomcat将页面处理为静态页面后，**再反馈给Apache服务器**，服务器将其反馈给浏览器。
 *  带有Web容器的请求响应过程如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 11]
 *  常见的Web容器有Tomcat（Servlet容器，可以解析JSP），IIS（ASP容器），Jboss（EJB容器）

*Web服务器与Web容器的理解暂时总结至此，后续有理解再进行补充*

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

#### 7、存储 ####

> 存储是指网站文件的存储方式，该文件是指Web站点在提供服务时所设计的所有资源，如Cookie凭证、临时缓存、用户信息、站点文件等。

常见存储方式：

*  **文件存储、数据库存储、内存存储**

**1）文件存储**

*  文件存储的内容有一些比如站点静态文件、Cookie凭证、网页插件等。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 12]

**2）数据库存储**

*  现在的动态站点离不开数据库的支持，构建动态页面时必须实时从数据库拿出数据生成页面，因此数据库用于存储用户信息、页面内容等这类时常变化的数据。
 *  常用数据库有`MySQL`、`MsSQL`、`Orcal`、`SQLserver`等。

**3）内存存储**

*  内存存储一般是存储一些临时文件，如页面临时缓存等。

#### 8、操作系统 ####

> 此处操作系统是指部署服务器的系统，也包含部署数据库等服务的操作系统环境。

常见服务器系统：

*  **Windows、Linux、NetWare、Unix**

**1）Windows**

*  用于部署服务器的Windows系统是指`Windows Server`，于2003年4月24日由微软推出，其核心是WSS（Microsoft Windows Server System）。
 *  主要有`WINNT 4.0 Server`、`Win2000/AdvancedServer`、`Win2003/AdvancedServer`、`WINDOWS SERVER 2008`，Windows服务器操作系统派应用，结合.Net开发环境，为亲微软企业用户提供了良好的应用框架。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 13]

**2）Linux**

*  开源免费，基于POSIX和UNIX的多用户、多任务、支持多线程和多CPU的**类Unix操作系统**。由于开源一直被维护，因此比较安全且稳定，较适用于较小型的网络。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 14]

**3）NetWare**

*  NetWare是一款NOVELL公司推出的网络操作系统，基于基本模块设计思想的开放式系统结构，是一个开放的网络服务器平台，可以方便地对其进行扩充，具有**安全稳定**的系统性能。
 *  现在使用该操作系统的较少，但是NetWare操作系统仍以**对网络硬件的要求较低**（工作站只要是286机就可以了）而受到一些设备比较落后的中、小型企业，特别是学校的青睐。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 15]

**4）Unix**

*  Unix是一款付费系统，一般用于**大型的网站**或大型的企、事业局域网中，特点是极其安全与稳定，所有操作几乎使用命令行完成，因此不容易上手，但是一旦熟悉后就极其方便。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 16]

目前**大多服务器都部署在Linux操作系统**上，因为其免费开源，稳定且便于维护与远程管理的优点，相比之下Windows Server与Unix由于其收费系统的巨大开支，一般的小公司无法承担此高额费用，所以使用Unix和Win的都是一些较大型网站，尤其是Unix，大型网站使用较多。

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

*Web组件相关知识暂时总结至此，如有问题请指出。*

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200226162619477.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200227221235260.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200229222653343.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200229120432238.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200229120138337.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200229221528968.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200229122308731.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200229223012601.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200301212913367.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200229234018315.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200301130249857.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20200301131052958.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/202003071656365.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20200307190247426.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20200307190439892.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20200307190644717.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw_size_16_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/20200307190740410.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTY4MDgw,size_16,color_FFFFFF,t_70