大事件项目第一天
今日目标
- 利用
Git
管理大事件项目代码 - 安装并且使用
Live Server
插件 - 学会查阅
layui
文档 - 绘制出登录注册页面结构
- 添加表单元素自定义验证规则
- 查阅接口文档完成登录注册功能
- 知道
iframe
标签的使用 - 搭建后台主页界面
资源地址
线上 DEMO
项目地址:http://www.escook.cn:8086/
项目的 API
接口地址: https://www.showdoc.cc/escook?page_id=3707158761215217
LayUI 文档地址:http://layui.hawkhawk.club/index.html
一、今天完成的功能效果
-
登录功能实现
-
注册功能实现
-
后台主页结构搭建
二、项目前期的准备工作
1、项目结构搭建
将 素材 目录下的 assets
和 home
文件夹,拷贝到 code
目录下
assets > css
文件夹 自己编写的css
代码assets > fonts
字体图标文件夹assets > images
存放图标文件夹assets > js
自己js
代码的文件夹assets > lib
第三方依赖的文件夹home > dashboard.html
后台首页的页面效果
在 code 目录下新建 login.html
和 index.html
页面
2、 使用 GitHub 管理大事件的项目
- 在
code
目录中运行git init
命令,初始化仓库 - 在
code
目录中运行git add .
命令,追踪要托管的文件 - 在
code
目录下运行git commit -m "init project"
命令,提交到本地仓库 - 新建
Github
仓库web_bigevent
- 登录
github
官网 - 点击左上角的 new 创建仓库,填写
Repository nam
e,描述说明,点击Private
选项,然后点击create repository
- 登录
- 将本地仓库和
Github
仓库建立关联关系 - 将本地仓库的代码推送到
Github
仓库中 - 运行
git checkout -b login
命令,创建并切换到login
分支
3、安装 Live Server 插件
在 vscode 中搜索 Live Server 插件并安装,大事件项目要使用本地服务的方式打开。
三、登录注册功能
1、登录注册 UI 效果实现
+ 登录注册页面搭建
- 引入
layui
的css
文件layui.css
,先引入第三方的,再引入自己的css
- 分为上下结构,上面头部的
Logo
区域 - 下面是 登录注册区域
- 修改一下对应样式,给body添加背景,给登录注册区域设置宽高,剧中显示,给里面title设置背景图片
html 结构( /login.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>大事件-登录</title>
<!-- 导入 LayUI 样式 -->
<link rel="stylesheet" href="./assets/lib/layui/css/layui.css" />
<!-- 导入自定义样式 -->
<link rel="stylesheet" href="./assets/css/login.css" />
</head>
<body>
<!-- 头部 logo 区域 -->
<div class="layui-main">
<img src="/assets/images/logo.png" alt="" />
</div>
<!-- 登录注册区域 -->
<div class="loginAndRegBox">
<div class="title-box"></div>
</div>
</body>
</html>
css 样式( /assets/css/login.css )
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: url(/assets/images/login_bg.jpg) no-repeat center center/cover;
}
.loginAndRegBox {
width: 400px;
height: 310px;
background-color: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.loginAndRegBox .title-box {
height: 60px;
background: url(/assets/images/login_title.png) no-repeat center;
}
+ 登录和注册的按需切换
- 在登录注册区域里面(
loginAndRegBox
)定义两个div - 先让注册的div进行隐藏
- 在 assets 文件夹下的 js 文件夹中新建 login.js
- 给两个div绑定点击事件,点击了对应按钮,让对应的div进行显示,另外一个进行隐藏
html 结构( /login.html )
<!-- 登录注册区域 -->
<div class="loginAndRegBox">
<!-- 登录标题 -->
<div class="title-box"></div>
<!-- 登录 -->
<div class="login-box">
<a href="javascript:;" id="link_reg">去注册账号</a>
</div>
<!-- 注册 -->
<div class="reg-box">
<a href="javascript:;" id="link_login">去登录</a>
</div>
</div>
css 样式( /assets/css/login.css )
.reg-box {
display: none;
}
js 功能代码( /assets/js/login.js )
$(function () {
// 点击去注册账号让 登录框隐藏,注册框显示
$("#link_reg").click(() => {
$(".login-box").hide();
$(".reg-box").show();
});
// 点击去登录让 注册框隐藏,登录框显示
$("#link_login").click(() => {
$(".login-box").show();
$(".reg-box").hide();
});
});
+ 绘制登录表单的结构样式
找到 layui 文档的 页面元素 → 表单 这一分类
-
拷贝 里面内容,不需要全部拷贝过来,我们拷贝第一行的输入框即可,注意:外面
form
表单域需要带上 -
删除里面的
label
提示内容,然后把lable
的父元素div
进行删除,不然前面label
删除了还有空隙在左侧 -
拷贝过来对应的
button
按钮,然后设置样式,让宽度填充整个父元素
html 结构( /login.html )
<!-- 登录 -->
<div class="login-box">
<form class="layui-form" id="form_login">
<!-- 用户名 -->
<div class="layui-form-item">
<input
type="text"
name="username"
required
lay-verify="required"
placeholder="请输入用户名"
autocomplete="off"
class="layui-input"
/>
</div>
<!-- 密码 -->
<div class="layui-form-item">
<input
type="password"
name="password"
required
lay-verify="required"
placeholder="请输入密码"
autocomplete="off"
class="layui-input"
/>
</div>
<!-- 登录按钮 -->
<div class="layui-form-item">
<!-- 注意:表单提交按钮和普通按钮的区别,就是 lay-submit 属性 -->
<button class="layui-btn layui-btn-normal layui-btn-fluid" lay-submit >
登录
</button>
</div>
<div class="layui-form-item link">
<a href="javascript:;" id="link_reg">去注册账号</a>
</div>
</form>
</div>
css 样式( /assets/css/login.css )
- 给 表单域设置内边距,左右留一点缝隙
- 给下面的 links 设置 flex 布局,让里面 a 标签 居右边显示
- 修改 a 标签文字大小
.layui-form {
padding: 0 30px;
}
.link {
display: flex;
justify-content: flex-end;
font-size: 12px;
}
+ 绘制文本框前面的小图标
在 layui
中给我们提供了一些图标,我们直接使用即可
在用户名的文本框之前,添加如下的标签结构:
<i class="layui-icon layui-icon-username"></i>
在密码框之前,添加如下的标签结构:
<i class="layui-icon layui-icon-password"></i>
修改一下对应样式:
.layui-form-item {
position: relative;
}
.layui-icon {
position: absolute;
top: 10px;
left: 10px;
}
.layui-input {
padding-left: 32px;
}
+绘制注册表单的结构样式
-
注册表单与登录是差不多的,多了一个 输入框,我们把之前登录的结构直接拷贝过来
-
修改一下里面对应内容
html 结构( /login.html )
<!-- 注册 -->
<div class="reg-box">
<form class="layui-form" id="form_reg">
<!-- 用户名 -->
<div class="layui-form-item">
<i class="layui-icon layui-icon-username"></i>
<input
type="text"
name="username"
required
lay-verify="required"
placeholder="请输入用户名"
autocomplete="off"
class="layui-input"
/>
</div>
<!-- 密码 -->
<div class="layui-form-item">
<i class="layui-icon layui-icon-password"></i>
<input
type="password"
name="password"
required
lay-verify="required"
placeholder="请输入密码"
autocomplete="off"
class="layui-input"
/>
</div>
<!-- 确认密码 -->
<div class="layui-form-item">
<i class="layui-icon layui-icon-password"></i>
<input
type="password"
name="repassword"
required
lay-verify="required"
placeholder="再次确认密码"
autocomplete="off"
class="layui-input"
/>
</div>
<!-- 注册按钮 -->
<div class="layui-form-item">
<!-- 注意:表单提交按钮和普通按钮的区别,就是 lay-submit 属性 -->
<button class="layui-btn layui-btn-normal layui-btn-fluid" lay-submit >
注册
</button>
</div>
<div class="layui-form-item link">
<a href="javascript:;" id="link_login">去登录</a>
</div>
</form>
</div>
2、登录注册逻辑实现
+ 实现登录表单的验证
在 layui
中,默认有帮我们验证表单元素的逻辑
导入 layui
的 js
文件
<script src="/assets/lib/layui/layui.all.js"></script>
为需要验证的表单项添加 lay-verify
属性,同时指定具体的校验规则即可
<input
type="text"
name="username"
required
lay-verify="required"
placeholder="请输入用户名"
autocomplete="off"
class="layui-input"
/>
+ 自定义校验规则
通过查阅文档,我们只要如果需要去自定义校验规则,我们先要得到 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()
进行网络请求,注意添加根路径http://www.liulongbin.top:3007
-
请求成功之后提示用户
-
利用
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;
}
点击跳转第二天👉 | http://t.csdn.cn/GObVN |
---|