--------------------- 后台主页 --------------------

1.1 获取用户的基本信息

1. 导入需要的脚本：

<!-- 导入 jQuery -->
<script src="/assets/lib/jquery.js"></script> 
<!-- 导入自己封装的 baseAPI --> 
<script src="/assets/js/baseAPI.js"></script>
 <!-- 导入自己的 js 文件 -->
<script src="/assets/js/index.js"></script>

2. 定义 getUserInfo 函数：（获取用户的基本信息）

// 获取用户的基本信息
function getUserInfo() {
    
  $.ajax({
    
    method: 'GET',
    url: '/my/userinfo',
    success: function(res) {
    
      if (res.status !== 0) {
    
        return layui.layer.msg('获取用户信息失败！')
      }
      // 调用 renderAvatar 渲染用户的头像
      renderAvatar(res.data)
    }

1.2 渲染用户头像

1. 定义 renderAvatar 函数：
   （因为刚注册的用户，没有 nickname 名称，所以需要判断）
   （刚注册的用户没有头像，所以也需要判断）

// 渲染用户的头像
function renderAvatar(user) {
    
   1. 获取用户的名称
  var name = user.nickname || user.username
  
   2. 设置欢迎的文本
  $('#welcome').html('欢迎  ' + name)
  
   3. 按需渲染用户的头像   
  if (user.user_pic !== null) {
    
    // 3.1 渲染图片头像
    $('.layui-nav-img')
      .attr('src', user.user_pic)
      .show()
    $('.text-avatar').hide()
  } else {
    
    // 3.2 渲染文本头像
    $('.layui-nav-img').hide()
    var first = name[0].toUpperCase()
    $('.text-avatar')
      .html(first)
      .show()
  }
}

1.3 统一为有权限的接口设置headers请求头

1. 在 baseAPI的 ajaxPrefilter 中添加如下代码：
   （查询判断，如果 api 中 有 my 的字符。 则 该 ajax 请求 需要 用户的 安全码，）

// 统一为有权限的接口，设置 headers 请求头 
if (options.url.indexOf('/my/') !== -1) {
     
	options.headers = {
     
		Authorization: localStorage.getItem('token') || '' 
	}
 }

1.4 实现退出功能（这个调用了 layui 的框架，用的 confirm 方法）

1. 修改退出的 <a> 链接如下：

<a href="javascript:;" id="btnLogout">
	<span class="iconfont icon-tuichu"> </span>
	退出
</a>

2. 实现退出功能：

  // 点击按钮，实现退出功能
  $('#btnLogout').on('click', function() {
    
    // 提示用户是否确认退出
    layer.confirm('确定退出登录?', {
     icon: 3, title: '提示' }, function(index) {
    
      //do something
      // 1. 清空本地存储中的 token
      localStorage.removeItem('token')
      // 2. 重新跳转到登录页面
      location.href = '/login.html'

      // 关闭 confirm 询问框
      layer.close(index)
    })
  })
})

1.5 控制用户的访问权限

1. 在调用有权限接口的时候，指定 complete 回调函数：

    重点！！！！ 不论成功还是失败，最终都会调用 complete 回调函数！！！！
     complete: function(res) {
    
       // console.log('执行了 complete 回调：')
       // console.log(res)
       // 在 complete 回调函数中，可以使用 res.responseJSON 拿到服务器响应回来的数据
       if (res.responseJSON.status === 1 && res.responseJSON.message === '身份认证失败！') {
    
         // 1. 强制清空 token
         localStorage.removeItem('token')
         // 2. 强制跳转到登录页面
         location.href = '/login.html'
       }
     }
  })
}

1.6 优化权限控制的代码（ajaxPrefilter 函数总结）

1. 将权限控制的代码，从每个请求中，抽离到 ajaxPrefilter 中： （baseAPI.js 代码总结）

 注意：每次调用 $.get() 或 $.post() 或 $.ajax() 的时候，
      会先调用 ajaxPrefilter 这个函数
// 在这个函数中，可以拿到我们给Ajax提供的配置对象
$.ajaxPrefilter(function(options) {
    
  1. 在发起真正的 Ajax 请求之前，统一拼接请求的根路径
  // options.url = 'http://ajax.frontend.itheima.net' + options.url
  options.url = 'http://www.liulongbin.top:3007' + options.url

  2. 统一为有权限的接口，设置 headers 请求头
  if (options.url.indexOf('/my/') !== -1) {
    
    options.headers = {
    
      Authorization: localStorage.getItem('token') || ''
    }
  }

  3. 全局统一挂载 complete 回调函数
  options.complete = function(res) {
    
    // console.log('执行了 complete 回调：')
    // console.log(res)
    // 在 complete 回调函数中，可以使用 res.responseJSON 拿到服务器响应回来的数据
    if (res.responseJSON.status === 1 && res.responseJSON.message === '身份认证失败！') {
    
      // 1. 强制清空 token
      localStorage.removeItem('token')
      // 2. 强制跳转到登录页面
      location.href = '/login.html'
    }
  }
})

--------------------- 基本资料（info ） --------------------

先用 git 保存 刚刚的那个 分支， 然后新建 user分支

2.1 创建基本资料对应的页面

1. 新建 /user/user_info.html 并初始化如下：
2. 新建 /assets/css/user/user_info.css 并初始化如下：

html, 
body {
     
	margin: 0; 
	padding: 0;
}
body {
    
	 background-color: #f2f3f5; 
	 padding: 15px;
  }

3. 修改 index.html 中对应的 <a> 链接（主要是 增加 target=fm 以及 url 地址）

2.2 绘制基本资料对应的表单

1. 编写如下的表单结构：
2. 在页面底部导入如下的脚本：（layui 的js ，jquer 的js ，info 的js ，baseAPI 的 js）
3. 在 user_info.js 中编写如下的代码 （添加一个条件，指定用户的呢称长度）

  form.verify({
    
    nickname: function(value) {
    
      if (value.length > 6) {
    
        return '昵称长度必须在 1 ~ 6 个字符之间！'
      }
    }
  })

2.3 获取用户的基本信息

1. 导入 baseAPI ：（主要是需要 里面的该用户的 安全码）
2. 在 user_info.js 中定义并调用 initUserInfo 函数：（初始化用户的基本信息）

	！！！！     layui 的form.val()方法，可以快速为表单赋值
  var form = layui.form  
  // 初始化用户的基本信息
  function initUserInfo() {
    
    $.ajax({
    
      method: 'GET',
      url: '/my/userinfo',
      success: function(res) {
    
        if (res.status !== 0) {
    
          return layer.msg('获取用户信息失败！')
        }
        // console.log(res)
        // 调用 form.val() 快速为表单赋值
        form.val('formUserInfo', res.data)
      }
    })
  }

2.4 使用form.val方法快速为表单赋值

1. 为表单指定 lay-filter 属性：

	<form class="layui-form" lay-filter="formUserInfo"></form>

2. 调用 form.val() 方法为表单赋值：

	var form = layui.form  
	form.val('formUserInfo', res.data)

3. 使用隐藏域保存用户的 id 值：
   （api中的data中 有一个 ID的属性（data.id），所以正常的使用form.val来赋值， 需要给表单添加这么 一个 input，并且 name 为 id）

<!-- form 表单区域 -->
<form class="layui-form" lay-filter="formUserInfo">
	 <!-- 这是隐藏域 -->
	<input type="hidden" name="id" value="" /> 

	<!-- 省略其他代码 -->
</form>

2.5 实现表单的重置效果（点击重置后，会重新初始化表单）

1. 阻止表单的默认重置行为，再重新获取用户信息即可：

// 重置表单的数据 
$('#btnReset').on('click', function(e) {
     
	// 阻止表单的默认重置行为 
	e.preventDefault() 
	initUserInfo() 
})

2.6 发起请求更新用户的信息

1. 阻止表单的默认提交行为，并发起数据请求：

  // 监听表单的提交事件
  $('.layui-form').on('submit', function(e) {
    
    1. 阻止表单的默认提交行为
    e.preventDefault()
    
    2. 发起 ajax 数据请求
    $.ajax({
    
      method: 'POST',
      url: '/my/userinfo',
      data: $(this).serialize(),  // 提交表单中的 数据 给 服务器
      success: function(res) {
    
        if (res.status !== 0) {
    
          return layer.msg('更新用户信息失败！')
        }
        layer.msg('更新用户信息成功！')
        
        3. 调用父页面中的方法，重新渲染用户的头像和用户的信息 重要！！！！！！
		这个相当于 这个 iframe 页面的 父亲index 来调用 这个 函数
        window.parent.getUserInfo()
      }
    })
  })

2. 注意： <iframe> 中的子页面，如果想要调用父页面中的方法，使用 window.parent 即可。

--------------------- 重置密码（pwd） --------------------

3.1 渲染重置密码的页面结构

1. 在 /user/user_pwd.html 页面中编写如下的结构：
2. 在 /assets/css/user/user_pwd.css 中编写如下的样式：（跟以前差不多）

3.2 为密码框定义校验规则

1. 定义如下的三个校验规则：（注意，除了两个新密码要相同意外， 新旧密码也不能一样！）

  var form = layui.form

  form.verify({
    
    pwd: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'],
    samePwd: function(value) {
    
      if (value === $('[name=oldPwd]').val()) {
    
        return '新旧密码不能相同！'
      }
    },
    rePwd: function(value) {
    
      if (value !== $('[name=newPwd]').val()) {
    
        return '两次密码不一致！'
      }
    }
  })

2. 在 body 结束标签之前导入如下的 script 标签：
3. 为密码框分别添加对应的校验规则：

3.3 发起请求实现重置密码的功能

  $('.layui-form').on('submit', function(e) {
    
    e.preventDefault()
    
    $.ajax({
    
      method: 'POST',
      url: '/my/updatepwd',
      data: $(this).serialize(),   提交表单数据
      success: function(res) {
    
        if (res.status !== 0) {
    
          return layui.layer.msg('更新密码失败！')
        }
        layui.layer.msg('更新密码成功！')
        // 重置表单
        $('.layui-form')[0].reset()   这个是重置表单的方法（因为是 原生的，所以jQ的对象要转换为原生的对象才能使用）
      }
    })
  })

--------------------- 更换头像（avatar） --------------------

4.1 初步渲染更换头像页面的结构

1. 创建 /user/user_avatar.html 页面：
2. 美化基本样式：
3. 修改 index.html 中对应链接的属性：

4.2 实现裁剪区域图片的替换

  // 1.1 获取裁剪区域的 DOM 元素
  var $image = $('#image')
  // 1.2 配置选项
  const options = {
    
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域
    preview: '.img-preview'
  }

  // 1.3 创建裁剪区域
  $image.cropper(options)

  // 为上传按钮绑定点击事件
  $('#btnChooseImage').on('click', function() {
    
    $('#file').click()
  })

  // 为文件选择框绑定 change 事件
  $('#file').on('change', function(e) {
    
    // 获取用户选择的文件
    var filelist = e.target.files
    if (filelist.length === 0) {
    
      return layer.msg('请选择照片！')
    }

    // 1. 拿到用户选择的文件
    var file = e.target.files[0]
    // 2. 将文件，转化为路径
    var imgURL = URL.createObjectURL(file)
    // 3. 重新初始化裁剪区域
    $image
      .cropper('destroy') // 销毁旧的裁剪区域
      .attr('src', imgURL) // 重新设置图片路径
      .cropper(options) // 重新初始化裁剪区域
  })

4.3 将裁剪后的头像上传到服务器

  // 为确定按钮，绑定点击事件
  $('#btnUpload').on('click', function() {
    
    // 1. 要拿到用户裁剪之后的头像
    var dataURL = $image
      .cropper('getCroppedCanvas', {
    
        // 创建一个 Canvas 画布
        width: 100,
        height: 100
      })
      .toDataURL('image/png') // 将 Canvas 画布上的内容，转化为 base64 格式的字符串
    // 2. 调用接口，把头像上传到服务器
    $.ajax({
    
      method: 'POST',
      url: '/my/update/avatar',
      data: {
    
        avatar: dataURL
      },
      success: function(res) {
    
        if (res.status !== 0) {
    
          return layer.msg('更换头像失败！')
        }
        layer.msg('更换头像成功！')
        window.parent.getUserInfo()
      }
    })
  })

4.4 设置头部区域的快捷方式（绑定头部的快捷方式）

1. 打开 index.html ，修改头部 个人中心 下的三个快捷方式如下：

<dl class="layui-nav-child"> 
	<dd><a href="/user/user_info.html" target="fm">基本资料</a></dd>
	 <dd><a href="/user/user_avatar.html" target="fm">更换头像</a></dd> 
	 <dd><a href="/user/user_pwd.html" target="fm">重置密码</a></dd> 
 </dl>

--------- cropper 的用法（剪裁图片的插件） ---------

1. 基本使用步骤

1. 在 <head> 中导入 cropper.css 样式表：

	<link rel="stylesheet" href="/assets/lib/cropper/cropper.css" /> 1

2. 在 <body> 的结束标签之前，按顺序导入如下的 js 脚本：

<script src="/assets/lib/jquery.js"></script> 
<script src="/assets/lib/cropper/Cropper.js"></script>    
<script src="/assets/lib/cropper/jquery-cropper.js"></script>

3. 在卡片的 layui-card-body 主体区域中，定义如下的 HTML 结构：

<!-- 第一行的图片裁剪和预览区域 -->
        <div class="row1">
          <!-- 图片裁剪区域 -->
          <div class="cropper-box">
            <!-- 这个 img 标签很重要，将来会把它初始化为裁剪区域 -->
            <img id="image" src="/assets/images/sample.jpg" />
          </div>
          <!-- 图片的预览区域 -->
          <div class="preview-box">
            <div>
              <!-- 宽高为 100px 的预览区域 -->
              <div class="img-preview w100"></div>
              <p class="size">100 x 100</p>
            </div>
            <div>
              <!-- 宽高为 50px 的预览区域 -->
              <div class="img-preview w50"></div>
              <p class="size">50 x 50</p>
            </div>
          </div>
        </div>

        <!-- 第二行的按钮区域 -->
        <div class="row2">
          <!-- 通过 accept 属性，可以指定，允许用户选择什么类型的文件 -->
          <input type="file" id="file" accept="image/png,image/jpeg" />
          <button type="button" class="layui-btn" id="btnChooseImage">上传</button>
          <button type="button" class="layui-btn layui-btn-danger" id="btnUpload">确定</button>
        </div>

4. 美化的样式：

/* 设置卡片主体区域的宽度 */
.layui-card-body {
    
  width: 500px;
}

/* 设置按钮行的样式 */
.row2 {
    
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

/* 设置裁剪区域的样式 */
.cropper-box {
    
  width: 350px;
  height: 350px;
  background-color: cyan;
  overflow: hidden;
}

/* 设置第一个预览区域的样式 */
.w100 {
    
  width: 100px;
  height: 100px;
  background-color: gray;
}

/* 设置第二个预览区域的样式 */
.w50 {
    
  width: 50px;
  height: 50px;
  background-color: gray;
  margin-top: 50px;
}

/* 设置预览区域下方文本的样式 */
.size {
    
  font-size: 12px;
  color: gray;
  text-align: center;
}

/* 设置图片行的样式 */
.row1 {
    
  display: flex;
}

/* 设置 preview-box 区域的的样式 */
.preview-box {
    
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
}

/* 设置 img-preview 区域的样式 */
.img-preview {
    
  overflow: hidden;
  border-radius: 50%;
}

#file {
    
  display: none;
}

5. 实现基本裁剪效果：

// 1.1 获取裁剪区域的 DOM 元素 
	var $image = $('#image') 
	
// 1.2 配置选项
	const options = {
     
	// 纵横比   
		aspectRatio: 1,    调整图片里面剪裁的 比例 也可以3/4 或者 2/3
	// 指定预览区域 
		preview: '.img-preview' 
	}
	
// 1.3 创建裁剪区域 
	$image.cropper(options)

2. 更换裁剪的图片

1. 拿到用户选择的文件 （files数组 是原生内置的方法， 0 是文件， 1 是文件的数量）

	var file = e.target.files[0]

2. 根据选择的文件，创建一个对应的 URL 地址：（调用 URL的方法，使文件 转换格式）

	var newImgURL = URL.createObjectURL(file)  

3. 先 销毁 旧的裁剪区域，再 重新设置图片路径 ，之后再 创建新的裁剪区域 ：

$image 
	.cropper('destroy') // 销毁旧的裁剪区域 
	.attr('src', newImgURL) // 重新设置图片路径 
	.cropper(options) // 重新初始化裁剪区域

3. 将裁剪后的图片，输出为 base64 格式的字符串

var dataURL = $image 
	.cropper('getCroppedCanvas', {
     // 创建一个 Canvas 画布 
		width: 100, 
		height: 100 
	})
.toDataURL('image/png') // 将 Canvas 画布上的内容，转化为 base64 格式的字符 串

--------------------- 文章分类（art_cate） --------------------

5.1 创建并显示文章分类页面

1. 创建 /article/art_cate.html 页面，并初始化如下的UI结构：
2. 定义 /assets/css/article/art_cate.css 美化样式：
3. 修改 index.html 中对应的 <a> 链接：

5.2 获取并使用模板引擎渲染表格的数据

1. 在页面底部导入模板引擎：

	<script src="/assets/lib/template-web.js"></script>

2. 定义模板

    <!-- 表格数据的模板 -->
    <script type="text/html" id="tpl-table">
        {
    {
    each data}}
        <tr>
            <td>{
    {
    $value.name}}</td>
            <td>{
    {
    $value.alias}}</td>
            <td>
                <button type="button" class="layui-btn layui-btn-xs btn-edit" data-id="{
    {$value.Id}}">编辑</button>
                <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-delete" data-id="{
    {$value.Id}}">删除</button>
            </td>
        </tr>
        {
    {
    /each}}
    </script>

3. 发起请求获取数据：

  initArtCateList()

  // 获取文章分类的列表
  function initArtCateList() {
    
    $.ajax({
    
      method: 'GET',
      url: '/my/article/cates',
      success: function(res) {
    
      	// ！！！！获取模板引擎的数据， 然后存在 tbody 中
        var htmlStr = template('tpl-table', res)
        $('tbody').html(htmlStr)
      }
    })
  }

5.3 使用layer.open实现弹出层效果

1. 导入 layer ：

	var layer = layui.layer

2. 为按钮添加 id 属性：

<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="btnAddCate">添加类别</button>

3. 在按钮的点击事件中，通过 layer.open() 展示弹出层：

 	 // 为添加类别按钮绑定点击事件
 	 var indexAdd = null
 	 $('#btnAddCate').on('click', function() {
    
 	   indexAdd = layer.open({
    
   	   type: 1,
 	   area: ['500px', '250px'],
  	   title: '添加文章分类',
  	   content: $('#dialog-add').html()
 	   })
 	 })

5.4 在弹出层中渲染form表单结构

这里没有使用模板引擎，至少用 script 的 type，更方便的渲染结构

1. 在页面中定义如下的 script 标签：

    <!-- 添加分类的弹出层 -->
    <script type="text/html" id="dialog-add">
        <form class="layui-form" id="form-add">
            <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" 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="alias" 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>
    </script>

2. 通过 content 属性指定内容：

 	   indexAdd = layer.open({
    
   	   type: 1,
 	   area: ['500px', '250px'],
  	   title: '添加文章分类',
  	   content: $('#dialog-add').html()
 	   })

5.5 实现添加文章分类的功能

1. 发起Ajax请求

  // 通过代理的形式，为 form-add 表单绑定 submit 事件
  $('body').on('submit', '#form-add', function(e) {
    
    e.preventDefault()
    $.ajax({
    
      method: 'POST',
      url: '/my/article/addcates',
      data: $(this).serialize(),
      success: function(res) {
    
        if (res.status !== 0) {
    
          return layer.msg('新增分类失败！')
        }
        initArtCateList()
        layer.msg('新增分类成功！')
        // 根据索引，关闭对应的弹出层
        layer.close(indexAdd)
      }
    })
  })

2. 预先保存弹出层的索引：

  // 为添加类别按钮绑定点击事件
  var indexAdd = null
  $('#btnAddCate').on('click', function() {
    
    indexAdd = layer.open({
    
      type: 1,
      area: ['500px', '250px'],
      title: '添加文章分类',
      content: $('#dialog-add').html()
    })
  })