+ 自定义校验规则
通过查阅文档，我们只要如果需要去自定义校验规则，我们先要得到 form 模块对象
const form = layui.form
通过 form.verify() 函数自定义校验规则，里面是 key：value形式，key后续对应设置到标签的 lay-verity属性中，value就是验证的规则，这里定义了两个自定义校验规则，一个是密码框，利用的是正则，一个是确认密码
js 功能代码（ /assets/js/login.js )
// 从 LayUI 中获取 form 对象 const form = layui.form; // 通过 form.verify() 方法自定义校验规则 form.verify({ // 自定义一个叫 pwd 的校验规则 pwd: [/^[\S]{6,12}$/, "密码必须6到12位，且不能出现空格"], // 校验两次密码是否一致的规则 repwd: (val) => { // 通过形参拿到的是确认密码框中的内容 // 还需要拿到密码框中的内容 // 然后进行一次等于的判断 // 如果判断失败,则return一个提示消息即可 const pwd = $(".reg-box [name=password").val(); if(pwd !== val) return "两次密码不一致" }, });
按需为表单项添加校验规则，如果有多个规则，用 | 隔开就好
<div class="layui-form-item"> <i class="layui-icon layui-icon-password"></i> <input type="password" name="repassword" required lay-verify="required|pwd|repwd" placeholder="再次确认密码" autocomplete="off" class="layui-input" />
+ 发起注册用户的Ajax请求
查阅接口文档，关注以下几个重点信息
- 请求URL
- 请求方式
- 参数名
- 响应数据
- 给按钮添加id，添加绑定事件，在事件处理函数里面先取消表单提交的默认行为
- 利用
$.ajax()进行网络请求，注意添加根路径
请求成功之后提示用户
- 利用
layer.msg来进行提示 - 获取到
layer内置模块
var layer = layui.layer
- 模拟用户点击了去登陆
js 功能代码（ /assets/js/login.js )
// 获取 layui 弹窗 const layer = layui.layer; // 设置请求根路径 const baseUrl = "http://www.liulongbin.top:3007"; // 监听注册表单，发送注册请求 $("#form_reg").on("submit", (e) => { e.preventDefault(); $.ajax({ type: "POST", url: baseUrl + "/api/reguser", data: { username: $("#form_reg [name=username").val(), password: $("#form_reg [name=password").val(), }, success: (res) => { if (res.status !== 0) return layer.msg(res.message); layer.msg("注册成功！"); // 注册成功后跳转到登录界面 $("#link_login").click(); }, }); });
+发起登录的Ajax请求
- 查阅接口文档，关注几个重点要（请求URL，请求方式，请求参数，响应数据）
- 给按钮添加id，添加绑定事件，在事件处理函数里面先取消表单提交的默认行为
- 利用
$.ajax()进行网络请求，注意添加根路径 - 请求成功之后提示用户，保持token信息，跳转到后台主页
- token 用来标识用户是否登录的令牌，后台的页面需要用户登录之后才能查阅，那么权限校验的机制也就出来了，需要检验权限的页面后台先判断请求头里面是否有token，以此来判断是否是登录状态
js 功能代码（ /assets/js/login.js )
// 监听登录表单，发送登录请求 $("#form_login").submit((e) => { e.preventDefault(); $.ajax({ type: "POST", url: baseUrl + "/api/login", data: $("#form_login").serialize(), success: (res) => { if (res.status !== 0) return layer.msg(res.message); layer.msg("登录成功！"); // 将登录成功得到的 token 字符串，保存到 localStorage 中 localStorage.setItem("token", res.token); // 跳转到主页 location.href = "/index.html"; }, }); });
+ 处理请求根路径
每次请求的时候都需要去添加根路径，比较的麻烦，如果根路径进行了修改，那么每个请求的页面都需要调整，那么jQuery中提供了一个 过滤器，可以帮我们统一去进行设置，而这个过滤器调用的时机是在我们调用 $.ajax() 之后，请求真正发给后台之前调用的： $.ajax() > ajaxPrefilter过滤器 -> 发送请求给服务器
- 在
/assets/js目录中新建baseAPI.js - 调用
$.ajaxPrefilter()函数，里面传递一个回调函数，回调函数里面有一个形成options，这个形成里面就包含了这一次请求的相关信息
js 功能代码（ /assets/js/login.js )
// 注意：每次调用 $.get() 或 $.post() 或 $.ajax() 的时候， // 会先调用 ajaxPrefilter 这个函数 // 在这个函数中，可以拿到我们给Ajax提供的配置对象 $.ajaxPrefilter((option) => { // 在发起真正的 Ajax 请求之前，统一拼接请求的根路径 option.url = `http://www.liulongbin.top:3007` + option.url; });
+ 提交login分支的代码
- 运行
git add .命令 - 运行
git commit -m "完成了登录和注册的功能"命令 - 运行
git push -u origin login命令 - 运行
git checkout main命令 - 运行
git merge login命令 - 运行
git push命令 - 运行
git checkout -b index命令
四、后台主页
1、快速实现后台主页的布局效果
找到 LayUI 文档里面 页面元素 > 布局 > 后台布局，拷贝里面的代码，修改以下对应的文字内容。
html 结构（ /index.html ）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="/assets/lib/layui/css/layui.css" /> </head> <body> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <div class="layui-logo layui-hide-xs layui-bg-black"> <img src="/assets/images/logo.png" alt="" /> </div> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item layui-hide layui-show-md-inline-block"> <a href="javascript:;"> <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img" /> 个人中心 </a> <dl class="layui-nav-child"> <dd><a href="">基本资料</a></dd> <dd><a href="">更换头像</a></dd> <dd><a href="">重置密码</a></dd> </dl> </li> <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect> <a href="javascript:;">退出</a> </li> </ul> </div> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧导航区域（可配合layui已有的垂直导航） --> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li class="layui-nav-item layui-nav-itemed"> <a class="" href="javascript:;">menu group 1</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">menu 1</a></dd> <dd><a href="javascript:;">menu 2</a></dd> <dd><a href="javascript:;">menu 3</a></dd> <dd><a href="">the links</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">menu group 2</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">list 1</a></dd> <dd><a href="javascript:;">list 2</a></dd> <dd><a href="">超链接</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">click menu item</a> </li> <li class="layui-nav-item"><a href="">the links</a></li> </ul> </div> </div> <div class="layui-body"> <!-- 内容主体区域 --> <div style="padding: 15px"> 内容主体区域。记得修改 layui.css 和 js 的路径 </div> </div> <div class="layui-footer"> <!-- 底部固定区域 --> 底部固定区域 </div> </div> <script src="/assets/lib/layui/layui.all.js"></script> </body> </html>
2、修改侧边栏的结构
- 找到没有二级分类的
li，移植到第一个位置 - 对应修改里面的文字内容即可
html 结构（ /index.html ）
<div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧导航区域（可配合layui已有的垂直导航） --> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li class="layui-nav-item"><a href="">首页</a></li> <li class="layui-nav-item"> <a class="" href="javascript:;">文章管理</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">文章类别</a></dd> <dd><a href="javascript:;">文章列表</a></dd> <dd><a href="javascript:;">发布文章</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">个人中心</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">基本资料</a></dd> <dd><a href="javascript:;">更换头像</a></dd> <dd><a href="javascript:;">重置密码</a></dd> </dl> </li> </ul> </div> </div>
底部信息区域设置文字居中显示，调节字体大小
css 样式（ /assets/css/index.css ）
.layui-footer { text-align: center; font-size: 12px; }
3、使用 lay-shrink 实现左侧菜单互斥效果
目前效果是侧边栏的二级列表都可以展开，这个不是我们需要的效果，我们需要的是，一个二级列表展开之后，另外的二级列表需要关闭
只需要给侧边栏的ul添加一个 lay-shrin 属性
html 结构（ /index.html ）
<div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧导航区域（可配合layui已有的垂直导航） --> <ul class="layui-nav layui-nav-tree" lay-shrink="all"> <!-- 省略其他代码 --> </ul> </div> </div>
4、为菜单项添加图标
利用第三方的字体图标库来实现
- 导入第三方的图标库
- 哪个地方需要使用，添加 span标签，里面设置
class类名
- 注意：
iconfont这个类名不能省略
html 结构（ /index.html ）
<div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧导航区域（可配合layui已有的垂直导航） --> <ul class="layui-nav layui-nav-tree" lay-shrink="all"> <li class="layui-nav-item"><a href=""><span class="iconfont icon-home"></span>首页</a></li> <li class="layui-nav-item"> <a class="" href="javascript:;"><span class="iconfont icon-16"></span>文章管理</a> <dl class="layui-nav-child"> <dd><a href="javascript:;"><i class="layui-icon layui-icon-app"></i>文章类别</a></dd> <dd><a href="javascript:;"><i class="layui-icon layui-icon-app"></i>文章列表</a></dd> <dd><a href="javascript:;"><i class="layui-icon layui-icon-app"></i>发布文章</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;"><span class="iconfont icon-user"></span>个人中心</a> <dl class="layui-nav-child"> <dd><a href="javascript:;"><i class="layui-icon layui-icon-app"></i>基本资料</a></dd> <dd><a href="javascript:;"><i class="layui-icon layui-icon-app"></i>更换头像</a></dd> <dd><a href="javascript:;"><i class="layui-icon layui-icon-app"></i>重置密码</a></dd> </dl> </li> </ul> </div> </div>
修改头部 退出 按钮的结构
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect> <a href="javascript:;"><span class="iconfont icon-tuichu"></span>退出</a> </li>
css 样式（ /assets/index.css ）
.iconfont { margin-right: 8px; } .layui-icon { margin-right: 8px; margin-left: 20px; }
5、使用 iframe 标签在内容主体区域显示网页内容
如果每个导航栏对应的内容都写在一个页面中，会导致页面太臃肿，不利于维护，遵循模块化开发的思路，我们可以不同导航栏的内容是一个页面，这样我们就利用 iframe 来实现了
- 在页面主体的 div 中添加
iframe
<div class="layui-body"> <!-- 内容主体区域 --> <iframe name="fm" src="" frameborder="0"></iframe> </div>
- 为
首页链接添加href和target属性
<a href="/home/dashboard.html" target="fm"><span class="iconfont icon-home"></span>首页</a>
- 设置对应样式
iframe { width: 100%; height: 100%; } .layui-body { overflow: hidden; }
- 指定默认
iframe页面，添加src的属性即可
<iframe name="fm" src="/home/dashboard.html" frameborder="0"></iframe>
为 首页 对应的导航 Item 项添加默认高亮效果， layui-this 属性
<li class="layui-nav-item layui-this"> <a href="/home/dashboard.html" target="fm"><span class="iconfont icon-home"></span>首页</a> </li>
强制清除 <a> 链接的 CSS3 动画
a { transition: none !important; }
6、渲染图片头像和文字头像
找到对应的位置，添加如下结构
<!-- 右侧导航栏上面头像 --> <a href="javascript:;" class="userinfo"> <img src="http://t.cn/RCzsdCq" class="layui-nav-img" /> <span class="text-avatar">A</span> 个人中心 </a> <!-- 左侧侧边栏上面头像 --> <div class="userinfo"> <img src="http://t.cn/RCzsdCq" class="layui-nav-img" /> <span class="text-avatar">A</span> <span id="welcome">欢迎 ***</span> </div>
修改对应的样式
.userinfo { height: 60px; line-height: 60px; text-align: center; font-size: 12px; user-select: none; } .layui-side-scroll .userinfo { border-bottom: 1px solid #282b33; } .layui-nav-img { width: 40px; height: 40px; } .text-avatar { display: inline-block; width: 40px; height: 40px; background-color: #009688; border-radius: 50%; line-height: 40px; text-align: center; font-size: 20px; color: #fff; position: relative; top: 4px; margin-right: 10px; }
