个人笔记 -- 勿入

杂记

个人日常开发遇到的问题，记忆力不好没办法，记录以防再次遇到。

---

---

Spring&Springmvc

日常开发Spring&Springmvc遇到的问题。（脑子记不住没办法）

---

SpringMVC怎么获取前台传来的数组

• 前台页面 JS

var ids = new Array();
ids.push(1);
ids.push(2);
$.ajax({
    url : "xxx/xxx"
    type : "post",
    data : {"ids" : ids},
    dataType : "josn",
    success : function() {
        ...
    }
});

• Spingmvc 后台 controller 接收

@RequestMapping(value = "xxx")
@ResponseBody
public XXX xxx(@RequestParam("ids[]") List<Integer> ids) {
    ...
}

---

二维码

输出到页面

页面

<img src="xxxx/getQRcode" .../>

后台

@RequestMapping(value = "getQRcode")
public void getQRcode(HttpServletResponse response, String code) {
    response.setHeader("Content-Type", "image/jpeg");
    byte[] img = null;
    try {
        if(StringUtils.isNotBlank(code)) {
         // 生成二维码
            img = qRCodeUtilService.createQrImage(code, PathConstants.QR_LOGO);
        }
        response.getOutputStream().write(img);
        response.flushBuffer();
    } catch (Exception e) {
        logger.error("create QRcode fail -- params : code={}", code, e);
    }
}

---

JS

日常开发常用js

---

Checkbox 全选&全不选&全选判断

<input type="checkbox" id="check_all">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<script>
//全选与全不选
var checkAll = function(obj) {
    if($(obj).attr('checked')){
        $('input[type=checkbox]').attr('checked','true');
    } else {
        $('input[type=checkbox]').removeAttr("checked");
    }
};

$(function(){  
    //表格中单个checkbox点击事件
    $('.checkbox').click(function(){
        if(!$(this).attr('checked')) {
            $('#check_all').removeAttr("checked");
        } else {
            var checks = $('.checkbox');
            var flag = true;
            for(var i = 0; i < checks.length ; i++){ 
                if(checks[i].checked != true){ 
                    flag = false;
                } 
            }   
            if(flag) {
                console.log(true);
                $('#check_all').attr("checked","true");
            } else {
                console.log(false);
                $('#check_all').removeAttr("checked");
            }
        }
    });
}
</script>

时间有效性校验

作用：提高时间校验严谨性。
正确的时间格式（yyyy-MM-dd HH:mm:ss）： 2015-12-30 11:25:00
错误的时间格式：2015-12-33 11:25:00 、2015-13-30 11:25:00 、2015-12-30 25:25:00

//| 日期时间有效性检查 
//| 格式为：YYYYMMDDHHMMSS 
var checkDateTime = function (str){ 
    console.log(str);
    var reg = /^(\d{4})(\d{1,2})(\d{1,2})(\d{1,2})(\d{1,2})(\d{1,2})$/; 
    //| 格式为：yyyy-MM-dd HH:mm:ss 时
    //| var reg = /^(\d{4})-(\d{1,2})-(\d{1,2})\s(\d{1,2}):(\d{1,2}):(\d{1,2})$/; 
    var r = str.match(reg); 
    if(r==null) return false; 
    r[2]=r[2]-1; 
    var d= new Date(r[1],r[2],r[3],r[4],r[5],r[6]); 
    if(d.getFullYear()!=r[1]) return false; 
    if(d.getMonth()!=r[2]) return false; 
    if(d.getDate()!=r[3]) return false; 
    if(d.getHours()!=r[4]) return false; 
    if(d.getMinutes()!=r[5]) return false; 
    if(d.getSeconds()!=r[6]) return false; 
    return true; 
} 

时间格式化

作用： 格式化时间，针对js输出类似2015-12-30T11:42:00这样的时间格式。

/**
 * 格式化日期
 * Y 年
 * M 月
 * d 日
 * h 小时
 * m 分
 * s 秒
 * S 毫秒
 * @param format 格式化日期字符串
 * @eg:YYYY年MM月dd日 HH:mm:ss  return 2014年12月21日 15:40:18
 */
common.dateFormat = function(dateObj, format) {
    var o = {
        "M+": dateObj.getMonth() + 1,
        //month
        "d+": dateObj.getDate(),
        //day
        "H+": dateObj.getHours(),
        //hour
        "m+": dateObj.getMinutes(),
        //minute
        "s+": dateObj.getSeconds(),
        //second
        "q+": Math.floor((dateObj.getMonth() + 3) / 3),
        //quarter
        "S": dateObj.getMilliseconds() //millisecond
    }
    if (/(Y+)/.test(format)) {
        format = format.replace(RegExp.$1, (dateObj.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for (var k in o) {
        if (new RegExp("(" + k + ")").test(format)) {
            format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
        }
    }
    return format;
}

邮箱验证正则

var pattern = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;  

手机号码正则

/**
 * 支持号码段：
 * 移动：134、135、136、137、138、139、150、151、157(TD)、158、159、187、188
 * 联通：130、131、132、152、155、156、185、186
 * 电信：133、153、180、189、（1349卫通）
 * 京东、阿里、小米：170、（177 待确认）
 */
var pattern = /^(((13[0-9])|(15[^4,\\D])|(18[0,5-9])|(170))+\d{8})$/;

console – IE 中无法使用

我们一般都会使用 console.log() 打印一些调试信息到控制台，但是在 IE 浏览其中，console是无法使用的，在测试、上线时需要删除。

检验链接是否有效

检验页面输入的链接是否有效（是否可以访问），IE 浏览器可以使用 ActiveObject 进行检查，但是其他浏览器不行，这里使用简单粗暴的 ajax 返回状态进行检测。

function NetPing(url) {
    var flag = false;
    $.ajax({
        type : "GET",
        async : false,
        cache : false,
        url : url,
        complete: function(response) {
            if(response.status == 200) {
                flag = true;
            } 
        }
    });
    return flag;
}

Ajax下不能使用$(this)

ajax 下是不能使用$(this)的，这种情况，可以在 ajax 的外面定义一个变量代替，但是注意不能使用关键字this。

function  Xxx(){
    var myThis = $(this);
    $.ajax({
        ...
        myThis.Xxx();
    })
}

.find()选择器

.find()选择器，返回的是一个列表，不能像css选择器 $('.xxx')一样操作对象， 但是可以获取html等内容。

$(this).find('.xxx').html();       -- [ok]
$(this).find('.xxx').empty();      -- [no][但也不会报错]
$(this).find('.xxx').append();     -- [no][但也不会报错]
$(this).find('.xxx').html('xxx');  -- [no][但也不会报错]

如果需要执行append、empty等操作，可以使用.first()或者.find('.xxx:first-child')找到对应的元素。

$(this).find('.xxx').first().empty();

ajax 异步加载内容的动态监听

$(function(){
    $('xxx').click(function(){
        $.ajax({
            ...
            success : function(data){
                ...
                $('xxx').append('<a>异步加载内容</a>');
                ...
            }
        });
    });

    // 链接点击事件
    $('a').click(function(){
        ...
    });
});

上述情况下，异步加载的内容，无法触发定义的链接点击事件，定义一个监听即可，并在ajax加载时调用即可。

$(function(){
    ...
        success : function(data){
            ...
            $('xxx').append('<a>异步加载内容</a>');
            aClickListener();
        }
    ...
});


function aClickListener() {
    // 链接点击事件
    $('a').click(function(){
        ...
    });
}

JQuery 构建form

function buildForm(){
    var buildForm = $('<form></form>');
    buildForm.attr('action', 'xxx.xxx.xxx');
    buildForm.attr('target', '_blank');
    buildForm.attr('method', 'POST');

    var input_id = $('<input type="text" name="id">');
    input_id.attr('value', 1);

    buildForm.append(input_id);
    buildForm.submit();
}

---

MySql

---

add … after

在某个字段之后添加字段

alter table `xxxDB`.`xxxtable` add `name` varchar(48) default null comment '名称' after `id`;

modify

修改

alter table `xxxDB`.`xxxtable` modify `name` varchar(56) default null comment '名称';

多字段排序

-- 多个字段
select * from table order by (case1, case2);

-- 多个字段的和
select * from table order by (case1 + case2);

-- 多个字段的差
select * from table order by (case1 - case2);

---

freemarker

---

html 转义

<#escape x as x?html>
...
<#noescape> 
    ...
</#noescape>
...
</#escape>

被 <#escape x as x?html></#escape>的部分，后台传入的内容都会作为字符串输出，但是特定的情况下，我们需要输出html时，可以使用<#noescape>内容</#noescape>包含输出。这样就能按照html的规范转换对应的链接、按钮、图片，而不是一串带标签的字符串。

<#escape x as x?html>
...
<#noescape> 
    ${(content)!}

    <#-- 未转义的内容  <p><img src="xxx"></p> -->
</#noescape>
    ${(content)!}
    <#-- 转义之后的内容  "<p><img src="xxx"></p>"  （带双引号的字符串，不会被html识别)-->
</#escape>

javabean boolean 类型判断

--现象

-- javabean
public class Xxx {
    private Boolean isFlag;
    ...

    public Boolean isFlag(){
        return this.isFlag;
    }
    ...
}

-- freemarker .ftl 页面
...
<#if Xxx.isFlag> 
    ...
</#if>
...

--------------------
这种情况下，打开页面直接报错

原因： freemarker 读取Xxx.isFlag时，找不到对应的get()方法。
解决方案：将javabean的isFlag()改成getIsFlag()。

public class Xxx {
    private Boolean isFlag;
    ...

    public Boolean getIsFlag(){
        return this.isFlag;
    }
    ...
}