electron+vue开发值班交班系统（二）

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

值班交班系统开发（二）

一、electron开发（二）

1.窗口菜单设置

关闭默认菜单显示

/*隐藏electron创听的菜单栏*/
Menu.setApplicationMenu(null)

为了开发方便，注册快捷键打开调试台

 // 注册快捷键打开调试台
  globalShortcut.register('ctrl+e', () => {
    mainWindow.webContents.toggleDevTools()
  })

2.关闭窗口提示

//mainWindow要关闭时的方法↓
  mainWindow.on('close', e => {
    e.preventDefault(); //先阻止一下默认行为，不然直接关了，提示框只会闪一下
    dialog.showMessageBox({
      type: 'info',
      title: '提示',
      message: '确认退出？',
      buttons: ['确认', '取消', "最小化"],   //选择按钮，点击确认则下面的idx为0，取消为1
      cancelId: 1, //这个的值是如果直接把提示框×掉返回的值，这里设置成和“取消”按钮一样的值，下面的idx也会是1
    }).then(idx => {
      //注意上面↑是用的then，网上好多是直接把方法做为showMessageBox的第二个参数，我的测试下不成功
      console.log(idx)
      if (idx.response == 1) {
        e.preventDefault();
      } else if (idx.response == 0) {
        mainWindow = null
        app.exit();
      } else {
        mainWindow.hide();
        mainWindow.setSkipTaskbar(true);
        e.preventDefault();
      }
    })
  });

3.最小化托盘设置

// 设置最小化图标path.join(__dirname, "./assets/logo.ico")
  let tray = new Tray(path.join(__dirname, "./assets/logo.ico"));
  const contextMenu = Menu.buildFromTemplate([
    {
      label: "退出",
      click: () => {
        mainWindow.destroy();
        app.quit();
      },
    },
  ]);
  tray.setToolTip("交班系统");
  tray.setContextMenu(contextMenu);
  tray.on("click", () => {   // 点击托盘图标显示窗口
    mainWindow.show();
    mainWindow.setSkipTaskbar(false);
  });
})

二、后端接口开发

express 做接口开发，sqlite做数据库。

1.sqlite

SQLite 是一个软件库，实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。
使用sqlite3创建和连接数据库。
连接数据库，如果文件不存在会自动创建

const sqlite3 = require('sqlite3').verbose()
let db;
// 连接数据库
function conDb() {
  const os = require('os');
  const homedir = os.homedir(); // 用于获取当前用户的主目录路径
  const users = homedir.replace(/\\/g,'\\\\'); // 替换绝对和相对路径
  if (!db || !db.open) {
    db = new sqlite3.Database(users+'\\sql.db'); // 保存地址文件
    console.log(users+'\\sql.db')
  };
  return db;
}

module.exports = conDb

初始化数据库表

const conDb = require("./index")
let db;
function init () {
    db = conDb();

    // return new Promise((resolve,reject) => {
        db.serialize(() => {
            // 测试数据库
            db.run(`create table if not exists jiaoban (
                id integer PRIMARY KEY AUTOINCREMENT NOT NULL,
                leader1 varchar(64),
                leader2 varchar(64),
                commander1 varchar(64),
                commander2 varchar(64),
                confirm integer,
                level varchar(20),
                duty_date varchar(20),
                job varchar(5000),
                register1 varchar(5000),
                register2 varchar(5000),
                register3 varchar(5000),
                register4 varchar(5000),
                comments varchar(2000),
                created_time varchar(20),
                updated_time varchar(20)
            )`);
            
            // resolve();
        })
    // })
}
module.exports = init

2.搭建express服务

用express搭建服务，初始化数据库，并导出为模块

const express = require('express')
const cors = require('cors')
const bodyParser = require('body-parser');
const jiaobanRouter = require('./jiaobanRouter')
const init = require("./config/initdb")
const createServer = () => {
    // 初始化表字段
    init();
    const app = express()
    // 跨域
    app.use(cors())
    app.use(bodyParser.json({ extended: false }));
    app.listen(3001, () => console.log("监听3001"))
    // 路由表
    app.use('/api', jiaobanRouter)
}
module.exports = createServer

在electron main.js文件引入，当窗口打开后在启动后台服务

// 加载渲染进程
  // mainWindow.loadURL("http://localhost:3000/")
  mainWindow.loadURL(`file://${path.join(__dirname,"../dist/index.html")}`)
  // 开启后台接口
  createServer();
  // 保存文件方法

后台接口主要是curd,不做过多介绍。

3.sqlite3打包

引入sqlite3模块后打包时是需要python和visual studio环境，需要安装npm i windows-build-tools。安装过程还比较麻烦。

三、导出word功能

比较麻烦的功能就是生成word导出的功能

1.生成word

使用docx-templates库，利用做好的word模板，把数据填进去。

// import createReport from 'docx-templates';
const docxTemplates = require("docx-templates")
const fs = require("fs")
const path = require("path")
const handlerData = require("./handlerData")
async function genWord(filePath,data) {
    // 获取模板
    const template = fs.readFileSync(path.join(__dirname,'123.docx'));
    // 处理数据
    const newdata = handlerData(data)

    const buffer = await docxTemplates.createReport({
        template,
        data: newdata,
        cmdDelimiter: ['{', '}'],
    });
    
    fs.writeFileSync(filePath, buffer)
}

module.exports = genWord

2.保存文件

保存文件需要使用electron的dialog模块，获取到用户想保存文件的路径进行写入

dialog.showSaveDialog(win, {
            title: '导出值班日志',
            buttonLabel: '保存',
            defaultPath: params.fileName,
            filters: [
                {
                    // 只读取js文件
                    name: '值班日志', extensions: ['docx']
                }
            ]
        }).then(res => {
            if (res.filePath) {
                filePath = res.filePath
                console.log(filePath)
                genWord(filePath,params.data)
            }
        })

3.ipcMain通信

想要在渲染进程和主进程间通信，通过ipcMain模块在主进程监听事件

// 监听渲染进程发出的download事件
    ipcMain.on('download', (evt, params) => {
        console.log(params)
        dialog.showSaveDialog(win, {
            title: '导出值班日志',
            buttonLabel: '保存',
            defaultPath: params.fileName,
            filters: [
                {
                    // 只读取js文件
                    name: '值班日志', extensions: ['docx']
                }
            ]
        }).then(res => {
            if (res.filePath) {
                filePath = res.filePath
                console.log(filePath)
                genWord(filePath,params.data)
            }
        })
    })

在预加载脚本中吧ipcRender模块暴露给渲染进程，渲染进程可以触发事件，发起保存文件事件。

const { ipcRenderer } = require('electron')
window.ipcRenderer = ipcRenderer

---

总结

整个程序功能比较简单，但用到了electron+vue大部分功能。主要是在理解electron使用，还是采用前后端分离的思路来做。electron打包配置也还是比较麻烦，会遇到一些安装问题。sqlite的使用比较简单麻烦的还是打包。word生成导出功能，用到了ipcMain通信，是这里比较麻烦的功能。