传智健康day02 预约管理-检查项管理

偏执的太偏执、 2023-10-07 17:59 1阅读 0赞

## 1. 需求分析 ##

传智健康管理系统是一款应用于健康管理机构的业务系统，实现健康管理机构工作内容可视化、患者管理专业化、健康评估数字化、健康干预流程化、知识库集成化，从而提高健康管理师的工作效率，加强与患者间的互动，增强管理者对健康管理机构运营情况的了解。

系统分为传智健康后台管理系统和移动端应用两部分。其中后台系统提供给健康管理机构内部人员（包括系统管理员、健康管理师等）使用，微信端应用提供给健康管理机构的用户（体检用户）使用。

本项目功能架构图：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16][]

通过上面的功能架构图可以看到，传智健康后台管理系统有会员管理、预约管理、健康评估、健康干预等功能。移动端有会员管理、体检预约、体检报告等功能。后台系统和移动端应用都会通过Dubbo调用服务层发布的服务来完成具体的操作。本项目属于典型的SOA架构形式。

本章节完成的功能开发是预约管理功能，包括检查项管理、检查组管理、体检套餐管理、预约设置等 （参见产品原型）。预约管理属于系统的基础功能，主要就是管理一些体检的基础数据。

## 2. 基础环境搭建 ##

### 2.1 导入预约管理模块数据表 ###

操作步骤：

（1）根据资料中提供的itcasthealth.pdm文件导出SQL脚本

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_17_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_16_color_FFFFFF_t_70_g_se_x_16][]

（2）创建本项目使用的数据库health

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_13_color_FFFFFF_t_70_g_se_x_16][]

（3）将PowerDesigner导出的SQL脚本导入itcast\_health数据库进行建表

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_11_color_FFFFFF_t_70_g_se_x_16][]

### 2.2 导入预约管理模块实体类 ###

将资料中提供的POJO实体类复制到health\_common工程中。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_12_color_FFFFFF_t_70_g_se_x_16][]

### 2.3 导入项目所需公共资源 ###

项目开发过程中一般会提供一些公共资源，供多个模块或者系统来使用。

本章节我们导入的公共资源有：

（1）返回消息常量类MessageConstant，放到health\_common工程中

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_13_color_FFFFFF_t_70_g_se_x_16 1][]

（2）返回结果Result和PageResult类，封装查询条件的QueryPageBean类，放到health\_common工程中

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_12_color_FFFFFF_t_70_g_se_x_16 1][]

（3）html、js、css、图片等静态资源，放到health\_backend工程中 注意：后续随着项目开发还会陆续导入其他一些公共资源。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_12_color_FFFFFF_t_70_g_se_x_16 2][]

## 3. 新增检查项 ##

### 3.1 完善页面 ###

检查项管理页面对应的是checkitem.html页面，根据产品设计的原型已经完成了页面基本结构的编写， 现在需要完善页面动态效果。

#### 3.1.1弹出新增窗口 ####

页面中已经提供了新增窗口，只是处于隐藏状态。只需要将控制展示状态的属性dialogFormVisible改为true就可以显示出新增窗口。

新建按钮绑定的方法为handleCreate，所以在handleCreate方法中修改dialogFormVisible属性的值为true即可。同时为了增加用户体验度，需要每次点击新建按钮时清空表单输入项。

// 重置表单
    resetForm() {
        this.formData = {};//重置数据
    },
    // 弹出添加窗口
    handleCreate() {
        //弹出新增窗口
        this.dialogFormVisible = true;
        this.resetForm();
    },

#### 3.1.2 输入校验 ####

rules: {//校验规则
        code: [{ required: true, message: '项目编码为必填项', trigger: 'blur' }],
        name: [{ required: true, message: '项目名称为必填项', trigger: 'blur' }]
    }

#### 3.1.3 提交表单数据 ####

handleAdd () {
        //进行表单校验
        this.$refs['dataAddForm'].validate((valid) => {
            if(valid){
                //表单校验通过,发送ajax请求,将录入的数据提交到后台处理
                var _this = this;
                axios.post("/checkitem/add.do",this.formData).then((resp) => {
                    // resp.data = {};
                    if(resp.data.flag){ // 服务器端处理成功
                        //弹出提示信息
                        _this.$message({
                            message: resp.data.message,
                            type: 'success'
                        });
                        //关闭新增窗口
                        _this.dialogFormVisible = false;
                        //重新调用分页查询方法,查询出最新的数据
                        _this.findPage();
    
                    }else{ // 服务器端处理失败
                        _this.$message.error(resp.data.message);
                    }
                });
            }else{ // 失败
                this.$message.error("校验失败,请重新填写");
                return false;
            }
        })
    
    },

### 3.2 后台代码 ###

#### 3.2.1 Controller ####

在health\_backend工程中创建CheckItemController

package com.itterence.controller;
    
    import com.alibaba.dubbo.config.annotation.Reference;
    import com.itterence.service.CheckItemService;
    import com.itterence.constant.MessageConstant;
    import com.itterence.entity.Result;
    import com.itterence.pojo.CheckItem;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    /**
     * 检查项管理
     */
    @RestController//相当于@ResponseBody + @Controller合在一起的作用
    @RequestMapping("checkitem")
    public class CheckItemController {
        @Reference
        private CheckItemService checkItemService;
        //新增检查项
        @RequestMapping("add")
        public Result add(@RequestBody CheckItem checkItem){
            try {
                checkItemService.add(checkItem);
            }catch (Exception e){
                e.printStackTrace();
                //服务调用失败
                return new Result(false, MessageConstant.ADD_CHECKITEM_FAIL);
            }
            return new Result(true,MessageConstant.ADD_CHECKITEM_SUCCESS);
        }
    }

#### 3.2.2 服务接口 ####

在health\_interface工程中创建CheckItemService接口

package com.itterence.service;
    
    import com.itterence.pojo.CheckItem;
    
    /**
     * 服务接口
     */
    public interface CheckItemService {
        public void add(CheckItem checkItem);
    }

#### 3.2.3 服务实现类 ####

在health\_service\_provider工程中创建CheckItemServiceImpl实现类

package com.itterence.service.impl;
    
    import com.alibaba.dubbo.config.annotation.Service;
    import com.itterence.dao.CheckItemDao;
    import com.itterence.pojo.CheckItem;
    import com.itterence.service.CheckItemService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.transaction.annotation.Transactional;
    
    /**
     * 检查项服务
     */
    @Service(interfaceClass=CheckItemService.class)
    @Transactional
    public class CheckItemServiceImpl implements CheckItemService {
        @Autowired
        private CheckItemDao checkItemDao;
    
        @Override
        public void add(CheckItem checkItem) {
            checkItemDao.add(checkItem);
        }
    }

#### 3.2.4 Dao接口 ####

在health\_service\_provider工程中创建CheckItemDao接口，本项目是基于Mybatis的Mapper代理技术实现持久层操作，故只需要提供接口和Mapper映射文件，无须提供实现类

package com.itterence.dao;
    
    import com.itterence.pojo.CheckItem;
    
    public interface CheckItemDao {
        public void add(CheckItem checkItem);
    }

#### 3.2.5 Mapper映射文件 ####

在health\_service\_provider工程中创建CheckItemDao.xml映射文件，需要和CheckItemDao接口在同一目录下

<?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.itterence.dao.CheckItemDao">
        
        <insert id="add" parameterType="com.itterence.pojo.CheckItem">
            insert into t_checkitem(code,name,sex,age,price,type,remark,attention)
                          values
            (#{code},#{name},#{sex},#{age},#{price},#{type},#{remark},#{attention})
        </insert>
    </mapper>

## 4. 检查项分页 ##

本项目所有分页功能都是基于ajax的异步请求来完成的，请求参数和后台响应数据格式都使用json数据格式。

请求参数包括页码、每页显示记录数、查询条件。

请求参数的json格式为：\{currentPage:1,pageSize:10,queryString:''itcast''\}

后台响应数据包括总记录数、当前页需要展示的数据集合。

响应数据的json格式为：\{total:1000,rows:\[\]\}

如下图：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

### 4.1 完善页面 ###

#### 4.1.1 定义分页相关模型数据 ####

pagination: {//分页相关模型数据
          currentPage: 1,//当前页码
          pageSize:10,//每页显示的记录数
          total:0,//总记录数
          queryString:null//查询条件
    },
    dataList: [],//当前页要展示的分页列表数据

#### 4.1.2 定义分页方法 ####

在页面中提供了findPage方法用于分页查询，为了能够在checkitem.html页面加载后直接可以展示分页数据，可以在VUE提供的钩子函数created中调用findPage方法

//钩子函数，VUE对象初始化完成后自动执行
    created() {
        this.findPage();//VUE对象初始化完成后调用分页查询方法，完成分页查询
    },

//分页查询
    findPage() {
        //发送ajax请求，提交分页相关请求参数（页码、每页显示记录数、查询条件）
        var param = {
            currentPage: this.pagination.currentPage,
            pageSize: this.pagination.pageSize,
            queryString: this.pagination.queryString
        };
        axios.post("/checkitem/findPage.do",param).then((res)=>{
            //解析Controller响应回的数据，为模型数据赋值
            this.pagination.total=res.data.total;
            this.dataList=res.data.rows;
        })
    },

#### 4.1.3 完善分页方法执行时机 ####

除了在created钩子函数中调用findPage方法查询分页数据之外，当用户点击查询按钮或者点击分页条中的页码时也需要调用findPage方法重新发起查询请求。 为查询按钮绑定单击事件，调用findPage方法

<el-button @click="findPage()" class="dalfBut">查询</el-button>

为分页条组件绑定current-change事件，此事件是分页条组件自己定义的事件，当页码改变时触发，对应的处理函数为handleCurrentChange

<el-pagination
        class="pagiantion"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="pagination.total">
    </el-pagination>

定义handleCurrentChange方法

//切换页码
    handleCurrentChange(currentPage) {
        //currentPage为切换后的页码
        this.pagination.currentPage=currentPage;
        this.findPage();
    },

### 4.2 后台代码 ###

#### 4.2.1 Controller ####

在CheckItemController中增加分页查询方法

//分页查询
    @RequestMapping("/findPage")
    public PageResult findPage(@RequestBody QueryPageBean queryPageBean){
        PageResult pageResult = checkItemService.pageQuery(queryPageBean);
        return pageResult;
    }

#### 4.2.2 服务接口 ####

在CheckItemService服务接口中扩展分页查询方法

public PageResult pageQuery(QueryPageBean queryPageBean);

#### 4.2.3 服务实现类 ####

在CheckItemServiceImpl服务实现类中实现分页查询方法，基于Mybatis分页助手插件实现分页

//检查项分页查询
    public PageResult pageQuery(QueryPageBean queryPageBean) {
        Integer currentPage = queryPageBean.getCurrentPage();
        Integer pageSize = queryPageBean.getPageSize();
        String queryString = queryPageBean.getQueryString();//查询条件
        //完成分页查询，基于mybatis框架提供的分页助手插件完成
        PageHelper.startPage(currentPage,pageSize);
        //select * from t_checkitem limit 0,10
        Page<CheckItem> page = checkItemDao.selectByCondition(queryString);
        long total = page.getTotal();
        List<CheckItem> rows = page.getResult();
        return new PageResult(total,rows);
    }

#### 4.2.4 Dao接口 ####

在CheckItemDao接口中扩展分页查询方法

public Page<CheckItem> selectByCondition(String queryString);

#### 4.2.5 Mapper映射文件 ####

在CheckItemDao.xml文件中增加SQL定义

<select id="selectByCondition" parameterType="String" resultType="com.itterence.pojo.CheckItem">
        select * from t_checkitem
        <if test="value != null and value.length > 0">
            where code = #{value} or name = #{value}
        </if>
    </select>

### 4.3分页查询bug修复 ###

问题描述：在检查项和检查组页面进行分页查询时，如果不是在第一页，此时在查询输入框中输入过滤条件并点击查询按钮，无法查询到对应数据。  
原因：因为页面不在第一页，所以导致点击查询按钮时根据条件进行分页查询，此时发送的ajax请求中currentPage不是1，导致查询不到对应记录。  
解决思路：当点击查询按钮时需要将currentPage设置为1，再发送ajax请求根据条件进行分页查询。由于在页面中有多个地方都会调用到findPage方法，为了不对其他地方造成影响，需要为查询按钮单独扩展一个方法\_findPage，在此方法中进行相应处理。

//点击查询按钮对应的查询
    _findPage() {
        this.pagination.currentPage=1;
        this.findPage();
    },

<el-button @click="_findPage()" class="dalfBut">查询</el-button>

## 5. 删除检查项 ##

### 5.1 完善页面 ###

为了防止用户误操作，点击删除按钮时需要弹出确认删除的提示，用户点击取消则不做任何操作，用户 点击确定按钮再提交删除请求。

#### 5.1.1 绑定单击事件 ####

需要为删除按钮绑定单击事件，并且将当前行数据作为参数传递给处理函数

<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>

// 删除
    handleDelete(row) {
        alert(row.id);
    }

#### 5.1.2 弹出确认操作提示 ####

用户点击删除按钮会执行handleDelete方法，此处需要完善handleDelete方法，弹出确认提示信息。

ElementUI提供了$confirm方法来实现确认提示信息弹框效果

// 删除
    handleDelete(row) {
        //alert(row.id);
        this.$confirm("确认删除当前选中记录吗？","提示",{type:'warning'}).then(()=>{
            //点击确定按钮时只需此处代码
            alert('用户点击的是确定按钮');
        });
    }

#### 5.1.3 发送请求 ####

如果用户点击确定按钮就需要发送ajax请求，并且将当前检查项的id作为参数提交到后台进行删除操作

// 删除
    handleDelete(row) {//row其实是一个json对象，json对象的结构为{"age":"0-100","attention":"无","code":"0011","id":38,"name":"白细胞计数","price":10.0,"remark":"白细胞计数","sex":"0","type":"2"}
        //alert(row.id);
        this.$confirm("你确定要删除当前数据吗？","提示",{//确认框
            type:'warning'
        }).then(()=>{
            //用户点击确定按钮，发送ajax请求，将检查项ID提交到Controller进行处理
            axios.get("/checkitem/delete.do?id=" + row.id).then((res) => {
                if(res.data.flag){
                    //执行成功
                    //弹出成功提示信息
                    this.$message({
                        type:'success',
                        message:res.data.message
                    });
                    //重新进行分页查询
                    this.findPage();
                }else{
                    //执行失败
                    this.$message.error(res.data.message);
                }
            });
        }).catch(()=>{
            this.$message({
                type:'info',
                message:'操作已取消'
            });
        });
    }

### 5.2 后台代码 ###

#### 5.2.1 Controller ####

在CheckItemController中增加删除方法

//删除
    @RequestMapping("/delete")
    public Result delete(Integer id){
        try {
            checkItemService.delete(id);
        }catch (RuntimeException e){
            return new Result(false,e.getMessage());
        }catch (Exception e){
            return new Result(false, MessageConstant.DELETE_CHECKITEM_FAIL);
        }
        return new Result(true,MessageConstant.DELETE_CHECKITEM_SUCCESS);
    }

#### 5.2.2 服务接口 ####

在CheckItemService服务接口中扩展删除方法

public void delete(Integer id);

#### 5.2.3 服务实现类 ####

注意：不能直接删除，需要判断当前检查项是否和检查组关联，如果已经和检查组进行了关联则不允许删除

//删除
    public void delete(Integer id) throws RuntimeException{
        //查询当前检查项是否和检查组关联
        long count = checkItemDao.findCountByCheckItemId(id);
        if(count > 0){
        //当前检查项被引用，不能删除
            throw new RuntimeException("当前检查项被引用，不能删除");
        }
        checkItemDao.deleteById(id);
    }

#### 5.2.4 Dao接口 ####

在CheckItemDao接口中扩展方法findCountByCheckItemId和deleteById

public void deleteById(Integer id);
    public long findCountByCheckItemId(Integer checkItemId);

#### 5.2.5 Mapper映射文件 ####

在CheckItemDao.xml中扩展SQL语句

</select>
    
    <select id="findCountByCheckItemId" parameterType="int" resultType="long">
        select count(*) from t_checkgroup_checkitem where checkitem_id = #{checkitem_id}
    </select>
    
    <delete id="deleteById" parameterType="int">
        delete from t_checkitem where id = #{id}
    </delete>

## 6. 编辑检查项 ##

### 6.1 完善页面 ###

用户点击编辑按钮时，需要弹出编辑窗口并且将当前记录的数据进行回显，用户修改完成后点击确定按 钮将修改后的数据提交到后台进行数据库操作。

#### 6.1.1 绑定单击事件 ####

需要为编辑按钮绑定单击事件，并且将当前行数据作为参数传递给处理函数

<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>

// 弹出编辑窗口
    handleUpdate(row) {
        alert(row);
    },

#### 6.1.2 弹出编辑窗口回显数据 ####

当前页面中的编辑窗口已经提供好了，默认处于隐藏状态。在handleUpdate方法中需要将编辑窗口展示出来，并且需要发送ajax请求查询当前检查项数据用于回显

// 弹出编辑窗口
    handleUpdate(row) {
    	//回显数据，发送ajax请求根据ID查询当前检查项数据
    	axios.get("/checkitem/findById.do?id=" + row.id).then((res) => {
    		if(res.data.flag){
    			//进行回显，基于VUE的数据绑定实现
    			this.formData = res.data.data;
            	//弹出编辑窗口
    	        this.dialogFormVisible4Edit = true;
    		}else{
    			//查询失败，弹出提示
    			this.$message.error(res.data.message);
    		}
    	});
    },

6.1.3 发送请求

在编辑窗口中修改完成后，点击确定按钮需要提交请求，所以需要为确定按钮绑定事件并提供处理函数handleEdit

<el-button type="primary" @click="handleEdit()">确定</el-button>

//编辑
    handleEdit() {
    	//进行表单校验
    	this.$refs['dataEditForm'].validate((valid) => {
    		if(valid){
    			//表单校验通过，可以提交数据
    			axios.post("/checkitem/edit.do",this.formData).then((res) => {
    				if(res.data.flag){
    					//弹出成功提示信息
    					this.$message({
    						type:'success',
    						message:res.data.message
    					});
    				}else{
    					//执行失败
    					this.$message.error(res.data.message);
    				}
    			}).finally(() => {
    				//不管成功还是失败，都调用分页查询方法
    				this.findPage();
    				//隐藏编辑窗口
    				this.dialogFormVisible4Edit = false;
    			});
    		}else{
    			//表单校验不通过
    			this.$message.error("表单数据校验失败!");
    			return false;
    		}
    	});
    },

### 6.2 后台代码 ###

#### 6.2.1 Controller ####

在CheckItemController中增加编辑方法

//编辑检查项
    @RequestMapping("/edit")
    public Result edit(@RequestBody CheckItem checkItem){
    	try{
    		checkItemService.edit(checkItem);
    	}catch (Exception e){
    		e.printStackTrace();
    		//服务调用失败
    		return new Result(false, MessageConstant.EDIT_CHECKITEM_FAIL);
    	}
    	return  new Result(true, MessageConstant.EDIT_CHECKITEM_SUCCESS);
    }
    
    @RequestMapping("/findById")
    public Result findById(Integer id){
    	try{
    		CheckItem checkItem = checkItemService.findById(id);
    		return  new Result(true, MessageConstant.QUERY_CHECKITEM_SUCCESS,checkItem);
    	}catch (Exception e){
    		e.printStackTrace();
    		//服务调用失败
    		return new Result(false, MessageConstant.QUERY_CHECKITEM_FAIL);
    	}
    }

#### 6.2.2 服务接口 ####

在CheckItemService服务接口中扩展编辑方法

public void edit(CheckItem checkItem);
    public CheckItem findById(Integer id);

#### 6.2.3 服务实现类 ####

在CheckItemServiceImpl实现类中实现编辑方法

//编辑
    public void edit(CheckItem checkItem) {
        checkItemDao.edit(checkItem);
    }
    public CheckItem findById(Integer id) {
        return checkItemDao.findById(id);
    }

#### 6.2.4 Dao接口 ####

在CheckItemDao接口中扩展edit方法

public void edit(CheckItem checkItem);
    public CheckItem findById(Integer id);

#### 6.2.5 Mapper映射文件 ####

在CheckItemDao.xml中扩展SQL语句

<update id="edit" parameterType="com.itterence.pojo.CheckItem">
    	update t_checkitem
    	<set>
    		<if test="name != null">
    			name = #{name},
    		</if>
    		<if test="sex != null">
    			sex = #{sex},
    		</if>
    		<if test="code != null">
    			code = #{code},
    		</if>
    		<if test="age != null">
    			age = #{age},
    		</if>
    		<if test="price != null">
    			price = #{price},
    		</if>
    		<if test="type != null">
    			type = #{type},
    		</if>
    		<if test="attention != null">
    			attention = #{attention},
    		</if>
    		<if test="remark != null">
    			remark = #{remark},
    		</if>
    	</set>
    	where id = #{id}
    </update>
    
    <select id="findById" parameterType="int" resultType="com.itterence.pojo.CheckItem">
    	select * from t_checkitem where id = #{id}
    </select>

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/7fcce5121b144d55b1fa827ac992c6b2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/3e505f0b8ace4841b50656f5d3499859.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_16_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f1bb763e373e4faba93707ff17326ee4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_13_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/2c437d188e534e74abfa7d445deef596.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_11_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/caf9e197965c4f45b91aabf548d2d858.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_11,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_12_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/1dda015fcf1c4134a49f3dd3e745cae9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_12,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_13_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/51035daf667e4d6cadaacd5a46cebfb8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_12_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/dc8cf55dc6f64147b44d015f3393b110.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_12,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_12_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/690604b6449f4025ba3d7e73560847bd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_12,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/2d4967333f2d4a45a940c8704373a429.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_20,color_FFFFFF,t_70,g_se,x_16