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

这篇具有很好参考价值的文章主要介绍了前端(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) {
        // 注意要转换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起一个服务,就相当于写了一个接口前端再去调用。

// 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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue+cordova混合开发APP中向手机本地存储/读取文件

    采用 vue + cordova 开发的App, 项目首屏为 three.js 编写的3D场景 3D模型的数据是首屏启动后前端调用接口获取的json数据,数据大小30M. 用户在首页与其他页面切换时,调用该接口时间过长,并消耗大量流量 解决思路: 首页页面不销毁,做缓存. (可行,但three.js的页面内存占用量极大,不做特

    2024年02月09日
    浏览(40)
  • JS前端读取本地上传的File文件对象内容(包括Base64、text、JSON、Blob、ArrayBuffer等类型文件)

    FileReader.readAsArrayBuffer() - Web API 接口参考 | MDN FileReader 接口提供的 readAsArrayBuffer() 方法用于启动读取指定的 Blob 或 File 内容。当读取操作完成时,readyState 变成 DONE(已完成),并触发 loadend 事件,同时 result 属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据。 https://

    2024年02月15日
    浏览(53)
  • Vue读取本地静态.md并侧边栏导航跳转、展示.md文件

    vue markdown 侧边栏导航跳转 类似锚点跳转 - 灰信网(软件开发博客聚合) Vue使用mavon-editor插件解析markdown编辑预览_onpine的博客-CSDN博客 vue组件直接读取.md文档展示_vue项目中读取readme文件_小蒜瓣的博客-CSDN博客vue中使用mavonEditor(markdown编辑器插件)_兮赫的博客-CSDN博客 文档 mav

    2024年02月14日
    浏览(45)
  • 前端 Vue启动本地(.exe)文件

    首先,启动本地的.exe文件的方式有以下两种: 方式1:通过使用JS打开本地exe文件。但是一般的浏览器,由于安全问题,都会禁止掉这个JS对象,这就导致部分浏览器不支持该种方式。 方式2:利用浏览器外部协议(URL Procotol)打开本地exe文件。简单来说通过修改注册表信息,然后

    2024年02月22日
    浏览(40)
  • 前端Vue页面中如何展示本地图片

    我们使用img标签展示图片,src属性设置成图片请求路径 \\\"http://localhost:8888/image/img.jpg\\\" 的格式,也就是会向后端发送这个请求获取图片。 但是图片是存放在本地的某个文件里,那如何才能找到呢? 这就需要对这个请求的路径进行映射,以找到真正的存放图片的地址。

    2024年02月04日
    浏览(38)
  • electron 打开本地文件夹

    使用的api为 shell.openPath ,有些文章会提到 shell.openItem ,这个方法在 electron 9.0 后就废弃被 openPath 替代了。 还有 shell.openExternal ,但路径中含有中文会报错,需转码,不推荐使用。 打开E盘根目录下名为 test 的文件夹 能打开的前提是,E盘根目录下确实有这个文件夹。其次可以发

    2024年02月15日
    浏览(46)
  • electron打包Vue前端

    效果:electronforge可将前端静态页面打包成.exe、.deb和.rpm等,能适配各种平台 示例:Windows环境下将前端 Vue 项目打包成exe文件 打包后的 exe 文件 运行 exe 文件 一、项目准备 开源项目 RouYi 下载 本地环境 安装依赖 报错 3.1 原因:Node版本高了 3.2 修改 package.json 3.3 修改后的 pack

    2024年04月26日
    浏览(36)
  • 【vue2】纯前端实现本地的pdf/word/epub文件预览

    需求是预览本地的pdf/word/epub格式的文件,但是搜索后发现没有可以直接使用的,格式不同,显示的方式和效果也都略有不同。 最后还是 分别实现预览 的功能。 如果只需要预览pdf/word等格式的话,可以使用的方案:vue-office,支持多种文件(docx、excel、pdf)预览的vue组件库,支持

    2024年02月11日
    浏览(74)
  • vue纯前端实现下载excel文件,本地和测试环境都可正常下载

    vue2纯前端实现下载excel文件,本地和测试环境都可正常下载。 1、把后端给的excel文件放到本地项目文件夹中,位置如图所示: 2、在需要展示下载功能的页面中引入该excel文件,如图所示: 3、使用a链接,href绑定引入的excel文件路径,并添加download属性,download属性值就是下载

    2024年02月13日
    浏览(53)
  • springboot的配置文件如何配置可以实现多个yml相互读取

    在Spring Boot中,可以通过多种方式来实现配置文件的相互读取和组合。如果你想要在一个Spring Boot应用中使用多个YAML( .yml )配置文件,并且希望这些配置文件可以相互读取或者互相覆盖某些配置,你可以采用以下几种方法: 1. 使用 spring.config.import 属性(Spring Boot 2.4及以上版

    2024年02月20日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包