Electron - Gestion des fichiers
La gestion des fichiers est une partie très importante de la création d'une application de bureau. Presque toutes les applications de bureau interagissent avec les fichiers.
Nous allons créer un formulaire dans notre application qui prendra comme entrée, un nom et une adresse e-mail. Ce formulaire sera enregistré dans un fichier et une liste sera créée qui l'affichera comme sortie.
Configurez votre processus principal à l'aide du code suivant dans le main.js fichier -
const {app, BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')
let win
function createWindow() {
win = new BrowserWindow({width: 800, height: 600})
win.loadURL(url.format ({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
}
app.on('ready', createWindow)Ouvrez maintenant le index.html fichier et entrez le code suivant -
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>File System</title>
<link rel = "stylesheet"
href = "./bower_components/bootstrap/dist/css/bootstrap.min.css" />
<style type = "text/css">
#contact-list {
height: 150px;
overflow-y: auto;
}
</style>
</head>
<body>
<div class = "container">
<h1>Enter Names and Email addresses of your contacts</h1>
<div class = "form-group">
<label for = "Name">Name</label>
<input type = "text" name = "Name" value = "" id = "Name"
placeholder = "Name" class = "form-control" required>
</div>
<div class = "form-group">
<label for = "Email">Email</label>
<input type = "email" name = "Email" value = "" id = "Email"
placeholder = "Email" class = "form-control" required>
</div>
<div class = "form-group">
<button class = "btn btn-primary" id = "add-to-list">Add to list!</button>
</div>
<div id = "contact-list">
<table class = "table-striped" id = "contact-table">
<tr>
<th class = "col-xs-2">S. No.</th>
<th class = "col-xs-4">Name</th>
<th class = "col-xs-6">Email</th>
</tr>
</table>
</div>
<script src = "./view.js" ></script>
</div>
</body>
</html>Nous devons maintenant gérer l'événement d'ajout. Nous ferons cela dans notreview.js fichier.
Nous allons créer une fonction loadAndDisplayContacts () qui chargera initialement les contacts à partir du fichier. Après avoir créé la fonction loadAndDisplayContacts () , nous allons créer un gestionnaire de clics sur notreadd to listbouton. Cela ajoutera l'entrée au fichier et à la table.
Dans votre fichier view.js, entrez le code suivant -
let $ = require('jquery')
let fs = require('fs')
let filename = 'contacts'
let sno = 0
$('#add-to-list').on('click', () => {
let name = $('#Name').val()
let email = $('#Email').val()
fs.appendFile('contacts', name + ',' + email + '\n')
addEntry(name, email)
})
function addEntry(name, email) {
if(name && email) {
sno++
let updateString = '<tr><td>'+ sno + '</td><td>'+ name +'</td><td>'
+ email +'</td></tr>'
$('#contact-table').append(updateString)
}
}
function loadAndDisplayContacts() {
//Check if file exists
if(fs.existsSync(filename)) {
let data = fs.readFileSync(filename, 'utf8').split('\n')
data.forEach((contact, index) => {
let [ name, email ] = contact.split(',')
addEntry(name, email)
})
} else {
console.log("File Doesn\'t Exist. Creating new file.")
fs.writeFile(filename, '', (err) => {
if(err)
console.log(err)
})
}
}
loadAndDisplayContacts()Maintenant, exécutez l'application, en utilisant la commande suivante -
$ electron ./main.jsUne fois que vous y avez ajouté des contacts, l'application ressemblera à -
Pour plus fs module API calls, veuillez vous reporter au didacticiel sur le système de fichiers Node .
Maintenant, nous pouvons gérer les fichiers en utilisant Electron. Nous verrons comment appeler les boîtes de dialogue d'enregistrement et d'ouverture (native) pour les fichiers dans le chapitre boîtes de dialogue.