前端(Electron Nodejs)如何读取本地配置文件

使用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) {// 注意要转换jsonconst config = JSON.parse(data)}
})

传递数据

现在本地数据是读取到了。如何将数据传递到我们的前端工程中(我用的是vue)?

我想到了两种办法。

第一种,通过electron窗口的方法。

// 创建window之后可以使用这个方法传递消息
// win是new BrowserWindow
// 注意消息主题是 async-messagewin.webContents.send('async-message', '消息')// 前端js中可以这么接收
import { ipcRenderer } from 'electron';// 注意 监听事件要和上边保持一致 async-messageipcRenderer.on('async-message', (e, arg) => {console.log('渲染进程===我收到啦', arg)
})

第二种,就是node起一个服务,就相当于写了一个接口前端再去调用。

// 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;// 接口地址就是 /getInfoif(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);}
})

就这样,收工......

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/13102.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

M 芯片的 macos 系统安装虚拟机 centos7 网络配置

centos 安装之前把网络配置配好或者是把网线插好 第一步找到这个 第二步打开网络适配器 选择图中所指位置 设置好之后 开机启动 centos 第三步 开机以后 编写网卡文件保存 重启网卡就可以了,如果重启网卡不管用,则重启虚拟机即可 “ ifcfg-ens160 ” 这…

黑苹果如何在macOS Sonoma中驱动博通网卡

准备资源(百度:黑果魏叔 下载) 资源包中包含:AirportBrcmFixup.kext/IOSkywalkFamily.kext/IO80211FamilyLegacy.kext/OpenCore-Patcher 使用方法: 1.将 csr-active-config 设置为 03080000 全选代码 复制 2.在 …

c++数据锁链

题目描述: 创建一个结构体为Node,具有value , next 两个属性; value为整型,用来储存结构体数值; next为Node类型指针,用来指向下一组数据地址; 第1组数据value 5; 第2组数据value …

php查询数据(日期查询)和fastadmin的日期查询

当前月查询 要在 PHP 中查询数据库中当前月份的数据,需要使用 SQL 查询语句来筛选出符合条件的数据。首先,确保数据库中有一个日期或时间类型的字段用于存储记录的日期信息。 假设你的数据库表名为 my_table,其中有一个名为 date_column 的…

MATLAB RANSAC平面拟合 (29)

MATLAB RANSAC平面拟合 (29) 一、算法简介二、函数介绍三、算法实现四、效果展示一、算法简介 将一个平面与一个从内点到平面的最大允许距离的点云相匹配。该函数返回描述平面的几何模型。该函数采用 M- 估计量样本一致性(MSAC)算法求解平面。MSAC 算法是随机样本一致性(RAN…

【C++】STL——list的介绍和使用、list增删查改函数的介绍和使用、push_back、pop_back

文章目录 1.list的使用2.list的增删查改函数(1)push_front 在list首元素前插入值为val的元素(2)pop_front 删除list中第一个元素(3)push_back 在list尾部插入值为val的元素(4)pop_ba…

常用的一些蓝图(持续更新)

文章目录 ADEIPS A Apply Damage: 对指定的actor应用伤害。 Add Mapping Context: 添加控制映射上下文。 D Do Once: 仅在第一次命中节点时触发,但可以重置。 Delay: 延迟执行。 Destroy Actor: 销毁指定的actor。 E Enhanced Input Local Player Subsystem: 从玩家…

Elasticsearch 分片策略

文章目录 分片索引设置分片获取索引分片信息示例 分片分配集群级分片分配索引级分片分配索引级分片筛选每个节点的分片总数索引恢复优先级节点掉线时延时分配 分片 和数据库中的表空间类似,不过分片是为每个索引设置,一个索引可以有多个分片&#xff0c…

TCP三次握手/四次挥手

三次握手 三次握手过程 TCP服务器进程先创建传输控制块TCB,时刻准备接受客户进程的连接请求,此时服务器就进入了LISTEN(监听)状态;TCP客户进程也是先创建传输控制块TCB,然后向服务器发出连接请求报文&…

【QT 网络云盘客户端】——登录界面功能的实现

目录 1.注册账号 2.服务器ip地址和端口号设置 3. 登录功能 4.读取配置文件 5.显示主界面 1.注册账号 1.点击注册页面,将数据 输入 到 用户名,昵称,密码,确认密码,手机,邮箱 的输入框中, 点…

【C语言学习——————动态内存管理】

文章目录 一、什么是动态内存管理二、动态内存函数的介绍 1.malloc函数的介绍2.calloc函数的介绍3.realloc函数的介绍三、free函数的介绍 一.什么是动态内存管理 我们知道数据都是在内存中进行储存的,但是如果我们需要调用内存,我们可以通过定义一个变量…

HTML <p> 标签

实例 以下代码标记了一个段落&#xff1a; <p>This is some text in a very short paragraph</p> &#xff08;在页面下部&#xff0c;您可以找到更多实例。&#xff09; 浏览器支持 元素ChromeIEFirefoxSafariOpera<p>YesYesYesYesYes 所有主流浏览器都…

网络安全系统中的守护者:如何借助威胁情报 (TI) 提高安全性

在这篇哈巴尔网站上的推文中&#xff0c;我们将解释 TI 缩写背后的含义、为什么需要它、Positive Technologies 收集哪些网络威胁数据以及如何帮助企业预防网络威胁。我们将以四种情况为例&#xff0c;说明公司如何使用 PT Threat Intelligence Feeds 来发现恶意活动并预防攻击…

TCP四次握手为什么客户端等待的时间是2MSL

目录 什么是MSL从第三次握手开始分析总结 什么是MSL MSL是Maximum Segment Lifetime英文的缩写&#xff0c;中文可以译为“报文最大生存时间”&#xff0c;他是任何报文在网络上存在的最长时间&#xff0c;超过这个时间报文将被丢弃。 从第三次握手开始分析 第三次握手服务端…

uniapp跳转到外部链接

// 一、先配置页面 {"path": "pages/webview/webview","style": {"navigationBarTitleText": ""} } // 二、编写页面 <template><web-view :src"src" /> </template><script> export def…

vue3+ts+elementui-plus二次封装树形表格

复制粘贴即可&#xff1a; 一、定义table组件 <template><div classmain><div><el-table ref"multipleTableRef" :height"height" :default-expand-all"isExpend" :data"treeTableData"style"width: 100%…

七、用 ChatGPT 修改简历

目录 一、实验介绍 二、背景 三、小张的简历 四、修改简历的技能 五、修改项目经验 5.1 项目经验

从官网认识 JDK,JRE,JVM 三者的关系

点击下方关注我&#xff0c;然后右上角点击...“设为星标”&#xff0c;就能第一时间收到更新推送啦~~~ JVM 是一些大厂面试必问点&#xff0c;要想解决 OOM、性能调优方面的问题&#xff0c;掌握 JVM 知识必不可少&#xff0c;从今天开始&#xff0c;将为大家介绍 JVM 的常用知…

[sqoop]将hive查询后的数据导入到MySQL

一、知识点 export:将Hive的表导入到mysql叫导出 搜了很多&#xff0c;发现sqoop在hive导出到mysql时 1&#xff09;不支持where参数对数据进行过滤。 2&#xff09;不支持指定hive表的方式导出&#xff0c;只能指定Hive目录进行导出。 二、操作 1、在MySQL中建表 creat…

【Docker】Docker应用部署之Docekr容器安装Nginx

目录 一、搜索镜像 二、拉取镜像 三、创建容器 四、测试使用 一、搜索镜像 docker search nginx 二、拉取镜像 docker pull nginx # 不加冒号版本号 默认拉取最新版 三、创建容器 首先我们需要在宿主机创建数据卷目录 mkdir nginx # 创建目录 cd nginx # 进入目录 mkd…