Django 20购物商城项目（注册、登录页面：生成动态验证码）

冷不防 2023-10-08 11:41 2阅读 0赞

#### dDjango 20购物商城项目 ####

*   *   *  1、安装pillow
         *  2、在注册页面加入验证码
         *   *  2.1、register.html (增加内容)
             *  2.2、register.js（增加内容）
             *  2.2、路由、视图（增加内容）
             *   *  2.2.1、路由
                 *  2.2.2、视图
                 *   *  views\_heiper.py(增加两个函数)
                     *  views.py
                     *  点击注册后对比验证码
         *  3、这里我把注册时密码验证、页面返回等完善了一下
         *   *  3.1、增加了邮箱格式验证
             *  3.2、增加了密码格式验证
         *  4、登陆页面验证码

这里只展示代码，一些原理和细节可以参考我这篇博客
    
    https://blog.csdn.net/a__int__/article/details/103354549

#### 1、安装pillow ####

pillow是一个生成图像的库

pip install Pillow

#### 2、在注册页面加入验证码 ####

##### 2.1、register.html (增加内容) #####

这里我加在了“注册”按钮之前  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70]

<span>验证码:</span><input id="verify_code" type="text" name="verify_code" placeholder="请输入图中的验证码">
                <img src="{% url 'axf:get_code' %}">
                <br>
                {% if verify_wrong %}
                    <span id="verify_span" style="color: red">{
       { verify_wrong }}</span>
                {% else %}
                    <span id="verify_span" style="color: green"></span>
                {% endif %}
                <br>
                <br>

##### 2.2、register.js（增加内容） #####

点击图片更换  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 1]

$("img").click(function () {
        
            // 在浏览器里面路径不改变,这个图他就会不发生改变,所以给这个路径加一个随机数让浏览器知道改变了
            $(this).attr("src","/axf/getcode/?t="+Math.random());
            $("#verify_span").html("").css("color", "green");
        })

##### 2.2、路由、视图（增加内容） #####

###### 2.2.1、路由 ######

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

###### 2.2.2、视图 ######

###### views\_heiper.py(增加两个函数) ######

# 验证码,随机颜色
    def get_color():
        return random.randrange(256)
    
    
    # 验证码,随机4个文字
    def get_txt():
        txt = "zxcvbnmasdfghjklqwertyuiopZXCVBNMASDFGHJKLQWERTYUIOP1234567890"
        code = ""
        for i in range(4):
            code + random.choice(txt)
        return code

###### views.py ######

视图里新导入的库  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 3]  
增加函数get\_code()

> 绘制:画板、文字、半圆弧

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

def get_code(request):
        """
        Image 画板     ImageDraw 画笔
    
        """
        color_bg = (get_color(), get_color(), get_color())
        # 设置画板的背景及大小
        image = Image.new(mode='RGB', size=(100, 50), color=color_bg)
        # 画笔绘制
        imagedraw = ImageDraw(image, mode='RGB')
        # 获取随机文字
        the_code = get_txt()
        # 把所有小写字母换成大写字母,存入session
        # 验证时同样大小写转换一遍,这样用户输入时可以不区分大小写
        upper_code = the_code.upper()
        request.session["the_code"] = upper_code
        font = ImageFont.truetype("C:\Windows\Fonts\simsunb.ttf", 50)
        for i in range(4):
            # 文字填充色
            fill = (get_color(), get_color(), get_color())
            # 画笔在画板上绘制文字
            imagedraw.text(xy=(25 * i, 0), text=the_code[i], fill=fill, font=font)
    
        # 绘制1000个杂色点
        for i in range(1000):
            fill = (get_color(), get_color(), get_color())
            xy = (random.randrange(201), random.randrange(100))
            imagedraw.point(xy=xy, fill=fill)
    
        # 绘制向下的半圆弧
        """
        drawObject.arc([x1, y1, x2, y2], startAngle, endAngle, options)
        在左上角坐标为(x1, y1)，右下角坐标为(x2, y2)
        矩形区域内满圆O内，以starangle为起始角度，endAngle为终止角度，截取圆O的一部分圆弧画出来
        """
        imagedraw.arc((random.randrange(0,10),6,80,random.randrange(70,100)), random.randrange(0,180),random.randrange(250,360), fill=get_color())
    
        fp = BytesIO()
        image.save(fp, "png")
    
        return HttpResponse(fp.getvalue(), content_type="image/png")

效果截图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 5]

###### 点击注册后对比验证码 ######

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

def register(request):
        # 请求
        if request.method == "GET":
            data = {
        
                "title": "注册"
            }
            return render(request, 'user/register.html', context=data)
    
        # 提交
        elif request.method == "POST":
    
            # 用户输入的验证码
            verify_code = request.POST.get("verify_code")
            verify_code = verify_code.upper()
            print("获取到验证码le")
            # session存的验证码
            the_code = request.session.get("the_code")
            if verify_code != the_code:
                data = {
        
                    "verify_wrong": "验证码不对,重新输入"
                }
                return render(request, 'user/register.html', context=data)
            else:
                try:
                    username = request.POST.get("username")
                    email = request.POST.get("email")
                    password = request.POST.get("password")
                    icon = request.FILES.get("icon")
                    password = make_password(password)
                    user = AXFUser()
                    user.u_name = username
                    user.u_password = password
                    user.u_icon = icon
                    user.u_email = email
                    user.save()
    
                    # 用uuid得到唯一激活码，再哈希加密
                    u_token = uuid.uuid4().hex
                    # 缓存过期时间为1天
                    cache.set(u_token, user.id, timeout=60 * 60 * 24)
    
                    send_email_activate(username, email, u_token)
                except Exception as err:
                    data = {
        
                        "err": "数据异常"
                    }
                    return render(request, 'user/register.html', context=data)
            return redirect(reverse("axf:login"))

#### 3、这里我把注册时密码验证、页面返回等完善了一下 ####

下面是register.js目前完整代码

$(function () {
        
    
        T_change("#email_input", "#email_info", "邮箱可以用", "邮箱已存在", T_path = '/axf/checkemail/');
        T_change("#username_input", "#username_info", "用户名可用", "用户名已存在", T_path = '/axf/checkuser/');
        T_change("#password_input", "#password_info", "密码可用", "密码必须含有字母、数字、符号(+-.%#@*&!)三种", T_path = "/axf/checkpwd/");
        T_change("#password_confirm_input", "#password_confirm_info", "", "", T_path = "", is_password = 1);
    
        $("img").click(function () {
        
            // 在浏览器里面路径不改变,这个图他就会不发生改变,所以给这个路径加一个随机数让浏览器知道改变了
            $(this).attr("src", "/axf/getcode/?t=" + Math.random());
            $("#verify_span").html("").css("color", "green");
        });
    
    });
    
    function T_change(T_input, T_info, T_text1, T_text2, T_path = "", is_password = 0) {
        
        var $T_i = $(T_input);
        $T_i.change(function () {
        
    
            // val()返回被选元素的当前值,trim()的作用是去掉字符串两端的多余的空格
            var T_i = $T_i.val().trim();
            console.log(T_i);
            if (is_password === 1) {
        
                var $T_i_info = $(T_info);
                $T_i_info.html(T_text1).css("color", "green");
            } else {
        
                if (T_i.length) {
        
                    // 将用户名发给服务器
                    $.getJSON(T_path, {
        "T_name": T_i}, function (data) {
        
                        var $T_i_info = $(T_info);
                        if (data['status'] === 200) {
        
                            $T_i_info.html(T_text1).css("color", "green");
                        } else if (data['status'] === 901) {
        
                            $T_i_info.html(T_text2).css("color", "red");
                        } else if (data['status'] === 902) {
        
                            $T_i_info.html(data['msg']).css("color", "red");
                        }
    
                    })
                }
            }
        })
    }
    
    function check() {
        
    
        username = check_one("#username_input", "#username_info", "用户名不能为空");
        email_o = check_one("#email_input", "#email_info", "邮箱不能为空");
        password_o = check_one("#password_input", "#password_info", "密码不能为空");
        password_t = check_one("#password_confirm_input", "#password_confirm_info", "请再次输入密码");
    
        var $password_input = $("#password_input");
        var password = $password_input.val().trim();
    
        var $password_confirm = $("#password_confirm_input");
        var password_confirm = $password_confirm.val().trim();
    
        var $email_input = $("#email_input");
        var email = $email_input.val().trim();
    
        // 密码输入后md5加密后提交（注意：这里是前端加密，传入后台的时候还会再加密一次）
        if (password_o === 0 || password_t === 0) {
        
            if (password === password_confirm) {
        
                console.log("两次密码输入一致");
                if (password === email) {
        
                    $("#password_info").html("密码不能和邮箱一样").css("color", "red");
                    $("#password_confirm_info").html("密码不能和邮箱一样").css("color", "red");
                    return false
                } else {
        
                    $password_input.val(hex_md5(password));
                    $password_confirm.val(hex_md5(password));
                    $("#password_confirm_info").html("").css("color", "green");
                }
            } else {
        
                $("#password_confirm_info").html("两次密码输的不一样").css("color", "red");
                return false
            }
        }
    
    
        return !(username + email_o + password_o);
    }
    
    function check_one(C_input, C_info, C_text) {
        
    
        var $username_info = $(C_info);
        var $username = $(C_input);
    
        var username = $username.val().trim();
        var info_color = $username_info.css("color");
    
        // 检查是否为空
        if (!username) {
        
            $username_info.html(C_text).css("color", "red");
            return 1
        }
        // 检查是否有重复
        if (info_color === 'rgb(255, 0, 0)' || info_color === 'rgb(51, 51, 51)') {
        
            console.log(C_input);
            console.log("颜色不对");
            return 1
        }
    
        return 0
    }

下面是register.html目前完整代码

{% extends "base_user.html" %}
    {% load static %}
    {% block ext_css %}
        {
       { block.super }}
        <link rel="stylesheet" href="{% static 'axf/user/css/register.css' %}">
    {% endblock %}
    {% block ext_js %}
        {
       { block.super }}
        <script type="text/javascript" src="{% static 'axf/user/js/register.js' %}"></script>
    {% endblock %}
    {% block footer %}
        <div class="title">
            <a href="#" onclick="javascript:history.back(-1);">
                <div class="arrow-box nav-left">
                    返回
                </div>
            </a>
            <p class="font">用户注册</p>
        </div>
    {% endblock %}
    {% block content %}
        <div class="container">
            {% if err %}
                <span>{
       { err }}</span>
            {% endif %}
            <form method="POST" enctype="multipart/form-data" action="{% url 'axf:register' %}" onsubmit="return check()">
                {% csrf_token %}
                <div class="form-group">
                    <label for="username_input" id="label_red">用户名</label>
                    <input name="username" type="text" class="form-control" id="username_input" placeholder="请输入用户名">
                    <span id="username_info"></span>
                </div>
                <div class="form-group">
                    <label for="email_input" id="label_red"> 邮箱</label>
                    <input name="email" type="text" class="form-control" id="email_input" placeholder="请输入邮箱">
                    <span id="email_info"></span>
                </div>
                <div class="form-group">
                    <label for="password_input" id="label_red">密码</label>
                    <input name="password" type="password" class="form-control" id="password_input" placeholder="请输入密码">
                    <span id="password_info"></span>
                </div>
                <div class="form-group">
                    <label for="password_confirm_input" id="label_red">确认密码</label>
                    <input type="password" class="form-control" id="password_confirm_input" placeholder="请再次输入密码">
                    <span id="password_confirm_info"></span>
                </div>
                <div class="form-group">
                    <label for="icon_input"> 头像</label>
                    <input name="icon" type="file" id="icon_input" placeholder="请再次输入密码">
    
                </div>
                <br>
                <span>验证码:</span><input id="verify_code" type="text" name="verify_code" placeholder="请输入图中的验证码">
                <img src="{% url 'axf:get_code' %}">
                <br>
                {% if verify_wrong %}
                    <span id="verify_span" style="color: red">{
       { verify_wrong }}</span>
                {% else %}
                    <span id="verify_span" style="color: green"></span>
                {% endif %}
                <br>
                <br>
                <button type="submit" class="btn btn-success btn-block">注册</button>
            </form>
            <br>
            <br>
            <br>
            <br>
        </div>
    {% endblock %}

下面是register.css目前完整代码

header{
        
        height: 0rem;
        margin-bottom: 0rem;
    }
    
    .title {
        
        top:0;
        position: fixed;
        width: 100%;
        height: 50px;
        background-color: #009688;
    }
    
    .font {
        
        color: #fff;
        line-height: 50px;
        font-size: 20px;
        text-indent: -2em;
        text-align: center
    }
    
    .nav-left {
        
        float: left;
    }
    
    .arrow-box{
        
        width: 50px;
        height: 26px;
        position: relative;
        border-radius: 10% 10%;
        background: #fff;
        text-align: center;
        line-height: 26px;
        top: 12px;
        font-size: 14px;
        left: 10px;
    }
    #label_red:before {
        
        content: "*";
        color: red;
    }
    .container{
        
        margin-top: 2rem;
    }

页面截图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 7]

##### 3.1、增加了邮箱格式验证 #####

视图里的 **def check\_email(request)**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 8]

def check_email(request):
        email = request.GET.get("T_name")
        e = AXFUser.objects.filter(u_email=email)
        data = {
        
            "status": HTTP_OK,
            "msg": '邮箱可用',
        }
        # exists()判断路径是否存在
        if e.exists():
            data["status"] = HTTP_USER_EXIST
            data["msg"] = '邮箱已经存在'
        else:
    
            # 邮箱规则x@x.x 最后一个x需为com,.cn,.net,.org..等
            if re.match("[A-Za-z0-9]+@[A-Za-z0-9]+\.[cmnoetrg]+", email):
                pass
            else:
                data["status"] = 902
                data["msg"] = '邮箱格式不正确'
        return JsonResponse(data=data)

##### 3.2、增加了密码格式验证 #####

新增路由  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 9]  
视图新增函数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 10]

def check_pwd(request):
        pwd = request.GET.get("T_name")
        data = {
        }
        l_re = re.compile('[a-zA-Z]')
        num_re = re.compile('[0-9]')
        p_re = re.compile('[\.\?\!\=\-\+\_\|\*\&\%\#\@\~\@\！\%\￥]')
        wrong_re = re.compile('[^a-zA-Z0-9\.\?\!\=\-\+\_\|\*\&\%\#\@\~\@\！\%\￥]')
    
        if len(pwd) < 6 or len(pwd) > 20:
            data["status"] = 902
            data["msg"] = '请输入6到20位的密码'
        elif wrong_re.search(pwd) != None:
            data["status"] = 902
            data["msg"] = '密码中包含了无效字符'
        else:
            if l_re.search(pwd) == None:
                data["status"] = 902
                data["msg"] = '密码里必须包含字母'
            elif num_re.search(pwd) == None:
                data["status"] = 902
                data["msg"] = '密码里必须包含数字'
            elif p_re.search(pwd) == None:
                data["status"] = 902
                data["msg"] = '密码里必须包含.?!=-+_|*&%#@~￥中至少一个符号'
            else:
                data["status"] = 200
                data["msg"] = '该密码可以使用'
    
        return JsonResponse(data=data)

#### 4、登陆页面验证码 ####

login.html（增加了三处：css样式新增、头部、验证码，代码和注册页面里的一样）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 11]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 12]  
login.css（新建文件，内容和注册页面的css一模一样）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 13]

视图（和注册页面的视图函数基本一样）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 14]  
这是登录视图函数完整代码

def login(request):
        if request.method == "GET":
            error_msg = request.session.get('error_msg')
            data = {
        
                "title": "登录"
            }
            if error_msg:
                # 如果session['error_msg']存在就删除，并将error_msg显示在页面上
                del request.session['error_msg']
                data['error_msg'] = error_msg
            return render(request, 'user/login.html', context=data)
    
        elif request.method == "POST":
            # 用户输入的验证码
            verify_code = request.POST.get("verify_code")
            # 把小写字母全部换成大写字母
            verify_code = verify_code.upper()
            print("获取到验证码le")
            # session存的验证码
            the_code = request.session.get("the_code")
            if verify_code != the_code:
                data = {
        
                    "verify_wrong": "验证码不对,重新输入"
                }
                return render(request, 'user/login.html', context=data)
            else:
                username = request.POST.get("username")
                password = request.POST.get("password")
    
                users = AXFUser.objects.filter(u_name=username)
    
                # exists()方法主要是判断查询的数据是否存在，存在时返回True，否则返回False
                # first() 返回queryset中匹配到的第一个对象，如果没有匹配到对象则为None
    
                if users.exists():
                    user = users.first()
                    if check_password(password, user.u_password):
                        if user.is_active:
    
                            request.session['user_id'] = user.id
                            return redirect(reverse('axf:mine'))
                        else:
                            request.session['error_msg'] = '未激活'
                            return redirect(reverse('axf:login'))
                    else:
                        # 密码错误
                        request.session['error_msg'] = '密码错误'
                        return redirect(reverse('axf:login'))
                # 用户名不存在
                request.session['error_msg'] = '用户不存在'
            return redirect(reverse('axf:login'))

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200107223132790.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200107154215341.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200107154351183.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200107163411802.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2020010717003110.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200107173037111.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200107224046600.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200108141017244.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200108141430493.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200108144554186.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200108151046103.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20200108152429930.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20200108152518469.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20200108152637177.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20200108152806526.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70