Administrator dbd4a8e86f docs: update wg-basic/custom-login-page

2021-09-01 09:53:47 +00:00

7.8 KiB

Raw Blame History

title	description	published	date	tags	editor	dateCreated
4.自定义登录框	通过上传Vue代码和CSS样式来自定义登录框	true	2021-09-01T09:53:46.150Z	wg-basic	markdown	2021-07-29T06:23:40.688Z

添加菜单

该功能为附属功能，不做自动创建菜单处理菜单链接：/route/login-form/list

新增表单

打开菜单，点击“新增”按钮，新增登录框

名称：表单的名称
激活状态：表单是否使用，同一时间有且只能有一个表单被激活，当没有表单激活时，系统会使用默认登录表单
预览图：表单最终的效果图。
form表单代码：表单html代码，用vue完成对表单的动态渲染。
form表单样式：表单的CSS样式控制，不包含表单局左、居中、居右样式
form表单居左样式：只填写表单居左CSS样式
form表单居中样式：只填写表单居中CSS样式
form表单居右样式：只填写表单居右CSS样式

原理

登录页面中已经集成了layui、vue等框架，并实现了相关必要方法，如下：

错误信息提示：打开页面时，如果包含错误信息，会自动弹出提示信息。
轮播背景图片：如果在 系统配置 中添加了背景图片，页面会自动加载。
记住我（密码）：该功能需要结合表单中的checkbox来实现，点击时需要在标签上添加 lay-filter="rememberFilter" 属性用于触发。
表单提交：该功能需要对表单添加事件处理，form表单元素上添加 @submit.prevent="submitForm" 事件。
刷新验证码：验证码图片添加 @click=refreshVerificationCode($event) 即可实现。

表单中的固定元素

在编写表单时，元素的样式是需要自定义的，而元素的必要属性如 name、v-model、id 等则要与 页面参数（pageParams） 与 表单数据（formData） 一致。 form表单外的div标签的 class 属性需要有 layui-form。

表单中的元素如下

用户名输入框：

<input type="text" v-model="formData.username" id="username" name="username" lay-verify="username" placeholder="用户名">

其中的 v-model 绑定了 formData 中的 username 属性，id 和 name 则需要固定为 username。为了使用页面上的用户名验证方法，这里又添加了 lay-verify="username" 属性，添加该属性之后，在提交form表单时页面会判断用户名是否为空。

密码输入框：

<input type="password" v-model="formData.password" id="password" name="password" lay-verify="password" placeholder="密码">

验证码输入框：

<input type="text" v-model="formData.verificationCode" id="verificationCode" name="verificationCode" lay-verify="verificationCode" placeholder="图形验证码">

验证码图片：

<img src="oauth/verification-code/png" @click="refreshVerificationCode($event)">

登录按钮

<button type="submit" lay-submit>登 录</button>

form表单

<form id="loginForm" :action="pageParams.loginFormAction" method="post" @submit.prevent="submitForm"></form>

记住我

<input type="checkbox" v-model="formData.remember" name="remember" lay-skin="primary" title="记住密码" lay-filter="rememberFilter">

页面参数pageParams

字段名	说明	默认值	能否为空	取值范围
pageParams.serverUrl	服务地址		N
pageParams.systemLogo	系统Logo文件ID		Y
pageParams.systemTitle	系统主标题		N
pageParams.systemTitleSize	系统主标题字体大小	26	Y	13+
pageParams.systemSubTitle	系统副标题 Y
pageParams.systemSubTitleSize	系统主标题字体大小	16	Y	13+
pageParams.copyRightYear	版权年份		Y
pageParams.copyleft	版权所属		Y
pageParams.officialUrl	官方链接		Y
pageParams.verificationCode	开启验证码		Y	true、false
pageParams.loginBoxPosition	登录框位置		N	left、center、right
pageParams.loginFormAction	form表单action路径		N

表单数据formData

名称	类型	name值（表单名）	v-model值（vue绑定值）	lay-verify值（前端校验）
用户名	input[text]	username	formData.username	username
密码	input[password]	password	formData.password	password
验证码	input[text]	verificationCode	formData.verificationCode	verificationCode
记住密码	input[checkbox]	remember	formData.remember

示例表单

<div id="loginBox" class="layadmin-user-login-main">
  <div class="layadmin-user-login-box layadmin-user-login-header">
    <!-- LOGO -->
    <img class="system-logo" :src="'route/file/download/true/'+ pageParams.systemLogo" v-if="pageParams.systemLogo">
    <div :class="{'system-logo-title': pageParams.systemLogo}">
      <!-- 主标题 -->
      <h2 :style="{'font-size': (pageParams.systemTitleSize ? pageParams.systemTitleSize : 26) +'px'}">{{pageParams.systemTitle}}</h2>
      <!-- 副标题 -->
      <p :style="{'font-size': (pageParams.systemSubTitleSize ? pageParams.systemSubTitleSize : 16) +'px'}">{{pageParams.systemSubTitle}}</p>
    </div>
  </div>
  <div id="loginFormBox" class="layadmin-user-login-box layadmin-user-login-body layui-form">
    <!-- 登录表单 -->
    <form id="loginForm" :action="pageParams.loginFormAction" method="post" @submit.prevent="submitForm">
      <div class="layui-form-item">
        <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="username"></label>
        <!-- 用户名 -->
        <input type="text" v-model="formData.username" id="username" name="username" lay-verify="username" placeholder="用户名" class="layui-input">
      </div>
      <div class="layui-form-item" id="passwordBox">
        <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="password"></label>
        <!-- 密码 -->
        <input type="password" v-model="formData.password" id="password" name="password" lay-verify="password" placeholder="密码" class="layui-input">
      </div>
      <div class="layui-form-item" id="verificationCodeBox" v-if="pageParams.verificationCode == 'true'">
        <div class="layui-row">
          <div class="layui-col-xs7">
            <label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="verificationCode"></label>
            <!-- 验证码 -->
            <input type="text" v-model="formData.verificationCode" id="verificationCode" name="verificationCode" lay-verify="verificationCode" placeholder="图形验证码" class="layui-input">
          </div>
          <div class="layui-col-xs5">
            <div style="margin-left: 10px;">
              <!-- 验证码图片 -->
              <img src="oauth/verification-code/png" class="layadmin-user-login-codeimg" @click="refreshVerificationCode($event)">
            </div>
          </div>
        </div>
      </div>
      <div class="layui-form-item remember-password" id="rememberPassword">
        <!-- 记住我（密码） -->
        <input type="checkbox" v-model="formData.remember" name="remember" lay-skin="primary" title="记住密码" lay-filter="rememberFilter">
      </div>
      <div class="layui-form-item">
        <!-- 登录按钮 -->
        <button type="submit" class="layui-btn layui-btn-fluid" lay-submit>登 录</button>
      </div>
    </form>
  </div>
</div>
<!-- 版权、官网 -->
<div class="layui-trans layadmin-user-login-footer footer-text">
  <p v-if="pageParams.copyRightYear"><span>{{'© '+ pageParams.copyRightYear +' '}}</span><a href="javascript:void(0);" v-if="pageParams.copyleft">{{pageParams.copyleft}}</a></p>
  <p v-if="pageParams.officialUrl">
    <span><a :href="pageParams.officialUrl" target="_blank">前往官网</a></span>
  </p>
</div>

7.8 KiB Raw Blame History Unescape Escape