0
点赞
收藏
分享

微信扫一扫

玩转Vben Admin第3改:登录页面配置

登录页面有很多内容需要调整,不同网站需要重新编译前端就非常麻烦。

下面改成通过后端代码来控制登录页面的效果。

第一步:首先添加API接口

将下面的代码保存到 /src/api/sys/page.ts

import { defHttp } from '/@/utils/http/axios';

/**
* @description: 获得登录页的资料
*/
export interface GetLoginPageModel {
// 登录页标题
signInTitle: string;
// 登录页详情
signInDesc: string;
}

/**
* @description: getLoginPage
*/
export function getLoginPage() {
return defHttp.get<GetLoginPageModel>({ url: '/page-login' });
}

 

第二步:编辑文件 /src/views/sys/login/Login.vue

1:添加import

import { getLoginPage } from '/@/api/sys/page';

2:修改import在vue增加onBeforeMount, ref

import { computed, onBeforeMount, ref } from 'vue';

3:在</script>前添加代码

// 加载登录页数据
let LoginPage = ref({
signInTitle: '...',
signInDesc: '...',
});
onBeforeMount(async () => {
LoginPage.value = await getLoginPage();
});

4:修改页面标签

<div class="mt-10 font-medium text-white -enter-x">
<span class="inline-block mt-4 text-3xl"> {{ LoginPage.signInTitle }}</span>
</div>
<div class="mt-5 font-normal text-white dark:text-gray-500 -enter-x">
{{ LoginPage.signInDesc }}
</div>

5:修改页面标签

<LoginForm :loginPage="LoginPage" />
<ForgetPasswordForm />
<RegisterForm :loginPage="LoginPage" />
<MobileForm />
<QrCodeForm />

 

第三步:编辑文件 /src/views/sys/login/LoginForm.vue

1:在</script>前加入代码

defineProps({
loginPage: {
type: Object,
default() {
return {
login_button_resetpwd: false,
login_button_mobile: false,
login_button_qr: false,
login_button_reg: false,
};
},
},
});

2:编辑HTML标签(忘记密码)

<ACol v-if="loginPage.login_button_resetpwd" :span="loginPage.login_button_resetpwd.span">
<FormItem :style="{ 'text-align': 'right' }">
<!-- No logic, you need to deal with it yourself -->
<Button type="link" size="small" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">
{{ t('sys.login.forgetPassword') }}
</Button>
</FormItem>
</ACol>

3:编辑HTML标签(手机登录、二维码登录、注册)

<ARow class="enter-x">
<ACol
v-if="loginPage.login_button_mobile"
:md="loginPage.login_button_mobile.md"
:xs="loginPage.login_button_mobile.xs"
>
<Button block @click="setLoginState(LoginStateEnum.MOBILE)">
{{ t('sys.login.mobileSignInFormTitle') }}
</Button>
</ACol>
<ACol
v-if="loginPage.login_button_qr"
:md="loginPage.login_button_qr.md"
:xs="loginPage.login_button_qr.xs"
class="!my-2 !md:my-0 xs:mx-0 md:mx-2"
>
<Button block @click="setLoginState(LoginStateEnum.QR_CODE)">
{{ t('sys.login.qrSignInFormTitle') }}
</Button>
</ACol>
<ACol
v-if="loginPage.login_button_reg"
:md="loginPage.login_button_reg.md"
:xs="loginPage.login_button_reg.xs"
>
<Button block @click="setLoginState(LoginStateEnum.REGISTER)">
{{ t('sys.login.registerButton') }}
</Button>
</ACol>
</ARow>

4:取消默认账号密码

const formData = reactive({
account: '',
password: '',
});

 

第四步:编辑文件 /src/views/sys/login/RegisterForm.vue

1:在</script>前添加代码

defineProps({
loginPage: {
type: Object,
default() {
return {
reg_formitem_mobile: false,
reg_formitem_sms: false,
reg_formitem_policy: false,
};
},
},
});

2:编辑HTML标签(手机号码、验证码)

<FormItem name="mobile" class="enter-x" v-if="loginPage.reg_formitem_mobile">
<Input
size="large"
v-model:value="formData.mobile"
:placeholder="t('sys.login.mobile')"
class="fix-auto-fill"
/>
</FormItem>
<FormItem name="sms" class="enter-x" v-if="loginPage.reg_formitem_sms">
<CountdownInput
size="large"
class="fix-auto-fill"
v-model:value="formData.sms"
:placeholder="t('sys.login.smsCode')"
/>
</FormItem>

3:编辑HTML标签(我同意)

<FormItem class="enter-x" name="policy" v-if="loginPage.reg_formitem_policy">
<!-- No logic, you need to deal with it yourself -->
<Checkbox v-model:checked="formData.policy" size="small">
{{ loginPage.reg_formitem_policy.text }}
</Checkbox>
</FormItem>

 

第五步:添加服务端代码(采用koa框架编写,仅作参考)

router.get(`${sPathRoot}/page-login`, async (ctx, next) => {
//获取登录页面的资料
ctx.body.code = 0;
ctx.body.type = 'success';
ctx.body.message = 'ok';
ctx.body.result = {};
ctx.body.result.signInTitle = '欢迎使用';
ctx.body.result.signInDesc = '后台管理系统';
//ctx.body.result.login_button_resetpwd = { span: 12 };
//ctx.body.result.login_button_mobile = { md: 8, xs: 24 };
//ctx.body.result.login_button_qr = { md: 8, xs: 24 };
ctx.body.result.login_button_reg = { md: 24, xs: 24 };
//ctx.body.result.reg_formitem_mobile = true;
//ctx.body.result.reg_formitem_sms = true;
//ctx.body.result.reg_formitem_policy = { text: '我同意xx隐私政策' }
});

 

完成,至此登录界面已经能够由后端代码进行控制了。
登录的API接口提交功能已经自带,可以开发后端登录代码了。

下面请看​​玩转Vben Admin第4改:注册页面功能实现​​

 

举报

相关推荐

0 条评论