tags: 移动商城项目

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 map = mr.getFileMap();
        Set set = map.keySet();
        Iterator 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

在前端我们是使用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有数据的话，那么也要校验


        
            *品牌名称：
            
            *品牌LOGO：
             请上传图片宽为120px，高为50px，大小不超过100K。
                 

            品牌网址： 
            
            品牌描述： 
            
            排序：

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

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

检测每个必填的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("" + tip + "");
                        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 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("" + tip + "");
                           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("" + tip + "");
                } 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("" + tip + "");
                    } else {
                        //如果改正了，那么就把对应的错误提示清空了。
                        $(this).next("span").html("");
                    }
                }
            });

编辑删除

编辑品牌

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

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

disable
readonly

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

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

删除品牌

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

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

添加品牌优化

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




    
    
        

                操作请求中... ...


function tipShow(idName){

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

    if(idBgObj.length == 0){
        var iframe,div;
        div = $("");
        div.attr({id:"bgWindow",style:"display:none"});
        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

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


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

总结

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

ITPub博客

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

数据校验

最新文章