我正在做我的第一个Electron应用程序。我正在尝试将文本文件保存到 appData 文件夹(示例C:UsersuserAppDataRoaming(。我知道我需要在某处添加import { app } from "electron";，但我不确定将其放置在哪里。
在我的index.jsjavascript 中，我正在将用户在其表单中提交的数据库设置写入文本文件。这是我需要appData目录地址的地方。
// Write data to text file
var filepath = app.getPath("appData")
var filename = "database_quick_image_forensics.txt"
var inp_data = inp_host + "|" + inp_username + "|" + inp_password + "|" + inp_database_name + "|" + inp_table_prefix;
write_to_file(filepath, filename, inp_data);
我的整个代码如下：
./setup/index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Setup</title>
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="../_webdesign/dark/dark.css" />
<!-- // CSS -->
<!-- jQuery -->
<script>window.$ = window.jQuery = require('../javascripts/jquery/jquery-3.4.1.js');</script>
<script src="../javascripts/jquery/jquery-3.4.1.js" charset="utf-8"></script>
<!-- //jQuery -->
<!-- jQuery -->
<script src="./index.js" charset="utf-8"></script>
<!-- //jQuery -->
</head>
<body>
<div id="main_single_column">
<h1>Setup</h1>
<!-- Feedback -->
<div id="feedback_div" class="success">
<p id="feedback_p">Success</p>
</div>
<!-- //Feedback -->
<!-- Database connection form -->
<p>Host:<br />
<input type="text" name="inp_host" id="inp_host" value="localhost" />
</p>
<p>Port:<br />
<input type="text" name="inpport" id="inp_port" value="" />
</p>
<p>Username:<br />
<input type="text" name="inp_username" id="inp_username" value="root" />
</p>
<p>Password:<br />
<input type="text" name="inp_password" id="inp_password" />
</p>
<p>Database name:<br />
<input type="text" name="inp_database_name" id="inp_database_name" value="quick" />
</p>
<p>Table prefix:<br />
<input type="text" name="inp_table_prefix" id="inp_table_prefix" value="cf_" />
</p>
<p>
<button id="form_connect_to_database_submit">Connect to database</button>
</p>
<!-- //Database connection form -->
</div>
</body>
</html>
./setup/index.js：
const fs = require('fs');
// Action = On submit
$(document).ready(function(){
$("#form_connect_to_database_submit").click( function() {
// Feedback
$('#feedback_div').show();
$('#feedback_div').removeClass("success");
$('#feedback_div').addClass("info");
$('#feedback_p').text("Connecting!")
// get all the inputs
var inp_host = $("#inp_host"). val();
var inp_username = $("#inp_username"). val();
var inp_password = $("#inp_password"). val();
var inp_database_name = $("#inp_database_name"). val();
var inp_table_prefix = $("#inp_table_prefix"). val();
// Test connection
var connection_result = connect_to_database(inp_host, inp_username, inp_password, inp_database_name, inp_table_prefix);
if(connection_result != "connection_ok"){
// Connection Failed
$('#feedback_div').removeClass("info");
$('#feedback_div').addClass("error");
$('#feedback_p').text(connection_result)
}
else{
// Connection OK
$('#feedback_div').removeClass("info");
$('#feedback_div').addClass("success");
$('#feedback_p').text("Connected")
// Write data to text file
var filepath = app.getPath("appData")
var filename = "database_quick_image_forensics.txt"
var inp_data = inp_host + "|" + inp_username + "|" + inp_password + "|" + inp_database_name + "|" + inp_table_prefix;
$('#feedback_p').text("Connected " + filepath)
write_to_file(filepath, filename, inp_data);
// Feedback
$('#feedback_div').removeClass("info");
$('#feedback_div').addClass("success");
$('#feedback_p').text("Connected to")
}
});
$('#inp_host').focus();
});
// Function connect to database
function connect_to_database(inp_host, inp_username, inp_password, inp_database_name, inp_table_prefix){
var mysql = require('mysql');
// Add the credentials to access your database
var connection = mysql.createConnection({
host : inp_host,
user : inp_username,
password : null, // or the original password : 'apaswword'
database : inp_database_name
});
// connect to mysql
connection.connect(function(err) {
// in case of error
if(err){
console.log(err.code);
console.log(err.fatal);
return err.code;
}
});
// Perform a query
$query = 'SELECT * FROM `cf_admin_liquidbase` LIMIT 10';
connection.query($query, function(err, rows, fields) {
if(err){
console.log("An error ocurred performing the query.");
console.log(err);
return;
}
console.log("Query succesfully executed", rows);
});
return "connection_ok";
} // connect_to_database
// Function write setup
function write_to_file(filepath, filename, inp_data){
var fullpath = filepath + "\" + filename;
fs.writeFile(fullpath, inp_data, (err) => {
// throws an error, you could also catch it here
if (err) throw err;
// success case, the file was saved
console.log('Lyric saved!');
});
} // write_to_file
./main.js：
const { app, BrowserWindow } = require('electron')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win
function createWindow () {
// Create the browser window.
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// and load the index.html of the app.
win.loadFile('index.html')
// Open the DevTools.
// win.webContents.openDevTools()
// Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null
})
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow()
}
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
我知道
我需要从"电子"添加导入{应用程序};有些地方，但我 我不确定把它放在哪里。
应用程序模块始终(根据我的经验(导入到您的main过程中，以便您可以控制应用程序生命周期。但是，如果你想在renderer过程中使用一些app模块功能，你可以通过remote模块将其导入到那里(如本问题的接受答案所示：如何使用electron的app.getPath((来存储数据？
const remote = require('electron').remote;
const app = remote.app;
console.log(app.getPath('userData'));
main和renderer过程是Electron的关键概念，所以我建议阅读这些概念。要点是你有一个main进程——它没有可视化表示，它涉及应用程序的生命周期、创建和销毁renderer进程(如 BrowserWindows(、渲染器进程之间的通信等。 – 您可以根据需要拥有任意数量的renderer流程。
因此，如果您想读取和写入文件，您可以在renderer过程中完成，如上所示 - 或者您可以在main过程中完成。在后一种情况下，如果renderer进程想要保存文件，它可以通过 IPC 向main进程发送消息，发送要保存的数据。
你以哪种方式去做是一种架构选择。
获取主进程的应用路径。然后在您的主服务器上使用此代码.js
switch(process.platform) {
case 'darwin': {
return path.join(process.env.HOME, 'Library', 'Application Support', ...);
}
case 'win32': {
return path.join(process.env.APPDATA, ...);
}
case 'linux': {
return path.join(process.env.HOME, ...);
}
}
并从渲染器获取路径，然后在渲染器中使用此代码
const remote = require('electron').remote;
const app = remote.app;
console.log(app.getPath('userData'));
但是要在渲染器中使用 require，请确保节点集成是真的。
如果我是你，我将在主进程中获取应用程序路径并将文件存储在主进程中。因此，在渲染器进程中导入许多依赖项不是一个好的选择。渲染器进程主要负责在 Chromium 浏览器中显示您的应用。
因此，要在主进程中执行此操作。使用这个
在您的主.js
const { ipcMain } = require('electron')
const appPath = () => {
switch(process.platform) {
case 'darwin': {
return path.join(process.env.HOME, 'Library', 'Application Support');
}
case 'win32': {
return process.env.APPDATA;
}
case 'linux': {
return process.env.HOME;
}
}
}
const writeToFile = (fileName, inData) => {
const fullPath = path.join(appPath(), "\", fileName);
fs.writeFile(fullPath, inData, (err) => {
// throws an error, you could also catch it here
if (err) throw err;
// success case, the file was saved
console.log('Lyric saved!');
});
} // write_to_file
ipcMain.on('WRITE_TEXT', async (event, arg) => {
writeToFile(arg.fileName, arg.inData)
});
在渲染器进程中添加此代码。
const {ipcRenderer} = require('electron')
ipcRenderer.sendSync('WRITE_TEXT',{fileName, inData})
如您所见，在渲染器进程中，这是通过"WRITE_TEXT">IPC 通道将inp_data发送到主进程。
这里还有一件事，在你的代码中。您在渲染器上连接数据库，这是可能的，但这不是正确的选择。请在拥有多个渲染器时思考。您也应该将其移至主进程。