《金融行业前端探索》（1）开篇使用electron-vite-vue 搭建一个金融终端框架之登录功能

前言

《金融行业前端探索》专题系列文章将构建现代化金融应用的技术与实践，提供理论知识和技术原理，还通过丰富的案例和实例，带大家一步步实现一个简易的金融终端系统的核心功能，帮助读者将所学知识应用于实际项目中。此系列文章，适用于对金融行业前端感兴趣的同学，以及对前端跨端、可视化、AI技术、大数据等方面感兴趣的同学。需要提前了解技术：electron、vite、vue，和其他前端基础知识等。

本文为《金融行业前端探索》第1篇文章 ：开篇使用electron-vite-vue 搭建一个金融终端框架之登录功能，包含以下小结：

【1】金融终端产品概况

【2】金融前端前端浅析

【3】使用electron-vite-vue 搭建一个金融终端框架之登录功能

图片来源

一、金融终端产品概况

金融终端系统通常包括股票、债券、期货、外汇、基金、指数、权证、宏观行业等多项品种， 7×24×365不间断地为金融机构、政府组织、企业、媒体、证券分析师、基金经理等专业金融人士提供准确、及时、完整的金融数据资讯等功能。

目前我国各大证券、基金、银行通常都有自己的金融终端产品，也有一些互联网公司也同样提供一些互联网金融，比如支付宝的理财、腾讯的微证券，当然在金融行业里，金融科技公司的终端产品在金融行业里是中流砥柱，恒生聚源金融终端、万得的Wind金融终端、同花顺的iFinD、东方财富的choice、森浦qeubee终端、寰擎信DM等

二、金融前端前端浅析

金融终端前端结合思考点：

1. 用户个性化定制：金融终端用户的需求各不相同，需要提供个性化的功能和界面定制。前端需要支持用户自定义布局、自选股票、自定义指标等功能，以满足用户的个性化需求。当然也要针对用户不同终端（web、windows、MAC、LINUX等）支持，意味着需要掌握前端跨端技术。
2. 实时行情数据更新：金融市场中的数据更新非常频繁，因此金融行业前端需要支持实时数据的更新和展示。这可以通过使用WebSocket等技术与后端建立实时连接，并实时接收并展示最新的数据。
3. 复杂的数据可视化：金融终端通常需要展示大量的数据，包括行情数据、财务数据、技术指标等。前端需要支持复杂的数据可视化，如绘制K线图、柱状图、折线图等来展示数据，并提供交互功能，如缩放、平移、指标切换等。
4. 智能搜索：随着ChartGPT的发展运用，应用最前沿机器学习AI技术---NLP自然语言解析，意图识别，OCR图像识别，知识图谱等，结合搜索引擎与爬虫技术打造全金融领域的智能搜索也必不可少。
5. 插件系统：金融系统里EXCEL插件、分析工具等
6. 安全性和数据保护：金融数据具有敏感性和重要性，前端需要考虑安全性和数据保护。这包括数据传输的加密、用户身份验证、权限管理等措施，以保护用户数据的安全。

三、使用electron-vite-vue 搭建一个金融终端框架之登录功能

金融终端的框架特点简析

金融终端一般布局对不同功能区域进行大面积分割，区域内部保留足够的空隙，让数据图表自身形成不同模块。通常分为上下左右区域：

• 顶部：顶部的左侧通常为logo和菜单导航栏，顶部的中间或者右侧一般为 一些搜索、系统设置、个人信息等功能区域
• 左侧：一般是菜单导航栏以及一些菜单设置功能区域，通常为了更好的展示内容区域，左侧通常也设计为可以展开和收起功能
• 中间：为内容区域，包含tab页签，和网页内容模块
• 底部：底部通常是滚动行情或者新闻、搜索（键盘精灵）网络等功能展示区

搭建 electron-vite 项目

更多相关资料可以移步到electron-vite官网

# 在命令行中运行以下命令：
npm create @quick-start/electron@latest
# 然后按照提示操作即可!
npm install npm run dev

执行上面的操作后我们可以得到目录的项目，并安装必要的Vue（当然也可以react）生态比如路由，组件库，sass等依赖。

.
├──src
│  ├──main
│  │  ├──index.ts
│  │  └──...
│  ├──preload
│  │  ├──index.ts
│  │  └──...
│  └──renderer    # with vue, react, etc.
│     ├──src
│     ├──index.html
│     └──...
├──electron.vite.config.ts
├──package.json
└──...

设置系统托盘

几乎全部端类系统启动应用后，都将在菜单栏中看到应用的图标logo，比如微信，qq等。它还涉及到鼠标悬停的时候显示应用名称提示，右键菜单，点击事件应用出现或隐藏，以及消息提示等功能。

要在 Electron 应用的菜单栏中设置图标，可以使用 Electron 的 Tray 模块

  // 创建 Tray 对象并设置图标
  appTray = new Tray(icon)
  // 创建菜单并设置到 Tray 对象中
  trayMenuTemplate = [
    {
      label: 'FT金融终端',
      click: function () {
        // 打开外部链接
        shell.openExternal('https://github.com/HongqingCao/electron-vite-vue-ft')
      }
    },
    {
      label: '退出FT',
      click: function () {
        // 退出
        trayClose = true
        app.quit()
      }
    }
  ]

  appTray.setToolTip('FT金融终端')
  // 图标的上上下文
  contextMenu = Menu.buildFromTemplate(trayMenuTemplate)

  // 设置此图标的上下文菜单
  appTray.setContextMenu(contextMenu)

在上面代码中，我们使用 setToolTip 方法将应用的名称或描述设置为鼠标经过时的缩小文字描述。在创建 Tray 对象后，我们调用 setToolTip 方法，并传递应用的名称或描述作为参数。

启动 Electron 应用后，当鼠标经过任务栏图标时，将显示FT金融终端。右键会显示菜单等功能。

设置登录页

（1）我们在renderer编写登录页面

登录页的编写，具体可以看看目录src\renderer\src\views\login\index.vue ，值得一提的是，我们-webkit-app-region: drag 来设置拖拽应用，用-webkit-app-region: no-drag 来将其中部分需要交互的区域排除拖拽，正如我们这个登录页，在输入账户和密码登录按钮等地方是不需要拖拽的。

当然如果设置了-webkit-app-region: drag 的DOM只有拖拽事件，其他的比如输入、点击事件是不生效的。

（2）在 Electron 主进程中创建一个窗口，并加载我们的登录页

我们在目录里编写src\main\index.js

const { app, BrowserWindow } = require('electron');
const path = require('path');
const loginURL = is.dev ? `http://localhost:5173/#login` : `file://${__dirname}/index.html#login`


/**
 * 创建登录窗口
 */
function createLoginWindow() {
  if (loginWindow) {
    return
  }

  loginWindow = new BrowserWindow({
    show: true,
    width: 768,
    height: 480,
    frame: false, // 无边框
    transparent: true, // 透明
    resizable: false,

    webPreferences: {
      nodeIntegration: true
    }
  })

  loginWindow.loadURL(loginURL)

  loginWindow.once('ready-to-show', () => {
    loginWindow.show()
  })

  loginWindow.on('closed', () => {
    loginWindow = null
  })
  
    ipcMain.on('minimize', () => {
    loginWindow.minimize()
  })

  ipcMain.on('close', () => {
    loginWindow.destroy()
  })

}

app.whenReady().then(() => {
  // Set app user model id for windows
  electronApp.setAppUserModelId('com.electron')

  app.on('browser-window-created', (_, window) => {
    optimizer.watchWindowShortcuts(window)
  })

  createLoginWindow()
  createTray()
  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createLoginWindow()
  })
})

在上述代码，我们使用 BrowserWindow 创建一个新的窗口，并使用 loadFile 方法加载我们的登录页，我们可以根据的需求处理应用程序逻辑。

设置、最小化、和关闭功能

同时我们右上角还有设置、最小化、和关闭功能。通过 ipcRenderer 向主进程中发送操作事件，主进程对操作事件进行响应。这样就完成了完整的事件交互，例如，最小化功能是在点击了之后执行 const minimize = () => ipcRenderer.send('minimize') 这个方法，随后通知到主进程进行了这个操作 ipcMain.on('minimize', () => { loginWindow.minimize() })

当然里面的登录逻辑可以根据自身业务需要进行处理，比如为了安全考虑，通常建议在登录页中使用真正的身份验证机制（例如后端 API 或身份验证库）来验证用户名和密码，而不仅仅依赖于前端的输入验证等。这里我们就简单做个校验，前端进行跳转到首页。

本项目代码地址：github.com/HongqingCao...

最后

本文从金融终端产品概况、金融前端前端浅析 然后带大家使用electron-vite-vue 搭建一个金融终端框架之登录功能，包含了系统托盘、登录页，以及一些设置、最小化、和关闭功能做一些介绍。下一篇我们将继续讲解登入后的首页框架以及展示功能。

下一篇： 《金融行业前端探索》（2）使用electron-vite-vue 搭建一个金融终端首页框架

本文为稀土掘金技术社区首发签约文章，30天内禁止转载，30天后未获授权禁止转载，侵权必究！