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

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. YouTube视频下载的12个软件(Win和Mac)

    如今,观看视频已经成为人们生活中重要的一部分.很多时候,我们都需要用到视频,比如教育用途.会议报告.休闲娱乐以及广告宣传等.如果你觉得有时候资源不好找的话,不放去看下YouTube.YouTube是世 ...

  2. Centos下SFTP双机高可用环境部署记录

    SFTP(SSH File Transfer Protocol),安全文件传送协议.有时也被称作 Secure File Transfer Protocol 或 SFTP.它和SCP的区别是它允许用户 ...

  3. Python_每日习题_0001_数字组合

    # Topic: There are four digits: 1, 2, 3 and 4. # How many different three digits can be formed witho ...

  4. 关键字搜索：jQuery过滤器插件fastLiveFilter||显示结果条数

    引用js库 <script src="jquery-1.6.4.min.js"></script> <script src="jquery. ...

  5. Linux内核分析第七周总结

    第七章 可执行程序的装载 可执行程序的生成 可执行程序的生成: c语言代码--->经过编译器的预处理--->编译成汇编代码--->由汇编器编译成目标代码--->链接成可执行文件 ...

  6. js数组的用法

    1.数组 - - 添加元素 arr.push('abc')  向数组尾部添加元素,返回值为数组的长度 arr.unshift('abc')  向数组头部添加元素,返回值为数组的长度 2.数组 - - ...

  7. PAT 1036 跟奥巴马一起编程

    https://pintia.cn/problem-sets/994805260223102976/problems/994805285812551680 美国总统奥巴马不仅呼吁所有人都学习编程,甚至 ...

  8. Resolve Missing artifact Issue in maven

    https://jingyan.baidu.com/article/d621e8da0a5b192864913f79.html

  9. ngnix使用超时响应时间配置避坑一例

    ngnix的超时响应时间配置得比tomcat的spring mvc响应时间还小,悲剧就发生了,生产环境还不易发现. 就好比定制固定木柜没考虑进门的尺寸,横竖斜都进不去,太悲剧了.哈哈哈,以此为鉴!~

  10. [转帖]Tomcat目录结构详解

    Tomcat目录结构详解 https://www.cnblogs.com/veggiegfei/p/8474484.html 之前应该是知道一点 但是没有这么系统 感谢原作者的描述. 1.bin: 该 ...