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

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

如果没看过（一），可以点这里

在（一）中，程序已经能够获得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。

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