大事件项目用户基本资料修改

大事件项目day02
注意：
一、后台主页
1、渲染用户头像和名称

2、统一为有权限的接口设置headers请求头
（1）在 baseAPI的 ajaxPrefilter 中添加如下代码
（2）判断url 里面是否携带 /my/
（3）如果携带，那么我们就设置 options.headers

3、实现退出功能
（1）给退出按钮绑定点击事件，取消a标签的默认行为
（2）用户点击后，弹出提示框（layui中有弹出层的相关代码），如果用户点击确认
（3）移除本地缓存的 token，并且跳转到登录页面

4、 控制用户的访问权限
（1）在调用有权限接口的时候，指定complete回调函数，这个回调函数不管成功还是失败都会调用
（2）在回调里面判断 服务器返回的的状态是否等于 1，并且错误的信息是 "身份认证失败"，如果成立，那么就强制用户跳转到登录页

二、基本资料
1、获取用户的基本信息
（1）导入 baseAPI
（2）在 user_info.js 中定义并调用 initUserInfo 函数
（3）在 initUserInfo 函数中 调用 $.ajax() 获取用户基本信息
（4）如果返回的 status 为0，那么代表成功，如果不等于，代表失败，利用 layer进行提示

2、为表单快速赋值
利用 form.val() 进行快速赋值，赋值之前我们需要给 form 表单添加 一个 lay-filter 的属性
（1）为表单指定 lay-filter 属性
（2）调用 form.val() 方法为表单赋值
（3）使用隐藏域保存用户的 id 值
注：readonly 只读属性
autocomplete 属性规定表单是否应该启用自动完成功能
3、发起请求更新用户的信息
（1）监听表单提交事件，在事件处理函数里面取消默认行为
（2）查阅接口文档，利用 $.ajax()发起 post 请求
（3）利用 $(this).serialize() 获取表单数据
（4）如果返回的 status 不为0，说明更新失败，及逆行提示
（5）更新成功之后，调用父页面中的方法，重新渲染用户的头像和用户信息
** window.parent.getUserInfo()**

三、重置密码
1、为密码框定义校验规则
（1）导入 form 模块
（2）利用 form.verify() 来定义规则
①长度必须是6到12位
②不能与旧密码一致
③两次密码是否相同
（3）在对应的表单元素中，利用 lay-verify 来设置自定义校验规则
2、发起请求实现重置密码的功能
（1）给form表单绑定 submit 事件，在事件处理函数里面取消默认行为
（2）查阅接口文档，利用 $.ajax() 来发送 post 请求
（3）利用 $(this).serialize() 来设置提交的数据
（4）如果 服务器返回的 status 不等于0，说明失败，利用layui.layer.msg 来进行提示
（5）如果更新成功，重置一下表单内容

四、更换头像
1、实现裁剪区域图片的替换
（1）cropper 图片裁剪
（2）点击弹出文件选择框
①默认的文件选择框样式比较丑，所以我们定义这个结构，让其隐藏，给文件选择框指定可以上传的文件类型

注：通过 accept 属性，可以指定，允许用户选择什么类型的文件
input type="file" id="file" accept="image/png,image/jpeg"
②下面定义一个按钮，文本是 上传，一旦用户点击按钮，我们手动触发 文件选择框的点击事件
（3）换裁剪区域的图片
①给文件选择框绑定 change 事件
②用户选择了文件就会触发这个事件，通过 e.target.files 获取用户选择文件列表
③通过索引0拿到用户选择的文件
④将文件转化为路径
⑤利用 $image 重新初始化裁剪区域
（4）将裁剪后的头像上传到服务器
①为确定按钮，绑定点击事件
②要拿到用户裁剪之后的头像
创建一个 Canvas 画布，将 Canvas 画布上的内容，转化为 base64 格式的字符串
③调用接口，把头像上传到服务器
④了解base64格式的图片
base64格式你会发现是一段字符串，其实base64格式的图片，就是利用一段字符串来描述这张图片
好处：能够避免一些额外的图片请求
缺点：体积会比原来图片要大 30% 左右
使用场景：不适用大图片，一些小图片比较适合使用
有关大事件项目中LayUI的使用请点击a=href"https://www.cnblogs.com/kk199578/p/14279187.html"