Vue 3+Vite+Eectron从入门到实战系列之(五)一后台管理登录页

前面已经讲了不少基础知识,这篇开始,我们进行实操,做个后台管理系统,打包成多端的,可安装的桌面app!!其中,登录,退出的提示信息用系统的提示,不使用elemengplus的弹窗提示!!

请添加图片描述

实现效果

请添加图片描述

核心代码实现

  • login.vue文件
<template><div class="login-form animated puffIn"><div class="login-form__left"></div><div class="login-form__right"><h2>荣耀科技财务管理系统</h2><el-form:model="loginForm"ref="loginFormRef"size="large"show-messagelabel-position="top"label-width="100px":rules="rules"status-icon><el-form-item label="用户名:" prop="username"><el-inputv-model="loginForm.username"placeholder="请输入用户名"></el-input></el-form-item><el-form-item label="密码:" prop="password"><el-inputtype="password"v-model="loginForm.password"placeholder="请输入密码"></el-input></el-form-item><el-form-item><el-buttonclass="login-btn"type="primary"@keydown.enter="handleKeyDownLogin"@click.native.prevent="handleLogin">登录</el-button></el-form-item><el-form-item><el-buttonclass="registry-btn"type="success"@click.native.prevent="handleRegister">注册</el-button></el-form-item><el-form-item><div class="login-ctrl"><el-checkboxlabel="记住我"v-model="loginForm.checked"></el-checkbox><el-link type="primary">忘记密码?</el-link></div></el-form-item></el-form></div></div>
</template><script setup>
import { ref, reactive, toRaw, onMounted, onUnmounted } from 'vue'
import userStore from '@/store/user'
import { useRouter } from 'vue-router'const loginFormRef = ref(null)
const router = useRouter()
const sysUser = userStore()
const rules = reactive({username: [{ required: true, message: '用户名不能为空', trigger: 'blur' },{ min: 3, max: 5, message: '用户名长度必须是3到5位', trigger: 'blur' }],password: [{required: true,message: '密码不能为空',trigger: 'change'},{ min: 6, max: 6, message: '用户名长度必须是6位', trigger: 'blur' }]
})
const loginForm = ref({username: '',password: '',checked: false
})const handleKeyDownLogin = (e) => {if (e.keyCode === 13) {handleLogin()}
}onMounted(() => {window.addEventListener('keydown', handleKeyDownLogin)
})
onUnmounted(() => {window.removeEventListener('keydown', handleKeyDownLogin)
})const handleLogin = async () => {const status = await loginFormRef.value.validate()if (status) {const data = toRaw(loginForm.value)const isLogin = await sysUser.sysLogin(data)// 跳转到首页if (isLogin) {router.push('/')} else {window.electronAPI.loginError()}} else {}
}
const handleRegister = () => {console.log('register')window.electronAPI.register()
}
</script><style scoped lang="scss">
.login-form {padding: 0 20px 0 0;border: 1px solid #f7f7f7;border-radius: 20px;box-shadow: 0 0 30px #c1c1c1;background: rgba(255, 255, 255, 0.5);position: absolute;top: 20%;right: 300px;display: flex;&__left {width: 480px;height: 500px;background: url(../../assets/images/bg1.png) no-repeat center center;background-size: 100% 100%;}&__right {width: 480px;height: 500px;padding: 20px;box-sizing: border-box;h2 {text-align: center;margin-bottom: 30px;font-size: 32px;font-weight: bold;color: #333;}.login-ctrl {display: flex;justify-content: space-between;width: 100%;}.el-button {width: 100%;}.login-btn {background: linear-gradient(147deg,#8ec5fc 13.33%,#1a2cab 46.22%,#610cb3 87.97%);border: none;}}
}
</style>
  • pinia的配置
import { createPinia } from "pinia";
const pinia = createPinia();export default pinia;

登录退出功能的store

import { defineStore } from 'pinia'
const userStore = defineStore('user', {state: () => ({userInfo: {name: 'admin',avatar: '',roles: ['admin'],introduction: 'I am a super administrator'},token: window.localStorage.getItem('token')}),getters: {username() {return this.userInfo.name}},actions: {setToken(token) {this.token = token},setUserInfo(userInfo) {this.userInfo = userInfo},sysLogin(data) {return new Promise((resolve, reject) => {if (data.username === 'admin' && data.password === '123456') {window.electronAPI.loginSuccess(data)// 登录成功后,将token存入本地this.setToken(data.username)window.localStorage.setItem('token', data.username)resolve(true)} else {window.electronAPI.loginError()}})},sysLogout() {return new Promise((resolve, reject) => {window.electronAPI.logout()this.setToken('')window.localStorage.removeItem('token')resolve(true)})}}
})
export default userStore

菜单收起展开的store

import { defineStore } from "pinia";
const useSysStore = defineStore("sys", {state: () => ({collapse: false,}),getters: {isCollapse() {return this.collapse;},},actions: {toggleCollapse() {console.log(this.collapse);this.collapse = !this.collapse;},},
});
export default useSysStore;

打包

npm run ele:build

打包文件里面安装到本地即可以使用

在这里插入图片描述

注意事项

如果电脑系统是win10,很可能弹不出右下角的系统弹窗,是系统处于安全角度的考虑,但是mac和win11是没有问题的,这里贴出解决方案。
electron在win10不弹窗的bug

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/399706.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于料面视频图像分析的高炉异常状态智能感知与识别

源自&#xff1a;自动化学报 作者&#xff1a;朱霁霖 桂卫华 蒋朝辉 陈致蓬 方怡静 注&#xff1a;若出现无法显示完全的情况&#xff0c;可 V 搜索“人工智能技术与咨询”查看完整文章 人工智能、大数据、多模态大模型、计算机视觉、自然语言处理、数字孪生、深度强化学习 …

shuishusihui

互斥量 使用互斥量可以用于保护某些临界资源&#xff0c;同一时间只能有一个任务来使用它。 使用互斥量会引入其他问题&#xff0c;比如说优先级反转&#xff0c;于是提出了优先级继承等方法解决问题 任务通知 任务通知就是通知任务&#xff0c;前边都是多对多的关系&#xff0…

从零开始构建基于ChatGPT的嵌入式(Embedding)本地医疗客服问答机器人模型(看完就会,看到最后有惊喜)

1、前言 代码全部开源,GitHub地址为: github.com/aehyok/go-o… 前端完全也能搭建&#xff0c; 前端完全也能搭建&#xff0c; 前端完全也能搭建&#xff0c; 本文中我使用的是后端语言golang,来调用的所有外部接口&#xff0c;但它们均是restful api,所以如果你使用的是其他…

此处不允许使用 ‘空‘ 类型

说明&#xff1a;受最近看的书《设计模式之美》&#xff08;小争哥&#xff09;的影响&#xff0c;最近编码有意将一些业务逻辑写在对象里面&#xff0c;增强封装性。在此记录一次项目启动时的报错&#xff0c;如下&#xff1a; 原因&#xff1a;当你在实体类对象中&#xff0c…

提升医疗器械维修技术必经的几个阶段

01 懵懂入门阶段 初入医疗器械维修领域&#xff0c;就如同踏入了一个充满未知的神秘世界。此时&#xff0c;菜鸟们对各种医疗器械的了解仅限于书本知识和简单的操作培训。他们可能刚刚熟悉了一些基本工具的使用方法&#xff0c;对常见的医疗器械类型和品牌有了初步的认识&#…

java设计模式-桥接模式

一. 概述 桥接模式&#xff08;Bridge Pattern&#xff09;是一种结构型设计模式&#xff0c;用于将抽象部分与其实现部分分离&#xff0c;使它们可以独立地变化。桥接模式主要目的是解决当一个类存在多个继承等级时&#xff0c;由于继承带来的耦合问题&#xff0c;以及扩展性不…

计算机网络408考研 2015

计算机网络408考研2015年真题解析_哔哩哔哩_bilibili 1 1线路编码(NRZ,NRZI,8B/10B,Manchester)与加扰_nrz编码-CSDN博客 1 1 11

19c做好这件事,大幅提升Data Pump工作效率

老司机遇到的新问题 expdp是Oracle 10g引入的数据导出工具&#xff0c;能够提供并行、压缩及元数据导出等更多的功能&#xff0c;在后续的版本中逐渐替代了传统的数据导出工具exp&#xff0c;是数据库开发运维常用的工具之一。在我的印象中&#xff0c;这个工具除了诸如大量的…

河北移动:核心系统数据库成功完成整体迁移 ,实现全栈国产|OceanBase案例

本文作者&#xff1a;移动通信集团河北有限公司架构规划专家&#xff0c;房瑞 项目背景&#xff1a; 中国移动通信集团河北有限公司一直在积极响应国家及集团的号召&#xff0c;以磐舟&磐基云原生为底座&#xff0c;结合国产浏览器、中间件、数据库、操作系统和服务器等&a…

Jupyter Notebook介绍、安装及使用教程

文章目录 一.什么是Jupyter Notebook&#xff1f;1.Jupyter Notebok简介2.组成部分3.Jupyter Notebook的主要特点 二.安装Jupyter Notebook0.先试用再决定1.安装①安装前提②使用Anaconda安装③使用pip命令安装 三.运行Jupyter Notebook0.帮助1.启动①默认端口启动②指定端口启…

零基础学会机器学习,到底要多久?

这两天啊&#xff0c;有不少朋友和我说&#xff0c;想学机器学习&#xff0c;但是之前没有基础&#xff0c;不知道能不能学得会。 首先说结论&#xff0c;只要坚持&#xff0c;就能学会&#xff0c;但是一定不能三天打鱼两天晒网&#xff0c;要持之以恒&#xff0c;至少每隔两…

自由职业四年,我整理了一些建议

我是勋荣&#xff0c;一个独立开发者。运营了自己的社群&#xff0c;有自己的软件产品。目前还在探索各种副业的路上~ 1我的独立开发之路 刚毕业就找不到Android岗位的我瑟瑟发抖。在广州&#xff0c;稀里糊涂做了Java后端开发。有一天加班 通宵&#xff0c;早上借住在同事家…

Python教程(十三):常用内置模块详解

目录 专栏列表1. os 模块2. sys 模块3. re 模块4. json 模块5. datetime 模块6. math 模块7. random 模块8. collections 模块9. itertools 模块10. threading 模块11. 加密 模块 总结 专栏列表 Python教程&#xff08;十&#xff09;&#xff1a;面向对象编程&#xff08;OOP…

【MySQL】什么是索引?了解索引的底层原理

索引的概念 索引是一种用于提高数据库查询效率的数据结构。它类似于书籍的目录&#xff0c;通过快速定位数据的方式&#xff0c;减少了数据检索的时间。索引在数据库表中可以被看作是一个指向数据的指针&#xff0c;它们存储了列的值及其对应行的位置&#xff0c;从而使得数据…

Java面试八股之消息队列有哪些协议?各种协议有哪些具体实现

消息队列有哪些协议&#xff1f;各种协议有哪些具体实现 消息队列协议是指在消息队列系统中&#xff0c;用于消息的发送、接收和管理的一套通信规则。不同的协议有着不同的特性和应用场景&#xff0c;以下是一些常见的消息队列协议及其具体实现&#xff1a; AMQP (Advanced M…

某通用系统0day审计过程

前言 代码审计篇章都是自己跟几个师傅们一起审计的1day或者0day(当然都是小公司较为简单)&#xff0c;禁止未经允许进行转载&#xff0c;发布到博客的用意主要是想跟师傅们能够交流下审计的思路&#xff0c;毕竟审计的思路也是有说法的&#xff0c;或者是相互源码共享也OK&…

mfc140.dll丢失如何修复,一步步教你如何解决mfc140.dll丢失,让电脑快速恢复正常状态!

mfc140.dll是 Microsoft Foundation Class (MFC) Library 的一部分&#xff0c;它是一个用于开发 Windows 应用程序的 C 库。当系统报告mfc140.dll丢失时&#xff0c;通常意味着某个应用程序需要这个 DLL 文件来运行&#xff0c;但系统中没有找到它。那么mfc140.dll丢失如何修复…

jetson nano远程调试说明

Jetson nano官方演示不仅需要网线、显示屏、Jetson nano开发板、HDMI线、5V的电源适配器&#xff0c;还需要USB键盘和USB鼠标&#xff0c;携带不方便。这里简单整理下可以不用使用USB键盘、USB鼠标和网线也可以演示。 硬件准备 一块 Jetson Nano ALT 开发板&#xff1b;一个 5…

WordPress原创插件:Download-block-plugin下载按钮图标美化

WordPress原创插件&#xff1a;Download-block-plugin下载按钮图标美化 https://download.csdn.net/download/huayula/89632743

Apache Tomcat服务器版本号隐藏

渗透测试时发现有一台服务器的404报错页面中&#xff0c;有Apache Tomcat的版本号信息显示&#xff0c;发生了信息泄露&#xff0c;可能导致服务器被攻击。如下所示&#xff1a; 解决步骤如下&#xff1a; 1. 隐藏HTTP响应头中的Server信息 Tomcat默认会在HTTP响应头中包含S…