164 lines
7.9 KiB
Markdown
164 lines
7.9 KiB
Markdown
---
|
||
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>
|
||
```
|
||
|
||
 |