electron-vite【实战】登录/注册页

效果预览

在这里插入图片描述

项目搭建

https://blog.csdn.net/weixin_41192489/article/details/144611858

技术要点

路由默认跳转到登录页

src/renderer/src/router/index.ts

  routes: [// 默认跳转到登录页{path: '/',redirect: '/login'},...routes]

登录窗口的必要配置

src/main/index.ts 中

  const mainWindow = new BrowserWindow({// 自定义图标icon: icon,// 自定义窗口宽度width: 360,// 自定义窗口高度height: 430,//默认隐藏窗口show: false,// 隐藏窗口标题栏titleBarStyle: 'hidden',// 隐藏默认菜单autoHideMenuBar: true,// 不可改变窗口大小resizable: false,// 窗口不可最大化maximizable: false,webPreferences: {preload: join(__dirname, '../preload/index.js'),sandbox: false}})

右上角关闭按钮的实现

src/renderer/src/pages/login.vue

  <div class="text-right"><el-iconclass="el-icon-edit text-20px hover:bg-red hover:text-white cursor-pointer p-2"@click="quit"><Close/></el-icon></div>

渲染进程向主进程发送信息

function quit() {window.electron.ipcRenderer.send('quit')
}

src/main/index.ts 主进程响应信息

ipcMain.on('quit', () => {app.quit()
})

代码实现

src/renderer/src/router/index.ts

import { createRouter, createWebHashHistory } from 'vue-router'
import { routes, handleHotUpdate } from 'vue-router/auto-routes'export const router = createRouter({// 此处需用 Hash 模式，否则打包后路由会失效history: createWebHashHistory(import.meta.env.BASE_URL),routes: [// 默认跳转到登录页{path: '/',redirect: '/login'},...routes]
})// 支持热更新
if (import.meta.hot) {handleHotUpdate(router)
}

src/main/index.ts

import { app, shell, BrowserWindow, ipcMain, Tray, Menu } from 'electron'
import { join } from 'path'
import { electronApp, optimizer, is } from '@electron-toolkit/utils'
import icon from '../../resources/icon.png?asset'function createWindow(): void {const mainWindow = new BrowserWindow({// 自定义图标icon: icon,// 自定义窗口宽度width: 360,// 自定义窗口高度height: 430,//默认隐藏窗口show: false,// 隐藏窗口标题栏titleBarStyle: 'hidden',// 隐藏默认菜单autoHideMenuBar: true,// 不可改变窗口大小resizable: false,// 不可改变窗口大小maximizable: false,webPreferences: {preload: join(__dirname, '../preload/index.js'),sandbox: false}})// 托盘const tray = new Tray(icon)const contextMenu = [{label: '退出',click: function () {app.exit()}}]const menu = Menu.buildFromTemplate(contextMenu)tray.setToolTip('EC编程俱乐部')tray.setContextMenu(menu)tray.on('click', () => {// 使窗口显示在任务栏中mainWindow.setSkipTaskbar(false)mainWindow.show()})// IPC通信ipcMain.on('showPage_home', () => {// 窗口可调整大小mainWindow.setResizable(true)mainWindow.setSize(800, 680)// 窗口居中mainWindow.center()// 窗口可最大化mainWindow.setMaximizable(true)})ipcMain.on('top', () => {mainWindow.setAlwaysOnTop(true)})ipcMain.on('cancle_top', () => {mainWindow.setAlwaysOnTop(false)})ipcMain.on('hide', () => {// 使窗口不显示在任务栏中mainWindow.setSkipTaskbar(true)mainWindow.hide()})ipcMain.on('min', () => {mainWindow.minimize()})ipcMain.on('max', () => {mainWindow.maximize()})ipcMain.on('cancel_max', () => {mainWindow.unmaximize()})mainWindow.on('ready-to-show', () => {// 自定义标题mainWindow.setTitle('EC编程俱乐部')mainWindow.show()})// 窗口变为最大化状态mainWindow.on('maximize', () => {mainWindow.webContents.send('maximize')})// 窗口从最大化状态退出mainWindow.on('unmaximize', () => {mainWindow.webContents.send('unmaximize')})mainWindow.webContents.setWindowOpenHandler((details) => {shell.openExternal(details.url)return { action: 'deny' }})if (is.dev && process.env['ELECTRON_RENDERER_URL']) {mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])} else {mainWindow.loadFile(join(__dirname, '../renderer/index.html'))}
}app.whenReady().then(() => {// Set app user model id for windowselectronApp.setAppUserModelId('com.electron')app.on('browser-window-created', (_, window) => {optimizer.watchWindowShortcuts(window)})createWindow()app.on('activate', function () {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})ipcMain.on('quit', () => {app.quit()
})app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit()}
})

src/renderer/src/pages/login.vue

仅前端页面渲染，省略了表单校验和后端交互。

<script setup lang="ts">
const form = reactive({ account: '', password: '', remember: false, passwordConfirm: '' })const loginWay_list = [{ icon: 'mdi:wechat', color: '#07cd66' },{ icon: 'flat-color-icons:phone-android' },{ icon: 'icon-park:tencent-qq' }
]const PageType = ref('login')function goToRegister() {PageType.value = 'register'
}function goToLogin() {PageType.value = 'login'
}const router = useRouter()function submit_login() {window.electron.ipcRenderer.send('showPage_home')router.push('/home')
}
function quit() {window.electron.ipcRenderer.send('quit')
}
</script><template><div class="text-right"><el-iconclass="el-icon-edit text-20px hover:bg-red hover:text-white cursor-pointer p-2"@click="quit"><Close/></el-icon></div><div class="w-360px bg-white p-8 pt-2 box-border overflow-hidden"><div class="text-28px font-bold text-center p-6">{{ PageType === 'login' ? 'EC 编程俱乐部' : '注册 EC' }}</div><!-- 表单 --><el-form :model="form"><el-form-item><el-input v-model="form.account" placeholder="请输入账号"><template #prefix><Icon icon="mdi:account" /></template></el-input></el-form-item><el-form-item><el-input v-model="form.password" placeholder="请输入密码"><template #prefix><Icon icon="wpf:password1" /></template></el-input></el-form-item><el-form-item v-if="PageType === 'register'"><el-input v-model="form.passwordConfirm" placeholder="请再次输入密码"><template #prefix><Icon icon="mdi:password-check-outline" /></template></el-input></el-form-item><div v-if="PageType === 'login'" class="flex justify-between items-center"><div><el-checkbox v-model="form.remember" label="自动登录" size="large" /></div><div><el-link type="primary" :underline="false">忘记密码</el-link><el-text type="primary"> / </el-text><el-link type="primary" :underline="false" @click="goToRegister">注册</el-link></div></div><el-form-item><el-button v-if="PageType === 'login'" type="primary" class="w-full" @click="submit_login">登录</el-button><el-button v-if="PageType === 'register'" type="primary" class="w-full">注册</el-button></el-form-item><div v-if="PageType === 'register'" class="text-right"><el-link type="primary" :underline="false" @click="goToLogin">已有账号</el-link></div></el-form><div v-if="PageType === 'login'"><el-divider><span class="text-10px">其他登录方式</span></el-divider><div class="flex justify-around"><Iconv-for="(item, index) in loginWay_list":key="index":icon="item.icon":style="{color: item.color}"class="inline-block text-24px cursor-pointer"/></div></div></div>
</template>