本文概述

为了处理文件(CRUD)的生命周期, 我们将使用对话框和文件系统组件。

对话框模块提供了用于显示本机系统对话框(例如打开文件或警报)的API, 因此Web应用程序可以提供与本机应用程序和Node.js文件系统相同的用户体验。

加载所需的依赖项

我们需要加载以下依赖项, 以执行我们要完成的任务, 例如保存, 打开删除等, 包括”操作系统”对话框。

var remote = require('remote'); // Load remote compnent that contains the dialog dependency

var dialog = remote.require('dialog'); // Load the dialogs component of the OS

var fs = require('fs'); // Load the File System to execute our common tasks (CRUD)

注意

在最新版本的Electron(> = 1)中, 请使用以下代码段访问对话框。

var app = require('electron').remote;

var dialog = app.dialog;

// Or with ECMAScript 6

const {dialog} = require('electron').remote;

建立档案

要创建文件, 我们将使用文件系统, 在这种情况下, 将使用系统的本机保存文件对话框(以检索路径)。你可以使用

let content = "Some text to save into the file";

// You can obviously give a direct path without use the dialog (C:/Program Files/path/myfileexample.txt)

dialog.showSaveDialog((fileName) => {

if (fileName === undefined){

console.log("You didn't save the file");

return;

}

// fileName is a string that contains the path and filename created in the save file dialog.

fs.writeFile(fileName, content, (err) => {

if(err){

alert("An error ocurred creating the file "+ err.message)

}

alert("The file has been succesfully saved");

});

});

读取文件内容

要读取文件路径, 我们还将使用文件系统和本机读取文件对话框。

dialog.showOpenDialog((fileNames) => {

// fileNames is an array that contains all the selected

if(fileNames === undefined){

console.log("No file selected");

return;

}

fs.readFile(filepath, 'utf-8', (err, data) => {

if(err){

alert("An error ocurred reading the file :" + err.message);

return;

}

// Change how to handle the file content

console.log("The file content is : " + data);

});

});

// Note that the previous example will handle only 1 file, if you want that the dialog accepts multiple files, then change the settings:

// And obviously , loop through the fileNames and read every file manually

dialog.showOpenDialog({

properties: [

'openFile', 'multiSelections', (fileNames) => {

console.log(fileNames);

}

]

});

更新现有文件内容

要更新现有文件, 我们仅需要使用以下代码的文件路径(如果需要再次使用filedialog或使用先前保存的文件路径, 则可以检索该文件路径)：

var filepath = "C:/Previous-filepath/existinfile.txt";// you need to save the filepath when you open the file to update without use the filechooser dialog againg

var content = "This is the new content of the file";

fs.writeFile(filepath, content, (err) => {

if (err) {

alert("An error ocurred updating the file" + err.message);

console.log(err);

return;

}

alert("The file has been succesfully saved");

});

删除档案

要删除文件, 你只需要文件的路径并使用exist和unlink方法。 exist方法检查文件是否存在, 然后使用unlink方法删除该文件。

var filepath = "C:/Path-toFile/file.txt";// Previously saved path somewhere

if (fs.existsSync(filepath)) {

fs.unlink(filepath, (err) => {

if (err) {

alert("An error ocurred updating the file" + err.message);

console.log(err);

return;

}

console.log("File succesfully deleted");

});

} else {

alert("This file doesn't exist, cannot delete");

}

很简单不是吗？

选择一个文件夹

你可以使用对话框选择一个文件夹, 以检索文件夹路径：

dialog.showOpenDialog({

title:"Select a folder", properties: ["openDirectory"]

}, (folderPaths) => {

// folderPaths is an array that contains all the selected paths

if(fileNames === undefined){

console.log("No destination folder selected");

return;

}else{

console.log(folderPaths);

}

});

完整的工作示例

以下html文件可用于在你的项目中进行测试, 以了解文件系统的工作方式。该代码将生成一个简单的Crud UI。

Our Code World

---

var remote = require('remote');

var dialog = remote.require('dialog');

var fs = require('fs');

document.getElementById('select-file').addEventListener('click', function(){

dialog.showOpenDialog(function (fileNames) {

if(fileNames === undefined){

console.log("No file selected");

}else{

document.getElementById("actual-file").value = fileNames[0];

readFile(fileNames[0]);

}

});

}, false);

document.getElementById('save-changes').addEventListener('click', function(){

var actualFilePath = document.getElementById("actual-file").value;

if(actualFilePath){

saveChanges(actualFilePath, document.getElementById('content-editor').value);

}else{

alert("Please select a file first");

}

}, false);

document.getElementById('delete-file').addEventListener('click', function(){

var actualFilePath = document.getElementById("actual-file").value;

if(actualFilePath){

deleteFile(actualFilePath);

document.getElementById("actual-file").value = "";

document.getElementById("content-editor").value = "";

}else{

alert("Please select a file first");

}

}, false);

document.getElementById('create-new-file').addEventListener('click', function(){

var content = document.getElementById("content-editor").value;

dialog.showSaveDialog(function (fileName) {

if (fileName === undefined){

console.log("You didn't save the file");

return;

}

fs.writeFile(fileName, content, function (err) {

if(err){

alert("An error ocurred creating the file "+ err.message)

}

alert("The file has been succesfully saved");

});

});

}, false);

function readFile(filepath) {

fs.readFile(filepath, 'utf-8', function (err, data) {

if(err){

alert("An error ocurred reading the file :" + err.message);

return;

}

document.getElementById("content-editor").value = data;

});

}

function deleteFile(filepath){

fs.exists(filepath, function(exists) {

if(exists) {

// File exists deletings

fs.unlink(filepath, function(err){

if(err){

alert("An error ocurred updating the file"+ err.message);

console.log(err);

return;

}

});

} else {

alert("This file doesn't exist, cannot delete");

}

});

}

function saveChanges(filepath, content){

fs.writeFile(filepath, content, function (err) {

if(err){

alert("An error ocurred updating the file"+ err.message);

console.log(err);

return;

}

alert("The file has been succesfully saved");

});

}

玩得开心 ！