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

添加品牌

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

这里写图片描述

上传图片

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

这里写图片描述

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

这里写图片描述

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

配置文件上传解析器:

    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="1024000"></property>
    </bean>

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

这里写图片描述

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

参考如下博文: 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);
    }

}

编写处理文件上传的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);

而我们现在是知道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);
    }
}

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

function submitUpload(){
            var opt = {
                //重新指定form的action的值
                url:"${path}/upload/uploadPic.do",
                type:"post",
                dateType:"json",
                success:function(responseText){
                    //解决多余的字符串数据导致无法解析JSON的问题【另外的博文有写】
                    var jsonObj = $.parseJSON(responseText.replace(/<.*?>/ig,""));
                    $("#imgsImgSrc").attr("src",jsonObj.realPath);
                    $("#imgs").val(jsonObj.relativePath);
                },
                error:function(){
                    alert("系统错误");
                }
            };
            $("#form111").ajaxSubmit(opt);
        }

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

这里写图片描述


数据校验

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

这里写图片描述

而校验我们有两种方式:

  • 前台使用JS校验
  • 后台再进行校验

我们是这样做的:在输入框中自定义了几个属性: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">&nbsp;</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">&nbsp;</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">&nbsp;</span>
            </p>
            <p><label>&nbsp;</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;
            });
        });

检测名字是否相同的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);

    }

如果品牌名称相同,那么不允许提交!

这里写图片描述

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

                /*非必填的数据,如果填了就必须按照规则*/
                $("[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("");
                       }
                   }
                });

这里写图片描述

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

逻辑和上边是一样的,只不过我们使用的是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("");
                    }
                }
            });

查看品牌

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

Contoller拿到数据库中的数据

    @RequestMapping("/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"/>

这里写图片描述

        <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>

这里写图片描述

编辑品牌

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

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

  • disable
  • readonly

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

这里写图片描述

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

      <input type='hidden' id='imgs' name='imgs' value="${brand.imgs }" reg2="^.+$" tip="亲!您忘记上传图片了。"/>
      <input type="hidden" name="brandId" value="${brand.brandId }">

删除品牌

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

    function singleDel(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>
function tipShow(idName){

    var idObj = $(idName);
    var idBgObj = $("#bgWindow");

    if(idBgObj.length == 0){
        var iframe,div;
        div = $("<div></div>");
        div.attr({id:"bgWindow",style:"display:none"});
        iframe = $("<iframe></iframe>");
        iframe.attr({id:"bgWindowIframe",src:"about:blank",marginwidth:"0",marginheight:"0",frameBorder:"no",framespacing:"0",allowtransparency:"true"});
        div.append(iframe);
        $(document.body).append(div);
        idBgObj = $("#bgWindow");  
    }

    var winH = $(window).height();
    var docH = $(document.body).height();
    if(winH > docH){docH = winH;}

    var winW = $(window).width();
    var docW = $(document.body).width();
    if(winW > docW){docW = winW;}

    var scrollH = $(document).scrollTop();
    if(scrollH == undefined){scrollH = 0}
    //alert(idObj.height());
    var t = parseInt((winH - idObj.height())/2);
    if(idObj.css("position") == "absolute"){t = t + scrollH;}
    if(t != parseInt(idObj.css("top"))){idObj.css("top",t);}

    var l = parseInt((winW - idObj.width())/2);
    if(l < 0){l = 0;}
    if(l != parseInt(idObj.css("left"))){idObj.css("left",l);}

    if(docW != parseInt(idBgObj.css("width"))){idBgObj.css("width",docW);}
    if(docH != parseInt(idBgObj.css("height"))){idBgObj.css("height",docH);idBgObj.find("iframe").css("height",docH);}

    idBgObj.show();
    idObj.show();

    window.onresize = function(){
        if(idObj.css("display") == "block"){tipShow(idName);}
    };
    window.onscroll = function(){
        if(idObj.css("display") == "block"){tipShow(idName);}
    };

    var close = idName + "Close";
    var reset = idName + "Reset";
    var ok = idName + "Ok";
    if($(close).length == 1){$(close).click(function(){tipHide(idName);});}
    if($(reset).length == 1){$(reset).click(function(){tipHide(idName);});}
    if($(ok).length == 1){$(ok).click(function(){tipHide(idName);});}
}

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

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

总结

  • 把图片上传到图片服务器中,我们使用的是Jersey客户端调用API就行了, 十分方便
  • 上传到图片服务器中我们使用的是AJAX异步来上传,由于上传服务器的路径可能会经常用到,因此我们可以定义成配置文件的数据。用到的时候去读取就行了。
  • 当上传成功以后,将图片显示出来(图片服务器路径+相对路径),当然了,也要通过隐藏域把图片的相对路径提交给Controller做保存
  • 前台做验证的时候,我们可以自定义不同的规则(可填、必填)来做校验。如果是必填的话,那么它就一定不能为空。还控制了品牌的名称是不能相同的,这需要用到了AJAX来进行校验
  • 对于非必填的数据,如果用户填了,那么还是要按照我们的规则来。
  • 为了达到更好的用户体验,我们可以在用户离开光标的时候就对其进行提示是否有错误。里面的逻辑和上边是一样的,只不过少了一个返回的变量罢了。
  • 图片服务器的路径我们可以自定义在总配置文件中,需要用的时候直接使用EL表达式来获取就行了。
  • 对于更新品牌而言,我们品牌的名字一般是不会有太大的变更的,因此我们可以设置为readonly
  • 编辑品牌时,记得要把id和图片的相对路径给带过去给服务器。不然就丢失了。
  • 在删除品牌之前,做一个认证框,会相对好一些。

本文分享自微信公众号 - Java3y(gh_085b56c42174)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-03-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏沃趣科技

看各路神仙如何大战MySQL insecure warning报警有感

一、问题由来 mysql在5.6.5上开始在命令行中直接填入用户密码会提示错误,例如: $./mysql -h10.10.30.18 -uwoqutech -p...

49780
来自专栏刘望舒

Android开发的几个插件和工具,提升你的开发效率

对于一个Android开发,面对以下问题会非常痛苦。 重复的findById。 将复杂的Json字符串,解析成javaBean。 调试接口的时候打断点十分麻烦。...

34090
来自专栏IMWeb前端团队

Nodejs进阶:http核心模块简介

本文作者:IMWeb 陈映平 原文出处:IMWeb社区 未经同意,禁止转载 http模块概览 大多数nodejs开发者都是冲着开发web server...

23350
来自专栏极客慕白的成长之路

光棍节程序员闯关秀过关攻略

查看源代码,发现a标签的颜色和背景色一样,导致了我们看不到a过关地址,方法很简单,直接复制源代码中的key即可,或者ctrl+a然后单击进入下一关即可

18650
来自专栏IMWeb前端团队

Nodejs进阶:http核心模块简介

本文作者:IMWeb 陈映平 原文出处:IMWeb社区 未经同意,禁止转载 http模块概览 大多数nodejs开发者都是冲着开发web server...

21480
来自专栏农夫安全

docker小试牛刀之bash_shellshock漏洞复现

漏洞名称 bash_shellshock • 首先,问题起因于一个命令ENV。 • 原型: • env [OPTION]...[NAME=VALUE]......

31580
来自专栏FreeBuf

AutoIt木马又一发:暗藏神秘照片

AutoIt是一个自动化的Windows界面交互的脚本语言,具有很高的灵活性和较低的学习曲线。由于AutoIt解释器本身属于合法程序,黑客可以把恶意代码藏在脚本...

38190
来自专栏Lambda

TortoiseSVN文件夹及文件图标不显示解决方法 TortoiseSVN文件夹及文件图标不显示解决方法

TortoiseSVN文件夹及文件图标不显示解决方法           由于自己的电脑是win7(64位)的,系统安装TortoiseSVN之后,其他的功...

25380
来自专栏哎_小羊

基于jQuery.i18n.properties 实现前端页面的资源国际化

之前web项目一直都是中文为主的,现在随着业务的需求,需要将网站语言支持多语言,这个着实给不管是前台还是后台都增加了不小的挑战,因为之前做的时候根本没有考虑多语...

1.1K90
来自专栏Albert陈凯

Hadoop数据分析平台实战——250JSSDK数据收集引擎编写离线数据分析平台实战——250JSSDK数据收集引擎编写

离线数据分析平台实战——250JSSDK数据收集引擎编写 JsSDK设计规则 在js sdk中我们需要收集launch、pageview、chargeReque...

38580

扫码关注云+社区

领取腾讯云代金券