使用electron封装了前端界面之后,最终打包为一个客户端(exe)。但是,最近项目组内做CS(c++开发)的,想把所有的配置都放进安装目录的配置文件中(比如config.json)。这做法,对于纯前端而言有点难以接收。
第一,纯前端不允许读取本地文件。就这一条,直接封死所有的路。
第二,读取配置,前端可以通过可视化界面存入本地缓存,不必要读取本地文件。
基于以上两点,我觉得读取本地文件不可能实现,况且时间紧任务重。奈何,前端话语权微乎其微。
最后,我咬着牙,实现了一下读取本地文件的需求。如有更好的方案,可以私信评论。
首先,纯js肯定干不了读取本地文件的事情。那么,只能用nodejs了。况且,electron内部已经集成了nodejs,所以使用nodejs是必然选择。
读取本地文件
需要分两步走。
第一,先获取本系统的安装目录。第二,使用fs读取config配置文件。具体代码如下:
// 获取 exe 的安装目录
// 使用electron 内部的方法 app.getPath
// 配置文件 background.js 中写入如下代码
import {
app,
protocol,
BrowserWindow,
Menu,
Tray,
globalShortcut,
ipcMain,
dialog
} from 'electron';
// 获取安装目录
// 这里要注意 获取的安装目录是反斜杠 也就是 c:\dev\xxxx
// 这肯定是不行的 nodejs在使用这种地址是读取不了的
// 所以 后边加了一个replace 用于转换反斜杠
let exePath = path.dirname(app.getPath('exe')).replace(/\\/g, "/");
// 拼接好安装目录下的config.json
let configPath = `${exePath}/config.json`;
// 使用fs读取文件内容
const fs = require('fs');
fs.readFile(configPath, 'utf-8', (err, data) => {
if (data) {
// 注意要转换json
const config = JSON.parse(data)
}
})
传递数据
现在本地数据是读取到了。如何将数据传递到我们的前端工程中(我用的是vue)?
我想到了两种办法。
第一种,通过electron窗口的方法。
// 创建window之后可以使用这个方法传递消息
// win是new BrowserWindow
// 注意消息主题是 async-message
win.webContents.send('async-message', '消息')
// 前端js中可以这么接收
import { ipcRenderer } from 'electron';
// 注意 监听事件要和上边保持一致 async-message
ipcRenderer.on('async-message', (e, arg) => {
console.log('渲染进程===我收到啦', arg)
})
第二种,就是node起一个服务,就相当于写了一个接口前端再去调用。文章来源:https://www.toymoban.com/news/detail-603197.html
// nodejs 写一个服务
// 定义一个暂存数组 用于后边关闭并清除socket服务
var sockets = [];
// 创建一个httpserver
const http = require('http');// 创建服务器对象
const server = http.createServer();
const closeServer = () => {
sockets.forEach(function(socket){
socket.destroy();
});
server.close(function(){
console.log("close server!");
});
}
// res.local_port 就是我们上边读取本地配置后的内容
server.listen(res.local_port);// 对错误进行捕获
server.on('error', (err) => {
if (err.code == 'EADDRINUSE') {
// 如果目标端口被占用将使用
// NodeJS 随机分配的端口号
server.listen(0);
}
});// 在成功监听后,向终端输出被监听的端口号
server.on('listening', () => {
console.log('【HTTP Server is running at http://127.0.0.1:' + server.address().port + ' 】')
})
server.on("connection",function(socket){
sockets.push(socket);
//console.log('sockets', sockets);
socket.once("close",function(){
sockets.splice(sockets.indexOf(socket),1);
});
});
server.on('request', function (req, res) {
const url = req.url;
// 接口地址就是 /getInfo
if(url === '/getInfo') {
res.setHeader('content-type', 'application/json');
res.end(ws_path);
closeServer();
} else {
res.writeHeader(404);
res.end('404 not found');
closeServer();
}
})
// 前端工程中 请求这个接口 就可以获取配置信息了
axios.get('http://127.0.0.1:3000/getInfo').then(res => {
if (res.code == 200) {
console.log('这里就是请求本地的配置 -- ', res.data);
}
})
就这样,收工......文章来源地址https://www.toymoban.com/news/detail-603197.html
到了这里,关于前端(Electron Nodejs)如何读取本地配置文件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!