后台管理项目总结一 GitHub的基本使用；自定义账号密码的校准规则；ajax的Prefilter函数方法的使用；

--------------------- 项目前期的准备工作 --------------------

获取 api 接口文档

1.1 初始化项目结构

1. 在项目目录 新建 项目

1.2 使用GitHub管理大事件的项目

1. 在 code 目录中运行 git init 命令
2. 在 code 目录中运行 git add . 命令
3. 在 code 目录下运行 git commit -m “init project” 命令
4. 新建 Github 仓库 web_bigevent
5. 将本地仓库和Github仓库建立关联关系
6. 将本地仓库的代码推送到Github仓库中
7. 运行 git checkout -b login 命令，创建并切换到 login 分支

1.3 安装VSCode的Live Server插件辅助开发

1. 在插件市场，搜索 Live Server 并安装 （实时刷新网页的工具）
2. 在页面上鼠标右键，选择 Open With Live Server 即可快速使用 http 协议访问页面

--------------------- 登录注册（login） --------------------

2.1 绘制login页面的基本结构

1. 编写 HTML 结构：
2. 美化样式：

2.2 实现登录和注册的按需切换

1. 编写 HTML 结构：
2. 编写样式：
3. 编写 JavaScript 代码：

2.3 绘制登录表单的基本结构

1. 编写 HTML 结构：

2.4 美化登录表单的样式

1. 编写样式：

2.5 绘制文本框前面的小图标

1. 在用户名和密码的文本框之前，添加标签结构（layui 框架）

2.6 快速绘制注册的表单

1. 将登录的表单复制一份，并修改为注册的表单即可：

2.7 实现登录表单的验证

1. 导入 layui 的 js 文件：

	<script src="/assets/lib/layui/layui.all.js"></script>

2. 为需要验证的表单项添加 lay-verify 属性，同时指定具体的校验规则即可。

2.8 自定义校验规则

1. 从 layui 中获取 form 对象：

	var form = layui.form

2. 通过 form.verify() 函数自定义校验规则：

	  // 从 layui 中获取 form 对象
  var form = layui.form
  var layer = layui.layer
  // 通过 form.verify() 函数自定义校验规则
  form.verify({
    // 自定义了一个叫做 pwd 校验规则
    pwd: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'],
    // 校验两次密码是否一致的规则
    repwd: function(value) {
      // 通过形参拿到的是确认密码框中的内容
      // 还需要拿到密码框中的内容
      // 然后进行一次等于的判断
      // 如果判断失败,则return一个提示消息即可
      var pwd = $('.reg-box [name=password]').val() （第一次设置的密码）
      if (pwd !== value) {  （如果第一次的密码不等于第二次的密码）
        return '两次密码不一致！'
      }
    }
  })

3. 按需为表单项添加校验规则： （把自己自定义的 规则 ，添加在 lay-verify 后面）

<input type="password" name="repassword" required lay- verify="required|pwd|repwd" placeholder="再次确认密码" autocomplete="off"
class="layui-input" />

2.9 发起注册用户的Ajax请求

1. 为注册表单添加Id：

<!-- 注册的表单 -->
<form class="layui-form" id="form_reg"></form>

2. 监听提交事件：（监听表单的 submit 事件）

	  // 监听注册表单的提交事件
  $('#form_reg').on('submit', function(e) {
    // 1. 阻止默认的提交行为
    e.preventDefault()
    // 2. 发起Ajax的POST请求
    var data = {
      username: $('#form_reg [name=username]').val(),
      password: $('#form_reg [name=password]').val()
    }
    $.post('/api/reguser', data, function(res) {
      if (res.status !== 0) {
        return layer.msg(res.message)
      }
      layer.msg('注册成功，请登录！')
      // 模拟人的点击行为
      $('#link_login').click()  （注册成功后 自动跳转到登录界面）
    })
  })

2.10 使用layer提示消息

1. 导入 layer：

	var layer = layui.layer

2. 调用 layer.msg() 提示消息：

	layer.msg('注册成功，请登录！')

2.11 发起登录的Ajax请求

1. 为登录表单添加id：

	<form class="layui-form" id="form_login"></form> 1

2. 监听提交事件：

  // 监听登录表单的提交事件
  $('#form_login').submit(function(e) {
    // 阻止默认提交行为
    e.preventDefault()
    $.ajax({
      url: '/api/login',
      method: 'POST',
      // 快速获取表单中的数据
      data: $(this).serialize(),
      success: function(res) {
        if (res.status !== 0) {
          return layer.msg('登录失败！')
        }
        layer.msg('登录成功！')
        重要！！！ 将登录成功得到的 token 字符串，保存到 localStorage 中
        localStorage.setItem('token', res.token)
        // 跳转到后台主页
        location.href = '/index.html'
      }
    })
  })
})

2.12 在ajaxPrefilter中统一拼接请求的根路径

1. 在 /assets/js 目录中新建 baseAPI.js
2. 编写如下代码：

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

2.13 提交login分支的代码到GitHub

1. 运行 git add . 命令 （放置修改区）
2. 运行 git commit -m “完成了登录和注册的功能” 命令 （保存）
3. 运行 git push -u origin login 命令 （把分支上传到 github）
4. 运行 git checkout master 命令 （切换到 分支 master）
5. 运行 git merge login 命令 （合并 login 分支 到 master）
6. 运行 git push 命令 （把合并好的 保存到 github）
7. 运行 git checkout -b index 命令 （创建新的分支）

--------------------- 后台主页（index） --------------------

3.1 快速实现后台主页的布局效果

1. 从 layUI 官方文档中粘贴布局的主要代码，并修改如下

3.2 修改侧边栏的结构

3.3 使用lay-shrink实现左侧菜单互斥效果

3.4 为菜单项添加图标

1. 导入第三方的图标库：（阿里图标库）

	<link rel="stylesheet" href="/assets/fonts/iconfont.css" />

2. 修改左侧菜单的结构：
3. 修改头部“退出”按钮的结构：
4. 导入自己的样式表文件：

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

5. 编写自己的样式：

	.layui-footer {
	  text-align: center;
 	 font-size: 12px;
	}

	.iconfont {
	  margin-right: 8px;
	}

	.layui-icon {
	  margin-right: 8px;
	  margin-left: 20px;
	}

3.5 使用iframe标签在内容主体区域显示网页内容（重点）

1. 在页面主体的 div 中添加 iframe ：

<div class="layui-body">
 <!-- 内容主体区域 -->
<iframe name="fm" src="（这里写 默认显示的url地址）" frameborder="0"></iframe>
 </div>

2. 为 首页 链接添加 href 和 target 属性：
   target = fm 表示与这个name=fm的 iframe 关联了
   点击了这个a 以后在 iframe 里面显示的 href 上的 url地址，

<a href="/home/dashboard.html" target="fm"><span class="iconfont icon- home"></span>首页</a>

3. 美化样式：

iframe {
  width: 100%;
   height: 100%; 
 }
 
.layui-body { 
	overflow: hidden; 
}

3.6 解决3个小问题

1. 为 iframe 指定默认页面：

	<iframe name="fm" src="/home/dashboard.html" frameborder="0"></iframe>

2. 为 首页 对应的导航 Item 项添加 layui-this 属性： （默认选中加高亮）

<li class="layui-nav-item layui-this"> 
	<a href="/home/dashboard.html" target="fm">
		<span class="iconfont icon- home"></span>
		首页
	</a> 
</li>

3. 强制清除 <a> 链接的 CSS3 动画：（这个动画是 layui 的自带效果）

	a {
	transition: none !important;
	 }

3.7 渲染图片头像和文字头像

1. 修改头部区域的的头像结构如下：

<a href="javascript:;" class="userinfo"> 
	<img src="http://t.cn/RCzsdCq" class="layui-nav-img" /> 
	<span class="text-avatar">A</span> 
	个人中心 
</a> 

2. 在左侧导航区域的 ul 之前添加如下头像结构：

<div class="userinfo">
	 <img src="http://t.cn/RCzsdCq" class="layui-nav-img" /> 
	 <span class="text-avatar">A</span>
 	 <span id="welcome">欢迎 ***</span>
 </div>

3. 添加样式美化 UI 结构：
   （这里要写一个 自定义的图片，也就是一个背景色，里面是 用户名 的 第一个字母的大写）

.userinfo {
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 12px;
    user-select: none;     使这一行 无法被拖拽  
}

.layui-side-scroll .userinfo {
    border-bottom: 1px solid #282b33;
}

.layui-nav-img {     如果用户设置了 头像，  就显示这个
    width: 40px;
    height: 40px;
}

.text-avatar {      如果用户没有设置 头像  ， 就默认显示这个，
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #009688;
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    position: relative;
    top: 4px;
    margin-right: 10px;
}

.layui-nav-item a {
    font-size: 12px;
}