今日目标
- 利用
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 name，描述说明，点击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" />
