前后端交互逻辑分析

文章目录

1. 1. 一、根据优惠券逻辑学习Ajax前后交互的流程
2. 2. 二、根据/item映射学习velocity模板使用
3. 3. 三、Controller参数解析

一、根据优惠券逻辑学习Ajax前后交互的流程

1. mall-service模块中的html页面,id和class都是js可选择绑定实现操作的对象

   <div id="leftsub">
     <ul>
       <li class="coupontip couponbuttion" style="display: none;">
         <img src="${staticWebDomain}/mall/images/lscoupon.png">
       </li>

2. html本页面上js语句控制点按事件

• 初始时，leftsub停靠在页面左侧（宽度3px），不高亮（class不带active）
• 点按后，leftsub扩展（宽度30px），高亮（class带active）
• 满足左边栏扩展情况下，点击优惠券图标，调用itemPromotion && itemPromotion.showCoupon(ev);

1. mall-web模块中的html页面，包含控件以及参数

   <div class="txt" id="coupons" style="display: none;"
   data-itemid="$!{itemDetail.skuId}"
   data-venderid="$!{itemExtendsInfoVo.venderId}"
   data-jcat="$!{itemExtendsInfoVo.jdCategroy}">
       <div class="cate">
           <span class="cate-label">领券</span>
               <ul class="cate-list couponlist">
               </ul>
       </div>
   </div>

2. promotion.js中，itemPromotion初始化会调用showCoupon函数，通过$('#coupons')绑定控件，再获取couponTrip.data('itemid');等参数用于发送请求

   var showCoupon = function(ev){
       var couponTrip = $('#coupons')
       var itemid = couponTrip.data('itemid');

3. static模块中promotion.js发送Ajax请求绘制优惠券页

   if(dt.data.currentSkuConponList && _.size(dt.data.currentSkuConponList)>0){
       html.push('<h5><span>本品可用优惠券</span></h5>');
       html.push('<ul>');
       $.each(dt.data.currentSkuConponList, function(index,con){
             html.push(genUseConElement(con.batchId,con.parValue,con.quota,con.name,con.beginTime,con.endTime));
       });
       html.push('</ul>');
   }

4. 子函数genUseConElement负责绘制

   var genUseConElement = function(batchId,discount,quota,name,beginTime,endTime){
       var html = [];
       html.push('<li id="'+batchId+'" class="havecoupon"><div class="couponleft">');
       html.push('<div class="value"><p><span>￥</span>'+parsePrice(discount)+'</p></div>');
       html.push('<div class="condition"></div><h6>'+getQuotaHtml(quota)+'</h6><p>'+name+'</p>');
       html.push('<p>'+(new Date(parseInt(beginTime))).Format('yyyy-MM-dd hh:mm')+'至'+(new Date(parseInt(endTime))).Format('yyyy-MM-dd hh:mm')+'</p>');
       html.push('</div></li>');
       return html.join('');
   };

二、根据/item映射学习velocity模板使用

1. velocity模板写法，以foreach为例

• 取参数：${item.xxx}，用！判断是否存在
• 流程控制：如#if，#end等，#end标记不可少
• 插件使用：同java用法，如imageUtils.getImageUrl4Jfs（xxx）

  #foreach($skuPic in $itemDetail.images)
        <a href="javascript:;" class="tinypic#if(${loopCounter} == 0) cur#end">
        <img src="$!imageUtils.getImageUrl4Jfs($!{skuPic}, 450, 450)">
        </a>
  #end

2.Controller写法，使用ModelAndView

• 传参：request，response和其他参数
• 新建ModelAndView，传入跳转页参数
• 调用service查到相应内容Vo实体
• 实体和message等封装进ModelAndView
• 返回

  @RequestMapping(value = "/item")
  public ModelAndView item(
  HttpServletReques request, 
  HttpServletResponse response, 
  @RequestParam(value = "itemId", required = true) Long itemId){
      ModelAndView modelAndView = new ModelAndView("vm/shop/item");
      CallerInfo callerInfo = null;
      try {
          callerInfo = Profiler.registerInfo("com.jcloud.b2c.mall.web.controller.ItemController.item", false, true);
          ItemBasicInfoVo  itemBasicInfo = itemClient.getItemBasicInfo(
          ControllerContext.getTenantId(), ControllerContext.getShopId(), itemId).getData();
          if(itemBasicInfo==null) {
              //不存在返回404页面
              logger.warn("无此商品,userId:{},skuId:{}",
              ControllerContext.getUserIdFormRequest(),itemId);
              String referer = request.getHeader("referer");
              if(referer!=null && referer.length()>0){
                  modelAndView.addObject("referer", referer);
                  }
              modelAndView.setViewName("vm/shop/emptyItem");
                  return modelAndView;
              }
          //省略了存在的部分
          return modelAndView;
      }

三、Controller参数解析

• SpringMVC处理请求流程：
  • 首先被DispatcherServlet截获
  • DispatcherServlet通过handlerMapping获得HandlerExecutionChain
  • 然后获得HandlerAdapter
  • HandlerAdapter在内部对于每个请求，都会实例化一个ServletInvocableHandlerMethod进行处理
  • ServletInvocableHandlerMethod对请求跟响应进行处理。请求方法参数的处理、响应返回值的处理，分别是HandlerMethodArgumentResolver和HandlerMethodReturnValueHandler