乐鲜生活后台管理系统--项目总结

最新推荐文章于 2024-11-13 12:15:35 发布

转载最新推荐文章于 2024-11-13 12:15:35 发布 · 227 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/uzies/p/9649505.html

文章标签：

#json #java #数据库

1. 三级联动

使用JSON处理数据实现
1. 前端–使用JQ类库中Ajax异步提交的方式，配合JSON实现

<script src="js/easyui/jquery.min.js" type="text/javascript"></script>  
<script type="text/javascript">         
$(function(){      
/*一级Ajax*/          
    $("#fir_select").change(function(){                        
        var id_1 = $("#id_1").val();                   
        if(id_1==""){                   
            $("#sec_select").empty();              
            $("#sec_select").append("<option value='请选择'>--请选择--</option>");               
            $("#thi_select").empty();              
            $("#thi_select").append("<option value='请选择'>--请选择--</option>");               
        }else{                  
            $.ajax({               
                type:"POST",                         //使用POST形式进行提交         
                url:"login/findcitysbyparentid.do",  //对应的controller方法      
                dataType:"json",                     //以什么方式进行返回
                data:{id:id_1},                      //id为参数名，id_1为参数值，多个参数用","隔开           
                success:function(data){              //成功返回后
                    if(data!="{}"){     
                        $("#sec_select").empty();    //清空标签中内容 
                        $("#sec_select").append("<option value='请选择'>--请选择--</option>");   
                        $("#thi_select").empty();    //清空标签中内容 
                        $("#thi_select").append("<option value='请选择'>--请选择--</option>");       
                        $.each(data,function(i, item)  {   
                            //添加子标签方法二：append方法
                            var statem = "<option value='"+item.id+"'>"+item.city+"</option>";
                            $("#sec_select").append(statem);
                        }); 
                    }       
                },          
                error:function(){                     //发生错误时之行
                    alert("方法执行不成功!");           
                //注意，如果controller中数据发生异常不能正确返回，例如有的数据为null或者发生除数为0
                }           
            }); 
/*二级Ajax*/                      
    $("#sec_select").change(function(){                                        
        var sec_select= $("#sec_select").val();                    
        if(sec_select==""){                 
            $("#thi_select").empty();              
            $("#thi_select").append("<option value='请选择'>--请选择--</option>");               
        }else{                  
            $.ajax({               
                type:"POST",            
                url:"login/findcitysbyparentid.do",         
                dataType:"json",            
                data:{id:sec_select},           
                success:function(data){             
                    if(data!="{}"){                    //如果返回的是空值
                        $("#thi_select").html("");     //清空标签中内容   
                        $("#thi_select").append("<option value='请选择'>--请选择--</option>");   
                        $.each(data,function(i, item) {    
                            var statem = "<option value='"+item.id+"'>"+item.city+"</option>";
                            $("#thi_select").append(statem);
                        }); 
                    }       
                },          
                error:function(){           
                    alert("方法执行不成功!");      
                }           
            });             
        }                   
    });                     
});                         
</script>

 2.  对应controller中

/**
 1. Ajax请求得到子类商品信息 post方式，返回类型为json
 2. @return  @ResponseBody注解告诉SpringMVC该方法返回的不是一个视图
 3. method = RequestMethod.POST 此方法只允许以POST形式访问
 4. produces = "application/json;charset=UTF-8" 以JSON形式返回，字符型为UTF-8 不加会是乱码
 */
    @ResponseBody
    @RequestMapping(value = "/findcitysbyparentid.do", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
    public List<Citys> findCitysByParentId(Citys citys) {
        //执行Service层的方法
        List<Citys> cityslist = this.storeManageService.searchCitysByParentId(citys);
        return cityslist;// 在这里配置文件和jackson工具就自动转化了，直接返回对象即可
    }

 这里需要注意需要倒6个Json.jar包

2. 使用野路子–拆字符串的方式实现三级联动

通过拆分字符串的形式来实现三级联动数据–同样使用的JQ中Ajax的$.get

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#firstInfo").change(function(){
                var info=$("#firstInfo").val();
                $("#secondInfo").html("");                         //清空二级对应数据
                $.get("secondInfo.do",{info:info},function(data) {
                    //{info:info} 是Ajax中请求的参数，在controller中可以捕获
                    var strInfo=data.split("#");                   //这里进行字符串解读
                    for(var i=0;i<strInfo.length;i++){
                        var arr=strInfo[i].split(":");             //这里进行字符串解读
                        $('#secondInfo').append('<option value="' + arr[0] + '">' + arr[1] + '</option>');
                }
            });
        });

        $("#secondInfo").change(function(){
            var info=$("#secondInfo").val();
            $("#thirdInfo").html("");                               //清空二级对应数据
            $.get("secondInfo.do",{info:info},function(data) {
                var strInfo=data.split("#");                        //这里进行字符串解读 
                for(var i=0;i<strInfo.length;i++){
                var arr=strInfo[i].split(":");                      //这里进行字符串解读
                $('#thirdInfo').append('<option value="' + arr[0] + '">' + arr[1] + '</option>');
                }
            });
        });
    });
</script>

2. 对应controller多了合并字符串操作

@RequestMapping(value = "/secondInfo.do", produces = "text/plain;charset=UTF-8")
@ResponseBody // 告诉springMVC返回的不是一个视图
public String selectCommodityInfo(String info) {
    int parentId = Integer.parseInt(info);
    List<Category> catList = this.commodityInfoService.selectOtherNameByParentId(parentId);
    String secondName = "";
    for (Category category : catList) {
        secondName = secondName + "#" + category.getId() + ":" + category.getCategoryname();
    }
    secondName = secondName.substring(1, secondName.length());
    return secondName;
}

总结：两种写法都可以实现，JSON高端了很多，这应该也是单位中三级联动的常用写法，拆分字符串体会下也好。

2. JSP界面显示上传图片

概述：在当前JSP界面显示上传图片，并不提交到后台而是在网页上显示上传的图片。
—使用javascript实现

//使用通过拼接ID名字来获取不同ID达到使用不同对象
function setImagePreview(avalue) {
        var docObj = document.getElementById("doc" + avalue);
        //这里可以把docObj.files看成数组-->存在-->true
        //这里可以把docObj.files[0]看成数组中第一个元素-->存在-->true
        //两者都为真是--才执行
        if (docObj.files && docObj.files[0]) { 
            if(avalue == 1){
                var imgObjPreview = document.getElementById("preview" + avalue);
                //火狐下，直接设img属性
                imgObjPreview.style.display = 'block';
                imgObjPreview.style.width = '230px';
                imgObjPreview.style.height = '280px';
                //imgObjPreview.src = docObj.files[0].getAsDataURL();
                //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
            }else if (avalue == 2) {
                for(var i=0;i<docObj.files.length;i++){
                    var id="preview"+(i+2);
                    var hidID="hid"+i;
                    var imgObj=document.getElementById(id);
                    var hid=document.getElementById(hidID);
                    hid.style.display = 'block';
                    imgObj.style.display = 'block';
                    imgObj.style.width = '100px';
                    imgObj.style.height = '150px';
                    imgObj.src = window.URL.createObjectURL(docObj.files[i]);
                }
            }
        } else {
            //IE下，使用滤镜
            //alert("IE下");
            docObj.select();
            var imgSrc = document.selection.createRange().text;
            var localImagId = document.getElementById("localImag" + avalue);
            //必须设置初始大小
            localImagId.style.width = "150px";
            localImagId.style.height = "180px";
            //图片异常的捕捉，防止用户修改后缀来伪造图片
            try {
                localImagId.style.filter = 
                "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                localImagId.filters
                .item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
            } catch (e) {
                alert("您上传的图片格式不正确，请重新选择!");
                return false;
            }
            imgObjPreview.style.display = 'none';
            document.selection.empty();
        }
        return true;
    }

对应的file标签

<div class="upload_img">
    <div class="font_div">商品主图：</div>
    <div class="img_div" id="localImag1">
        //${commodity.pictureurl}为项目中的原图片
        <img id="preview1" src="<%=basePath%>${commodity.pictureurl}"
         style="width: 230px; height: 280px">
    </div>
    <div class="img_div">
        <input type="hidden" name="pictureurl" id="textfield"> 
        <input type="file" name="myfiles" id="doc1" style="width: 150px;" 
        onchange="document.getElementById('textfield').value=this.value">
    </div>
    <input type="button" value="上传主图" class="input_sunmit"
    onclick="javascript:setImagePreview(1);">
</div>

3. 使用JQ添加删除HTML元素

概述：使用JQ中的append添加属性，并且标签中带有删除此标签的button
1.JQ部分

<script type="text/javascript">
    $(function() {
        var i = 100000000;//通过拼接添加ID值，使用这个避免与原数据冲突--有点逗逼见谅
        $("#addkind")
            .click(
                function() {
                    var ikey = $('#kindkey').val();
                    var value = $('#kindvalue').val();
                    var num=0;
                    ikey = ikey.toString();
                    value = value.toString();
                    if(ikey!=""&&value!=""){
                        var ret = ikey + ":" + value;
                        var arr = $('.kindInfo');
                        $.each(arr,function(i,item){
                            var a = $(this).attr("value");
                            if(a==ret){
                                num=1;
                            }
                        });
                        if(num==0){
                            $('#kind').append(
                "<div class='littleInfo'><span class='spanfont'>"+ret+"</span>
                + <input type='button' class='delete_in' value='X'id='delete_in"+i+"' 
                + onclick='deleteKind("+ i+ ")'/>
                + <input type='hidden' name='kind' class='kindInfo' value='"+ret+"'></div>")
                //这里使用hidden标签用来记录用户添加的值
                            i++;
                        }else{
                            alert("标签以存在");
                        }
                    }
                });
//通过拼接JQ中append添加的button ID的方试打到删除对应的父级标签---达到删除全部的目的
function deleteKind(i) {
    var id = "delete_in" + i;
    $('#div_hidden').append("<input type='hidden' name='deleted' value='"+i+"'>");
    //hidden 用来记录被删掉的数据--与后台交互，删除数据库中数据
    document.getElementById(id).parentElement.remove();
    }
</script>

注意：java长使用hidden来记录被删除掉的数据，来实现form表单提交与后台交互

2.页面部分

<div class="top_box">
    规格信息：规格组： 
    <input type="text" name="kindkey" id="kindkey" />
    规格名： 
    <input type="text" name="kindvalue" id="kindvalue" /> 
    <inputtype="button" value="+" id="addkind" />
    <hr>
    <div class="kind_div" id="kind">
    <!--这里为原数据在此循环输出-->
        <c:forEach items="${specList}" var="key">
            <div id="father_div" class='littleInfo'>
                <span class='spanfont'>${key.specGroup}:${key.specName}</span>
                <input type='button' class='delete_in' value='X' id='delete_in${key.specid}' 
                onclick='deleteKind(${key.specid})'/>
            </div>
        </c:forEach>
    </div>
    <!--用来记录被用户删除掉的数据，与后台交互，删除掉数据库中数据-->
    <div id="div_hidden"></div>
</div>

4. SpringMVC中文件的上传下载

概述：做到多文件的上传下载，以及表单提交数据更新，只使用一次表单提交

1.JSP界面

<!--使用form表单进行稳健上传时，一定要加enctype="multipart/form-data" 并且请求方式要为method="post"-->
<!--enctype="multipart/form-data" 可以将文件转成二进制，并且保存在请求头中，在controller中进行解析-->
<form action="updateCommodityInfo.do" method="post" enctype="multipart/form-data">
<div class="upload_img">
    <div class="font_div">商品配图：</div>
    <!--使用表达式  循环改变标签的ID打到定位删除效果-->
    <div class="img_div" id="localImag2">
        <%int i = 10;%>
        <c:forEach items="${comList}" var="key">
            <div class="img_div2">
                <img id="preview<%=i%>" src="<%=basePath%>${key.pictureUrl}"
                style="width: 100px; height: 150px"> 
                <input type="button" class="input_css" value="X"
                onclick="deleteImg('<%=i%>','${key.id}','${key.pictureUrl}')" />
                <%i++;%>
            </div>
        </c:forEach>
    </div>
    <div id="div_img_hidden"></div>
    <div class="img_div">
        <!--multiple="multiple"添加此属性 type="file" 控件可以同时上传多个文件-->
        <input type="file" multiple="multiple" name="myfiles" id="doc2" style="width: 150px;"
        onchange="document.getElementById('textfields').value=this.value">
    </div>
    <!--onclick="javascript:setImagePreview(2);"对应上面在JSP网页显示图片的script-->
    <input type="button" value="上传配图" class="input_sunmit" onclick="javascript:setImagePreview(2);" />
</div>
<hr>
<div class="top_box">
    <center>
        <input type="submit" value="保存信息" class="input_sunmit" />
    </center>
</div>      
</form>

2.对应controller

/**
 *@RequestParam MultipartFile[] myfiles 
 *myfiles 为JSP界面中对应file标签的name ---> 是一个数组
 *@RequestParam 根据name捕获
 */
@RequestMapping("/updateCommodityInfo.do")
public String upload(@RequestParam MultipartFile[] myfiles, HttpServletRequest request) throws IOException {
    /**
     * 因为请求被enctype="multipart/form-data"变为二进制，需要使用springMVC中的
     * MultipartHttpServletRequest 类对request进行强转，
     * 这里使用multiRequest 获得的表单提交的数据都是multiRequest在请求头中以二进制进行转码获得的数据
     */ 
    MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
    //多张图片存在配图--在这里捕获配图名存到assiFile 这个集合中
    List<String> assiFile = new ArrayList<String>();
    //获取主图文件名
    String pictureurl = multiRequest.getParameter("pictureurl");
    //去掉fakepath获取主图文件名
    pictureurl = pictureurl.substring(pictureurl.lastIndexOf("\\") + 1, pictureurl.length());
    //获取服务器保存图片的路径
    String urlPath = request.getSession().getServletContext().getRealPath("commodity") + File.separator;
    for (MultipartFile file : myfiles) {
        // 此处MultipartFile[]表明是多文件,如果是单文件MultipartFile就行了
        if (file.isEmpty()) {
            System.out.println("文件未上传!");
        } else {
            // 得到上传的文件名
            String fileName = file.getOriginalFilename();
            if (fileName.indexOf(pictureurl) == -1) {
                assiFile.add(fileName);
            }
            // 服务器路径+图片名 图片的保存地址和文件名
            String path = urlPath + fileName;
            // 查看文件上传路径,方便查找，把文件上传至path的路径
            File localFile = new File(path);
            //写入
            file.transferTo(localFile);
        }
    }
}

注意：在request中获得文件路径为伪路径，获取真实路径需要在JS中操作，在controller中获得的是C://fakepath/xxxxx.jpg

5. 关于form表单提交乱码问题

概述：在web.xml中配置拦截器filter过滤器，一次性解决，不需要使用String–byte[]单句转换

 <filter>
    <filter-name>characterEncodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>UTF-8</param-value>
    </init-param>
    <init-param>
      <param-name>forceEncoding</param-name>
      <param-value>true</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>characterEncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

  单句转换方式

//先将字符转成最小字符格式iso-8859-1----再转成支持中文的utf-8
info = new String(info.getBytes("iso-8859-1"), "utf-8");

注意：使用配置filter过滤器必须以POST形式提交，GET还需要手动转码，配置是注意将filter配置文件放在上面。

转载于:https://www.cnblogs.com/uzies/p/9649505.html