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

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. linux下向一个文件中的某行插入数据的做法

    sed -i 'ni\x' test.file        表示向test.file文件里的第n行的前面添加x内容sed -i 'na\x' test.file       表示向test.file ...

  2. Individual Project - Word frequency program——12061154Joy

    Description&Requirement: http://www.cnblogs.com/jiel/p/3978727.html 项目时间估计 理解项目要求: 1h 构建项目逻辑: 1h ...

  3. 【MOOC EXP】Linux内核分析实验八报告

    程涵  原创博客 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 进程的切换和系统的一般执行过程 知识点 ...

  4. Android中Json数据读取与创建的方法

    转自:http://www.jb51.net/article/70875.htm 首先介绍下JSON的定义,JSON是JavaScript Object Notation的缩写. 一种轻量级的数据交换 ...

  5. C#JSON与XML转换

    C#JSON转XML 输入:[{\'name\': \'yancy\',\'value\': \'0\'},{\'name\': \'jieny\',\'value\': \'1\'}] string ...

  6. githup地址

    githup地址:https://github.com/caowenjing/test.git

  7. 微信小程序cavas画图并保存

    需求背景: 因微信小程序暂不支持一键分享到朋友圈功能,故要生成图片并保存到手机相册就有两种情况: 1.需保存的图片为静态固定图片.这种情况图片可直接由后端返回,再调用小程序相应api直接保存到手机相册 ...

  8. ASP.NET MVC缓存使用

    局部缓存(Partial Page) 1.新建局部缓存控制器: public class PartialCacheController : Controller { // GET: /PartialC ...

  9. Oracle 的ORION工具简单使用

    1. 下载地址: http://www.oracle.com/technetwork/cn/topics/index-088165-zhs.html 2. linux x64 还有 windows的 ...

  10. cmd常用

    npm install -g npm              npm就自动为我们更新到最新版本 npm install -g cnpm --registry=https://registry.npm ...