玩转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改：注册页面功能实现