大事件-02

fix一个bug

原因：

开始做注册的时候，页面中只有一个 name=password的input，所以 $(‘input[name=“password”]’) 可以准确的找到元素
后来做登录的时候，页面中多了一个name=password的input，所以$(‘input[name=“password”]’)找到的就不是注册的密码框了

解决办法：

给注册的密码框加一个类 reg-password
表单验证的时候，根据类名来获取密码框 let pwd = $('.reg-password').val().trim(); // 获取密码

合并login分支，创建index分支

# 先把login分支的内容全部提交# 切换分支到master
git checkout master# 合并分支login
git merge login# 创建并切换到index分支（在这个分支上，开发首页）
git checkout -b index

后台首页布局

完成了基本的页面布局

去layui官网，文档 --> 页面布局 --> 后台布局，把html代码全部复制，应用到我们自己的index.html中。

修改一下layui.css 和 layui.all.js的路径

头部区域处理

更换logo
删除头部的一个导航菜单
修改了右上角（比对线上做好的效果）

头部字体头像处理

新注册的用户，没有图片头像。只能使用用户名的首字母（大写）当做头像。

<!-- 在图片前面，加一个span -->
<span class="text-avatar">A</span>

引入自己的 index.css

/*字体头像*/
.text-avatar {width: 33px;height: 33px;margin-right: 10px;border-radius: 50%;display: inline-block;background-color: #419488;line-height: 33px;text-align: center;vertical-align: middle;color: #fff;font-size: 20px;
}/*默认先让字体头像隐藏*/
.text-avatar {display: none;
}

侧边栏菜单手风琴效果和默认选中状态

自己调整出三个菜单（首页、文章管理、个人中心）
实现手风琴效果
- 给 ul 添加一个属性 lay-shrink="all"
默认让首页有选中状态
- 给首页 li 添加一个 layui-this 类
默认所有菜单都是收缩状态
- 去掉文章管理 li 标签的 layui-nav-itemed 类

侧边栏顶级菜单使用iconfont字体图标

先看demo（/assets/fonts/demo_index.html），里面有使用方法
具体使用方法
- index.html 中加载css文件 <link rel="stylesheet" href="/assets/fonts/iconfont.css">
- 在首页、文章管理、个人中心、退出之前，分别加入span标签 <span class="iconfont icon-xxx"></span>
- 更换类名

注意，个人中心，是侧边栏的个人中心。不是头部的

自定义样式，调整图标的位置

/*跳转顶级菜单的图标位置*/
.iconfont {margin-right: 8px;position: relative;top: 1px;
}

侧边栏子菜单使用layui字体图标

使用layui的字体图标，不用再次引入css文件了。因为前面引入过了
所以，直接在每个子菜单前面加 <i class="layui-icon layui-icon-app"></i>
自定义样式，调整一下位置 margin: 0 5px 0 15px;

侧边栏头像和欢迎语

分析：
- 侧边栏的头像和欢迎语和头部的效果差不多

具体做法

复制头部“个人中心”的 a 标签，放到侧边栏 ul 前面，并且把a换成了div

<div class="userinfo"><span class="text-avatar">A</span><img src="http://t.cn/RCzsdCq" class="layui-nav-img"><span class="welcome">欢迎&nbsp;&nbsp;老汤</span>
</div>

样式

/*侧边栏头像和欢迎语*/
.userinfo {display: block;height: 60px;line-height: 60px;text-align: center;
}
.welcome {color: #fff;font-size: 12px;user-select: none;
}

iframe标签原理

在这里插入图片描述

把原来的内容区的div换成iframe标签

<div class="layui-body"><!-- 内容主体区域 --><!-- <div style="padding: 15px;">内容主体区域</div> --><iframe src="/home/dashboard.html" name="fm"></iframe>
</div>

修改样式

/*iframe*/
iframe {width: 100%;height: 100%;
}/*去掉iframe的滚动条  --   给父级的div加 overflow:hidden */
.layui-body {overflow: hidden;
}

可以自行创建两个页面，然后在侧边栏挂好超链接，指定target属性，测试一下。

退出功能

删除token
跳转页面到 /login.html

具体做法：

创建 assets/js/index.js文件
index.html 加载所需的js文件（jQuery、index.js）
在index.js 中，完成退出的功能

$(function () {// 加载layer模块let layer = layui.layer;// ---------------------  退出 -------------------$('#logout').click(function () {// 1. 询问是否要删除layer.confirm('确定退出吗？', { icon: 3, title: '提示' }, function (index) {//do something// 2. 清除tokenlocalStorage.removeItem('token');// 3. 跳转到登录页面location.href = '/login.html';// 关闭窗口layer.close(index);});});
})

获取用户信息并渲染到页面中

思路：

调用接口 /my/userinfo ，来获取用户的信息
那获取到的信息渲染到页面中

步骤：

定义全局函数 getUserInfo()
页面加载完毕，调用 getUserInfo()
getUserInfo()内部，发送ajax请求，获取用户的信息
- 必须在请求头中，携带token，否则请求失败
设置欢迎语
- 优先使用昵称，没有昵称（nickname），则使用账号（username）
设置头像
- 优先使用图片
- 没有图片，则使用名字（设置文字头像显示，不要使用 show()，要设置css）

// 定义获取用户信息的函数，定义一个全局函数
function getUserInfo () {$.ajax({url: 'http://www.liulongbin.top:3007/my/userinfo',success: function (res) {// console.log(res);if (res.status === 0) {// 渲染页面// 1. 欢迎你 用户名（优先使用nickname、没有的话，使用username）let name = res.data.nickname || res.data.username;$('.welcome').html('欢迎&nbsp;&nbsp;' + name); // 必须使用html，不能使用text，因为 &nbsp; 也是HTML// 2. 头像（优先使用图片、没有图片使用name）if (res.data.user_pic) {$('.layui-nav-img').attr('src', res.data.user_pic);// 让图片显示、让文字隐藏$('.layui-nav-img').show();$('.text-avatar').hide();} else {let w = name.substr(0, 1).toUpperCase();// 让文字头像显示，不要用show，因为show方法会让盒子display: block$('.text-avatar').text(w).css('display', 'inline-block');$('.layui-nav-img').hide();}}},headers: {Authorization: localStorage.getItem('token')}});
}

合并index分支，创建user分支

# 先把index分支的代码全部提交
# 切换到master
git checkout master# 合并index到master
git merge index# 创建新分支user，并且切换 (用于开发个人中心)
git checkout -b user

用户基本信息

准备工作

创建HTML文件、css文件、js文件
- 创建 /user/userinfo.html
- 创建 /assets/css/user/userinfo.css
- 创建 /assets/js/user/userinfo.js
userinfo.html 中加载所需的css和js文件（layui.css/自己的css、jQuery、layui.all.js、自己的js）
index.html 头部和侧边栏，挂超链接，链接到 /user/userinfo.html

页面布局

使用layui的卡片面板来布局

layui文档 --> 页面元素 --> 面板 --> 卡片面板
内容区里面放表单

<div class="layui-card"><!-- 卡片面板的标题区 --><div class="layui-card-header">修改用户信息</div><!-- 卡片面板的内容区 --><div class="layui-card-body"><!-- 表单区 --><form class="layui-form" action=""><!-- 第一行：登录名称 --><div class="layui-form-item"><label class="layui-form-label">登录名称</label><div class="layui-input-block"><input type="text" name="title" required lay-verify="required"autocomplete="off" class="layui-input"></div></div><!-- 第二行：用户昵称 --><div class="layui-form-item"><label class="layui-form-label">用户昵称</label><div class="layui-input-block"><input type="text" name="title" required lay-verify="required" placeholder="请输入昵称"autocomplete="off" class="layui-input"></div></div><!-- 第三行：用户邮箱 --><div class="layui-form-item"><label class="layui-form-label">用户邮箱</label><div class="layui-input-block"><input type="text" name="title" required lay-verify="required" placeholder="请输入邮箱"autocomplete="off" class="layui-input"></div></div><!-- 第四行：按钮 --><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="formDemo">提交修改</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form></div></div>

CSS样式：

.layui-card {margin: 20px 20px 0 20px;
}.layui-form {width: 500px;
}

我们需要把 index.css 里面的 iframe 加一个灰色的背景色。

为表单赋值

思路：

发送ajax请求，获取用户信息
设置表单各项（每个输入框）的value值。

具体步骤：

先设置表单各项的name属性
发送ajax请求
根据表单各项的name属性，找到每个input，分别设置value值

细节问题：

加一个隐藏域 id <input type="hidden" name="id" />，放到表单里面的任意位置，一会提交表单的时候用
设置账号readonly，表示该项不能修改

// ------------------   获取用户信息，为表单赋值（设置表单各项的默认值） ---------
$.ajax({url: 'http://www.liulongbin.top:3007/my/userinfo',success: function (res) {console.log(res);// 设置表单的四项值（id/username/nickname/email）$('input[name="id"]').val(res.data.id);$('input[name="nickname"]').val(res.data.nickname);$('input[name="username"]').val(res.data.username);$('input[name="email"]').val(res.data.email);},headers: {Authorization: localStorage.getItem('token')}
});

HTML代码：

<!--form中加一个隐藏域-->
<input type="hidden" name="id"><!-- 设置每个input的name -->
id / username / nickname / email<!-- 设置登录账号的readonly属性 -->
<input readonly type="text" name="username" required lay-verify="required" autocomplete="off" class="layui-input">

使用layui的from模块快速为表单赋值

为表单设置 lay-filter="user" ，值随便定义，我这里使用的是user
JS代码中，一行代码为表单赋值
```
let form = layui.form;
form.val('user', res.data);
```
- 要求，res.data 这个对象的属性（key）要和表单各项的name属性值相同，才能赋值

完成更新用户信息的功能

注册表单的提交事件
阻止默认行为
收集表单数据（form.val(‘user’) 或者使用 $(‘form’).serialize() 都行）
发送ajax请求，完成更新
更新成功之后，提示，并且调用父页面的 getUserInfo() 从新渲染用户的头像

// ------------------   表单提交的时候，完成用户信息的更新 -----------------// 1. 注册表单的提交事件$('form').on('submit', function (e) {// 2. 阻止默认行为e.preventDefault();// 3. 收集表单数据let data = form.val('user');// console.log(data); // {id: "900", username: "abcdabcd", nickname: "你好123", email: "232323@qq.comadsf"}// 删除掉username，因为接口不需要这个参数。不过这个接口测试过，传过去也没事// 4. ajax提交数据给接口$.ajax({type: 'POST',url: 'http://www.liulongbin.top:3007/my/userinfo',data: data,headers: {Authorization: localStorage.getItem('token')},success: function (res) {// console.log(res);if (res.status === 0) {// 5. 修改成功，给出提示，调用父页面的getUserInfo函数，从新渲染index.html layer.msg(res.message);// 调用父页面的getUserInfo函数，从新渲染index.html window.parent.getUserInfo();}}});});