electron实战之Electron+Vue+Vite+ElementPlus操作本地配置文件

Electron+Vue+Vite+ElementPlus 实战

electron集成vue的介绍可以看之前的文章。
最终实现的功能，使用Vue+Vite+ElementPlus搭建页面，然后通过electron将页面的表单信息保存到本地config.properties文件中。

properties类型文件的读写

本来使用properties-parser这个库来读写properties文件，但是实际使用发现这个库不支持中文内容，
所以就这个库的代码改了一下，本来这个库也只有一个js文件，不是太麻烦。

然后封装成需要的方法：

const PropertiesParser = require('./pp');

/**
 * 读取.properties文件
 * @param filePath 配置文件路径
 * @returns {Promise<any|void>}
 */
exports.readPropertiesFile = async (filePath) => {
    return await PropertiesParser.read(filePath)
}

/**
 * 写入多个配置到文件
 * @param filePath  配置文件路径
 * @param data 键值对对象
 * @returns {Promise<void>}
 */
exports.writeFields = async (filePath, data) => {
    const editor = PropertiesParser.createEditor(filePath);

    for (const key in data) {
        editor.set(key, '' + data[key]);
    }
    editor.unset()
    await editor.save(filePath);
}

/**
 * 写入单个个配置到文件
 * @param filePath 配置文件路径
 * @param k
 * @param v
 * @returns {Promise<void>}
 */
exports.writeField = async (filePath, k, v) => {
    const editor = PropertiesParser.createEditor(filePath);
    editor.set(k, v);
    editor.unset()
    await editor.save(filePath);
}

electron的main.js以及preload.js文件编写

在preload中定义两个接口供页面使用，调用接口的时候触发相应进程通信的事件。

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('myAPI', {
    // 读取配置文件
    readConfig: (callback) => ipcRenderer.invoke('readConfig', callback),
    // 保存配置项
    saveConfig: (config, callback) => ipcRenderer.invoke('saveConfig',config, callback),
})

main.js监听前端触发的读写事件并调用上面封装的properties接口

app.whenReady().then(() => {
    // 读取配置文件
    ipcMain.handle('readConfig', (event) => {
        return readPropertiesFile(configPath)
    });

    // 保存配置文件
    ipcMain.handle('saveConfig', async (event, config) => {
        console.log(config)
        await writeFields(configPath, config)
    });
    createWindow()
})

页面表单内容

这里用element写了一个表单包含input输入框、radio单选框和保存按钮。
页面刚加载的时候会读取配置文件，填入表单，当点击保存按钮的时候在把表单内容保存的本地config.properties文件

<script setup>
import {ref} from 'vue'

const config = ref({})
// 读取配置文件
window.myAPI.readConfig().then(res => {
  config.value = res
  console.log(config);
})
// 保存配置文件
const onSubmit = () => {
  const s = JSON.parse(JSON.stringify(config.value))
  console.log(s)
  window.myAPI.saveConfig(s)
}
</script>

<template>
  <div>
    <el-form :model="config" label-width="120px">
      <el-form-item label="用户名">
        <el-input v-model="config.name" placeholder="输入用户名"/>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="config.sex">
          <el-radio label="男" />
          <el-radio label="女" />
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>

</style>

页面效果

点击保存之后config.properties文件内容

name=张三
sex=男

这样就实现了使用Electron+Vue+Vite+ElementPlus来操作本地配置文件的功能。
老规矩，附上0积分下载的源码

大家有什么问题都可以在评论区留言，相互学习！