雜記

個人日常開發遇到的問題，記憶力不好沒辦法，記錄以防再次遇到。

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_-])[email protected]([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;
    }
    ...
}