邯郸限高杆项目复盘总结（1）

最新推荐文章于 2025-06-16 18:47:40 发布

原创最新推荐文章于 2025-06-16 18:47:40 发布 · 384 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#导入 #导出 #登录验证

本文介绍了一种登录验证机制，使用正则表达式校验账号和密码，并通过Ajax实现登录请求。此外，详细展示了如何使用JavaScript进行Excel文件的导出和导入，包括将JSON数据转换为Excel表格及从Excel读取数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

登录页面进行登录验证

//账号和密码的正则
var uPattern = /^[a-zA-Z0-9]{5,25}$/;
var uPassWord = /^[a-z_A-Z0-9-\.!@#\$%\\\^&\*\)\(\+=\{\}\[\]\/",'<>~\·`\?:;|]{6,12}$/;

//登录
function login() {
   
   var username = $('input[name="username"]').val();  //用户名
   var passwords = $('input[name="password"]').val(); //密码


    var VerifyAccount = uPattern.test(username);
    var ValidatePassword = uPassWord.test(passwords);
    if ($.trim(username).length == 0 || $.trim(passwords).length == 0) {
        alertMsg('您有未填信息',1)
    }else if(VerifyAccount == false || ValidatePassword == false ){
        alertMsg('您的账号或密码错误',1);
        return;
    }else{
        $.ajax({
            url: url + "/login",
            type:'post',
            data: {
                username: username,
                password:passwords
            },
            dataType: 'json',
            success: function (msg) {
                main = msg.user;
                if(msg.code == 200){
                    localStorage.setItem('token', msg.token);
                    localStorage.setItem('refresh_token', msg.refresh_token);
                    localStorage.setItem('flag', msg.user.flag);
                    if(msg.user.flag == true){
                        window.location.href = "index.html";
                    }else{
                        window.location.href = "adminData.html";
                    }
                }else{
                    alertMsg(msg.message,1);
                };
            }
        });
    }
   
}

实时获取时间更新到页面

// 设置时间
function changetime() {
    var TimeModule = new Date();

    if(TimeModule.getMinutes() < 10){
        var ConcreteTime = TimeModule.getFullYear()+'/'+(TimeModule.getMonth()+1)+'/'+TimeModule.getDate()+' '+TimeModule.getHours()+":"+'0'+TimeModule.getMinutes();
    }else{
        var ConcreteTime = TimeModule.getFullYear()+'/'+(TimeModule.getMonth()+1)+'/'+TimeModule.getDate()+' '+TimeModule.getHours()+":"+TimeModule.getMinutes();
    }
    $(".time").html(ConcreteTime);
}

Excel的导出及导入

1、导出

//导出
function toExcel(FileName, ShowLabel, JSONData) {
    //先转化json
    var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
    var excel = '<table>';
    //设置表头
    var row = "<tr align='left'>";//设置Excel的左居中
    for (var i = 0, l = ShowLabel.length; i < l; i++) {
        for (var key in ShowLabel[i]) {
            row += "<td>" + ShowLabel[i][key] + '</td>';
        }
    }
    //换行
    excel += row + "</tr>";
    //设置数据
    for (var i = 0; i < arrData.length; i++) {
        var rowData = "<tr align='left'>";

        for (var y = 0; y < ShowLabel.length; y++) {
            for(var k in ShowLabel[y]){
                if (ShowLabel[y].hasOwnProperty(k)) {
                    rowData += "<td style='vnd.ms-excel.numberformat:@'>" + (arrData[i][k]===null? "" : arrData[i][k]) + "</td>";
                    //vnd.ms-excel.numberformat:@ 输出为文本
                }
            }
        }
        excel += rowData + "</tr>";
    }
    excel += "</table>";
    var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";
    excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
    excelFile += "<head>";
    excelFile += "<!--[if gte mso 9]>";
    excelFile += "<xml>";
    excelFile += "<x:ExcelWorkbook>";
    excelFile += "<x:ExcelWorksheets>";
    excelFile += "<x:ExcelWorksheet>";
    excelFile += "<x:Name>";
    excelFile += "{worksheet}";
    excelFile += "</x:Name>";
    excelFile += "<x:WorksheetOptions>";
    excelFile += "<x:DisplayGridlines/>";
    excelFile += "</x:WorksheetOptions>";
    excelFile += "</x:ExcelWorksheet>";
    excelFile += "</x:ExcelWorksheets>";
    excelFile += "</x:ExcelWorkbook>";
    excelFile += "</xml>";
    excelFile += "<![endif]-->";
    excelFile += "</head>";
    excelFile += "<body>";
    excelFile += excel;
    excelFile += "</body>";
    excelFile += "</html>";

    var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);
    var link = document.createElement("a");
    link.href = uri;
    link.style = "visibility:hidden";
    link.download = FileName + ".xls";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

}

for (var i = 0; i < msg.rows.length; i++) {
     var arr = {
         rodName: msg.rows[i].rodName,
         startCount: msg.rows[i].startCount,
         filedCount: msg.rows[i].filedCount
     }
     jsonData.push(arr);
}

//列标题
var tableStr = [
    {rodName: '名称'},
    {startCount: '总开启次数'},
    {filedCount: '总凭证归档数'}
]
//调用导出函数   （导出文件名，table标题，table内容）
toExcel('邯郸市限高杆数据统计分析', tableStr, jsonData);

2.导入成Json文件

<!DOCTYPE html>
<html>
   
<head>  
    <meta charset="utf-8">
    <title></title>
    <meta name="" content=""/>       
    <script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>        
    <script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script>              
</head>
<script type="text/javascript">
    var jsondata;
</script>
<body>
<input type="file" onchange="importf(this)"/>
        
<button οnclick="downloadExl(jsondata)">导出生成excel</button>
        
       
<div id="demo"></div>
       
<script>
    /*
            FileReader共有4种读取方法：
            1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。
            2.readAsBinaryString(file)：将文件读取为二进制字符串
            3.readAsDataURL(file)：将文件读取为Data URL
            4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8'
                         */
    var wb;//读取完成的数据
    var rABS = false; //是否将文件读取为二进制字符串


    function importf(obj) {//导入
        console.log(obj)
        if (!obj.files) {
            return;
        }
        var f = obj.files[0];
        var reader = new FileReader();
        reader.onload = function (e) {
            var data = e.target.result;
            if (rABS) {
                wb = XLSX.read(btoa(fixdata(data)), {//手动转化
                    type: 'base64'
                });
            } else {
                wb = XLSX.read(data, {
                    type: 'binary'
                });
            }
            //wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
            //wb.Sheets[Sheet名]获取第一个Sheet的数据
            document.getElementById("demo").innerHTML = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));
            //alert(JSON.stringify( XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) ));
            jsondata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
        };
        if (rABS) {
            reader.readAsArrayBuffer(f);
        } else {
            reader.readAsBinaryString(f);
        }
    }


    function fixdata(data) { //文件流转BinaryString
        var o = "",
            l = 0,
            w = 10240;
        for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
        o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
        return o;
    }

    //下面是导出

    function downloadExl(data, type) {
        console.log(data);
        if (jsondata == null) {
            alert("请先导入excel文件");
            return false;
        }
        var keys = Object.keys(data[0]);
        var firstRow = {};
        keys.forEach(function (item) {
            firstRow[item] = item;
        });
        data.unshift(firstRow);

        var content = {};

        // 把json格式的数据转为excel的行列形式
        var sheetsData = data.map(function (item, rowIndex) {
            return keys.map(function (key, columnIndex) {
                return Object.assign({}, {
                    value: item[key],
                    position: (columnIndex > 25 ? getCharCol(columnIndex) : String.fromCharCode(65 + columnIndex)) + (rowIndex + 1),
                });
            });
        }).reduce(function (prev, next) {
            return prev.concat(next);
        });

        sheetsData.forEach(function (item, index) {
            content[item.position] = {v: item.value};
        });

        //设置区域,比如表格从A1到D10,SheetNames:标题，
        var coordinate = Object.keys(content);
        var workBook = {
            SheetNames: ["helloSheet"],
            Sheets: {
                "helloSheet": Object.assign({}, content, {"!ref": coordinate[0] + ":" + coordinate[coordinate.length - 1]}),
            }
        };
        //这里的数据是用来定义导出的格式类型
        var excelData = XLSX.write(workBook, {bookType: "xlsx", bookSST: false, type: "binary"});
        var blob = new Blob([string2ArrayBuffer(excelData)], {type: ""});
        saveAs(blob, "data.xlsx");
    }

    //字符串转字符流
    function string2ArrayBuffer(s) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
    }

    // 将指定的自然数转换为26进制表示。映射关系：[0-25] -> [A-Z]。
    function getCharCol(n) {
        let temCol = "",
            s = "",
            m = 0
        while (n > 0) {
            m = n % 26 + 1
            s = String.fromCharCode(m + 64) + s
            n = (n - m) / 26
        }
        return s
    }
</script>
   
</body>
</html>

input框限制两位小数，整数位最多两位

//限制小数点后两位
function clearNoNum(obj){
    var str = obj.value;
    if(obj.value.indexOf(".")< 0 && obj.value !=""){//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        obj.value= str.slice(0,2);
    }else{
        obj.value= str.slice(0,5);
    }
    obj.value = obj.value.replace(/[^\d.]/g,"");  //清除“数字”和“.”以外的字符
    obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的
    obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
    obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数

}