用Electron开发一个文件浏览器（二）

偏执的太偏执、 2022-03-14 08:44 272阅读 0赞

先附上[Github地址][Github]，源码都在这上面。

如果没看过（一），[可以点这里][Link 1]

在（一）中，程序已经能够获得home目录和home目录下的所有文件、文件夹的路径所代表的文件对象。可是现在的主界面除了最顶上的工具栏，其它的都是空白。所以我们需要把获得到的那些文件对象转换为图形界面。

首先在`html`文件中添加文件的模板。

<template id='fileItem-template'>
        <div class="fileItem">
            <img src="" alt="" class="fileIcon">
            <div class="fileName"></div>
        </div>
    </template>

接下来我们需要为这个模板填充内容。

function displayFile(file){
        
        const mainArea = document.getElementById('main-area');
        const template = document.querySelector('#fileItem-template');
        let   clone    = document.importNode(template.content, true);
        clone.querySelector('img').src = `images/${
          file.type}.png`;
        clone.querySelector('.fileName').innerHTML = file.fileName;
        clone.querySelector('.fileItem').setAttribute('filepath', file.path);
        let fileItem = clone.querySelector('.fileItem');
        mainArea.appendChild(clone);
    }

使用`document`对象的`importNode`方法可以复制模板下的所有节点。然后将`fileIcon`的`src`属性就设置为`类型名+.png`的形式。这样的话便于扩展，以后如果想要显示更多种文件，仅需添加不同种文件对于的图标即可。

设置完文件图标跟名称之后将其添加进主区域，也就是`main-area`。

保存重新打开程序，此时的程序看起来就跟（一）中一开始附的图很类似了。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]

[Github]: https://github.com/Meskjei/Electron-fileExplorer
[Link 1]: https://blog.csdn.net/hjc256/article/details/88070871
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]: /images/20220313/bb5dcd93ea444ec4967ba9983daffac8.png