这个文件浏览器应用可以具备以下两种功能噢～

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搭建一个文件浏览器应用吧（二）的更多相关文章

  1. 跟我一起使用electron搭建一个文件浏览器应用吧（四）

    在软件的世界里面,创建一个新项目很容易,但是坚持将他们开发完成并发布却并非易事.分发软件就是一个分水岭, 分水岭的一边是那些完成的被全世界用户在用的软件,而另外一边则是启动了无数项目却没有一个完成的. ...

  2. 跟我一起使用electron搭建一个文件浏览器应用吧（三）

    第二篇博客中我们可以看到我们构建的桌面应用会显示我们的文件及文件夹. In the second blog, we can see that the desktop application we bu ...

  3. Electron构建一个文件浏览器应用(一)

    在window.mac.linux系统中,他们都有一个共同之处就是以文件夹的形式来组织文件的.并且都有各自的组织方式,以及都有如何查询和显示哪些文件给用户的方法.那么从现在开始我们来学习下如何使用El ...

  4. Electron构建一个文件浏览器应用(二)

    在前一篇文章我们已经学习到了使用Electron来构建我们的文件浏览器了基础东西了,我们之前已经完成了界面功能和显示文件或文件夹的功能了,想看之前文章,请点击这个链接  .现在我们需要在之前的基础上来 ...

  5. 如何搭建一个WEB服务器项目（二）—— 对数据库表进行基本的增删改查操作

    使用HibernateTemplate进行增删改查操作 观前提示:本系列文章有关服务器以及后端程序这些概念,我写的全是自己的理解,并不一定正确,希望不要误人子弟.欢迎各位大佬来评论区提出问题或者是指出 ...

  6. 通过rsync搭建一个远程备份系统（二）

    Rsync+inotify实时备份数据 rsync在同步数据的时候,需要扫描所有文件后进行对比,然后进行差量传输,如果文件达到了百万或者千万级别以上是,扫描文件的时间也很长,而如果只有少量的文件变更了 ...

  7. django 搭建一个投票类网站（二）

    前一篇讲了创建一个工程和一个polls的应用程序,以及配置了数据库. 这篇就继续讲吧 1.django admin模块 admin模块是django自带的模块,他让开发者可以不用管写任何代码的情况下就 ...

  8. 比nerdtree更好的文件浏览器：vimfiler

    通过:VimFilerExplorer来打开一个文件浏览器 h:收起 t:展开 -:close 回车:进入或展开 空格:收起

  9. php写的非常简单的文件浏览器

    php写的非常简单的一个文件浏览器,仅供参考. <?php /** * php文件浏览程序函数 showDir() * * $dirName 输入目录路径,默认php文件一级目录,不需输入: * ...

随机推荐

  1. 第三个Sprint ------第十一天

    四则运算APP推广: 1通过微信公众平台推广APP,写一片软文,然后推送出去.分享朋友圈.QQ空间. 2通过微博推广APP,@各微博大户. 3让之前内侧的同学转发给自己的小弟小妹或者侄女侄子! 总结: ...

  2. html 空白汉字占位符&#12288;

    在爬取京东评论时,复制html内容,发现文本中有些空格的宽度没见过.后来用htmlParser解析html页面时,发现这些空格都被替换为　. 12288是Unicode编码,&#表示宋体,&a ...

  3. shell脚本--输入与输出

    输出带有转义字符的内容 单独一个echo表示一个换行 使用echo输出时,每一条命令之后,都默认加一个换行:要想取消默认的换行,需要加 -n 参数. #!/bin/bash #文件名:test.sh ...

  4. Solution of wireless link "PCI unknown" on Centos 7.1

    Pick From http://www.blogjava.net/miaoyachun/archive/2015/09/17/427366.html After Centos 7.1 tobe in ...

  5. JMeter性能测试基础 (4)-使用JMeter录制测试脚本

    在进行压力测试时,由于很多web页面包含了Ajax异步请求等内容,为模拟用户真实输入,除了对html的访问外,还需要将其它的访问考虑入内,这时最好的办法就是对实际访问过程中的所有请求进行录制. 例如, ...

  6. Oracle 使用PLSQL 导出 一个表的insert 语句

    1. 使用工具 plsql . GUI的方法,如图示 2. 操作界面 3. 然后就看到了插入语句

  7. Linux 文件系统概览

    本文导航 -定义07% -文件系统的基本功能12% -目录结构26% -Linux 统一目录结构50% -文件系统类型74% -挂载81% -结论90% -下个月92%   本文旨在高屋建瓴地来讨论 ...

  8. JavaScript DOM方法表格添加删除

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  9. mysql 数据表备份导出，恢复导入操作实践

    因为经常跑脚本的关系, 每次跑完数据之后,相关的测试服数据库表的数据都被跑乱了,重新跑脚本恢复回来速度也不快,所以尝试在跑脚本之前直接备份该表,然后跑完数据之后恢复的方式,应该会方便一点.所以实践一波 ...

  10. double转换为二进制

    arctan 在verilog 里是1qn或2qn格式,所以要把浮点数转换成1qn格式 1.dec2bin(十进制整数变为二进制) Convert decimal to binary number i ...