移动商城第二篇（品牌管理模块）【文件上传、数据校验、CRUD】

﹏ヽ暗。殇╰゛Y 2021-09-30 19:24 243阅读 0赞

# 添加品牌 #

在原型界面上，我们都是一些“死”数据，我们需要将数据库的记录代替这些“死”数据！

![640?wx\_fmt=png][640_wx_fmt_png] 这里写图片描述

## 上传图片 ##

服务端console对图片进行上传到我们的图片服务器上，而portal则访问的时候从图片服务器拿到图片…

![640?wx\_fmt=png][640_wx_fmt_png 1] 这里写图片描述

在前面，我们已经搭建了图片服务器了，那我们怎么将console要上传的图片“丢给”图片服务器呢？？？

![640?wx\_fmt=png][640_wx_fmt_png 2] 这里写图片描述

> **上传图片时使用Jersey 客户端 API 调用 REST 风格的 Web 服务**,  Jersey 1 是一个开源的、可以用于生产环境的 JAX-RS（RESTful Web Services 的 Java API 规范，JSR-311）实现。通过 Jersey 可以很方便的使用 Java 来创建一个 RESTful Web Services。

配置文件上传解析器：

我们是上传到图片服务器上的，因此需要我们自己配置对应的路径….而这个配置文件应该是写在core的，因为它很有可能是会被重用的。

![640?wx\_fmt=png][640_wx_fmt_png 3] 这里写图片描述

值得注意的是：**文件服务器要设置成可写的【默认是只读的】**

参考如下博文：  
http://blog.csdn.net/hon\_3y/article/details/77840532

编写工具类来获取对应的数据

public class ResourcesUtils {    public static String readProp(String key) {        InputStream in = ResourcesUtils.class.getClassLoader().getResourceAsStream("system.properties");        Properties prop = new Properties();        try {            prop.load(in);        } catch (IOException e) {            e.printStackTrace();        }        return prop.getProperty(key);    }}class ResourcesUtils {
        
        public static String readProp(String key) {
        
            InputStream in = ResourcesUtils.class.getClassLoader().getResourceAsStream("system.properties");
            Properties prop = new Properties();
            try {
        
                prop.load(in);
            } catch (IOException e) {
        
                e.printStackTrace();
            }
    
            return prop.getProperty(key);
        }
    
    }

编写处理文件上传的Controller

如果有多个文件的话或者我们不知道上传的input的name，我们可以使用request对象来获取Map，再来获取对应的文件

//把request转换成复杂request        MultipartHttpServletRequest mr = (MultipartHttpServletRequest) request;        //获得文件        Map<String, MultipartFile> map = mr.getFileMap();        Set<String> set = map.keySet();        Iterator<String> it = set.iterator();        String fileInputName = it.next();        MultipartFile mf = map.get(fileInputName);
            MultipartHttpServletRequest mr = (MultipartHttpServletRequest) request;
            //获得文件
            Map<String, MultipartFile> map = mr.getFileMap();
            Set<String> set = map.keySet();
            Iterator<String> it = set.iterator();
            String fileInputName = it.next();
            MultipartFile mf = map.get(fileInputName);

而我们现在是知道input的name的，因此，这里我就**直接使用MultipartFile对象来获取了**。

@Controller@RequestMapping("/upload")public class UploadEbBrandPicController {    @RequestMapping("/uploadPic.do")    public void uploadPic(@RequestParam MultipartFile imgsFile, Writer writer) throws IOException {        //上传文件的名字是不能相同的，因此我们设置一下文件的名称        String fileName = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());        Random random = new Random();        for(int i = 0; i < 3; i++){            fileName = fileName + random.nextInt(10);        }        //拿到该文件的原始名称        String originalFilename = imgsFile.getOriginalFilename();        //获取该文件的后缀        String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));        /***         * 绝对路径是留给页面src属性做显示的         * 相对路径是保存在数据库中，通过input来进行提交的。         */        //获得上传文件的绝对路径        String realPath = ResourcesUtils.readProp("file_path")+"/upload/"+fileName+suffix;        //获得相对路径        String relativePath = "/upload/"+fileName+suffix;        //创建jersy的客户端        Client client = Client.create();        //创建web资源对象        WebResource wr = client.resource(realPath);        //拿到文件的二进制数据，使用web资源对象上传        byte[] bytes = imgsFile.getBytes();        wr.put(bytes);        //使用JSON格式把我们的绝对路径和相对路径返回出去。        JSONObject jo = new JSONObject();        jo.accumulate("realPath", realPath);        jo.accumulate("relativePath", relativePath);        String result = jo.toString();        writer.write(result);    }}
    @RequestMapping("/upload")
    public class UploadEbBrandPicController {
        
        @RequestMapping("/uploadPic.do")
        public void uploadPic(@RequestParam MultipartFile imgsFile, Writer writer) throws IOException {
        
    
            //上传文件的名字是不能相同的，因此我们设置一下文件的名称
            String fileName = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());
            Random random = new Random();
            for(int i = 0; i < 3; i++){
        
                fileName = fileName + random.nextInt(10);
            }
            //拿到该文件的原始名称
            String originalFilename = imgsFile.getOriginalFilename();
    
            //获取该文件的后缀
            String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
    
            /***         * 绝对路径是留给页面src属性做显示的         * 相对路径是保存在数据库中，通过input来进行提交的。         */
            //获得上传文件的绝对路径
            String realPath = ResourcesUtils.readProp("file_path")+"/upload/"+fileName+suffix;
            //获得相对路径
            String relativePath = "/upload/"+fileName+suffix;
    
            //创建jersy的客户端
            Client client = Client.create();
            //创建web资源对象
            WebResource wr = client.resource(realPath);
    
            //拿到文件的二进制数据，使用web资源对象上传
            byte[] bytes = imgsFile.getBytes();
            wr.put(bytes);
    
            //使用JSON格式把我们的绝对路径和相对路径返回出去。
            JSONObject jo = new JSONObject();
            jo.accumulate("realPath", realPath);
            jo.accumulate("relativePath", relativePath);
            String result = jo.toString();
            writer.write(result);
        }
    }

在前端我们是使用ajax进行异步上传文件的，当图片选项修改时，我们就触发事件把图片上传到我们的图片服务器上了，。

成功把图片上传到图片服务器中了

![640?wx\_fmt=png][640_wx_fmt_png 4] 这里写图片描述

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

### 数据校验 ###

添加商品的界面是这样子的，需要我们进行校验

![640?wx\_fmt=png][640_wx_fmt_png 5] 这里写图片描述

而校验我们有两种方式：

我们是这样做的：在输入框中自定义了几个属性：**reg2表示一定要校验的，reg1表示可校验可不校验。如果reg1有数据的话，那么也要校验**

<div class="edit set">            <p><label><samp>*</samp>品牌名称：</label><input type="text" id="brandName" name="brandName" class="text state" reg2="^[a-zA-Z0-9\u4e00-\u9fa5]{1,20}$" tip="必须是中英文或数字字符，长度1-20"/>                <span></span>            </p>            <p><label class="alg_t"><samp>*</samp>品牌LOGO：</label><img id='imgsImgSrc' src="" height="100" width="100" />            </p>             <p><label></label><input type='file' size='27' id='imgsFile' name='imgsFile' class="file" onchange='submitUpload()' /><span id="submitImgTip" class="pos">请上传图片宽为120px，高为50px，大小不超过100K。</span>                <input type='hidden' id='imgs' name='imgs' value='' reg2="^.+$" tip="亲！您忘记上传图片了。" />            </p>             <p><label>品牌网址：</label><input type="text" name="website" class="text state" maxlength="100"  tip="请以http://开头" reg1="http:///*"/>                <span class="pos"> </span>            </p>            <p><label class="alg_t">品牌描述：</label><textarea rows="4" cols="45" name="brandDesc" class="are" reg1="^(.|\n){0,300}$" tip="任意字符，长度0-300"></textarea>                <span class="pos"> </span>            </p>            <p><label>排序：</label><input type="text" id="brandSort" reg1="^[1-9][0-9]{0,2}$" tip="排序只能输入1-3位数的正整数" name="brandSort" class="text small"/>                <span class="pos"> </span>            </p>            <p><label> </label><input type="submit" name="button1" d class="hand btn83x23" value="完成" /><input type="button" class="hand btn83x23b" id="reset1" value='取消' onclick="backList('${backurl}')"/>            </p>        </div>
                <p><label><samp>*</samp>品牌名称：</label><input type="text" id="brandName" name="brandName" class="text state" reg2="^[a-zA-Z0-9\u4e00-\u9fa5]{1,20}$" tip="必须是中英文或数字字符，长度1-20"/>
                    <span></span>
                </p>
                <p><label class="alg_t"><samp>*</samp>品牌LOGO：</label><img id='imgsImgSrc' src="" height="100" width="100" />
                </p>
                 <p><label></label><input type='file' size='27' id='imgsFile' name='imgsFile' class="file" onchange='submitUpload()' /><span id="submitImgTip" class="pos">请上传图片宽为120px，高为50px，大小不超过100K。</span>
                    <input type='hidden' id='imgs' name='imgs' value='' reg2="^.+$" tip="亲！您忘记上传图片了。" />
                </p> 
    
                <p><label>品牌网址：</label><input type="text" name="website" class="text state" maxlength="100"  tip="请以http://开头" reg1="http:///*"/>
                    <span class="pos"> </span>
                </p>
                <p><label class="alg_t">品牌描述：</label><textarea rows="4" cols="45" name="brandDesc" class="are" reg1="^(.|\n){0,300}$" tip="任意字符，长度0-300"></textarea>
                    <span class="pos"> </span>
                </p>
                <p><label>排序：</label><input type="text" id="brandSort" reg1="^[1-9][0-9]{0,2}$" tip="排序只能输入1-3位数的正整数" name="brandSort" class="text small"/>
                    <span class="pos"> </span>
                </p>
                <p><label> </label><input type="submit" name="button1" d class="hand btn83x23" value="完成" /><input type="button" class="hand btn83x23b" id="reset1" value='取消' onclick="backList('${backurl}')"/>
                </p>
            </div>

首先，我们先来写前台的校验…

当该表单提交的时候，我们就对表单的数据进行校验

**检测每个必填的input输入框数据，如果每个必填的输入框数据都符合内容，那么检测品牌的名字是否重复！**

$(function () {            $("#form111").submit(function () {                /*设置标识量为true，如果不校验不通过设置为false*/                var isSubmit = true;                /*得到每个必填的input输入框数据*/                $("[reg2]").each(function () {                    var tip = $(this).attr("tip");                    var regStr = $(this).attr("reg2");                    /*拿到js校验的对象*/                    var reg = new RegExp(regStr);                    var value = $.trim($(this).val());                    /*校验输入的值与校验规则是否匹配*/                    if (!reg.test(value)) {                        /*把错误的信息填充到span中*/                        $(this).next("span").html("<font color='red'>" + tip + "</font>");                        isSubmit = false;                        //中断each使用return false,不能使用return;和break;                        return false;                    } else {                        //必填的数据规则都通过了，那么判断品牌名字是否有重复的【后台校验】                        var inputName = $(this).attr("name");                        if (inputName == "brandName") {                            $.ajax({                                url: "${path}/brand/validateBrandName.do",                                type:"post",                                async:false,                                data:{                                    brandName:value                                },                                dataType:"text",                                success: function (responseTest) {                                    if (responseTest == "no") {                                        $("#brandNameSpan").html("品牌的名称不能相同！!");                                        isSubmit = false;                                        return false;                                    }else{                                        $(this).next("span").html("");                                    }                                },                                error: function () {                                    alert("系统错误");                                }                            });                        }                    }                });                return isSubmit;            });        });
                $("#form111").submit(function () {
        
                    /*设置标识量为true，如果不校验不通过设置为false*/
                    var isSubmit = true;
                    /*得到每个必填的input输入框数据*/
                    $("[reg2]").each(function () {
        
                        var tip = $(this).attr("tip");
                        var regStr = $(this).attr("reg2");
                        /*拿到js校验的对象*/
                        var reg = new RegExp(regStr);
                        var value = $.trim($(this).val());
    
                        /*校验输入的值与校验规则是否匹配*/
                        if (!reg.test(value)) {
        
                            /*把错误的信息填充到span中*/
                            $(this).next("span").html("<font color='red'>" + tip + "</font>");
                            isSubmit = false;
                            //中断each使用return false,不能使用return;和break;
                            return false;
                        } else {
        
                            //必填的数据规则都通过了，那么判断品牌名字是否有重复的【后台校验】
                            var inputName = $(this).attr("name");
                            if (inputName == "brandName") {
        
                                $.ajax({
        
                                    url: "${path}/brand/validateBrandName.do",
                                    type:"post",
                                    async:false,
                                    data:{
        
                                        brandName:value
                                    },
                                    dataType:"text",
                                    success: function (responseTest) {
        
                                        if (responseTest == "no") {
        
                                            $("#brandNameSpan").html("品牌的名称不能相同！!");
                                            isSubmit = false;
                                            return false;
                                        }else{
        
                                            $(this).next("span").html("");
                                        }
                                    },
                                    error: function () {
        
                                        alert("系统错误");
                                    }
                                });
                            }
                        }
                    });
    
                    return isSubmit;
                });
            });

检测名字是否相同的controller方法

@RequestMapping("/validateBrandName.do")    public void validateBrandName(String brandName, Writer out) throws IOException {        //表示成功        String responseTest = "yes";        //根据名字去查找数据库        List<EbBrand> brands = ebBrandService.selectBrandByName(brandName);        //如果返回的集合有Brand了，那么就证明数据库有相同的品牌了        if (brands != null && brands.size() > 0) {            responseTest = "no";        }        out.write(responseTest);    }"/validateBrandName.do")
        public void validateBrandName(String brandName, Writer out) throws IOException {
        
    
            //表示成功
            String responseTest = "yes";
    
            //根据名字去查找数据库
            List<EbBrand> brands = ebBrandService.selectBrandByName(brandName);
            //如果返回的集合有Brand了，那么就证明数据库有相同的品牌了
            if (brands != null && brands.size() > 0) {
        
                responseTest = "no";
            }
    
            out.write(responseTest);
    
        }

如果品牌名称相同，那么不允许提交！

![640?wx\_fmt=png][640_wx_fmt_png 6] 这里写图片描述

对于非必填的数据项，如果用户填了数据的话，那么就必须按照我们的规则来写

/*非必填的数据，如果填了就必须按照规则*/                $("[reg1]").each(function () {                    var tip = $(this).attr("tip");                    var regStr = $(this).attr("reg1");                    /*拿到js校验的对象*/                    var reg = new RegExp(regStr);                    var value = $.trim($(this).val());                   /*如果用户填了数据，那么就需要按照规则*/                   if(value!=null && value!="") {                       if (!reg.test(value)) {                           /*把错误的信息填充到span中*/                           $(this).next("span").html("<font color='red'>" + tip + "</font>");                           isSubmit = false;                           //中断each使用return false,不能使用return;和break;                           return false;                       }else{                           //如果改正了，那么就把对应的错误提示清空了。                           $(this).next("span").html("");                       }                   }                });
                    $("[reg1]").each(function () {
        
                        var tip = $(this).attr("tip");
                        var regStr = $(this).attr("reg1");
                        /*拿到js校验的对象*/
                        var reg = new RegExp(regStr);
                        var value = $.trim($(this).val());
    
                       /*如果用户填了数据，那么就需要按照规则*/
                       if(value!=null && value!="") {
        
                           if (!reg.test(value)) {
        
                               /*把错误的信息填充到span中*/
                               $(this).next("span").html("<font color='red'>" + tip + "</font>");
                               isSubmit = false;
                               //中断each使用return false,不能使用return;和break;
                               return false;
                           }else{
        
                               //如果改正了，那么就把对应的错误提示清空了。
                               $(this).next("span").html("");
                           }
                       }
                    });

![640?wx\_fmt=png][640_wx_fmt_png 7] 这里写图片描述

为了达到更好的用户体验，我们应该**在光标焦点离开的时候就进行一次校验**！

逻辑和上边是一样的，**只不过我们使用的是blur方法，而在表单验证的时候使用的是each遍历每一个输入框罢了。**

//光标失去焦点的校验            $("#form111").find("[reg2]").blur(function () {                var tip = $(this).attr("tip");                var regStr = $(this).attr("reg2");                /*拿到js校验的对象*/                var reg = new RegExp(regStr);                var value = $.trim($(this).val());                /*校验输入的值与校验规则是否匹配*/                if (!reg.test(value)) {                    /*把错误的信息填充到span中*/                    $(this).next("span").html("<font color='red'>" + tip + "</font>");                } else {                    //必填的数据规则都通过了，那么判断品牌名字是否有重复的【后台校验】                    var inputName = $(this).attr("name");                    if (inputName == "brandName") {                        $.ajax({                            url: "${path}/brand/validateBrandName.do",                            type: "post",                            async: false,                            data: {                                brandName: value                            },                            dataType: "text",                            success: function (responseTest) {                                if (responseTest == "no") {                                    $("#brandNameSpan").html("品牌的名称不能相同！!");                                } else {                                    //如果改正了，那么就把对应的错误提示清空了。                                    $(this).next("span").html("");                                }                            },                            error: function () {                                alert("系统错误");                            }                        });                    }                }            });            //失去焦点校验            $("#form111").find("[reg1]").blur(function () {                var tip = $(this).attr("tip");                var regStr = $(this).attr("reg1");                /*拿到js校验的对象*/                var reg = new RegExp(regStr);                var value = $.trim($(this).val());                /*如果用户填了数据，那么就需要按照规则*/                if (value != null && value != "") {                    if (!reg.test(value)) {                        /*把错误的信息填充到span中*/                        $(this).next("span").html("<font color='red'>" + tip + "</font>");                    } else {                        //如果改正了，那么就把对应的错误提示清空了。                        $(this).next("span").html("");                    }                }            });
                $("#form111").find("[reg2]").blur(function () {
        
                    var tip = $(this).attr("tip");
                    var regStr = $(this).attr("reg2");
                    /*拿到js校验的对象*/
                    var reg = new RegExp(regStr);
                    var value = $.trim($(this).val());
    
                    /*校验输入的值与校验规则是否匹配*/
                    if (!reg.test(value)) {
        
                        /*把错误的信息填充到span中*/
                        $(this).next("span").html("<font color='red'>" + tip + "</font>");
                    } else {
        
                        //必填的数据规则都通过了，那么判断品牌名字是否有重复的【后台校验】
                        var inputName = $(this).attr("name");
                        if (inputName == "brandName") {
        
                            $.ajax({
        
                                url: "${path}/brand/validateBrandName.do",
                                type: "post",
                                async: false,
                                data: {
        
                                    brandName: value
                                },
                                dataType: "text",
                                success: function (responseTest) {
        
                                    if (responseTest == "no") {
        
                                        $("#brandNameSpan").html("品牌的名称不能相同！!");
                                    } else {
        
                                        //如果改正了，那么就把对应的错误提示清空了。
                                        $(this).next("span").html("");
                                    }
                                },
                                error: function () {
        
                                    alert("系统错误");
                                }
                            });
                        }
                    }
                });
    
                //失去焦点校验
                $("#form111").find("[reg1]").blur(function () {
        
                    var tip = $(this).attr("tip");
                    var regStr = $(this).attr("reg1");
                    /*拿到js校验的对象*/
                    var reg = new RegExp(regStr);
                    var value = $.trim($(this).val());
                    /*如果用户填了数据，那么就需要按照规则*/
                    if (value != null && value != "") {
        
                        if (!reg.test(value)) {
        
                            /*把错误的信息填充到span中*/
                            $(this).next("span").html("<font color='red'>" + tip + "</font>");
                        } else {
        
                            //如果改正了，那么就把对应的错误提示清空了。
                            $(this).next("span").html("");
                        }
                    }
                });

# 查看品牌 #

上一篇中我们已经可以顺利添加商品了，一般地，**我们添加完商品之后会跳转到我们的查看商品的页面上**…

Contoller拿到数据库中的数据

@RequestMapping("/listBrand.do")    public String  listBrand(Model model) throws IOException {        List<EbBrand> brandList = ebBrandService.selectBrand();        model.addAttribute("brandList", brandList);        return "item/listbrand";    }"/listBrand.do")
        public String  listBrand(Model model) throws IOException {
        
            List<EbBrand> brandList = ebBrandService.selectBrand();
            model.addAttribute("brandList", brandList);
            return "item/listbrand";
        }

把文件服务器的路径添加到总配置文件中

<c:set var="file_path" value="http://localhost:8081/file"/>

![640?wx\_fmt=png][640_wx_fmt_png 8] 这里写图片描述

<c:forEach items="${brandList}" var="brand">            <tr>                <td>${brand.brandId}</td>                <td>                    <%--这里需要图片的全路径，最好我们把前部分的路径在配置文件中写起来--%>                    <img id='imgsImgSrc' src="${file_path}${brand.imgs}" height="50" width="50"/></td>                <td>${brand.brandName}</td>                <td class="nwp">${brand.website}</td>                <td class="nwp">${brand.brandDesc}</td>                <td>${brand.brandSort}</td>                <td>                    <a href="${path }/shop/item/editbrand.jsp?brandId="${brand.brandId}>编辑</a>                    <a href="#" onclick="singleDel(${brand.brandId})">删除</a>                </td>            </tr>        </c:forEach>
                <tr>
                    <td>${brand.brandId}</td>
                    <td>
                        <%--这里需要图片的全路径，最好我们把前部分的路径在配置文件中写起来--%>
                        <img id='imgsImgSrc' src="${file_path}${brand.imgs}" height="50" width="50"/></td>
                    <td>${brand.brandName}</td>
                    <td class="nwp">${brand.website}</td>
                    <td class="nwp">${brand.brandDesc}</td>
                    <td>${brand.brandSort}</td>
                    <td>
                        <a href="${path }/shop/item/editbrand.jsp?brandId="${ brand.brandId}>编辑</a>
                        <a href="#" onclick="singleDel(${brand.brandId})">删除</a>
                    </td>
                </tr>
            </c:forEach>

![640?wx\_fmt=png][640_wx_fmt_png 9] 这里写图片描述

# 编辑品牌 #

一般地，我们的品牌名称是不会轻易变更的，因此我们在编辑的时候默认不让它变更。

我们有两种方式让用户修改不了

一般地，**我们都是使用readonly，因为使用disable的话，后台是获取不到值的**

![640?wx\_fmt=png][640_wx_fmt_png 10] 这里写图片描述

在更新的时候，注意要把id和我们的图片值传递过去，好让它修改

# 删除品牌 #

在删除品牌之前，询问是否要删除

function singleDel(brandId){        if(confirm("你确认要删除该品牌吗?")){            window.location.href = "${path}/brand/deleteBrand.do?brandId="+brandId;        }    }
            if(confirm("你确认要删除该品牌吗?")){
        
                window.location.href = "${path}/brand/deleteBrand.do?brandId="+brandId;
            }
        }

# 添加品牌优化 #

有的时候，可能因为我们的网络原因，用户填写完表单的时候，可能会多次发送添加品牌的请求，因此我们可以使用模态窗口来阻止这种情况的发生：

<%--操作请求中--%><div id="refundLoadDiv" class="alt" style="display:none">    <div class="t"></div>    <div class="c set">        <ul class="uls">            <li style="text-align:center;">                <img src="<c:url value='/ecps/console/res/imgs/loading.gif'/>" />操作请求中... ...            </li>        </ul>    </div>    <div class="f"></div></div>
    <div id="refundLoadDiv" class="alt" style="display:none">
        <div class="t"></div>
        <div class="c set">
            <ul class="uls">
                <li style="text-align:center;">
                    <img src="<c:url value='/ecps/console/res/imgs/loading.gif'/>" />操作请求中... ...
                </li>
            </ul>
        </div>
        <div class="f"></div>
    </div>

如果校验没有问题，那么就弹出模态窗口

if(isSubmit) {    showTip("#refundLoadDiv");}
        showTip("#refundLoadDiv");
    }

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

# 总结 #

> 如果文章有错的地方欢迎指正，大家互相交流。**习惯在微信看技术文章，想要获取更多的Java资源的同学，可以关注微信公众号:Java3y**

[640_wx_fmt_png]: /images/20210827/d531369e7efd4c0ca3db509298165d01.png?wx_fmt=png
[640_wx_fmt_png 1]: /images/20210827/333dc7214e994927b7dd00d48e2f9198.png?wx_fmt=png
[640_wx_fmt_png 2]: /images/20210827/93e695a94ec54c8ab8ac776c15e30250.png?wx_fmt=png
[640_wx_fmt_png 3]: /images/20210827/88f74ee567b346138ea029d804c804a1.png?wx_fmt=png
[640_wx_fmt_png 4]: /images/20210827/49bfcba4897f4ecbb66dd627247b3b5c.png?wx_fmt=png
[640_wx_fmt_png 5]: /images/20210827/728679b0f88d4425bd917ac5b231bf24.png?wx_fmt=png
[640_wx_fmt_png 6]: /images/20210827/735e6c138f00406d836d5412b90fb8b3.png?wx_fmt=png
[640_wx_fmt_png 7]: /images/20210827/b11d4f9628f44413a028c88d267302c1.png?wx_fmt=png
[640_wx_fmt_png 8]: /images/20210827/841e22f22f174f2a8276989f36a0f1b3.png?wx_fmt=png
[640_wx_fmt_png 9]: /images/20210827/223465e01eb24820a0f66b025c3da8be.png?wx_fmt=png
[640_wx_fmt_png 10]: /images/20210827/e447aacbd66946e7bea2fa655b3aff14.png?wx_fmt=png