跟我一起使用electron搭建一个文件浏览器应用吧（二）
这个文件浏览器应用可以具备以下两种功能噢～
This file browser application can have the following two functions.
一：用户浏览文件夹和查找文件
First: Users browse folders and find files
二：用户可以使用默认的应用程序打开文件
2: Users can use default applications to open files
接下来我们开始进行开发吧～
Next, let's start developing.
第一步创建文件和文件夹
The first step is to create files and folders
mkdir lorikeet-electron
cd lorikeet-electron/
sudo cnpm install -g electron
touch package.json
index.html
<html>
<head>
<title>Lorikeet</title>
<link rel="stylesheet" href="app.css" />
<script src="app.js"></script>
</head>
<body>
<h1>welcome to Lorikeet</h1>
</body>
</html>
package.json
{
"name": "lorikeet",
"version": "1.0.0",
"main": "main.js"
}
main.js
'use strict';
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow = null;
app.on('window-all-closed',() => {
if (process.platform !== 'darwin') app.quit();
});
app.on('ready', () => {
mainWindow = new BrowserWindow();
mainWindow.loadURL(`file://${app.getAppPath()}/index.html`);
mainWindow.on('closed', () => { mainWindow = null; });
});
使用electron .运行项目是
Using electron. Running the project is
第二步：实现启动界面
Step 2: Implement startup interface
我们会在工具条中展示用户个人文件夹信息
We will display the user's personal folder information in the toolbar
实现该功能可以分为三部分内容
The realization of this function can be divided into three parts.
html负责构建工具条和用户个人文件夹信息
htmlResponsible for building toolbars and user personal folder information
css负责布局工具条和用户个人文件夹展示上的布局以及样式
css is responsible for the layout toolbar and the layout and style of the user's personal folder display
javascript负责找到用户个人文件夹信息在哪里并在UI上展示出来
javascript is responsible for finding out where the user's personal folder information is and displaying it on the UI
添加展示工具条的个人文件夹的html代码
HTML code for adding personal folders to display toolbars
index.html
<html>
<head>
<title>Lorikeet</title>
<link rel="stylesheet" href="app.css" />
</head>
<body>
<div id="toolbar">
<div id="current-folder">
</div>
</div>
</body>
</html>
body {
padding: 0;
margin: 0;
font-family: 'Helvetica','Arial','sans';
}
#toolbar {
top: 0px;
position: fixed;
background: red;
width: 100%;
z-index: 2;
}
#current-folder {
float: left;
color: white;
background: rgba(0,0,0,0.2);
padding: 0.5em 1em;
min-width: 10em;
border-radius: 0.2em;
margin: 1em;
}
运行效果为
The operation effect is as follows:
接下来我们通过node.js找到用户个人文件夹所在的路径
Next, we use node. JS to find the path where the user's personal folder is located.
cnpm install osenv --save
在html文件中现实用户个人文件夹信息
Realistic User Personal Folder Information in HTML Files
<html>
<head>
<title>Lorikeet</title>
<link rel="stylesheet" href="app.css" />
</head>
<body>
<div id="toolbar">
<div id="current-folder">
<script>
document.write(getUsersHomeFolder());
</script>
</div>
</div>
</body>
</html>
第三步显示个人文件夹中的文件和文件夹
Step 3: Display files and folders in personal folders
要实现该功能我们需要做到以下事情
To achieve this function, we need to do the following things
1.获取个人文件夹中的文件和文件夹列表信息
Get information about files and folder lists in personal folders
2.对每个文件或文件夹，判断它是文件还是文件夹
For each file or folder, determine whether it is a file or a folder
3.将文件或文件夹列表信息显示到界面上，并用对应的图标区分出来
Display the list information of files or folders on the interface and distinguish them with corresponding icons.
我们需要使用async模块来处理调用一系列异步函数的情况并收集他们的结果
We need to use the async module to handle calls to a series of asynchronous functions and collect their results
cnpm install async --save
再在文件夹中写入
Write in the folder again
index.html
<html>
<head>
<title>Lorikeet</title>
<link rel="stylesheet" href="app.css" />
<script src="app.js"></script>
</head>
<body>
<template id="item-template">
<div class="item">
<img class="icon" />
<div class="filename"></div>
</div>
</template>
<div id="toolbar">
<div id="current-folder">
<script>
document.write(getUsersHomeFolder());
</script>
</div>
</div>
<div id="main-area"></div>
</body>
</html>
app.js
'use strict';
const async = require('async');
const fs = require('fs');
const osenv = require('osenv');
const path = require('path');
function getUsersHomeFolder() {
return osenv.home();
}
function getFilesInFolder(folderPath, cb) {
fs.readdir(folderPath, cb);
}
function inspectAndDescribeFile(filePath, cb) {
let result = {
file: path.basename(filePath),
path: filePath, type: ''
};
fs.stat(filePath, (err, stat) => {
if (err) {
cb(err);
} else {
if (stat.isFile()) {
result.type = 'file';
}
if (stat.isDirectory()) {
result.type = 'directory';
}
cb(err, result);
}
});
}
function inspectAndDescribeFiles(folderPath, files, cb) {
async.map(files, (file, asyncCb) => {
let resolvedFilePath = path.resolve(folderPath, file);
inspectAndDescribeFile(resolvedFilePath, asyncCb);
}, cb);
}
function displayFile(file) {
const mainArea = document.getElementById('main-area');
const template = document.querySelector('#item-template');
let clone = document.importNode(template.content, true);
clone.querySelector('img').src = `images/${file.type}.svg`;
clone.querySelector('.filename').innerText = file.file;
mainArea.appendChild(clone);
}
function displayFiles(err, files) {
if (err) {
return alert('Sorry, we could not display your files');
}
files.forEach(displayFile);
}
function main() {
let folderPath = getUsersHomeFolder();
getFilesInFolder(folderPath, (err, files) => {
if (err) {
return alert('Sorry, we could not load your home folder');
}
inspectAndDescribeFiles(folderPath, files, displayFiles);
});
}
main();
app.css
body {
padding: 0;
margin: 0;
font-family: 'Helvetica','Arial','sans';
}
#toolbar {
top: 0px;
position: fixed;
background: red;
width: 100%;
z-index: 2;
}
#current-folder {
float: left;
color: white;
background: rgba(0,0,0,0.2);
padding: 0.5em 1em;
min-width: 10em;
border-radius: 0.2em;
margin: 1em;
}
#main-area {
clear: both;
margin: 2em;
margin-top: 3em;
z-index: 1;
}
.item {
position: relative;
float: left;
padding: 1em;
margin: 1em;
width: 6em;
height: 6em;
text-align: center;
}
.item .filename {
padding-top: 1em;
font-size: 10pt;
}
当然也有新建images文件夹，放入文件夹和文件两个图标
Of course, there are also new images folder, put in folder and file icons
https://openclipart.org/detail/83893/file-icon
https://openclipart.org/detail/137155/folder-icon
一个图片保存为directory.svg 一个图片保存为file.svg
A picture is saved as directory. SVG and a picture is saved as file. svg
项目运行结果为
The results of project operation are as follows:
by我还差的很远
本文的例子学习自 <<跨平台桌面应用开发基于Electron与NW.js>>这本书
跟我一起使用electron搭建一个文件浏览器应用吧（二）的更多相关文章
- 跟我一起使用electron搭建一个文件浏览器应用吧（四）
在软件的世界里面,创建一个新项目很容易,但是坚持将他们开发完成并发布却并非易事.分发软件就是一个分水岭, 分水岭的一边是那些完成的被全世界用户在用的软件,而另外一边则是启动了无数项目却没有一个完成的. ...
- 跟我一起使用electron搭建一个文件浏览器应用吧（三）
第二篇博客中我们可以看到我们构建的桌面应用会显示我们的文件及文件夹. In the second blog, we can see that the desktop application we bu ...
- Electron构建一个文件浏览器应用(一)
在window.mac.linux系统中,他们都有一个共同之处就是以文件夹的形式来组织文件的.并且都有各自的组织方式,以及都有如何查询和显示哪些文件给用户的方法.那么从现在开始我们来学习下如何使用El ...
- Electron构建一个文件浏览器应用(二)
在前一篇文章我们已经学习到了使用Electron来构建我们的文件浏览器了基础东西了,我们之前已经完成了界面功能和显示文件或文件夹的功能了,想看之前文章,请点击这个链接 .现在我们需要在之前的基础上来 ...
- 如何搭建一个WEB服务器项目（二）—— 对数据库表进行基本的增删改查操作
使用HibernateTemplate进行增删改查操作 观前提示:本系列文章有关服务器以及后端程序这些概念,我写的全是自己的理解,并不一定正确,希望不要误人子弟.欢迎各位大佬来评论区提出问题或者是指出 ...
- 通过rsync搭建一个远程备份系统（二）
Rsync+inotify实时备份数据 rsync在同步数据的时候,需要扫描所有文件后进行对比,然后进行差量传输,如果文件达到了百万或者千万级别以上是,扫描文件的时间也很长,而如果只有少量的文件变更了 ...
- django 搭建一个投票类网站（二）
前一篇讲了创建一个工程和一个polls的应用程序,以及配置了数据库. 这篇就继续讲吧 1.django admin模块 admin模块是django自带的模块,他让开发者可以不用管写任何代码的情况下就 ...
- 比nerdtree更好的文件浏览器：vimfiler
通过:VimFilerExplorer来打开一个文件浏览器 h:收起 t:展开 -:close 回车:进入或展开 空格:收起
- php写的非常简单的文件浏览器
php写的非常简单的一个文件浏览器,仅供参考. <?php /** * php文件浏览程序函数 showDir() * * $dirName 输入目录路径,默认php文件一级目录,不需输入: * ...
随机推荐
- Python3出现"No module named 'MySQLdb'"问题-以及使用PyMySQL连接数据库
Python3 与 Django 连接数据库,出现了报错:Error loading MySQLdb module: No module named 'MySQLdb'.原因如下:在 python2 ...
- jsonrpc环境搭建和简单实例
一.环境准备 下载需要的jar包和js文件,下载地址:https://yunpan.cn/cxvbm9DhK9tDq 访问密码 6a50 二.新建一个web工程,jsonrpc-1.0.jar复制到 ...
- 个人作业Week2-代码复审（修改明确了要求）
代码复审 零,说在前面的话 大家完成了个人项目之后,都写了很多代码. 这些代码可能: 大括号换行/不换行 使用tab缩进/使用空格缩进 变量名函数名的定义很好/不好 每个函数都有详细的注释解释函数的功 ...
- 第十次Scrum meeting
第十次Scrum meeting 任务及完成度: 成员 1.2 1.3 陈谋 任务1040:完成stackoverflow的数据处理后的json处理(100%) 任务1114-2:完成对pdf.pp ...
- Scrum Meeting day 4
第四次会议 No_00:工作情况 No_01:任务说明 待完成 已完成 No_10:燃尽图 No_11:照片记录 待更新 No_100:代码/文档签入记录 No_101:出席表 ...
- 猫咪记单词Beta版使用说明
猫咪记单词Beta版使用说明 一.项目背景 英语四级考试.六级考试.托福.雅思等英语方面的考试是现在大学生必须面对的问题.同时因为学生对手机的使用越来越频繁,而且仅仅通过书本背诵单词又比较无聊坚持的时 ...
- 小学生四则运算APP核心代码公布
Mainactivity类: package com.example.XXSCYS; import java.io.ByteArrayOutputStream; import java.io.File ...
- [问题解决]基于注解配置dubbo遇到ConnectionLoss for /dubbo/xxx问题解决
今天升级spring版本的时候,同时升级dubbo的版本,采用的是dubbo的基于注解的配置方法,采用curator作为dubbo的客户端, curator版本为4.1.0,启动之后,发现一直报错 C ...
- JavaScript代码-----位置决定结果
刚学JavaScript的时候,即使照着书上的代码敲一遍,运行的时候,得到的结果要么总是和书上的结果不同,要么是没产生效果.学到后面,才明白到其实程序的代码是没错的,错误的是代码的位置! 首先看下面这 ...
- MySQL乐观锁在分布式场景下的实践
背景 在电商购物的场景下,当我们点击购物时,后端服务就会对相应的商品进行减库存操作.在单实例部署的情况,我们可以简单地使用JVM提供的锁机制对减库存操作进行加锁,防止多个用户同时点击购买后导致的库存不 ...