From 9586d85181e1368e732335c2c47e7cf9c6ce01ed Mon Sep 17 00:00:00 2001 From: Administrator <450292408@qq.com> Date: Fri, 30 Jul 2021 02:42:27 +0000 Subject: [PATCH] docs: update custom-login-page --- custom-login-page.md | 151 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 148 insertions(+), 3 deletions(-) diff --git a/custom-login-page.md b/custom-login-page.md index 73fba2b..f11a5e4 100644 --- a/custom-login-page.md +++ b/custom-login-page.md @@ -2,11 +2,156 @@ title: 自定义登录框 description: 通过上传Vue代码和CSS样式来自定义登录框 published: true -date: 2021-07-29T06:43:28.073Z +date: 2021-07-30T02:42:26.037Z tags: editor: markdown dateCreated: 2021-07-29T06:23:40.688Z --- -![12123.jpg](/12123.jpg)# Header -Your content here \ No newline at end of file +# 添加菜单 +该功能为附属功能，不做自动创建菜单处理 +菜单链接：**/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 + +``` +其中的 **v-model** 绑定了 **formData** 中的 **username** 属性，**id** 和 **name** 则需要固定为 **username**。为了使用页面上的用户名验证方法，这里又添加了 **lay-verify="username"** 属性，添加该属性之后，在提交form表单时页面会判断用户名是否为空。 + +- 密码输入框： +```html + +``` + +- 验证码输入框： +```html + +``` + +- 验证码图片： +```html + +``` + +- 登录按钮 +```html + +``` + +- form表单 +```html +
+``` + +# 页面参数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 +
+
+ + +
+ +

{{pageParams.systemTitle}}

+ +

{{pageParams.systemSubTitle}}

+
+
+
+ +
+
+ + + +
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
+
+
+ + +
+
+ + +
+
+
+
+ +
+

{{'© '+ pageParams.copyRightYear +' '}}{{pageParams.copyleft}}

+

+ 前往官网 +

+
+``` \ No newline at end of file