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

小白研究所

已于 2023-07-08 18:56:16 修改

阅读量353

点赞数

分类专栏： electron 前端文章标签： electron vue.js javascript

于 2023-07-08 18:37:31 首次发布

本文链接：https://blog.csdn.net/qq_26685883/article/details/131564841

版权

前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

electron

2 篇文章 0 订阅

订阅专栏

electron+vue开发值班交班系统

值班交班系统开发（一）
一、项目框架搭建
二、功能页面开发
三、electron开发（一）

值班交班系统开发（一）

用electron开发一个单机版桌面小程序，使用了vite+vue框架，eleement-plus做界面开发。sqlite3做为一个本地数据库。

我们要开发的是一个桌面单机版程序，所以方便安装部署采用了sqlite3数据库，它可以在安装程序时一起运行。
使用electron来开发桌面程序，跟网页开发一样用vue+nodejs来实现，只需要了解electron的使用和api，我也是在一边做一边学习。

https://www.electronjs.org/zh/docs/latest/tutorial/quick-start

前端框架使用的vue+element-plus,后端使用nodejs需要调用sqlite和express提供接口。程序启动会加载前端页面，同时也会启动一个端口，提供接口服务的后端功能。我们在开发时就可以一样按照前端后端分离思路来做。（刚开始考虑都通过vue来实现，用electron来加载页面就行。后面发现vue做为前端框架，没法同时兼容commonJS规范的库包，至少我没解决）

一、项目框架搭建

使用命令构建一个 Vite + Vue 项目,这样就创建了一个vite项目。

npm create vite@latest jiaoban --template vue

引入electron,electron-builder,element-plus,express,docx-templates等项目依赖进行安装。为了方便打包前后端的代码在一个工程下面，前后端用库包在一个配置里。

"dependencies": {
    "axios": "^1.4.0",
    "body-parser": "^1.20.2",
    "cors": "^2.8.5",
    "docx-templates": "^4.11.1",
    "element-plus": "^2.3.6",
    "express": "^4.18.2",
    "sqlite3": "^5.1.6",
    "vue": "^3.2.47",
    "vue-router": "^4.2.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "electron": "^25.1.1",
    "electron-builder": "^24.4.0",
    "vite": "^4.3.9"
  }

二、功能页面开发

界面用vue+element-plus进行开发，跟网页版开发没有什么区别，用axios向发送请求数据。主要看下有哪些功能：

1.当日值班：新建交班记录提交后需要到交班确认中再次确认在这里插入图片描述 2.交班确认：展示未提交的交班列表，可删除修改和确认，确认后到值班日志中查看3.值班日志：显示已确认交班记录，可以查看和导出word功能。

三、electron开发（一）

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验。简单说electron是懂前端和nodejs就可以进行桌面程序开发的框架。

在桌面程序上跑的Chromium 内核，可以把网页代码用桌面程序进行呈现。

1.创建main.js。

任何 Electron 应用程序的入口都是 main 文件。这个文件控制了主进程，它运行在一个完整的Node.js环境中，负责控制您应用的生命周期，显示原生界面，执行特殊操作并管理渲染器进程。
app 模块，它控制应用程序的事件生命周期。
BrowserWindow 模块，它创建和管理应用程序窗口。

const { app, BrowserWindow, Menu, globalShortcut, dialog, Tray } = require('electron')
const path = require('path')
const createServer = require("./app")
const download = require("./download.js")
/*隐藏electron创听的菜单栏*/
Menu.setApplicationMenu(null)
app.on('ready', () => {
  // 打开应用窗口
  mainWindow = new BrowserWindow({
    width: 1500,
    height: 800,
    minHeight: 800,
    minWidth: 1500,
    icon: path.join(__dirname, "./assets/logo.ico"),
    // fullscreen: true,
    // 预加载脚本能访问渲染进程和nodejs环境
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
      contextIsolation: false,
      webviewTag: true,
      preload: path.join(__dirname, 'preload.js')
    },
  })
  // 加载渲染进程 本地文件或者远程文件
  // mainWindow.loadURL("http://localhost:3000/")
  mainWindow.loadURL(`file://${path.join(__dirname,"../dist/index.html")}`)
  // 开启后台接口
  createServer();
  // 保存文件方法
  download.initDownload(mainWindow);
  // 注册快捷键打开调试台
  globalShortcut.register('ctrl+e', () => {
    mainWindow.webContents.toggleDevTools()
  })

  //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();
      }
    })
  });

  // 设置最小化图标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);
  });
})

app.on('will-quit', function () {
  // Unregister all shortcuts.
  globalShortcut.unregisterAll();
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

2.加载渲染进程

当我们打开一个应用窗口就可以加载我们的页面,这里的index.html就是我们vue打包后页面的入口文件。

  mainWindow.loadURL(`file://${path.join(__dirname,"../dist/index.html")}`)

3.预加载脚本

你不能直接在主进程中编辑DOM，因为它无法访问渲染器文档上下文。它们存在于完全不同的进程！当需要在渲染进程中访问到主进程环境就需要用到预加载脚本。
加载的方法：

webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }

这里通过预计加载脚本实现给window对象添加了ipcRenderer,为了实现渲染进程和主进程通信。在导出功能是会讲到。

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

4.运行和打包

安装好electron，运行时命令 electron .

提示：package.json文件中记得指定main文件路径: "main": "./electron/main.js"。

打包需要用electron-builder包，打包过程中由于网络原因下载打包依赖可能会失败，可以手动下载后放在对应路径。参考文章：

https://blog.csdn.net/Gabriel_wei/article/details/92794291

打包的配置在package.json中：
app的名字，显示图标，打包的路径，和需要的资源路径。需要是可以查看官网。

"build": {
    "productName": "值班交班系统",
    "copyright": "版权所有信息",
    "directories": {
      "buildResources": "assets",
      "output": "dist_electron"
    },
    "files": [
      "dist/**/*",
      "electron/**/*"
    ],
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    },
    "win": {
      "target": "nsis"
    }
  },

小白研究所

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
electron+vue开发值班交班系统（一）

程序启动会加载前端页面，同时也会启动一个端口，提供接口服务的后端功能。这个文件控制了主进程，它运行在一个完整的Node.js环境中，负责控制您应用的生命周期，显示原生界面，执行特殊操作并管理渲染器进程。使用electron来开发桌面程序，跟网页开发一样用vue+nodejs来实现，只需要了解electron的使用和api，我也是在一边做一边学习。我们要开发的是一个桌面单机版程序，所以方便安装部署采用了sqlite3数据库，它可以在安装程序时一起运行。app的名字，显示图标，打包的路径，和需要的资源路径。
复制链接

扫一扫