这里我们使用到的是 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 的属性
发起请求更新用户的信息: