大事件-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.htmllayer.msg(res.message);// 调用父页面的getUserInfo函数，从新渲染index.htmlwindow.parent.getUserInfo();}}});});

表单验证

优化Ajax请求

Ajax — 大事件项目（第二天）相关推荐

Ajax — 大事件项目（第三天）
大事件-03 用户信息表单验证 html中,直接使用layui提供的内置验证规则 email <input type="text" name="email&quo ...
Ajax — 大事件项目（第四天）
分类管理添加分类初步使用弹出层给 "添加分类" 绑定一个单击事件单击事件中,使用 layer.open() 实现一个弹出层 type: 1, 弹层的类型是页面层 title ...
Ajax — 大事件项目（第一天）
应用的前端技术 Ajax (重要) - jQuery方式接口请求 Layui 框架使用 HTML + CSS + JS 项目说明和演示线上 DEMO 项目地址:http://www.liulongb ...
45 大事件项目 =＞ [01] 后台管理项目ajax练习
目标利用Git管理大事件项目代码安装并且使用 Live Server插件学会查阅layui文档绘制出登录注册页面结构添加表单元素自定义验证规则查阅接口文档完成登录注册功能知道iframe ...
黑马-大事件项目（总结+BUG修复）
前言最近把Nodejs和Ajax学习了一下,找到一个很不错的练手项目:黑马刘龙彬老师主讲的大事件项目,整体看完,给刘老师点个赞,讲的非常细致,开发流程清晰,涉及的知识点也很精准.另外黑马还为这个项目 ...
Node — 第七天（大事件项目接口实现一）
关于JS错误处理 node中和mysql中的错误处理 node和MySQL提供的方法,已经对错误信息进行了封装,只需要使用 err.message 即可获取到错误信息. 比如: const fs = ...
链游玩家大事件：第二期合伙人、动物大亨5月15日同时上线
导语:5月15号10:00,链游玩家推出的链游合伙人第二期正式开始招募,同天,<动物大亨>也会正式上线.链游合伙人是用户发展第二副业的机遇,而<动物大亨>将会开启零撸游戏的新模 ...
Node — 第九天（大事件项目接口实现三）
文章管理接口设计数据表添加文章接口编写接口,使用postman模拟提交formdata类型的数据在article.js 中,加入 /add 路由 postman模拟提交formdata类型的数 ...
Node — 第八天（大事件项目接口实现二）
如何处理MySQL的错误 MySQL的错误信息,可以通过err来获取.这是没有问题的. 但是,我们加入了Promise,Promise中的错误,在外部是获取不到的,只能使用Promise相关方法来获取 ...

Ajax — 大事件项目（第二天）