今天给小伙伴们分享 手把手撸后台系列一：使用electron+vite.js创建后台之登录/注册模块。

登录、注册页整体分为左右两列布局，顶部导航栏采用镂空背景展示。

左侧背景使用了css3的 backdrop-filter 来实现毛玻璃效果。这里参考了苹果官网的导航背景虚化。

backdrop-filter属性可以使透过该层的底部元素模糊化。而元素本身内容却丝毫不受其影响。

新建登录模板login.vue

<template>    <div>        <div class="nt__lgregWrapper flex1 flexbox flex-col vui__drag">            <WinBar title=" " transparent>                <template #wbtn>                    <Lang />                    <a class="wbtn" title="扫码登录" @click="handleShowQR"><i class="iconfont icon-saoma"></i></a>                    <a class="wbtn" title="设置"><i class="iconfont icon-shezhi1"></i></a>                </template>            </WinBar>            <template v-if="!isShowQrcode">                <div class="nt__lgregBox flex1 flexbox">                    <div class="sidebox">                        <div class="filter flexbox flex-col">                            <div class="logo"><img src="/static/vlogo.png" /></div>                            <h2 class="subtit">ELECTRON-VUE3-VADMIN</h2>                        </div>                    </div>                    <div class="forms flex1 flexbox">                        <form @submit.prevent="handleSubmit">                            <ul class="clearfix">                                <li class="flexbox flex-alignc"><input class="iptxt flex1" type="text" v-model="formObj.tel" :placeholder="t('views__auth-form_placeholder-tel')" autocomplete="off" maxLength="11" /><em class="borLine"></em></li>                                <li class="flexbox flex-alignc"><input class="iptxt flex1" type="password" v-model="formObj.pwd" :placeholder="t('views__auth-form_placeholder-pwd')" autocomplete="off" /><em class="borLine"></em></li>                            </ul>                            <div class="btns"><button class="vui__btn vui__btn-primary btn__submit" type="submit">{{t('views__auth-form_btn-login')}}</button></div>                                                        <div class="lgregLink align-c clearfix">                                <router-link class="navigator" to="#">{{t('views__auth-form_link-forgetpwd')}}</router-link>                                <router-link class="navigator" to="/auth/register">{{t('views__auth-form_link-register')}}</router-link>                            </div>                        </form>                    </div>                </div>            </template>            <template v-else>                <div class="nt__lgregBox flex1 flexbox">                    <div class="sidebox">                        <div class="filter flexbox flex-col">                            <div class="logo"><img src="/static/vlogo.png" /></div>                            <h2 class="subtit">ELECTRON-VUE3-VADMIN</h2>                        </div>                    </div>                    <div class="forms flex1 flexbox flex-col">                        <div class="qrcode"><img src="/static/placeholder/wx-qrcode.jpg" /></div>                        <div style="text-align:center;">{{t('views__auth-form_saoma-tips')}}</div>                        <div class="btns"><button class="vui__btn vui__btn-primary btn__submit" @click="handleShowQR" style="width: 150px;">{{t('views__auth-form_saoma-back')}}</button></div>                    </div>                </div>            </template>        </div>    </div></template>

顶部导航组件设置transparent属性，则可实现沉浸式透明背景。并且右上角图标按钮支持自定义配置。只需在具名插槽wbtn中新增标签即可。

<WinBar title=" " transparent>    <template #wbtn>        <Lang />        <a class="wbtn" title="扫码登录" @click="handleShowQR"><i class="iconfont icon-saoma"></i></a>        <a class="wbtn" title="设置"><i class="iconfont icon-shezhi1"></i></a>        ...    </template></WinBar>

<script>import { ref, reactive, inject } from 'vue'import { useStore } from 'vuex'import { useI18n } from 'vue-i18n'import { createWin } from '@/windows/actions'import Lang from '@/components/Lang'export default {    components: {        Lang    },    setup() {        const { t } = useI18n()        const store = useStore()        const v3layer = inject('v3layer')        const utils = inject('utils')        const isShowQrcode = ref(false)        const formObj = reactive({})        const handleShowQR = () => {            isShowQrcode.value = !isShowQrcode.value        }        const V3Msg = (content) => {            v3layer.message({                content: content, icon: 'error', xclose: true, shade: true,            })        }        const handleSubmit = () => {            if(!formObj.tel){                V3Msg(t('views__auth-form_tel-empty'))            }else if(!utils.checkTel(formObj.tel)){                V3Msg(t('views__auth-form_tel-error'))            }else if(!formObj.pwd){                V3Msg(t('views__auth-form_pwd-empty'))            }else{                store.commit('SET_ISLOGIN', true);                store.commit('SET_TOKEN', utils.secretKey());                store.commit('SET_USER', formObj.tel);                                v3layer.popover({                    content: t('views__auth-form_login-success'),                    icon: 'success',                    shade: true,                    time: 2,                    onEnd: () => {                        createWin({isMainWin: true})                    }                })            }        }        return {            t,            isShowQrcode,            handleShowQR,            formObj,            handleSubmit,        }    }}</script>

在vue2.x中使用vue-i118n国际化，只需调用this.$t('xxx')，而在vue3.x项目中则是使用useI18n实现，注意需把 t 给return出去。

在locale目录下的views文件夹里即可配置语言。

注册页面和登录页面功能基本一样，只是多了一个60s倒计时验证码。

// 60s倒计时const handleVcode = () => {    if(!formObj.tel) {        V3Msg(t('views__auth-form_tel-empty'))    }else if(!utils.checkTel(formObj.tel)) {        V3Msg(t('views__auth-form_tel-error'))    }else {        data.time = 60        data.disabled = true        countDown()    }}const countDown = () => {    if(data.time > 0) {        data.vcodeText = `${t('views__auth-form_getcode')}(${data.time})`        data.time--        setTimeout(countDown, 1000)    }else{        data.vcodeText = t('views__auth-form_getcode')        data.time = 0        data.disabled = false    }}

好了，使用electron+vite.js开发后台之登录/注册模块就分享到这里。