---
title: 自定义登录框
description: 通过上传Vue代码和CSS样式来自定义登录框
published: true
date: 2021-08-02T07:07:50.589Z
tags: 
editor: markdown
dateCreated: 2021-07-29T06:23:40.688Z
---

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

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

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

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

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

# 表单中的固定元素

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

表单中的元素如下

- 用户名输入框：
```html
<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表单时页面会判断用户名是否为空。

- 密码输入框：
```html
<input type="password" v-model="formData.password" id="password" name="password" lay-verify="password" placeholder="密码">
```

- 验证码输入框：
```html
<input type="text" v-model="formData.verificationCode" id="verificationCode" name="verificationCode" lay-verify="verificationCode" placeholder="图形验证码">
```

- 验证码图片：
```html
<img src="oauth/verification-code/png" @click="refreshVerificationCode($event)">
```

- 登录按钮
```html
<button type="submit" lay-submit>登 录</button>
```

- form表单
```html
<form id="loginForm" :action="pageParams.loginFormAction" method="post" @submit.prevent="submitForm"></form>
```

- 记住我
```html
<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 | |

# 示例表单
```html
<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>
```

![1020bc5a9eb6bea1369ec8c557ae5db5.jpeg](/1020bc5a9eb6bea1369ec8c557ae5db5.jpeg)