仟滋佰味商城

感慨

经过半个来月的不懈努力，我们组的第一个项目终于面世了。这是第一次做项目，真是感慨颇多，好久没有这种好几个人共同为了同一个目标而奋斗的感觉了，不过估计这种感觉也保持不了多久，可能很快又会因着内心的放纵，生活又重归平淡吧。好了，闲话不多说，下面我就简单总结一下这次新学到的知识点。

项目总结

知识点一：图片预览功能的实现

//html代码
"yulan" src=""  style="border-radius:50%;width:100px;height:100px;"/>
        "file" id = "file" name ="file"/>
//js代码
$(function() {
            $("#file").change(function() {
                var url = getObjectURL(this.files[0]);
                if (url) {
                    $(".yulan").attr("src", url);
                }
            });

            function getObjectURL(file) {
                var url = null;
                if (window.createObjectURL != undefined) { // basic
                    url = window.createObjectURL(file);
                } else if (window.URL != undefined) { // mozilla(firefox)
                    url = window.URL.createObjectURL(file);
                } else if (window.webkitURL != undefined) { // webkit or chrome
                    url = window.webkitURL.createObjectURL(file);
                }
                return url;
            }
        });

知识点二：图片上传到tomcat后，展示到jsp中

//html代码
"/项目名/tomcat中存放图片的文件夹名/图片名称"/>
//示例
"/dept/myfile/1.jpg"/>

知识点三：实现图片背景的覆盖，即更换背景图片时，使图片和原背景一样大

//html代码
<div style="background:url(图片地址);background-size:cover;">div>
//示例
<div style="background:url(register/img/11.jpg);background-size:cover;">div>      

知识点四：图片上传中对于不同浏览器上传路径不同的处理

//html代码
"doregister" method="post" ectype="multipart/form-data">
        "text" name = "realname"/>
        "file"  name ="file"/>
        "submit" value = "提交"/>
    
 //servlet处理代码
 public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String path = request.getSession().getServletContext().getRealPath("\\myfile");//图片将要存放到的文件夹
        String realname = "";
        DiskFileItemFactory factory = new DiskFileItemFactory();
        ServletFileUpload upload = new ServletFileUpload(factory);

        try {
            List list = upload.parseRequest(request);//关于list中的值  并不想展示出来而是想要存储到数据库中
            for(int i =0;iget(i);
                boolean iden = item.isFormField();//判断是普通控件还是文件控件    普通控件返回true文件控件返回false
                if(iden){//普通控件  把值取出来
                    String fname = item.getFieldName();//获取控件名  即username password 等
                    String value = item.getString("utf-8");//获取控件值

                    if(fname.equals("realname")){
                        realname = value;
                    }                   
                }else{//文本控件 把文件存储起来
                    name = item.getName();//获取存储的文件名  即001.jpg
                    if(name.indexOf("\\")!=-1){//这是针对不同浏览器对图片上传的保存名称不同二进行的处理
                        name=name.substring(name.lastIndexOf("\\")+1);//从最后一个\之后开始截取，即只保存xxx.jpg
                    }
                    spath = path +"\\"+ name;//要保存的路径
                    try {
                        item.write(new File(spath));
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                }
            }
        } catch (FileUploadException e) {
            e.printStackTrace();
        }
    }

知识点五：关于所需数据分布在两个表中的处理

//html代码
    "${orderlist }" var = "orderinfo">
        
${map[orderinfo.proid].proname }
        
"${fn:split(map[orderinfo.proid].images,',')[0]}" />
        
//servlet处理代码
public void doPost(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
            HttpSession session=request.getSession();
            Users user = (Users) session.getAttribute("user");
            String userid = user.getUserid();
            OrderBiz orderbiz = new OrderBiz();
            List orderlist=orderbiz.findByUserid(userid);
            if(orderlist!=null){
                session.setAttribute("orderlist", orderlist);
                HashMap map = new HashMap();
                for(int i=0;iget(i).getProid();
                    ProductBiz productbiz = new ProductBiz();
                    Product product=productbiz.findById(proid);
                    map.put(proid, product);//这是关键   通过外键把另外一个表中的数据带到展示页面
                }
                session.setAttribute("map", map);
                response.sendRedirect("uc-order.jsp");
            }else{
                session.setAttribute("orderlist","");
                response.sendRedirect("uc-order.jsp");
            }
        }

知识点六：小提示功能

//html代码
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:if test="${error==1 }">//一开始是不显示的，error=1即重复提交时显示
    <div class="error">
        *请不要重复提交
    div>
c:if>
//js代码
$("#username").click(function(){
    

      $(".error").css("display","none");//点击时小提示隐藏
});

尾声

这次项目使我深深感觉到，前端页面的设计修改真的好难，在这方面还需要不断学习。这次就只是单纯想总结几个小的知识点，防止以后用到了再百度。如果恰好能帮到各位小伙伴，那真是极好的！

May God bless you！