wordpress 兼职,seo推广分析关键词的第一个步骤,山东省住房和城乡建设厅网站,网站建设到底怎么回事前面已经讲了不少基础知识#xff0c;这篇开始#xff0c;我们进行实操#xff0c;做个后台管理系统#xff0c;打包成多端的,可安装的桌面app!!其中#xff0c;登录#xff0c;退出的提示信息用系统的提示#xff0c;不使用elemengplus的弹窗提示#xff01;#xff…前面已经讲了不少基础知识这篇开始我们进行实操做个后台管理系统打包成多端的,可安装的桌面app!!其中登录退出的提示信息用系统的提示不使用elemengplus的弹窗提示 实现效果 核心代码实现
login.vue文件
templatediv classlogin-form animated puffIndiv classlogin-form__left/divdiv classlogin-form__righth2荣耀科技财务管理系统/h2el-form:modelloginFormrefloginFormRefsizelargeshow-messagelabel-positiontoplabel-width100px:rulesrulesstatus-iconel-form-item label用户名 propusernameel-inputv-modelloginForm.usernameplaceholder请输入用户名/el-input/el-form-itemel-form-item label密码 proppasswordel-inputtypepasswordv-modelloginForm.passwordplaceholder请输入密码/el-input/el-form-itemel-form-itemel-buttonclasslogin-btntypeprimarykeydown.enterhandleKeyDownLoginclick.native.preventhandleLogin登录/el-button/el-form-itemel-form-itemel-buttonclassregistry-btntypesuccessclick.native.preventhandleRegister注册/el-button/el-form-itemel-form-itemdiv classlogin-ctrlel-checkboxlabel记住我v-modelloginForm.checked/el-checkboxel-link typeprimary忘记密码?/el-link/div/el-form-item/el-form/div/div
/templatescript setup
import { ref, reactive, toRaw, onMounted, onUnmounted } from vue
import userStore from /store/user
import { useRouter } from vue-routerconst 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()
}
/scriptstyle scoped langscss
.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;}}
}
/stylepinia的配置
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打包文件里面安装到本地即可以使用 注意事项
win11的弹窗是正常显示
如果电脑系统是win10,很可能弹不出右下角的系统弹窗是系统处于安全角度的考虑但是mac和win11是没有问题的这里贴出解决方案。 electron在win10不弹窗的bug
