AUI H5前端简单教程

妖狐艹你老母 2022-12-15 03:54 175阅读 0赞

# 1.参考文档 #

AUI框架：[http://aui.dianm.cc/][http_aui.dianm.cc]

AUI展示站点：[http://aui.ea55.com/][http_aui.ea55.com]

利用html实现手机app，且支持跨平台（win，Android，ios ...）

# 2.下载源码（VS Code + Live Server） #

安装VS Code Live Server插件，open with Live Server

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70][]

当手机与PC处于LAN时，手机浏览器键入PC的IP，即可访问到PC上的H5网页，并且能够实时更新，JS的修改可能需要刷新。

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 1][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 2][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 3][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 4][]

# 3.修改页面 #

参考AUI架构选择需要的首页，思考是否需要header footer

## 3.1index.html（图1） ##

## 3.2login.html（图3）  ##

<!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
        <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    </head>
    <body>
        <header class="aui-bar aui-bar-nav" id="aui-header">
            <a class="aui-btn aui-pull-left" href="../index.html">
                <span class="aui-iconfont aui-icon-left"></span>
            </a>
            <div class="aui-title">健康打卡</div>
        </header>
        <div class="aui-content aui-margin-b-15">
            <ul class="aui-list aui-form-list">
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            账号
                        </div>
                        <div class="aui-list-item-input">
                            <input id="username" type="text" placeholder="例如：zhangsan18">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            密码
                        </div>
                        <div class="aui-list-item-input">
                            <input id="password" type="password" placeholder="Password">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            邮箱
                        </div>
                        <div class="aui-list-item-input">
                            <input id="email" type="text" value="XXX@qq.com" placeholder="XXX@qq.com">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            专业
                        </div>
                        <div class="aui-list-item-input">
                            <input id="major" type="text" value="软件工程" placeholder="例如：软件工程">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            年级
                        </div>
                        <div class="aui-list-item-input">
                            <select id="grade">
                                <option value="">请选择</option>
                                <option value="2">2010</option>
                                <option value="1">2011</option>
                                <option value="3">2012</option>
                                <option value="4">2013</option>
                                <option value="5">2014</option>
                                <option value="6">2015</option>
                                <option value="7">2016</option>
                                <option value="8">2017</option>
                                <option value="9">2018</option>
                                <option value="10">2019</option>
                                <option value="11">2020</option>
                            </select>
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            校区
                        </div>
                        <div class="aui-list-item-input">
                            <select id="campus">
                                <option value="">请选择</option>
                            </select>
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            公寓
                        </div>
                        <div class="aui-list-item-input">
                            <select id="apartment">
                                <option value="">请选择</option>
                            </select>
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            寝室
                        </div>
                        <div class="aui-list-item-input">
                            <input id="dormitory" type="text" placeholder="例如：612">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            类别
                        </div>
                        <div class="aui-list-item-input">
                            <label><input class="aui-radio" type="radio" value="1" name="category" checked> 硕士</label>
                            <label><input class="aui-radio" type="radio" value="2" name="category"> 博士</label>
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner aui-list-item-center aui-list-item-btn">
                        <div class="aui-btn aui-btn-info aui-margin-r-5">
                            <a onclick="login()">提交</a>
                        </div>
    					<div class="aui-btn aui-btn-info aui-margin-r-5">
                            <a onclick="reset()">重置</a>
                        </div>
                        <div class="aui-btn aui-btn-danger aui-margin-l-5">
                            <a href="../index.html">取消</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    	<footer class="aui-bar aui-bar-tab aui-border-t" id="footer">
            <div class="aui-bar-tab-item aui-active" tapmode>
                <i class="aui-iconfont aui-icon-home"></i>
                <div class="aui-bar-tab-label">
                    <a href="../index.html">首页</a>
                </div>
            </div>
            <div class="aui-bar-tab-item" tapmode>
                <i class="aui-iconfont aui-icon-star"></i>
                <div class="aui-bar-tab-label">
                    <a href="../html/money.html">打赏</a>
                </div>
            </div>
            <div class="aui-bar-tab-item" tapmode>
                <i class="aui-iconfont aui-icon-my"></i>
                <div class="aui-bar-tab-label">
                    <a href="../html/login.html">我的</a>
                </div>
            </div>
            <div class="aui-bar-tab-item" tapmode>
                <i class="aui-iconfont aui-icon-close"></i>
                <div class="aui-bar-tab-label">
                    <a href="../html/logout.html">注销</a>
                </div>
            </div>
        </footer>
    </body>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/aui-toast.js"></script>
    <script type="text/javascript" src="../../script/aui-toast.js" ></script>
    <script src="../script/jquery.min.js"></script>
    <script type="text/javascript">
        function login(){
    		var toast = new auiToast({});
    		var username = $("#username").val();
            var password = $("#password").val();
            var email = $("#email").val();
            var major = $("#major").val();
            var grade = $("#grade").val();
            var campus = $("#campus").val();
            var apartment = $("#apartment").val();
            var dormitory = $("#dormitory").val();
            var category = $("input[type='radio']:checked").val();
    		var regn = new RegExp("^[0-9]*$");
    		var rega = new RegExp("^[a-zA-Z]+$");
    		var rege = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); 
    		if(username =="" || username == null || username == undefined)
    		{
    			toast.fail({title:"账号为空",duration:2000});
    			return;
    		}
    		if(regn.test(username))
    		{
    			toast.fail({title:"账号为纯数字",duration:2000});
    			return;
    		}
    		if(rega.test(username))
    		{
    			toast.fail({title:"账号为纯英文",duration:2000});
    			return;
    		}
    		if(password =="" || password == null || password == undefined)
    		{
    			toast.fail({title:"密码为空",duration:2000});
    			return;
    		}
    		if(password.length<6)
    		{
    			toast.fail({title:"密码过短",duration:2000});
    			return;
    		}
    		if(email =="" || email == null || email == undefined)
    		{
    			toast.fail({title:"邮箱为空",duration:2000});
    			return;
    		}
    		if(!rege.test(email))
    		{
    			toast.fail({title:"非法邮箱",duration:2000});
    			return;
    		}
    		if(major =="" || major == null || major == undefined)
    		{
    			toast.fail({title:"专业为空",duration:2000});
    			return;
    		}
    		if(grade =="" || grade == null || grade == undefined)
    		{
    			toast.fail({title:"年级为空",duration:2000});
    			return;
    		}
    		if(campus =="" || campus == null || campus == undefined)
    		{
    			toast.fail({title:"校区为空",duration:2000});
    			return;
    		}
    		if(campus =="" || campus == null || campus == undefined)
    		{
    			toast.fail({title:"校区为空",duration:2000});
    			return;
    		}
    		if(apartment =="" || apartment == null || apartment == undefined)
    		{
    			toast.fail({title:"公寓为空",duration:2000});
    			return;
    		}
    		if(dormitory =="" || dormitory == null || dormitory == undefined)
    		{
    			toast.fail({title:"寝室为空",duration:2000});
    			return;
    		}
    		if(category =="" || category == null || category == undefined)
    		{
    			toast.fail({title:"类别为空",duration:2000});
    			return;
    		}
    		var formData = new FormData();
            formData.append("username",username);
    		formData.append("password",password);
    		formData.append("email",email);
    		formData.append("fieldZY",major);
    		formData.append("fieldSQnj",grade);
    		formData.append("fieldSQxq",campus);
    		formData.append("fieldSQgyl",apartment);
    		formData.append("fieldSQqsh",dormitory);
    		formData.append("fieldSQssbs",category);
            $.ajax({
                url: "http://127.0.0.1/login",
                type: 'post',
                async: false,
                data: formData,
                processData: false,// 告诉jQuery不要去处理发送的数据
                contentType: false,// 告诉jQuery不要去设置Content-Type请求头
    			success: function (data) {
                    if(data['result'] == 1)
                        toast.success({title:"提交成功！",duration:2000});
                    else
                        toast.success({title:"提交失败！",duration:2000});
                },
                error:function(){
                    toast.success({title:"提交失败！",duration:2000});
                }
            });
        };
    
        var campus = [{
    			id:1,
    			name:'中心校区'
    		},{
    			id:2,
    			name:'南岭校区'
    		},{
    			id:3,
    			name:'新民校区'
    		},{
    			id:4,
    			name:'南湖校区'
    		},{
    			id:5,
    			name:'和平校区'
    		},{
    			id:6,
    			name:'朝阳校区'
    		},{
    			id:7,
    			name:'前卫北区'
            }];
            
            var apartment = [{
    			id:1,
    			name:'北苑1公寓',
    			campusId:1
    		},{
    			id:2,
    			name:'北苑2公寓',
    			campusId:1
    		},{
    			id:3,
    			name:'南苑1公寓',
    			campusId:1
    		},{
    			id:4,
    			name:'南苑2公寓',
    			campusId:1
    		},{
    			id:5,
    			name:'南苑3公寓',
    			campusId:1
    		},{
    			id:6,
    			name:'南苑4公寓',
    			campusId:1
    		},{
    			id:7,
    			name:'南苑5公寓A区',
    			campusId:1
    		},{
    			id:8,
    			name:'南苑5公寓B区',
    			campusId:1
    		},{
    			id:9,
    			name:'南苑5公寓C区',
    			campusId:1
    		},{
    			id:10,
    			name:'南苑6公寓',
    			campusId:1
    		},{
    			id:11,
    			name:'南苑7公寓',
    			campusId:1
    		},{
    			id:12,
    			name:'南苑8公寓',
    			campusId:1
    		},{
    			id:13,
    			name:'南苑9公寓',
    			campusId:1
    		},{
    			id:14,
    			name:'大学城1公寓',
    			campusId:1
    		},{
    			id:15,
    			name:'大学城2公寓',
    			campusId:1
    		},{
    			id:16,
    			name:'大学城3公寓',
    			campusId:1
    		},{
    			id:17,
    			name:'文苑1公寓',
    			campusId:1
    		},{
    			id:18,
    			name:'文苑2公寓',
    			campusId:1
    		},{
    			id:19,
    			name:'文苑3公寓',
    			campusId:1
    		},{
    			id:20,
    			name:'文苑4公寓',
    			campusId:1
    		},{
    			id:21,
    			name:'文苑5公寓',
    			campusId:1
    		},{
    			id:22,
    			name:'文苑6公寓',
    			campusId:1
    		},{
    			id:23,
    			name:'文苑7公寓',
    			campusId:1
    		},{
    			id:24,
    			name:'文苑8公寓',
    			campusId:1
    		},{
    			id:25,
    			name:'文苑9公寓',
    			campusId:1
    		},{
    			id:82,
    			name:'校外居住',
    			campusId:1
    		},{
    			id:26,
    			name:'南岭1公寓',
    			campusId:2
    		},{
    			id:27,
    			name:'南岭2公寓',
    			campusId:2
    		},{
    			id:28,
    			name:'南岭3公寓',
    			campusId:2
    		},{
    			id:29,
    			name:'南岭4公寓',
    			campusId:2
    		},{
    			id:30,
    			name:'南岭5公寓',
    			campusId:2
    		},{
    			id:31,
    			name:'南岭6公寓',
    			campusId:2
    		},{
    			id:32,
    			name:'南岭7公寓',
    			campusId:2
    		},{
    			id:33,
    			name:'南岭8公寓',
    			campusId:2
    		},{
    			id:34,
    			name:'南岭9公寓',
    			campusId:2
    		},{
    			id:35,
    			name:'南岭10公寓',
    			campusId:2
    		},{
    			id:36,
    			name:'南岭11公寓',
    			campusId:2
    		},{
    			id:37,
    			name:'南岭12公寓A区',
    			campusId:2
    		},{
    			id:38,
    			name:'南岭12公寓B区',
    			campusId:2
    		},{
    			id:39,
    			name:'南岭12公寓C区',
    			campusId:2
    		},{
    			id:40,
    			name:'南岭13公寓',
    			campusId:2
    		},{
    			id:41,
    			name:'南岭14公寓',
    			campusId:2
    		},{
    			id:83,
    			name:'校外居住',
    			campusId:2
    		},{
    			id:42,
    			name:'新民1公寓',
    			campusId:3
    		},{
    			id:43,
    			name:'新民2公寓',
    			campusId:3
    		},{
    			id:44,
    			name:'新民3公寓',
    			campusId:3
    		},{
    			id:45,
    			name:'新民4公寓',
    			campusId:3
    		},{
    			id:46,
    			name:'新民5公寓',
    			campusId:3
    		},{
    			id:47,
    			name:'新民6公寓',
    			campusId:3
    		},{
    			id:48,
    			name:'新民7公寓',
    			campusId:3
    		},{
    			id:49,
    			name:'新民8公寓',
    			campusId:3
    		},{
    			id:50,
    			name:'新民9公寓',
    			campusId:3
    		},{
    			id:51,
    			name:'新民10公寓',
    			campusId:3
    		},{
    			id:52,
    			name:'新民11公寓',
    			campusId:3
    		},{
    			id:84,
    			name:'校外居住',
    			campusId:3
    		},{
    			id:53,
    			name:'南湖1公寓',
    			campusId:4
    		},{
    			id:54,
    			name:'南湖2公寓',
    			campusId:4
    		},{
    			id:55,
    			name:'南湖3公寓',
    			campusId:4
    		},{
    			id:56,
    			name:'南湖4公寓',
    			campusId:4
    		},{
    			id:57,
    			name:'南湖5公寓',
    			campusId:4
    		},{
    			id:58,
    			name:'南湖6公寓',
    			campusId:4
    		},{
    			id:85,
    			name:'校外居住',
    			campusId:4
    		},{
    			id:59,
    			name:'朝阳1公寓',
    			campusId:6
    		},{
    			id:60,
    			name:'朝阳2公寓',
    			campusId:6
    		},{
    			id:61,
    			name:'朝阳3公寓',
    			campusId:6
    		},{
    			id:62,
    			name:'朝阳4公寓',
    			campusId:6
    		},{
    			id:63,
    			name:'朝阳5公寓',
    			campusId:6
    		},{
    			id:64,
    			name:'朝阳6公寓',
    			campusId:6
    		},{
    			id:65,
    			name:'朝阳7公寓',
    			campusId:6
    		},{
    			id:87,
    			name:'校外居住',
    			campusId:6
    		},{
    			id:66,
    			name:'和平1公寓',
    			campusId:5
    		},{
    			id:67,
    			name:'和平2公寓',
    			campusId:5
    		},{
    			id:68,
    			name:'和平3公寓',
    			campusId:5
    		},{
    			id:69,
    			name:'和平4公寓',
    			campusId:5
    		},{
    			id:70,
    			name:'和平5公寓',
    			campusId:5
    		},{
    			id:71,
    			name:'和平6公寓',
    			campusId:5
    		},{
    			id:72,
    			name:'和平7公寓',
    			campusId:5
    		},{
    			id:73,
    			name:'和平8公寓',
    			campusId:5
    		},{
    			id:86,
    			name:'校外居住',
    			campusId:5
    		},{
    			id:74,
    			name:'北区1公寓',
    			campusId:7
    		},{
    			id:75,
    			name:'北区2公寓',
    			campusId:7
    		},{
    			id:76,
    			name:'北区3公寓',
    			campusId:7
    		},{
    			id:77,
    			name:'北区4公寓',
    			campusId:7
    		},{
    			id:78,
    			name:'北区5公寓',
    			campusId:7
    		},{
    			id:79,
    			name:'北区6公寓',
    			campusId:7
    		},{
    			id:80,
    			name:'北区7公寓',
    			campusId:7
    		},{
    			id:81,
    			name:'北区8公寓',
    			campusId:7
    		},{
    			id:88,
    			name:'校外居住',
    			campusId:7
            }];
    		
    		//初始化"校区"下拉框
            for (var i = 0; i < campus.length; i++) {
                var op = new Option(campus[i].name, campus[i].id);
                $("#campus").append(op);
            };
    
    		//当"校区"变动时,公寓刷新为对应校区
            $("#campus").change(function(){
                $("#apartment").empty();
                var campus = $("#campus").val();
                for (var i = 0; i < apartment.length; i++) {
                    if(apartment[i].campusId == campus)
                    {
                        var op = new Option(apartment[i].name, apartment[i].id);
                        $("#apartment").append(op);
                    }  
                }
            });
    	function reset(){
    		$(":input").val('');
    		$(":select").val('');
    	};
    </script>
    </html>

# 4.js判定用户输入内容 #

## 4.1非空判定（图5） ##

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 5][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 6][]

## 4.2正则表达式判定（图6） ##

# 5.二级联动 #

参考省市区三级联动，此处为校区，公寓二级联动

//初始化"校区"下拉框
    for (var i = 0; i < campus.length; i++) {
    	var op = new Option(campus[i].name, campus[i].id);
    	$("#campus").append(op);
    };
    
    //当"校区"变动时,公寓刷新为对应校区
    $("#campus").change(function(){
    	$("#apartment").empty();
    	var campus = $("#campus").val();
    	for (var i = 0; i < apartment.length; i++) {
    		if(apartment[i].campusId == campus)
    		{
    			var op = new Option(apartment[i].name, apartment[i].id);
    			$("#apartment").append(op);
    		}  
    	}
    });

# 6.radio获取值 #

radio常用于二选一的选择框，例如：好人/坏人

此处调用jquery.min.js获取radio中的值。

<div class="aui-list-item-input">
       <label><input class="aui-radio" type="radio" value="1" name="category" checked> 硕士</label>
       <label><input class="aui-radio" type="radio" value="2" name="category"> 博士</label>
    </div>
    <script src="../script/jquery.min.js"></script>
    <script type="text/javascript">
        var category = $("input[type='radio']:checked").val();
    </script>

# 7.post请求 客户端 以及 服务器端 #

## 7.1客户端 ##

定义formData,调用jquery.min.js

## 7.2服务器端 ##

此处用python实现了简易的服务器端

# -*- coding: UTF-8 -*-
    from flask import Flask, request, jsonify
    
    app = Flask(__name__)
    
    
    @app.route('/login', methods=["POST"])
    def calculate():
        params = request.form if request.form else request.json
        print(params)
        res = {"result": 1}
        return jsonify(res)
    
    
    if __name__ == '__main__':
        app.run(host='127.0.0.1', threaded=True, debug=True, port=80)

逻辑：

当点击提交按钮时，JS获取值，赋值至formData，发起POST请求，服务器端接收到POST请求，返回JSON格式\{"result": 1\} ，并且前端Ajax根据不同的返回值，给出提交的结果（具体的提交逻辑可在服务器端完善）。

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 7][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 8][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 9][]

# 8.注意 #

1.注意POST请求的跨域问题，跨域后无法解析JSON
    2.Live Server 和 python 服务器端 存在冲突，停止服务器端代码后，启动Live Server，再开启服务器端
    3.项目中未填写本项目路径名，故在TOMCAT中，只能使用ROOT作为项目名。

[http_aui.dianm.cc]: http://aui.dianm.cc/
[http_aui.ea55.com]: http://aui.ea55.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70]: /images/20221123/dfc48f383df94a82b505a0df98f8b83a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201015152957193.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201015153014261.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201015153220846.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 4]: /images/20221123/7830c78e9c7743f7aec99531b29955a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201015154049122.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 6]: /images/20221123/9018fe6bb1b84ef593d0ea4256c45593.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 7]: /images/20221123/1edaf1f149f842e88c131554987f79c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 8]: /images/20221123/b90f65d9278346e3a6756493b5a37c45.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 9]: /images/20221123/4ea315675c1d4a77907df45fcd9117bc.png