05---项目后端商品管理（一）

桃扇骨 2023-03-01 12:51 1阅读 0赞

### 文章目录 ###

*  一、业务实现
 *   *  1.1 关于后端JS的引入问题说明
     *  1.2 EasyUI中弹出框 入门案例
     *   *  1.2.1 页面标识
         *  1.2.2 商品分类信息弹出框说明
     *  1.3 商品分类数据表分析
     *   *  1.3.1 业务表分析
     *  1.4 EasyUI中树形结构分析
     *   *  1.4.1 页面标识
         *  1.4.2 数据结构分析
     *  1.5 商品分类业务实现
     *   *  1.5.1 页面分析
         *  1.5.2 代码编辑
     *  1.6 树形结构异步加载
     *   *  1.6.1 业务说明
         *  1.6.2 EasyUI 树形结构调用说明----异步树加载
         *  1.6.3 重构ItemCatController
 *  二、商品信息后端维护
 *   *  2.1 商品新增
     *   *  2.1.1 页面分析
         *  2.1.2 代码编辑
     *  2.2 全局异常处理机制
     *   *  2.2.1 说明
         *  2.2.2 编辑全局异常处理机制
     *  2.3 商品修改业务
     *   *  2.3.1 修改提交页面分析
         *  2.3.2 代码编辑
     *  2.4 商品删除
     *   *  2.4.1 业务分析
         *  2.4.2 代码编辑
     *  2.5 商品上架/下架操作
     *   *  2.5.1 业务分析
         *  2.5.2 代码编辑

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

# 一、业务实现 #

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

## 1.1 关于后端JS的引入问题说明 ##

说明:在京淘后端页面中如何引入页面JS,步骤如下:  
（1）在`index.jsp`中引入

<jsp:include page="/commons/common-js.jsp"></jsp:include>

（2）具体JS

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/icon.css" />
    <link rel="stylesheet" type="text/css" href="/css/jt.css" />
    <script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
    
    <script type="text/javascript" src="/js/common.js"></script>

（3）页面引入结构  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 1]

## 1.2 EasyUI中弹出框 入门案例 ##

### 1.2.1 页面标识 ###

（1）弹出框效果

$("#btn1").bind("click",function(){ 
    	//EasyUI框架提供的JS
    	$("#win1").window({ 
    		title:"弹出框",
    		width:400,
    		height:400,
    		modal:true   //这是一个模式窗口，只能点击弹出框，不允许点击别处
    	})
    })

（2）消息确认框

/*定义退出消息框 */
    $("#btn4").click(function(){ 
    	$.messager.confirm('退款申请','您本次消费998大保健,是否退款',function(param){  
    		if (param){  
    			alert("恭喜您,您白X成功!!!!");
    		} else{ 
    			alert("大爷,下次再来!!!!");
    		}
    	});
    })

### 1.2.2 商品分类信息弹出框说明 ###

（1）页面标识符

（2）页面JS分析  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 2]

## 1.3 商品分类数据表分析 ##

### 1.3.1 业务表分析 ###

/*一级商品分类信息 parent_id=0*/
    SELECT * FROM tb_item_cat WHERE parent_id=0
    
    /*二级商品分类信息 parent_id=0*/
    SELECT * FROM tb_item_cat WHERE parent_id=1
    
    /*三级商品分类信息 parent_id=0*/
    SELECT * FROM tb_item_cat WHERE parent_id=24

## 1.4 EasyUI中树形结构分析 ##

### 1.4.1 页面标识 ###

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>EasyUI-3-菜单按钮</title>
    <script type="text/javascript"
    	src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
    <script type="text/javascript"
    	src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
    <script type="text/javascript"
    	src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
    <link rel="stylesheet" type="text/css"
    	href="/js/jquery-easyui-1.4.1/themes/icon.css" />
    <link rel="stylesheet" type="text/css"
    	href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
    <script type="text/javascript">
    	/*通过js创建树形结构 */
    	$(function(){ 
    		$("#tree").tree({ 
    			url:"tree.json",		//发起ajax请求
    			method:"get",			//请求方式 POST
    			animate:true,			//表示显示折叠端口动画效果
    			checkbox:true,			//表述复选框
    			lines:false,				//表示显示连接线
    			dnd:true,				//是否拖拽
    			onClick:function(node){ 	//添加点击事件
    				
    				alert(node);
    				//控制台
    				console.info(node);
    			}
    		});
    	})
    </script>
    </head>
    	<body>
    		<h1>EasyUI-树形结构</h1>
    		
    		<ul id="tree"></ul>
    	</body>
    </html>

### 1.4.2 数据结构分析 ###

JSON串格式说明:`[{"id":"2","text":"王者荣耀","state":"closed"},{"id":"3","text":"王者荣耀","state":"closed"}]`  
封装树形结构的VO对象：

@Data
    @Accessors(chain = true)
    @NoArgsConstructor
    @AllArgsConstructor
    public class EasyUITree { 
    	// {"id":"2","text":"王者荣耀","state":"closed"}
    	private Long id;		//id值 与ItemCat中的Id一致的
    	private String text;	//文本信息 itemCat中的name属性
    	private String state;	//状态 打开:open 关闭: closed
    }

## 1.5 商品分类业务实现 ##

### 1.5.1 页面分析 ###

（1）页面url分析  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 3]  
（2）页面JS分析  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 4]

### 1.5.2 代码编辑 ###

（1）编辑ItemCatController

/** * 业务:查询商品分类信息,返回VO对象 * url地址: /item/cat/list * 参数: 暂时没有参数 * 返回值: EasyUITree对象 * json格式:[{"id":"2","text":"王者荣耀","state":"closed"},{"id":"3","text":"王者荣耀","state":"closed"}]` * sql语句: * 一级商品分类信息 parent_id=0 SELECT * FROM tb_item_cat WHERE parent_id=0 */
    	@RequestMapping("/list")
    	public List<EasyUITree>  findItemCatByParentId(){ 
    		
    		//1.查询一级商品分类信息 
    		Long parentId = 0L;
    		
    		return itemCatService.findItemCatByParentId(parentId);
    	}

（2）编辑ItemCatService

/** * 数据的来源: 数据库中 * 数据库中的数据类型: ItemCat对象信息 POJO * 需要的类型: EasyUITree对象信息. VO对象 * 思路: 将ItemCat转化为EasyUITree对象. * sql: parent_id=0 SELECT * FROM tb_item_cat WHERE parent_id=0 */
    	@Override
    	public List<EasyUITree> findItemCatByParentId(Long parentId) { 
    		//1.根据parentId 查询数据库信息 根据父级查询子级信息.
    		QueryWrapper<ItemCat> queryWrapper = new QueryWrapper();
    		queryWrapper.eq("parent_id", parentId);
    		List<ItemCat> itemCatList = itemCatMapper.selectList(queryWrapper);
    		
    		//2.将数据库记录转化为VO数据.
    		List<EasyUITree> treeList = new ArrayList<EasyUITree>();
    		for (ItemCat itemCat : itemCatList) { 
    			Long id = itemCat.getId();
    			String text = itemCat.getName();
    			//如果是父级标题,则默认关闭 closed,否则开启. open
    			String state = itemCat.getIsParent()?"closed":"open"; 
    			EasyUITree uiTree = new EasyUITree(id, text, state);
    			treeList.add(uiTree);
    		}
    		
    		return treeList;
    	}

（3）页面展现效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 5]

## 1.6 树形结构异步加载 ##

### 1.6.1 业务说明 ###

（1）页面结构说明  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 6]  
（2）展现参数提交说明  
![在这里插入图片描述][20200726113025396.png]

### 1.6.2 EasyUI 树形结构调用说明----异步树加载 ###

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

### 1.6.3 重构ItemCatController ###

说明:在原有的基础之上,实现异步树加载.

/** * 业务:查询商品分类信息,返回VO对象 * url地址: /item/cat/list * 参数: id:一级分类id值 * 返回值: EasyUITree对象 * json格式:[{"id":"2","text":"王者荣耀","state":"closed"},{"id":"3","text":"王者荣耀","state":"closed"}]` * sql语句: * 一级商品分类信息 parent_id=0 SELECT * FROM tb_item_cat WHERE parent_id=0 */
    @RequestMapping("/list")
    public List<EasyUITree>  findItemCatByParentId
    (@RequestParam(value = "id",defaultValue = "0") Long parentId){ 
    	//初始化时应该设定默认值.
    	//1.查询一级商品分类信息 
    	//Long parentId = id==null?0L:id;
    	
    	return itemCatService.findItemCatByParentId(parentId);
    }

# 二、商品信息后端维护 #

## 2.1 商品新增 ##

### 2.1.1 页面分析 ###

（1）页面分析

（2）页面JS（了解即可）

<div style="padding:5px">
       <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>
       <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">重置</a>
    </div>
    
    /* 参数类型: 1. {"key":"value","key2":"value2",......} 少量数据提交 2. key=value&key2=value2...... 基于字符串拼接 JS表单常用方法: $("#itemAddForm").serialize() 将所有的form表单中的数据,采用字符串的 形式自动拼接之后提交. 关于回调函数业务说明 需求: 确定后端服务器调用是否正确!!!! 策略说明: 属性1: status==200 调用正确 status==201 调用失败 属性2: msg 提交服务器相关说明信息 属性3: data 服务器返回页面的业务数据 一般都是对象的JSON. */
    //alert($("#itemAddForm").serialize())
    //$.post("url地址","提交参数信息","回调函数")
    $.post("/item/save",$("#itemAddForm").serialize(), function(data){ 
    	if(data.status == 200){ 
    		$.messager.alert('提示','新增商品成功!');
    	}else{ 
    		$.messager.alert("提示","新增商品失败!");
    	}
    });

### 2.1.2 代码编辑 ###

（1）SysResult VO对象定义

package com.jt.vo;
    
    import lombok.AllArgsConstructor;
    import lombok.Data;
    import lombok.NoArgsConstructor;
    import lombok.experimental.Accessors;
    
    @Data
    @Accessors(chain = true)
    @NoArgsConstructor
    @AllArgsConstructor
    public class SysResult { 
    	
    	/* * 策略说明: * 属性1: status==200 调用正确 status==201 调用失败 * 属性2: msg 提交服务器相关说明信息 * 属性3: data 服务器返回页面的业务数据 一般都是对象的JSON. */
    	private Integer status; 
    	private String msg;
    	private Object data;
    	
    	
    	//准备工具API 方便用户使用
    	public static SysResult  fail() { 
    		
    		return new SysResult(201, "业务调用失败", null);
    	}
    	
    	//成功方式1 只返回状态码信息
    	public static SysResult success() { 
    		
    		return new SysResult(200, "业务调用成功!!!", null);
    	}
    	
    	//成功方式2 需要返回服务器数据 data
    	public static SysResult success(Object data) { 
    		
    		return new SysResult(200, "业务调用成功!!!", data);
    	}
    	
    	//成功方式3 可能告知服务器信息及 服务器数据
    	public static SysResult success(String msg, Object data) { 
    			
    			return new SysResult(200, msg , data);
    	}
    }

（2）编辑ItemController

/** * 商品新增操作 * url: /item/save * 参数: form表单数据 * 返回值结果: SysResult对象 */
    @RequestMapping("/save")
    public SysResult saveItem(Item item) { 
    	try { 
    		itemService.saveItem(item);
    		//int a = 1/0;
    		return SysResult.success();
    	} catch (Exception e) { 
    		e.printStackTrace();	//打印错误信息
    		return SysResult.fail();
    	}
    	
    	//定义全局异常处理机制!!!!!
    }

（3）编辑ItemService

//控制数据库事务
    @Transactional
    @Override
    public void saveItem(Item item) { 
    	
    	item.setStatus(1)
    		.setCreated(new Date())
    		.setUpdated(item.getCreated());
    	itemMapper.insert(item);
    }

## 2.2 全局异常处理机制 ##

### 2.2.1 说明 ###

如果代码中频繁出现try-catch,则可能影响代码结构. 不便于阅读. 能否利用全局的异常的捕获机制,简化try-catch个数!!!  
捕获位置: 常规捕获的位置是Controller层,因为Controller层是业务调用的最后的控制层.

### 2.2.2 编辑全局异常处理机制 ###

//标识改类是全局异常处理机制的配置类
    @RestControllerAdvice //advice通知 返回的数据都是json串
    @Slf4j	//添加日志
    public class SystemExceptionAOP { 
    	
    	/* * 添加通用异常返回的方法. * 底层原理:AOP的异常通知. * */
    	@ExceptionHandler({ RuntimeException.class}) //拦截运行时异常
    	public Object systemResultException(Exception exception) { 
    		
    		//exception.printStackTrace(); //如果有问题,则直接在控制台打印
    		log.error("{~~~~~~"+exception.getMessage()+"}", exception); //输出日志
    		return SysResult.fail();	 //返回统一的失败数据
    	}
    }

## 2.3 商品修改业务 ##

### 2.3.1 修改提交页面分析 ###

（1）定义弹出框位置

（2）点击编辑按钮效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 8]  
（3）修改页面JS  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 9]

### 2.3.2 代码编辑 ###

（1）编辑ItemController

/** * 商品修改操作 * url: /item/update * 参数: form表单数据 * 返回值结果: SysResult对象 */
    	@RequestMapping("/update")
    	public SysResult updateItem(Item item) { 
    		
    		itemService.updateItem(item);
    		return SysResult.success();
    	}

（2）编辑ItemService

@Override
    public void updateItem(Item item) { 
    	
    	item.setUpdated(new Date());
    	itemMapper.updateById(item);
    }

## 2.4 商品删除 ##

### 2.4.1 业务分析 ###

说明：当用户点击删除按钮时,提交多个ID数据信息,之后删除后端服务器数据.  
（1）页面ajax请求  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 10]

### 2.4.2 代码编辑 ###

（1）编辑ItemController

/** * 补充1: SpringMVC框架 不熟! * 页面中传递什么样的数据,后端才能接收什么样的数据. * 要求1: name属性名称必须与参数名称一致. * 要求2: name属性名称必须与属性名称一致 * 例子1: * 页面信息 <input type="text" name="id" value="100" /> * 页面信息 <input type="text" name="age" value="19" /> * 页面信息 <input type="text" name="sex" value="男" /> * * 补充2: SpringMVC底层实现Servlet,数据传输协议https/http 一般传递的数据都是String结构. * 案例: 页面信息 <input type="text" name="sex" value="男" /> * 页面信息 <input type="text" name="sex" value="男" /> * 页面信息 <input type="text" name="sex" value="男" /> * 如果遇到重名属性提交,则浏览器会自己解析将value进行拼接 sex="男,男,男" * * springMVC优化: * 1.可以自动的根据参数类型进行转化 string转化为具体类型 * 2.如果遇到了重名属性提交,则会自动的转化为数组类型接收. * * url:/item/delete * 参数: ids=id,id,id,id * 返回值结果: SysResult对象 */
    @RequestMapping("/delete")
    public SysResult  deleteItems(Long[] ids) { 
    	
    	itemService.deleteItems(ids);
    	return SysResult.success();
    }

（2）编辑ItemService

//参数是数组类型 有多个
    @Override
    public void deleteItems(Long[] ids) { 
    	//将数组转化为集合类型
    	List<Long> idList = Arrays.asList(ids);
    	itemMapper.deleteBatchIds(idList);
    	//或者自己写sql.
    }

## 2.5 商品上架/下架操作 ##

### 2.5.1 业务分析 ###

**说明：** 商品上架/下架操作修改的是status属性,updated时间.  
**分析：**

1.  下架操作 /item/instock status=2
2.  上架操作 /item/reshelf status=1

**restFul优化：**

1.  下架操作 /item/updateStatus/2
2.  上架操作 /item/updateStatus/1

任务1: 根据不同的请求类型 实现业务功能 后端写2个@RequestMapping方法 分别实现上架/下架操作  
任务2: 利用restFul的方式实现商品的上架/下架操作 .要求后端RequestMapping方法只有1个；

**提示：** 可以修改源码的url地址!!!

### 2.5.2 代码编辑 ###

（1）修改URL地址（优化后的代码）

$.messager.confirm('确认','确定下架ID为 '+ids+' 的商品吗？',function(r){ 
    	if (r){ 
    		var params = { "ids":ids};
    		$.post("/item/updateStatus/2",params, function(data){ 
    				if(data.status == 200){ 
    						$.messager.alert('提示','下架商品成功!',undefined,function(){ 
    						$("#itemList").datagrid("reload");
    					});
    				}
    			});
    		}
    	});
    }
    
    $.messager.confirm('确认','确定上架ID为 '+ids+' 的商品吗？',function(r){ 
    	if (r){ 
    		var params = { "ids":ids};
    			$.post("/item/updateStatus/1",params, function(data){ 
    			if(data.status == 200){ 
    					$.messager.alert('提示','上架商品成功!',undefined,function(){ 
    					$("#itemList").datagrid("reload");
    				});
    			}
    		});
    	}
    });

（2）编辑ItemController

/** * url地址: /item/updateStatus/2 /item/updateStatus/1 * 参数: 1.url中 2.ids * 返回值: SysResult对象 */
    @RequestMapping("/updateStatus/{status}")
    public SysResult updateItemStatus(Long[] ids,@PathVariable Integer status) { 
    	
    	//实现商品状态修改
    	itemService.updateItemStatus(ids,status);
    	return SysResult.success();
    }

（3）编辑ItemService

/** * MP的更新操作 * 1.entity 要修改的记录 * 2.updateWrapper 修改条件构造器 * Sql: update tb_item set status=#{status},updated = #{updated} * where id in (id1,id2,id3.....); * 单表操作 性能损耗可以忽略. */
    @Override
    public void updateItemStatus(Long[] ids, Integer status) { 
    	//1.定义修改数据
    	Item item = new Item();
    	item.setStatus(status).setUpdated(new Date());
    	//2.定义修改的条件
    	List<Long> idList = Arrays.asList(ids);
    	UpdateWrapper<Item> updateWrapper = new UpdateWrapper<>();
    	updateWrapper.in("id", idList);
    	itemMapper.update(item, updateWrapper);
    }

（4）修改上下架状态后颜色变化  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 11]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70]: /images/20230208/f3bd0328a19b4faf8545d459bacb7cef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 1]: /images/20230208/94fcb5cb18b24f979902e357907fdc25.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 2]: /images/20230208/57f0a366d7014bda9382fa9fe67fa0d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 3]: /images/20230208/1769da54ad474511bb317ee694e96029.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 4]: /images/20230208/6849a1623c5a406ba1dca6330c584332.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 5]: /images/20230208/fe230bfaacd641bcbebae879dcbcd9f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 6]: /images/20230208/d396b4c38fd84e2297f1518ba88f58ae.png
[20200726113025396.png]: /images/20230208/a2ba4ed00f6f41c5a660e5ae789c7555.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 7]: /images/20230208/3ae859ce879c4eceb3b74a560e866236.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 8]: /images/20230208/f16fcf9a1a4949caba0140fbbb717588.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 9]: /images/20230208/cff7856535224380b38be68d7d4f6a67.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 10]: /images/20230208/3d1babf9cfe24a33bd79988c018d1665.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 11]: /images/20230208/c733214c0f6c4f508bdf512d633e71e3.png