这里我们使用到的是 layui ，先登录找到 layui 的官方文档: Layui - 经典开源模块化前端 UI 框架

使用流程:

• 左侧是快捷导航，能够让我们快速找到对应的一些页面效果分类或者是功能分类

• 左侧选中我们想要的分类之后，右侧会有一个子分类，例如：左侧点击的布局，那么右侧是二级分 类，里面有哪些布局的结构样式

• 当选中了对应的二级分类，就会跳转到对应效果那里 上面是示例效果 下面就是示例代码

• 我们需要做的就是找到对应效果的代码， copy 到我们项目中，然后按照我们需要的效果进行调整 即可

在目录下新建 login.html 和 index.html 页面, 推送到新建gitee仓库.

效果演示: 

注意一下提交按钮的设置: 

 设置自定义校验规则:  

 使用校验规则(用 | ) 不能有空格:  

发起登录的Ajax请求: 

• 查阅接口文档，关注几个重点要（请求URL，请求方式，请求参数，响应数据）

• 给按钮添加id，添加绑定事件，在事件处理函数里面先取消表单提交的默认行为

• 利用 $.ajax() 进行网络请求，注意添加根路径

• 请求成功之后提示用户，保存token信息，跳转到后台主页

• oken 用来标识用户是否登录的令牌，后台的页面需要用户登录之后才能查阅，那么权限校 验的机制也就出来了，需要检验权限的页面后台先判断请求头里面是否有token，以此来判断 是否是登录状

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

每次请求的时候都需要去添加根路径，比较的麻烦，如果根路径进行了修改，那么每个请求的页面都需 要调整，那么 jQuery 中提供了一个 过滤器，可以帮我们统一去进行设置，而这个过滤器调用的时机是 在我们调用 $.ajax() 之后，请求真正发给后台之前调用的： $.ajax() > ajaxPrefilter过滤器 -> 发送请求给服务器.

在 /assets/js 目录中新建 baseAPI.js

注意这里的引入JS的顺序: 

调用 $.ajaxPrefilter() 函数，里面传递一个回调函数，回调函数里面有一个形成 options ， 这个形成里面就包含了这一次请求的相关信息

 然后提交login 分支的代码到远程仓库

使用iframe标签在内容主体区域显示网页内容:

要设置name

指定默认 iframe 页面，添加 src 的属性即可

 使用的时候: 

 

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

 

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

还记得之前的 ajaxPrefilter 函数吗，在我们调用 $.ajax() 后，并且在请求服务器之前调用的过 滤器，那么我们能统一设置根路径，那么我们就可以去统一设置请求头

• 在 baseAPI 的 ajaxPrefilter 中添加如下代码

• 判断 url 里面是否携带 /my/

• 如果携带，那么我们就设置 options.headers

 

控制用户的访问权限: 

用户如果没有登录，是否能够允许用户访问后台主页？肯定是不能的，所以我们需要进行权限的校验， 可以利用请求后服务器返回的状态来决定

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

优化: 将权限控制的代码，从每个请求中，抽离到 ajaxPrefilter 中 利用 options 来挂在统一的 complete 函数

为表单快速赋值:

利用 form.val() 进行快速赋值，赋值之前我们需要给 form 表单添加 一个 lay-filter 的属性

 

 

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