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 3return a[el] - b[el];})} else {data.sort((a, b) => {// 降序return b[el] - a[el];})}}return data;
}

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

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

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

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

html访问微信云数据库,node.js 抓取网页内容（针对微信小程序云开发）
最近在研究微信小程序的云开发功能.云开发最大的好处就是不需要前端搭建服务器,可以使用云端能力,从零开始写出来一个能上线的微信小程序,避免了买服务器的开销,对于个人来尝试练手微信小程序从前端到后台的开发 ...
两个电脑文件如何同步
文件同步是将一台设备上的文件,保存到另外设备的过程,两个电脑文件如何同步?小编在这里推荐用坚果云,坚果云是国内做得最专业,也是最用心在做的"文件同步网盘".尽管很低调,但自诞生至今 ...
百度网盘可以自动备份电脑文件吗？
百度网盘可以自动备份电脑文件吗?大家应该对百度网盘都很熟悉吧,百度网盘是一种线上的云存储设备,大部分的小伙伴都已开通百度网盘,用户可以将自己的文件上传到网盘上,并可跨终端随时随地查看和分享.所以我们都 ...
前端实现生成带有样式的excel表格 Node和浏览器读写Excel文件探究实践
最近碰到个需要自动生成表格的任务,作为前端的我,就想在 node 和浏览器中生成强大的表格,所以特此研究了很多关于表格的 npm 库支持读写 Excel 的 node.js 模块 node-xlsx ...
使用node.js+express+multer实现文件的上传
经过一次又一次的失败和一起又一次的崩溃放弃.很多的bug总是出现在那些最细小的不容易察觉到的环节.搜百度一般很难找到解决办法,这时候我们通过Stackoverflow.Google等搜索才是真的大腿. ...
极简 Node.js 入门 - 3.2 文件读取
Node.js 提供了多种读取文件的 API fs.readFile fs.readFile(path[, options], callback) 是最常用的读取文件方法,用于异步读取文件的全部内容 ...
Node.js 爬虫爬取电影信息
Node.js 爬虫爬取电影信息本文地址:https://blog.csdn.net/weixin_45580251/article/details/107669713 爬取的是1905电影网的信息 ...
Node.js毕业设计——基于Node.js+JavaScript+MongoDB的供求信息网站设计与实现（毕业论文+程序源码）——供求信息网站
基于Node.js+JavaScript+MongoDB的供求信息网站设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于Node.js+JavaScript+MongoDB的供求信息网站设计 ...
node+multer中间件实现单文件、多文件上传—超详细
一.概念 Multer 是一个 node.js 中间件,用于处理 multipart/form-data 类型的表单数据,它主要用于上传文件. 注意: Multer 不会处理任何非 multipart ...
node+express使用multiparty实现文件上传
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 作者|王小强来源|https://my.oschina.ne ...

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

效果图

静态页面代码

关键代码

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

2、读取文件信息

3、前进后退

关键工具类

1、时间格式化

2、文件大小格式化

3、文件名字排序

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

最新文章

热门文章