node + node-webkit实现电脑文件信息扫描小插件

2022/2/11 1:15:57

编程Tag： node 插件 let data return webkit back forward formatArray

本文主要是介绍node + node-webkit实现电脑文件信息扫描小插件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

效果图

（部分）
在这里插入图片描述

配置文件 package.json

{
    "main": "index.html",
    "name": "tree",
    "window": {
        "title": "tree",
        "icon": "./favicon.ico",
        "toolbar": true,
        "width": 1280,
        "height": 800,
        "min_width": 1000,
        "min_height": 600,
        "position": "center"
    },
    "webkit": {
        "plugin": true,
        "java": false,
        "page-cache": false
    },
    "dependencies": {
        "diskinfo": "^0.0.3"
    }
}

具体配置信息可以看我另外一篇博客

静态页面代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/style.css">
    <title>文件</title>
</head>

<body>
    <div id="app">
        <!-- 选项 -->
        <div class="option">
            <div class="position"></div>
            <div class="path">
                <div class="choose">
                    <span class="back box"></span>
                    <span class="forward box"></span>
                </div>
                <div class="crumbs"></div>
            </div>
        </div>
        <!-- 文件内容 -->
        <div class="content">
            <table cellspacing=0>
                <thead>
                    <tr>
                        <td class="name" onclick="titleSort('name')">
                            <div class="icon ascend" data-flag=1></div>
                            <div class="th-td-container">名称</div>
                        </td>
                        <td class="time" onclick="titleSort('time')">
                            <div class="icon" data-flag=1></div>
                            <div class="th-td-container">修改时间</div>
                        </td>
                        <td class="type" onclick="titleSort('type')" data-flag=0>
                            <div class="th-td-container">类型</div>
                        </td>
                        <td class="size" onclick="titleSort('size')">
                            <div class="icon" data-flag=1></div>
                            <div class="th-td-container">大小</div>
                        </td>
                        <td class="permise">
                            <div class="th-td-container">权限</div>
                        </td>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</body>
<script src="./js/util.js"></script>
<script src="./js/render.js"></script>
<script type="text/javascript" src="./js/file.js"></script>

</html>

关键代码

1、读取电脑磁盘空间大小

const { getDrives } = require('diskinfo');
// 读取电脑系统盘数
window.onload = function() {
    getDrives(function(err, aDrives) {
        // 磁盘渲染
        storageRender(aDrives);
        // 地址栏渲染
        pathRender(aDrives[0].mounted);
        // 初始化环境
        init(aDrives[0].mounted);
    })
}

2、读取文件信息

        const fs = require("fs");
        fs.readdirSync(pathName + "\\");
        // 读取目录信息
        let stat = fs.statSync(pathName + "\\" + dir[i]);

         if (stat.isDirectory()) {
                folderList.push({
                    name: dir[i],
                    time: stat.mtimeMs,
                    type: "文件夹",
                    size: "",
                    flag: stat.isDirectory(),
                    isAccess: true,
                })
            } else {
                fileList.push({
                    name: dir[i],
                    time: stat.mtimeMs,
                    type: "文件",
                    size: stat.size,
                    flag: stat.isDirectory(),
                    isAccess: true,
                })
            }

3、前进后退

// 后退
function backEvent() {
    let prev = pathList[currPathIndex - 1];
    currPathIndex -= 1;
    selectDir(prev, false);
}

// 前进
function forwardEvent() {
    let next = pathList[currPathIndex + 1];
    currPathIndex += 1;
    selectDir(next, false);

}

// 增加前进或后退事件
function addEvent() {
    let back = document.querySelector(".path .choose .box:first-child");
    let forward = document.querySelector(".path .choose .box:nth-child(2)");
    // 前进事件
    if (currPathIndex != pathList.length - 1) {
        forward.onclick = forwardEvent;
        forward.classList.remove("forward");
        forward.classList.add("forward-active");
    } else {
        forward.onclick = null;
        forward.classList.remove("forward-active");
        forward.classList.add("forward");
    }
    // 后退事件
    if (currPathIndex != 0) {
        back.onclick = backEvent;
        back.classList.remove("back");
        back.classList.add("back-active");
    } else {
        back.onclick = null;
        back.classList.remove("back-active");
        back.classList.add("back");
    }
}

关键工具类

1、时间格式化

/**
 * 时间格式化
 * @param {Number} time 时间
 * @returns 格式化后的时间
 */
function formatDate(time) {
    let date = new Date(time);
    let y = date.getFullYear();
    let m = date.getMonth() + 1;
    let d = date.getDate();
    let h = date.getHours();
    let min = date.getMinutes();
    min = min >= 10 ? min : "0" + min;
    m = m >= 10 ? m : "0" + m;
    d = d >= 10 ? d : "0" + d;
    h = h >= 10 ? h : "0" + h;
    return y + "/" + m + "/" + d + " " + h + ":" + min;
}

2、文件大小格式化

/**
 * 文件大小格式化
 * @param {Number} data 
 * @returns 格式化后的文件大小
 */
function formatSize(size) {
    if (("" + size).trim().length != 0) {
        let valArray = ("" + Math.ceil(size / 1024)).split("").reverse();
        let formatArray = [];
        for (let i = 0; i < valArray.length; i++) {
            formatArray.push(valArray[i]);
            if ((i + 1) % 3 == 0) {
                formatArray.push(",");
            }
        }
        if (formatArray[formatArray.length - 1] == ",") {
            formatArray = formatArray.splice(0, formatArray.length - 1);
        }
        return formatArray.reverse().join("") + " " + "KB";
    }
    return "";
}

3、文件名字排序

/**
 * 目录处理 (true: 为升序，false：为降序)
 * @param {Array} data      排序数据
 * @param {String} el       排序字段
 * @param {Number} flag     排序： 1 升序（默认） 0 降序
 * 
 */
function formatData(data, el, flag = 1) {
    if (el == "name") {
        let chinese = [];
        // 过滤掉中文开头名称
        data = data.filter(item => {
            if (/^[\u4e00-\u9fa5]+/.test(item.name)) {
                chinese.push(item)
                return false
            }
            return true
        })
        if (flag == 1) {
            chinese.sort(commonCompare)
            data.sort(SortLikeWin);
            data = data.concat(chinese);
        } else {
            chinese.sort(commonCompare).reverse();
            data.sort(SortLikeWin).reverse();
            data = chinese.concat(data);
        }
    } else {
        if (flag == 1) {
            data.sort((a, b) => {
                // 升序 1 2 3
                return a[el] - b[el];
            })
        } else {
            data.sort((a, b) => {
                // 降序
                return b[el] - a[el];
            })
        }
    }
    return data;
}

由于目前自己电脑有些小问题，无法将代码提交到Github仓库上。

后期解决后会将代码提交到GitHub上，并在评论区上会提供下载地址。

下载后具体运行可以看我另外一篇博客

这篇关于node + node-webkit实现电脑文件信息扫描小插件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！