大事件后台管理系统——个人中心

1.创建验证规则函数

个人中心——基本资料：用来修改用户信息

针对表单不同类型的数据需要设定验证规则函数，只有输入正确才能提交表单

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

在input标签中添加该验证规则 ：

<div class="layui-form-item">
            <label class="layui-form-label">用户昵称</label>
            <div class="layui-input-block">
              <input type="text" name="nickname" required lay-verify="required|nickname" placeholder="请输入用户昵称" autocomplete="off" class="layui-input" />
            </div>
          </div>

---

2.获取用户的基本信息 

initUserInfo()

  // 初始化用户的基本信息
  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)
      }
    })
  }

添加隐藏域：

 <!-- 这是隐藏域 -->
          <input type="hidden" name="id" value="" />

---

 3.重置按钮及提交按钮

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

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

子页面调用父页面的函数： window.parent.父页面函数名

---

 4.定义密码框校验规则

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 '两次密码不一致！'
      }
    }
  })

---

5.发起密码重置请求

$('.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()
      }
    })
  })

---

6.更换头像

6.1裁剪图片参考cropper的基本用法

6.2上传头像

为达到上传文件的效果，为上传按钮绑定一个点击事件。

在页面中设置一个隐藏的文件上传标签（display：none），当点击上传按钮程序自动模拟点击该上传文件标签

通过 accept 属性，可以指定，允许用户选择什么类型的文件 

<input type="file" id="file" accept="image/png,image/jpeg" />

// 为上传按钮绑定点击事件
  $('#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) // 重新初始化裁剪区域
  })

 6.3更换头像参考cropper的基本用法

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

 // 为确定按钮，绑定点击事件
  $('#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()
      }
    })
  })

base64字符串:减少不必要的图片请求（但体积比较大，适用于小图片上传）

---

 7.提交user分支到github

1.向暂存区一次性添加多个文件：git add .

2.提交已暂存文件：git commit -m"完成了个人中心功能的开发"

3.将本地分支推送到远程仓库（第一次）：git push -u origin user

4.合并分支：git checkout master

                     git merge user

5.将本地分支推送到远程仓库：git push

---

8.创建新的git分支

1.快速创建及切换：git checkout -b article

2.查看分支列表：git branch