用 Node.js 将 bugzilla 上的 bug 列表导入到 excel 表格在线版本之一（ server 端）
<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bug To Excel</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/flat-ui.min.css" rel="stylesheet"> <link href="css/blower-loading.css" rel="stylesheet"> <link href="css/index.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-1"></div> <div class="col-xs-3" style="text-align:left; margin-top:20px;"> <span id="task_tip" style="visibility:hidden">Running Generating Task: <span id="running_task"></span><span> </div> <div class="col-xs-8"></div> </div> <div class="row" style="margin-top:30%;" id="login"> <div class="col-xs-3"></div> <div class="col-xs-6" style="text-align:center;" id="account"> <div class="input-group input-group-hg input-group-rounded"> <input type="text" value="" id="input-account" placeholder="URL Of Bug List" class="form-control" data-toggle="tooltip" data-placement="auto top" title="" data-trigger="manual" /> <span class="input-group-btn"> <span type="submit" class="btn"><span class="fui-clip"></span></span> </span> </div> <div style="margin-top: 20px;"> <input type="button" class="btn btn-inverse btn-wide" id="saveAccount" value="Start"> </div> </div> <div class="col-xs-3"></div> </div> <div class="row" id="progress" style="display:none"> <div class="col-xs-2"></div> <div class="col-xs-8"> <div id="loadingContainer"> <div class="loadingbar"> <div class="marker_container"> <div class="marker"></div> <div class="marker"></div> <div class="marker"></div> <div class="marker"></div> </div> <div class="filler_wrapper"> <div class="filler"> <span class="value">0%</span> </div> </div> </div> <div id="download" style="display:none"> <img src="image/download.svg" alt="Download"> <span>Download Excel file</span> </div> </div> </div> <div class="col-xs-2"></div> </div> <div class="row" id="alert-bar" style="margin-top:20px; display:none;"> <div class="col-xs-2"></div> <div class="col-xs-8" id="alert-row"></div> <div class="col-xs-2"></div> </div> </div> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/flat-ui.min.js"></script> <script src="js/unique.js"></script> <script src="js/blower-loading.js"></script> <script src="js/index.js"></script> </body> </html>
blower-loading.css 和 blower-loading.js 忘记是从哪里扒过来的代码了，反正不是自己写的。只是小小修改了一下样式和 js 代码，让它能比较好地跑在项目里。
unique.js 是根据浏览器环境生成指纹码的一个库
function showAlert(flag, str) { $("#alert-body").remove(); var alert_body = $(‘<div class="alert alert-dismissible" role="alert" id="alert-body"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button><span></span></div>‘); if (flag == "Warning") { alert_body.addClass("alert-warning"); } else if (flag == "Error") { alert_body.addClass("alert-danger"); } alert_body.children("span").html("<strong>" + flag + "!<strong> " + str); alert_body.appendTo("#alert-row"); $("#alert-bar").fadeIn(); setTimeout(function() { $("#alert-bar").fadeOut(); }, 8000); }
提醒的函数
var fingerprint = new Fingerprint().get();
获得指纹码
setInterval(getTaskNum, 2000); function getTaskNum() { $.get("/taskNum", function(data, status) { $("#running_task").text(data.running + "/" + data.max); if ($("#task_tip").css("visibility") == "hidden") $("#task_tip").css("visibility", ""); }); }
更新任务数
$("#saveAccount").on("click", function() {
if ($("#input-account").val() == "") {
showAccountTip("Input the url of bug list.");
} else {
$("#login").animate({ "marginTop": "5%" });
$("#alert-bar").fadeOut();
$.ajaxSetup({ "contentType": "application/json" })
var data = {
taskURL: $("#input-account").val(),
fingerprint: fingerprint
}
$.post("/start", JSON.stringify(data), function(data, status) {
if (data.result == "fail") {
if (data.reason == "running")
showAlert("Warning", "It is running a task for you. Just be patient.");
else if (data.reason == "maxTask")
showAlert("Error", "Reach max tasks limition. Just support up to " + data.maxTask + " processes at the same time.");
return;
}
window.blower = new LoadingBlower("#loadingContainer");
blower.resetProgress();
setTimeout(function() {
$("#progress").fadeIn("slow");
$("#download").slideUp();
}, 200)
window.intval = setInterval(getStatus, 2000);
})
}
})
开始一个新任务
function getStatus() { $.get("/status?fingerprint=" + fingerprint, function(data, status) { try { blower.setProgress(parseInt(data.done / data.total * 100)); } catch (err) {} if (data.status == "error") { clearInterval(intval); $("#progress").fadeOut(); setTimeout(function() { if (data.reason == "noBug") showAlert("Error", "Can‘t find any bug from the url you provided."); else if (data.reason == "invalid") showAlert("Error", "You may input invalid url. Please check again."); else showAlert("Error", "It may occur socket error. Wait other task(s) done and try again."); }, 300); } else if (data.status == "done") { clearInterval(intval); } }); }
更新进度条
$("#download img").on("click", function() {
ajax_download("/download?fingerprint=" + fingerprint);
setTimeout(function() {
$("#download").slideUp();
}, 200)
})
function ajax_download(url) {
$(‘#download_iframe‘).remove();
$("<iframe id=‘download_iframe‘ style=‘display: none‘ src=‘" + url + "‘></iframe>"
).appendTo("body");
}
下载 excel 文件
