04_将文件拖到页面上渲染

  新建一个文件夹，和之前一样，在Vscode终端中输入yarn create electro-app 拖动。

  在index.html中添加以下代码，JS文件夹和render.js都是新建的：

   首先，css文件一般是和html结合使用的，相当于html是结构，css是样式。在index.css中添加以下代码：

  在index.js中添加以下代码。这对于节点接口来说是必不可少的：

之后在 render.js 中输入：

letholder = document.querySelector('#holder')
让 readlist = document.querySelector('#readlist')
让 fs = require('fs')

/* drop事件负责处理文件放置（释放）后的操作，而dragover事件则用于控制放置前的交互和状态。这两个事件可以一起使用来完全处理拖放操作*/holder.addEventListener('drop', (e) => { //事件监听，如果有拖动，则执行回调函数
    e.preventDefault(); // 默认阻止事件的方式，默认是拖到窗口上就会自动打开
    e.stopPropagation(); // 防止冒泡
    控制台.log(e); // 将 e 对象打印到控制台
    
    //打印每个文件对象的信息以及输出文件路径
    for(const file of e.dataTransfer.files) { // dataTransfer 对象通常用于拖放操作中传输数据
        控制台.log(文件)
        console.log('文件路径：', file.path)
        fs.readFile(file.path, (err, data) => { // 读取路径
            如果（错误）{
                控制台.log(错误);
            }
            别的{
                /* 创建一个新的 div 元素，给它一个类名和内部内容，然后将其添加到 readlist 元素 */
                let newDiv = document.createElement('div') // 创建一个新的 div 元素节点并将其存储在变量 newDiv 中
                newDiv.className = "读取文件"
                newDiv.innerHTML = `
                    
${文件名}
                    
${数据}
                `
                readlist.appendChild(newDiv)
            }
        })
    }
});holder.addEventListener('dragover', (e) => {
    e.preventDefault();
    e.stopPropagation();
});

  最后在Vscode终端中输入yarn start即可启动应用程序。

  效果如下：