笔记

2017-10-26

ajax 的 dataType：

如果后台返回的是字符串，将dataType设置为 'text'格式，直接获取数据；

如果后台返回的是对象或者是集合类的，将dataType设置为 'json'格式，通过 *. 的方式对象或者集合中的数据；

2017-10-27

后台怎么获得同名的input值：

如果表单有同名的name，后台可以以数组的形式获得数据，具体如下：

1、前端建立表单：

    <form action="${pageContext.request.contextPath}/admin/spu/spu/test" method="post">
      <input type="text" name="options"/>
      <input type="text" name="options"/>
      <input type="submit" value="submit"/>     
    </form>

2、后台获取数据：

         @RequestMapping(value="test",method=RequestMethod.POST)
         @ResponseBody
         public boolean test(HttpServletRequest request, @RequestParam("options")String[] options) {
             
             for(String index : options) {
                 System.out.println("获得的数据："+index);
             }
             
             return true;
         
         }

2017-10-29

CSS：阴影效果；

外边框加阴影效果 ：

box-shadow: #666 0px 0px 10px;

2017-10-30

Jquery的load（）方法，需避免重复加载引起的页面崩溃；

重复使用load方法动态加载同一个页面时候，其它页面如果有会初始化的插件，

如fileinput、summernote组件，会导致插件自动生成的标签在原页面不断重复积累，导致运行不畅。

所以在load同一个页面之前，需要先调用该页面组件的销毁方法，如下：

 
              function  editEntity(id,viewEditUrl){
                     //销毁调用页面的组件
                     $(".spu-image").fileinput('destroy');
                     $(".edit-spuPicture-input").fileinput('destroy');
                     $("#spu-content-edit2").summernote('destroy');
                                     //加载页面会重新初始化组件
                       var targetUrl = viewEditUrl+"?id="+id;
                       $("#spu-edit").load(targetUrl);
                                           
                      
              }

2017-11-07

Mybatis :多参数传入方法;

在Dao层使用 @Param 绑定参数;

List<TShopSku> getByrootcategoryIdRandom(@Param("rootCategoryId")Long rootCategoryId,@Param("num")Long skuNum);

2017-11-07

鼠标悬停，图片自中心放大效果：

div {  
                display: block;  
                 300px;  
                margin: 0 auto;  
                overflow: hidden;  
            }  
              
div img {  
                display: block;  
                border: 0;  
                 100%;  
                transform: scale(1);  
                transition: all 1s ease 0s;  
                -webkit-transform: scale(1);  
                -webkit-transform: all 1s ease 0s;  
 }  
              
 div:hover img {  
                transform: scale(1.3);  
                transition: all 1s ease 0s;  
                -webkit-transform: scale(1.3);  
                -webkit-transform: all 1s ease 0s;  
} 

2017-11-08

滚动监听：导航栏置顶

                //获取导航条高度;
                var navTop=$("#good-nav").offset().top;                         
                //监听事件;
                $(window).scroll(function(){                    
                //监听高度;
                var scrollHeight=$(document).scrollTop();    
                    if(scrollHeight>navTop){
                        $("#good-nav").css({position:"fixed",top:"0px"})
                    }else{
                        $("#good-nav").css({position:"static",top:navTop})
                    }
                });

滚动到指定位置：

                 //滚动到指定位置
                $("#good-nav>li").click(function (){  
                    $('html, body').stop(true).animate({  
                        scrollTop: navTop  
                    }, 2000);  
                });

设置子容器位于父容器的底部：

1、将父容器的position设置为relative;

2、子容器设置为：position:absolute;bottom:0px;

注意：如果父容器未设置为relative,子元素将位于页面底部；

为div添加覆盖层：

1、为div包裹一层父容器,容器的大小设置为div的大小；

2、在父容器中添加一个div2作为覆盖层，大小设置为何div一样，position设置为absolute；

2017-11-09

Mybatis 的Foreach用法：

属性	描述
item	循环体中的具体对象。支持属性的点路径访问，如item.age,item.info.details。 具体说明：在list和数组中是其中的对象，在map中是value。 该参数为必选。
collection	要做foreach的对象，作为入参时，List<?>对象默认用list代替作为键，数组对象有array代替作为键，Map对象没有默认的键。 当然在作为入参时可以使用@Param("keyName")来设置键，设置keyName后，list,array将会失效。 除了入参这种情况外，还有一种作为参数对象的某个字段的时候。举个例子： 如果User有属性List ids。入参是User对象，那么这个collection = "ids" 如果User有属性Ids ids;其中Ids是个对象，Ids有个属性List id;入参是User对象，那么collection = "ids.id" 上面只是举例，具体collection等于什么，就看你想对那个元素做循环。 该参数为必选
separator	元素之间的分隔符，例如在in()的时候，separator=","会自动在元素中间用“,“隔开，避免手动输入逗号导致sql错误，如in(1,2,)这样。该参数可选。
open	foreach代码的开始符号，一般设置为“(“和close=")"合用。常用在in(),values()时。该参数可选。
close	foreach代码的关闭符号，一般设置为“)“和open="("合用。常用在in(),values()时。该参数可选。
index	在list和数组中,index是元素的序号，在map中，index是元素的key，该参数可选。

 使用场景：

根据商品的spu Id 和商品的属性值Id数组，获得商品集合，此查询语句的筛选思路是：1、筛选出属于某个SPU的商品；2、筛选出同时拥有某些属性值的商品；

使用Foreach语句查询商品：

2个表：1、商品表: t_shop_sku，商品属性关联表：t_shop_sku_attribute_option;

<!-- 根据SPUid和关键属性值获得sku -->
  <select id="getByspuIdAndoptions" resultMap="BaseResultMap">
    select s.id,s.sku_name,s.original_price,s.sale_price,s.integration,s.stocks
    from t_shop_sku s  
    <foreach collection="optionIds" item="optionId" index="index" open="" close="and">
    inner join t_shop_sku_attribute_option so${index} on s.id=so${index}.sku_id and so${index}.option_id =#{optionId}
    </foreach>
    s.spu_id =#{spuId,jdbcType=BIGINT}
  </select>

2017-11-10

Jquery :倒计时

效果：按钮点击后需要一分钟的冷却时间；

应用场景：手机短信验证码点击获取，一分钟后才可再次点击；

$().ready(function(){
   
   //倒计时长
   var countdown =60;
   $("#getPhoneCode").on("click",function(){
       //点击的目标对象
       var obj =$("#getPhoneCode");
      //执行方法
       reCode(obj) ;

   });
    //倒计时方法
   function reCode(obj){                     
        if (countdown == 0) {
             obj.css("disabled","false");
             obj.text("获取验证码");
             countdown = 60;
             return;
        } else {
             obj.css("disabled","true");
             obj.text("(" + countdown + ") s 重新发送");
             countdown--;
        }
        setTimeout(function() {  //每秒执行该事件，直到countdown为零
                reCode(obj) }
        ,1000)
      
});

2017-11-11

Java 与JavaScript 正则表达式的使用：

Java：

1、验证某字符串是否匹配；

public static void main(String[] args) {
    // 要验证的字符串
    String str = "13456@qq.com";
    // 邮箱验证规则
    String regEx = "[a-zA-Z_]{1,}[0-9]{0,}@(([a-zA-z0-9]-*){1,}\.){1,3}[a-zA-z\-]{1,}";
    // 编译正则表达式
    Pattern pattern = Pattern.compile(regEx);
    // 忽略大小写的写法
    // Pattern pat = Pattern.compile(regEx, Pattern.CASE_INSENSITIVE);
    Matcher matcher = pattern.matcher(str);
    // 字符串是否与正则表达式相匹配
    boolean rs = matcher.matches();
    System.out.println('验证结果为：'+rs);
}

2、在字符串中查询字符或者字符串；

public static void main(String[] args) {
    // 要验证的字符串
    String str = "baike.xsoftlab.net";
    // 正则表达式规则
    String regEx = "baike.*";
    // 编译正则表达式
    Pattern pattern = Pattern.compile(regEx);
    // 忽略大小写的写法
    // Pattern pat = Pattern.compile(regEx, Pattern.CASE_INSENSITIVE);
    Matcher matcher = pattern.matcher(str);
    // 查找字符串中是否有匹配正则表达式的字符/字符串
    boolean rs = matcher.find();
    System.out.println(rs);
}

JavaScript:

      //验证手机号
      var phone='13570203045';
      var regexp =/^1[0-9]{10}$/ ;  //注意 ：字符串前后须加上 '/'正斜杠,表示这个变量是个正则表达式，而在java中不需要加上 '/'，在java中，正则表达式须用""双引号或者''单引号括起来；
      var result = regexp.test(phone) ; 
     alert("验证的结果是："+result);                   

2017-11-13

 获得上一个请求的地址

应用场景：登录拦截，登录后跳转回原来的请求地址；

String retUrl = request.getHeader("Referer");

2017-11-13

 禁止点击及样式

.button-disabled{background-color:#eee;border:1px solid #b3949b;color:#b1afaf;pointer-events: none; cursor:default;opacity: 0.8;}

2017-11-14

checkbox 选中框，获得对象

如果判断checkbox是否有选中的（即选中个数不为0）
if($("[name='chk']:checkbox:checked").length > 0){...........................................}
如果判断checkbox是否全部被选中
if($("[name='chk']:checkbox:checked").length==$("[name='chk']:checkbox").length){...........................................}
如果通过onclick判断当前点击的是否被选中：
input可以这么写:<input type="checkbox" name="chk" onclick= "ban(this)" value="北京"/>
function ban(obj){
    if(obj.checked){
          ..........
    }
    //如果要用到"北京" 可以调用obj.value
}

遍历选中：

var nums =$(".cartSku-checkbox-single:checkbox:checked");
alert(nums.length)
$.each(nums,function(i,num){
    alert($(num).val())
})

2017-11-14

Jquery ,删除效果：

$("#myButton").click(function() {
  $("#myDiv").fadeTo("slow", 0.01, function(){//fade
    $(this).slideUp("slow", function() {//slide up
      $(this).remove();//then remove from the DOM
    });
  });
});

2017-11-14

onclick事件与href='javascript:function()'的比较：

href='javascript:function()'和onclick="function()" 都可以执行事件，但是如果要调用元素对象本身this，就要用onclick="function(this)",

并且onclick 先href执行，所以建议使用onclick执行事件，在事件中使用return false,阻止href的跳转，如果不适用return false;要阻止a链接，href则写成href='javascript:;' 

注意：href不可写成 href="" 空的状态，可能会发生点击后刷新页面的问题；

2017-11-15

Json的使用

1、判断请求是否是Ajax请求：

 /**
  * 判断是否是ajax请求 ,如果是ajax请求响应头会有x-requested-with
  */
if (request.getHeader("x-requested-with") != null && request.getHeader("x-requested-with").equalsIgnoreCase("XMLHttpRequest")){ 
              system.out.println("是ajax请求");
}

2、使用 jackson将对象或者集合转换为Json；

       /**
         * ObjectMapper是JSON操作的核心，Jackson的所有JSON操作都是在ObjectMapper中实现。
         * ObjectMapper有多个JSON序列化的方法，可以把JSON字符串保存File、OutputStream等不同的介质中。
         * writeValue(File arg0, Object arg1)把arg1转成json序列，并保存到arg0文件中。
         * writeValue(OutputStream arg0, Object arg1)把arg1转成json序列，并保存到arg0输出流中。
         * writeValueAsBytes(Object arg0)把arg0转成json序列，并把结果输出成字节数组。
         * writeValueAsString(Object arg0)把arg0转成json序列，并把结果输出成字符串。
         */
       
        ObjectMapper mapper = new ObjectMapper();
       //假设有个User对象
        User user =new User();
        //对象转JSON
        String json = mapper.writeValueAsString(user); 
        //List集合 
        List<User> users = new ArrayList<User>();
        users.add(user);
        //List转Json
        String jsonlist = mapper.writeValueAsString(users);
        //Map集合
        Map<String,Object> result =new HashMap<String,Object>();
        result.put("valid", "true");
        result.put("valid", "false");
        //Map转Json
        String jsonlist = mapper.writeValueAsString(result);
        

3、JSON反序列化：

        ObjectMapper mapper = new ObjectMapper();
        User user = mapper.readValue(json, User.class);

4、将json数据返回给前端Ajax：

        if (request.getHeader("x-requested-with") != null && request.getHeader("x-requested-with").equalsIgnoreCase("XMLHttpRequest")){   
            //返回的结果
            Map<String,Object> result =new HashMap<String,Object>();
            result.put("valid", "noUser");
            result.put("target", request.getContextPath()+"/shop/user/login");
            //将Map转换为json
            ObjectMapper mapper = new ObjectMapper();
            String resultJson =mapper.writeValueAsString(result);
            //将json返回给前端
            response.setCharacterEncoding("UTF-8");  
            response.setContentType("application/json; charset=utf-8");  
            PrintWriter out = null;  
            try {  
                out = response.getWriter();  
                out.append(resultJson);  
            } catch (IOException e) {  
                e.printStackTrace();  
            } finally {  
                if (out != null) {  
                    out.close();  
                }  
            }  
            return false;
        }
    

2017-11-20

使用Log调试：

final Logger logger=(Logger) LoggerFactory.getLogger(OrderServiceImpl.class);

2017-11-22

Mybatis 的条件判断：类型判断

instanceof 条件判断

<!--判断optionIds不属于String类型，且数组长度大于0，注意，如果传入参数是List，获取长度用size()-->
<if test="optionIds != null and  !optionIds instanceof String  and optionIds.length>0 ">

2017-11-24：

为经常使用的字符串和参数如地址，时间格式等，建立单例模式的全局静态类：

/**
 * 全局公共参数
 * @author meikai
 * @version 2017年11月24日 下午3:45:21
 */
public final class CommonParams {
    
    /**
     * 私有化构造函数，不可被实例化，保持单例
     */
    private CommonParams() {}
    
        
    /** 日期格式配比:yyyy-MM-dd */
    public static final String DATE_PATTERN1 ="yyyy-MM-dd";
    /** 日期格式配比:yyyyMMdd */
    public static final String DATE_PATTERN2 ="yyyyMMdd";
    /** 日期格式配比:yyyy/MM/dd */
    public static final String DATE_PATTERN3 ="yyyy/MM/dd";
    /** 日期格式配比:yyyy-MM-dd HH:mm:ss */
    public static final String DATE_PATTERN4 ="yyyy-MM-dd HH:mm:ss";
    /** 日期格式配比:DATE_PATTERN5 */
    public static final String DATE_PATTERN5 ="yyyyMMddHHmmss";
    /** 日期格式配比:yyyy/MM/dd HH:mm:ss */
    public static final String DATE_PATTERN6 ="yyyy/MM/dd HH:mm:ss";

    /** spring.properties */
    public static final String SPRING_PROPERTIES_PATH = "/spring.properties";
    /** kenhome-common.properties */
    public static final String KENHONME_COMMON_PROPERTIES_PATH = "/kenhome-common.properties";
    
    
    /** kenhome-setting.xml文件路径 */
    public static final String SETTING_XML_PATH = "/setting/kenhome-setting.xml";

    
    /** 物流公司文件路径 */
    public static final String DELIVERY_CORP_XML_PATH = "/setting/delivery_corp.xml";
    
}