day33 解耦 后台异步展示

----------------解耦

• 路径src下用loader（BeanFactory.class.getClassLoader().getResource("bean.xml").getPath();），web路径使用getrealpath（String path = this.getServletContext().getRealPath("upload");）
• dom4j

-------------xml中配置，id为寻找，class为所要创建的实际地址
<?xml version="1.0" encoding="UTF-8"?>
<beans>
    <!-- 配置AdminServiceImpl的清单 -->
    <bean id="adminService" class="com.itheima.service.impl.AdminServiceImpl"></bean>
    <!-- <bean id="adminService" class="com.itheima.service.impl.AdminServiceImpl2"></bean> -->

    <bean id="adminDao" class="com.itheima.dao.impl.AdminDaoImplMySql"></bean>
    <!-- <bean id="adminDao" class="com.itheima.dao.impl.AdminDaoImplOracle"></bean> -->

</beans>
----------------------使用
//用解耦合的方式进行编码----解web层与service层的耦合
        //使用工厂+反射+配置文件
        AdminService service = (AdminService) BeanFactory.getBean("adminService");
-------------------------BeanFactory
public static Object getBean(String id){
        
        //生产对象---根据清单生产----配置文件----将每一个bean对象的生产的细节配到配置文件中
        //使用dom4j的xml解析技术
        
        try {
            //1、创建解析器
            SAXReader reader = new SAXReader();
            //2、解析文档---bean.xml在src下
            String path = BeanFactory.class.getClassLoader().getResource("bean.xml").getPath();
            Document doc = reader.read(path);
            //3、获得元素---参数是xpath规则
            Element element = (Element) doc.selectSingleNode("//bean[@id='"+id+"']");
            //<bean id="adminService" class="com.itheima.service.impl.AdminServiceImpl"></bean>
            String className = element.attributeValue("class");
            //com.itheima.service.impl.AdminServiceImpl
            //使用反射创建对象
            Class clazz = Class.forName(className);
            Object object = clazz.newInstance();
            
            return object;
            
        } catch (Exception e) {
            e.printStackTrace();
        }
        
        return null;
    }
    

Paste_Image.png Paste_Image.png

----------------后台

• ajax异步加载需要拼接字符串 $("#shodDivOid").html("");$("#loading").css("display","block");
  //ajax异步访问数据

    //根据订单id查询订单项和商品信息
    public void findOrderInfoByOid(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        
        //获得oid
        String oid = request.getParameter("oid");
        
        //用解耦合的方式进行编码----解web层与service层的耦合
        //使用工厂+反射+配置文件
        AdminService service = (AdminService) BeanFactory.getBean("adminService");
        
        List<Map<String,Object>> mapList = service.findOrderInfoByOid(oid);
        
        Gson gson = new Gson();
        String json = gson.toJson(mapList);
        System.out.println(json);
        /*[
         *  {"shop_price":4499.0,"count":2,"pname":"联想（Lenovo）小新V3000经典版","pimage":"products/1/c_0034.jpg","subtotal":8998.0},
         *  {"shop_price":2599.0,"count":1,"pname":"华为 Ascend Mate7","pimage":"products/1/c_0010.jpg","subtotal":2599.0}
         *]*/
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().write(json);
        }
---------------------------
function findOrderInfoByOid(oid){
                //清理上一次显示的内容覆盖
                $("#showDivTab").html("");
                $("#shodDivOid").html("");
                $("#loading").css("display","block");
    //ajax异步访问数据
                $.post(
                    "${pageContext.request.contextPath }/admin?method=findOrderInfoByOid",
                    {"oid":oid},
                    function(data){
            //隐藏加载图片
                        $("#loading").css("display","none");
                    /*[
                         *  {"shop_price":4499.0,"count":2,"pname":"联想（Lenovo）小新V3000经典版","pimage":"products/1/c_0034.jpg","subtotal":8998.0},
                         *  {"shop_price":2599.0,"count":1,"pname":"华为 Ascend Mate7","pimage":"products/1/c_0010.jpg","subtotal":2599.0}
                         *]*/
                        var content = "<tr id='showTableTitle'><th width='20%'>图片</th><th width='25%'>商品</th><th width='20%'>价格</th><th width='15%'>数量</th><th width='20%'>小计</th></tr>";
                        for(var i=0;i<data.length;i++){
                            content+="<tr style='text-align: center;'>"+
                            "<td>"+
                                "![](${pageContext.request.contextPath }/"+data[i].pimage+")"+
                            "</td>"+
                            "<td><a target='_blank'>"+data[i].pname+"</a></td>"+
                            "<td>￥"+data[i].shop_price+"</td>"+
                            "<td>"+data[i].count+"</td>"+
                            "<td><span class='subtotal'>￥"+data[i].subtotal+"</span></td>"+
                            "</tr>";
                        }                                                                       $("#showDivTab").html(content);
                        //订单编号
                        $("#shodDivOid").html(oid);
                                        },
                    "json"  );  }

• 【{“xxx”:"aaa"}，{}】
• 两表联查

Paste_Image.png

• ajax异步是jquery中一部分
• el整体是一个字符串不是变量“${order.oid}”,相对应的json字符串在自己拼时候双引号只能反义符来确定而不是单引
• ctrl+h filesearch搜索文件
• 一个小点是注意检查name是否对应
• jquery高版本低版本有时候方法不兼容，例如layer在1.8中如果仅有1.11可能会出现问题？
• jquery-script
• 多表单提交enctype则使用request就会失效，因此不能用parameter来获取值，也就不能使用name，value格式上传值，解决方法：重新写一个servlet
• 存图片放路径最好不要写工程名，而写工程下某一文件夹（因为不容易改动）