node + node-webkit实现电脑文件信息扫描小插件
Posted 岁月可贵
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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实现电脑文件信息扫描小插件的主要内容，如果未能解决你的问题，请参考以下文章