一个不知名的项目---Day07

day07

写在前头

• 最近都没更新进度,更新一下进度,商品数据展示基本已经完成
  
  • 本来使用传统get发送刷新页面的方式展示数据
  • 后改为json+ajax局部刷新数据(提高用户体验)
  • 完成了一商品详情页
  • 提取页面公有部分(上次有说过嘛?)
• 中间手抖了一下更新了git仓库导致重写了一边痛苦
• 之后可能会写一点关于git的东西,同时也会继续更新这个项目

效果图

前端

• ajax

    function productAdd($element,data) {        $element.empty();        alert("sc")        var html;        for (var i=0;i<data.length;i++){            html="<div class=\"col-md-4 col-xs-6\">" +                " <div class=\"men_clothing_product_item\">" +                "<a class=\"men_item_image\"   href=\"${app}/produIfoServlet?id="+data[i].pid+"\">" +                "<img src=\"${app}/ImgServlet?imgurl="+data[i].pimgurl+"\" alt=\"\">" +                "<img class=\"secondary_img\" src=\"${app}/ImgServlet?imgurl="+data[i].pimgurl+"\" alt=\"\">" +                "</a>" +                "<div class=\"men_item_content\">" +                "<a href=\"#\"><h3>"+data[i].pname+"</h3></a>" +                "<h4>US $"+data[i].pprice+"</h4>" +                "<div class=\"favourite_icon\">" +                "<a class=\"active\" href=\"#\"><i class=\"lnr lnr-cart\"></i></a>" +                "<a href=\"#\"><i class=\"lnr lnr-heart\"></i></a>" +                "</div>" +                "</div>" +                "</div>" +                "</div>"            $element.append(html)        }    }    $(function () {        //搜索        $(".sun_onclick").click(function () {            var pcategory = $(this).attr("pcategory");            var orderBy = $("select[name='orderBy']").val();            var maxMin = $("#amount").val();            var split = maxMin.split(/[ \t\n\x0B\f\r]+/);            var min = split[0].slice(1, split[0].length);            var max = split[1].slice(1, split[1].length);            var jsonDate = {                "pcategory": pcategory,                "orderBy": orderBy,                "min": min,                "max": max            }            $.ajax({                type: "POST",                url: "${app}/FindprodServlet",                dataType: "json",                contentType: "application/json",                data: JSON.stringify(jsonDate), //json2中将js对象转换为json串                success: function (date) {                 $(".men_clothing_tittle h2").text(date[0].pcategorys)                 productAdd($("#sun_e"),date);             }             });      })    });

后台

• servlet

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {       BufferedReader reader = request.getReader();        String json = reader.readLine();        System.out.println(json);        reader.close();        ProductConfig  config=new ProductConfig();        ObjectMapper mapper=new ObjectMapper();        if (!VoUtils.isNull(json)){              config = mapper.readValue(json, ProductConfig.class);        }        ProdService prodService= BasicFactory.factory.getInstence(ProdService.class);        List<Product> products = prodService.selectProductList(config.getMax(), config.getMin(), config.getPcategory(), config.getOrderBy());        if (VoUtils.isNull(json)){            request.setAttribute("prodList",products);            request.setAttribute("pcategory","全部商品");            request.getRequestDispatcher("/shop-brand.jsp").forward(request, response);        }        products.get(0).setPcategorys(config.getPcategory());        String jsonList = mapper.writeValueAsString(products);//转换成json 根据getxxx生成js对象        response.setContentType("application/json");        response.setCharacterEncoding("UTF-8");        response.getWriter().write(jsonList);    }

• service
  
  • 没啥说的

    public List<Product> selectProductList(int priceMax, int priceMin, String pcategory, String OrderBy) {        if (pcategory!=null&&"全部商品".equalsIgnoreCase(pcategory)){            pcategory=null;        }        return pd.selectProductList(priceMax, priceMin, pcategory,OrderBy);    }

• dao
  
  • 动态sql拼接

    public List<Product> selectProductList(int priceMax, int priceMin, String pcategory,String OrderBy) {        StringBuilder sql= new StringBuilder("select pid,pname,pprice,pnum,pimgurl,pinfo,pcategory from tb_product  where 1=1 ");        List<Object> list=new ArrayList<Object>();        sql.append(" and pprice >= ?");        list.add(priceMin);        if (priceMax>priceMin){            sql.append(" and pprice <= ?");            list.add(priceMax);        }        if (!VoUtils.isNull(pcategory)){            sql.append(" and pcategory = ?");            list.add(pcategory);        }        if (!VoUtils.isNull(OrderBy)){            sql.append(" order by "+OrderBy);        }        System.out.println("sql.toString() = " + sql);        return DaoUtils.query(sql.toString(),new BeanListHandle<Product>(Product.class),list.toArray());    }

后话

• 基本完成的大功能就怎么多类似一点点的小更新就不说了

• 详情请查看源码

  • https://github.com/sunjiaqing/xxx/tree/sun

• json详细

  • http://blog.csdn.net/qq_19763819/article/details/78054820