角色管理(1)---列表呈现、数据呈现、删除操作

梦里梦外; 2023-03-01 09:00 24阅读 0赞

### 文章目录 ###

*   *  一、角色管理设计说明
     *   *  1.1 业务设计说明
         *  1.2 原型设计说明
         *  1.3 API设计说明
     *  二、角色管理列表页面呈现
     *   *  2.1 业务时序分析
         *  2.2 服务端实现
         *   *  2.2.1 Controller实现
         *  2.3 客户端实现
         *   *  2.3.1 首页菜单事件处理
             *  2.3.2 角色列表页面
     *  三、角色管理列表数据呈现
     *   *  3.1 数据架构分析
         *  3.2 服务端关键业务及代码实现
         *   *  3.2.1 Entity类实现
             *  3.2.2 Dao接口实现
             *  3.2.3 Mapper文件实现
             *  3.2.4 Service接口及实现类
             *  3.2.5 Controller类实现
         *  3.3 客户端关键业务及代码实现
         *   *  3.3.1 菜单列表信息呈现
     *  四、角色管理删除操作实现
     *   *  4.1 业务时序分析
         *  4.2 服务端关键业务及代码实现
         *   *  4.2.1 Dao接口实现
             *  4.2.2 Mapper文件实现
             *  4.2.3 Service接口及实现类
             *  4.2.4 Controller类实现
         *  4.3 客户端关键业务及代码实现
         *   *  4.3.1 菜单列表页面事件处理

## 一、角色管理设计说明 ##

### 1.1 业务设计说明 ###

本模块主要实现的是企业内部角色(岗位)的管理,可以在添加角色时,为角色分配资源访问权限,最后将角色再分配给用户，如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70_pic_center]  
基于对表的设计，其数据逻辑关系的展示，如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70]  
角色表设计脚本如下:

CREATE TABLE `sys_roles` (
      `id` bigint(20) NOT NULL AUTO_INCREMENT,
      `name` varchar(100) DEFAULT NULL COMMENT '角色名称',
      `note` varchar(500) DEFAULT NULL COMMENT '备注',
      `createdTime` datetime DEFAULT NULL COMMENT '创建时间',
      `modifiedTime` datetime DEFAULT NULL COMMENT '修改时间',
      `createdUser` varchar(20) DEFAULT NULL COMMENT '创建用户',
      `modifiedUser` varchar(20) DEFAULT NULL COMMENT '修改用户',
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=46 DEFAULT CHARSET=utf8 COMMENT='角色';

菜单与角色的关系表脚本设计如下：

CREATE TABLE `sys_role_menus` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `role_id` int(11) DEFAULT NULL COMMENT '角色ID',
      `menu_id` int(11) DEFAULT NULL COMMENT 'ID',
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COMMENT='角色与菜单对应关系';

用户与角色关系表设计脚本如下:

CREATE TABLE `sys_user_roles` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `user_id` int(11) DEFAULT NULL COMMENT '用户ID',
      `role_id` int(11) DEFAULT NULL COMMENT '角色ID',
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COMMENT='用户与角色对应关系';

### 1.2 原型设计说明 ###

基于用户需求，通过静态页面为用户呈现角色模块的基本需求。  
当在主页点击角色管理时，呈现角色列表页面，如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 1]  
在列表页面点击添加按钮时，呈现角色编辑页面,如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 2]  
在列表页面点击编辑按钮时，呈现角色编辑页面，如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 3]  
说明:假如客户对此原型进行了确认,后续则可以基于此原型进行研发。

### 1.3 API设计说明 ###

角色管理业务后台API分层架构及调用关系如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 4]  
说明：分层目的主要将复杂问题简单化，实现各司其职，各尽所能。

## 二、角色管理列表页面呈现 ##

### 2.1 业务时序分析 ###

角色列表页面，其加载时序分析，如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 5]

### 2.2 服务端实现 ###

#### 2.2.1 Controller实现 ####

*  **业务描述与设计实现**

基于角色管理的请求业务，在PageController中添加返回角色页面相关方法。

*  **关键代码设计与实现**

检查PageController中是否有返回UI页面的方法，有则无需添加。例如：

@RequestMapping("{module}/{moduleUI}")
    public String doModuleUI(@PathVariable String moduleUI) { 
    		return "sys/"+moduleUI;
    }

### 2.3 客户端实现 ###

#### 2.3.1 首页菜单事件处理 ####

*  **业务描述与设计实现**

首先准备角色列表页面(/templates/pages/sys/role\_list.html)，然后在starter.html页面中点击菜单管理时异步加载角色列表页面。

*  **关键代码设计与实现**

找到项目中的starter.html 页面，页面加载完成以后，注册菜单管理项的点击事件，当点击角色管理时，执行事件处理函数。关键代码如下：

$(function(){ 
         …
         doLoadUI("load-role-id","role/role_list")
    })
    function doLoadUI(id,url){ 
     	$("#"+id).click(function(){ 
        		$("#mainContentId").load(url);
        });
    }

其中，load函数为jquery中的ajax异步请求函数。

#### 2.3.2 角色列表页面 ####

*  **业务描述与设计实现**

本页面呈现角色信息时要以分页形式进行呈现。

*  **关键代码设计与实现：**

参考sys\_role.html文件内容。

## 三、角色管理列表数据呈现 ##

### 3.1 数据架构分析 ###

角色列表页面加载完成，启动角色数据异步加载操作，本次角色列表页面要以分页形式呈现角色信息，其数据查询时，数据的封装及传递过程，如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 6]  
说明：本模块将从数据库查询到的角色数据封装到SysRole对象，一行记录一个SysRole对象。  
角色数据分页查询时,其时序分析如图所示:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 7]

### 3.2 服务端关键业务及代码实现 ###

#### 3.2.1 Entity类实现 ####

*  **业务描述及设计实现**

构建实体对象（POJO）封装从数据库查询到的记录，一行记录映射为内存中一个的这样的对象。对象属性定义时尽量与表中字段有一定的映射关系，并添加对应的set/get/toString等方法，便于对数据进行更好的操作。

*  **关键代码分析及实现**

package com.cy.pj.sys.entity;
     
    import java.io.Serializable;
    import java.util.Date;
    public class SysRole implements Serializable{ 
    	private static final long serialVersionUID = -356538509994150709L;
    	private Integer id;
    	private String name;
    	private String note;
    	private Date createdTime;
    	private Date modifiedTime;
    	private String createdUser;
    	private String modifiedUser;
    	public Integer getId() { 
    		return id;
    	}
    	public void setId(Integer id) { 
    		this.id = id;
    	}
    	public String getName() { 
    		return name;
    	}
    	public void setName(String name) { 
    		this.name = name;
    	}
    	public String getNote() { 
    		return note;
    	}
    	public void setNote(String note) { 
    		this.note = note;
    	}
    	public Date getCreatedTime() { 
    		return createdTime;
    	}
    	public void setCreatedTime(Date createdTime) { 
    		this.createdTime = createdTime;
    	}
    	public Date getModifiedTime() { 
    		return modifiedTime;
    	}
    	public void setModifiedTime(Date modifiedTime) { 
    		this.modifiedTime = modifiedTime;
    	}
    	public String getCreatedUser() { 
    		return createdUser;
    	}
    	public void setCreatedUser(String createdUser) { 
    		this.createdUser = createdUser;
    	}
    	public String getModifiedUser() { 
    		return modifiedUser;
    	}
    	public void setModifiedUser(String modifiedUser) { 
    		this.modifiedUser = modifiedUser;
    	}
    	
    }

**说明：** 通过此对象除了可以封装从数据库查询的数据，还可以封装客户端请求数据，实现层与层之间数据的传递。

#### 3.2.2 Dao接口实现 ####

*  **业务描述及设计实现**

通过数据层对象，基于业务层参数数据查询角色记录总数以及当前页面要呈现的角色信息。

*  **关键代码分析及实现：**

第一步：定义角色数据层接口对象，通过将此对象保证给业务层以提供角色数据操作。代码如下：

@Mapper
    public interface SysRoleDao { 
    }

第二步：在SysRoleDao接口中添加getRowCount方法用于按条件统计记录总数。代码如下：

int getRowCount(@Param("name") String name);

第三步：在SysRoleDao接口中添加findPageObjects方法，基于此方法实现当前页记录的数据查询操作。代码如下：

List<SysRole> findPageObjects(
    		      @Param("name")String  name,
    		      @Param("startIndex")Integer startIndex,
    		      @Param("pageSize")Integer pageSize);

**说明：**

1.  当DAO中方法参数多余一个时尽量使用@Param注解进行修饰并指定名字，然后再Mapper文件中便可以通过类似\#\{username\}方式进行获取，否则只能通过\#\{arg0\}，\#\{arg1\}或者\#\{param1\}，\#\{param2\}等方式进行获取。
2.  当DAO方法中的参数应用在动态SQL中时无论多少个参数，尽量使用@Param注解进行修饰并定义。

#### 3.2.3 Mapper文件实现 ####

*  **业务描述及设计实现**

基于Dao接口创建映射文件，在此文件中通过相关元素(例如select)描述要执行的数据操作。

*  **关键代码设计及实现**

第一步：在映射文件的设计目录中添加SysRoleMapper.xml映射文件，代码如下：

第二步：在映射文件中添加sql元素实现，SQL中的共性操作，代码如下：

<sql id="queryWhereId">
          <where>
            <if test="name!=null and name!=''">
               name like concat("%",#{ name},"%")
            </if>
          </where>
    </sql>

第三步：在映射文件中添加id为getRowCount元素，按条件统计记录总数，代码如下：

<select id="getRowCount"
                resultType="int">
              select count(*) 
              from sys_roles
              <include refid="queryWhereId"/>
        </select>

第四步：在映射文件中添加id为findPageObjects元素，实现分页查询。代码如下：

<select id="findPageObjects"
                resultType="com.cy.pj.sys.entity.SysRole">
             select *
             from sys_roles
             <include refid="queryWhereId"/>
    order by createdTime desc
             limit #{ startIndex},#{ pageSize}    
    </select>

**思考:**

1.  动态sql:基于用于需求动态拼接SQL
2.  Sql标签元素的作用是什么?对sql语句中的共性进行提取,以遍实现更好的复用.
3.  Include标签的作用是什么?引入使用sql标签定义的元素

#### 3.2.4 Service接口及实现类 ####

*  **业务描述与设计实现**

在角色分页查询中，业务层对象主要负责对业务数据进行校验，并借助数据层对象完成数据的分页查询操作。

*  **关键代码设计及实现**

第一步：定义角色业务接口及方法，暴露外界对角色业务数据的访问，其代码参考如下：

package com.cy.pj.sys.service;
    public interface SysRoleService { 
    	 PageObject<SysRole> findPageObjects(
    			 String name,Integer pageCurrent);
    }

第二步：定义角色业务接口实现类，并添加角色业务数据分页查询操作的具体实现,其代码参考如下：

package com.cy.pj.sys.service.impl;
    import org.springframework.util.StringUtils;
    @Service
    public class SysRoleServiceImpl implements SysRoleService { 
        @Autowired
    	private SysRoleDao sysRoleDao;
    	@Override
    	public PageObject<SysRole> findPageObjects(
    			String name,Integer pageCurrent) { 
    		//1.对参数进行校验
    		if(pageCurrent==null||pageCurrent<1)
    		throw new IllegalArgumentException("当前页码值无效");
    		//2.查询总记录数并进行校验
    		int rowCount=sysRoleDao.getRowCount(name);
    		if(rowCount==0)
    		throw new ServiceException("没有找到对应记录");
    		//3.查询当前页记录
    		int pageSize=2;
    		int startIndex=(pageCurrent-1)*pageSize;
    		List<SysRole> records=
    		sysRoleDao.findPageObjects(name,
    		startIndex, pageSize);
    		//4.对查询结果进行封装并返回
    		return new PageObject<>(pageCurrent, pageSize, 
              rowCount, records);
    	}
    }

#### 3.2.5 Controller类实现 ####

*  **业务描述与设计实现**

控制层对象主要负责请求和响应数据的处理，例如，本模块通过业务层对象执行业务逻辑，再通过VO对象封装响应结果(主要对业务层数据添加状态信息)，最后将响应结果转换为JSON格式的字符串响应到客户端。

*  **关键代码设计与实现**

定义Controller类，并将此类对象使用Spring框架中的@RestController注解进行标识，表示此类对象要交给Spring管理。然后基于@RequestMapping注解为此类定义根路径映射。代码参考如下：

package com.cy.pj.sys.controller;
     
     
    @RequestMapping("/role/")
    @RestController
    public class SysRoleController { 
    private SysRoleService sysRoleService;
     
    }
    在Co

ntroller类中添加菜单查询处理方法，代码参考如下：

@RequestMapping("doFindPageObjects")
    public JsonResult doFindPageObjects(
    			 String name,Integer pageCurrent) { 
    		 return new JsonResult(
    			sysRoleService.findPageObjects(name,
    					pageCurrent));
    	 }

### 3.3 客户端关键业务及代码实现 ###

#### 3.3.1 菜单列表信息呈现 ####

*  **业务描述与设计实现**

角色分页页面加载完成以后，向服务端发起异步请求加载角色信息，当角色信息加载完成需要将角色信息、分页信息呈现到列表页面上。

*  **关键代码设计与实现**

异步请求处理函数，关键代码如下：  
第一步：分页页面加载完成，向服务端发起异步请求，代码参考如下：

$(function(){ 
    	   //为什么要将doGetObjects函数写到load函数对应的回调内部。
    	   $("#pageId").load("doPageUI", doGetObjects)
    });

第二步：定义异步请求处理函数，代码参考如下：

第三步：定义回调函数，处理服务端的响应结果。代码如下：

四步：将异步响应结果呈现在table的tbody位置。代码参考如下：

function doSetTableBodyRows(records){ 
    	   //1.获取tbody对象，并清空对象
    	   var tBody=$("#tbodyId");
    	   tBody.empty();
    	   //2.迭代records记录，并将其内容追加到tbody
    	   for(var i in records){ 
    		   //2.1 构建tr对象
    		   var tr=$("<tr></tr>");
    		   //2.2 构建tds对象
    		   var tds=doCreateTds(records[i]);
    		   //2.3 将tds追加到tr中
    		   tr.append(tds);
    		   //2.4 将tr追加到tbody中
    		   tBody.append(tr);
    	   }
       }

第五步：创建每行中的td元素，并填充具体业务数据。代码参考如下：

function doCreateTds(row,i){ 
    	   var tds=
           "<td>"+(parseInt(i)+1)+"</td>"+
    	   "<td>"+row.name+"</td>"+
           "<td>"+row.note+"</td>"+
           "<td>"+new Date(row.createdTime).toLocaleString()+"</td>"+
           "<td>"+new Date(row.modifiedTime).toLocaleString()+"</td>"+
           "<td>"+row.createdUser+"</td>"+
           "<td>"+row.modifiedUser+"</td>"+
           "<td><a class='btn-delete'>delete</a>"+
           " <a class='btn-update'>update</a></td>";
           return tds;
       }

## 四、角色管理删除操作实现 ##

### 4.1 业务时序分析 ###

基于用户在列表页面上选择的的用户记录ID，执行删除操作，本次删除业务实现中，首先要基于id删除角色菜单关系数据，然后基于id删除用户角色关系数据，最后删除角色自身信息，如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 8]

### 4.2 服务端关键业务及代码实现 ###

#### 4.2.1 Dao接口实现 ####

*  **业务描述及设计实现**

数据层基于业务层提交的角色记录id，先删除角色相关的关系数据，然后删除角色自身记录信息。

*  **关键代码设计及实现：**

第一步：在创建SysRoleMenuDao并定义基于角色id删除关系数据的方法，关键代码如下：

public interface SysRoleMenuDao { 
    	int deleteObjectsByRoleId(Integer roleId);
    }

第二步：创建SysUserRoleDao并定义基于角色id删除关系数据的方法，关键代码如下：

public interface SysUserRoleDao { 
    	int deleteObjectsByRoleId(Integer roleId);
    }

第三步：在SysRoleDao中添加基于菜单id删除角色记录的方法。代码参考如下：

int deleteObject(Integer id);

#### 4.2.2 Mapper文件实现 ####

*  **业务描述及设计实现**

在SysRoleMenuDao,SysUserRoleDao，SysRoleDao接口对应的映射文件中添加用于执行删除业务的delete元素，然后在元素内部定义具体的SQL实现。

*  **关键代码设计与实现**

第一步：创建SysRoleMenuMapper.xml文件并添加基于菜单id删除关系数据的元素，关键代码如下：

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
      "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    <mapper namespace="com.cy.pj.sys.dao.SysRoleMenuDao">
     <delete id="deleteObjectsByRoleId"
                 parameterType="int">
              delete from sys_role_menus
              where role_id=#{ roleId}
            </delete>
    </mapper>

第二步：在SysUserRoleMapper.xml文件中添加基于id删除用户角色关系数据的元素，关键代码如下：

<delete id="deleteObjectsByRoleId">
              delete from sys_user_roles
              where role_id=#{ roleId}        
     </delete>

第三步：在SysRoleMapper.xml文件添加delete元素,基于角色id删除角色自身记录信息，关键代码如下：

<delete id="deleteObject">
       delete from sys_roles
       where id =#{ id}
    </delete>

#### 4.2.3 Service接口及实现类 ####

*  **业务描述与设计实现**

在角色业务层定义用于执行角色删除业务的方法，首先通过方法参数接收控制层传递的角色id，并对参数id进行校验。然后基于角色id删除角色菜单关系数据，用户角色关系数据。最后删除自身记录信息后并返回业务执行结果。

*  **关键代码设计与实现**

第一步：在SysRoleService接口中，添加基于id进行角色删除的方法。关键代码如下：

int deleteObject(Integer id);

第二步：在SysRoleServiceImpl实现类中注入SysRoleMenuDao，SysUserRoleDao相关对象。关键代码如下：

@Autowired
    private SysRoleMenuDao sysRoleMenuDao;
    @Autowired
    private SysUserRoleDao sysUserRoleDao;

第二步：在SysRoleServiceImpl实现类中添加删除业务的具体实现。关键代码如下：

@Override
    	public int deleteObject(Integer id) { 
    		//1.验证数据的合法性
    		if(id==null||id<=0)
    		throw new IllegalArgumentException("请先选择");
    		//3.基于id删除关系数据
    		sysRoleMenuDao.deleteObjectsByRoleId(id);
             sysUserRoleDao.deleteObjectsByRoleId(id);
    		   //4.删除角色自身
    	    int rows=sysRoleDao.deleteObject(id);
    if(rows==0)
    		throw new ServiceException("此记录可能已经不存在");
    		//5.返回结果
    		return rows;
    	}

#### 4.2.4 Controller类实现 ####

*  **业务描述与设计实现**

在角色控制层对象中，添加用于处理角色删除请求的方法。首先在此方法中通过形参接收客户端提交的数据，然后调用业务层对象执行删除操作，最后封装执行结果，并在运行时将响应对象转换为JSON格式的字符串，响应到客户端。

*  **关键代码设计与实现**

第一步：在SysRoleController中添加用于执行删除业务的方法。代码如下：

@RequestMapping("doDeleteObject")
    public JsonResult doDeleteObject(Integer id){ 
    		  sysRoleService.deleteObject(id);
    		  return new JsonResult("delete ok");
    }

第二步：启动tomcat进行访问测试，打开浏览器输入如下网址：

http://localhost/role/doDeleteObject?id=10

### 4.3 客户端关键业务及代码实现 ###

#### 4.3.1 菜单列表页面事件处理 ####

*  **业务描述及设计实现**

用户在页面上首先选择要删除的元素，然后点击删除按钮，将用户选择的记录id异步提交到服务端，最后在服务端执行角色的删除动作。

*  **关键代码设计与实现**

第一步：页面加载完成以后，在删除按钮上进行点击事件注册。关键代码如下：

...
    $(".input-group-btn")
    	   .on("click",".btn-delete",doDeleteObject)
    ...

第二步：定义删除操作对应的事件处理函数。关键代码如下：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20230209/357fd0267dde4155be5fff69195ea708.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200723101606217.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200723102607128.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200723102623695.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200723102706608.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200723103100917.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200723103203787.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200723103551148.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200723103612777.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200723104352544.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ==,size_16,color_FFFFFF,t_70