【高校宿舍管理系统】第三章 Layui整合Axios

第三章 Layui整合Axios

提示：本博客个为人独立博客，不是权威，仅供参考！所有思路只做交流之用！如有不足之处，望各位在评论区友善指正。

---

---

前言

本来只打算讲一下整合流程的，写着写着觉得还是要简单介绍一下，在整合之前要做大量的铺垫，因而这一章的内容比我想的要多得多，中途还去补了一下JS和AJAX的知识，这一期拖得比较久了。
这一章将介绍如何使用Layui整合Axios，以及Layui和Axios的简单介绍。这么多天了，大家终于可以看到我们系统的总体布局了。
工具：WebStorm

---

一、下载Layui + Layui MINI

1.下载Layui

打开Layui官网：https://www.layui.com

2.下载Layui MINI

打开Layui MINI官网：http://layuimini.99php.cn

2.将两个压缩包解压到“高校宿舍管理系统”文件夹内

二、Layui是什么？Layui MINI又是什么？

1.Layui是什么？

1.Layui MINI又是什么？

三、调整Layui

1.无需打开WebStorm的简单调整

2.打开WebStorm进行的细节调整

使用WebStorm打开项目

上面就是Layui MINI的主页预览


接下来调整主页
去除【清除服务端缓存】按钮

去除Layui官方链接

其它配置

Layui作为前端框架无法与后端交互，所以将菜单的数据用json写死以便预览，而我们作为程序开发人员将来需要从后端获取真实数据，从后端获取的数据也是数组，因此做出以下调整

最终效果

四、Axios

1.什么是Axios？

打开Axios官方文档：http://www.axios-js.com/zh-cn/docs/

promise是什么？

• 主要用于异步计算
• 可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
• 可以在对象之间传递和操作promise，帮助我们处理队列

异步又是什么呢？
简单来说就是用JS实现页面的局部刷新，而不用刷新整个网页，更节约资源和时间

我们来对比一下同步和异步的响应过程：

• 传统方式（同步）：Form（提交一个表单）→ Server → New HTML
• AJAX（异步）：Request → Date（XML，JSON）→ Update data（DOM）

而我们的Axios就是通过promise实现对AJAX的一种封装，就像AJAX是通过jQuery来封装的一样
也就是说，jQuery将请求技术进行了封装，变成了AJAX。而通过promise又把AJAX进行封装，就成了Axios

2.为什么使用Axios

我们本项目采用前后端分离，数据传输的验证采用token，而token需要用拦截器检测，而Axios写拦截器很方便

后端有各种安全机制，比如身份验证等，需要用到拦截器
前端虽然做不了什么安全措施，但是相应的拦截和安全还是要做，因为可以帮后端挡掉很多低质量攻击以及提高用户体验

给大家补充一下token的应用（图中的服务端就是后端）

1.登录

2.业务请求

3.token过期，刷新token

四、Layui整合Axios

1.下载源码

打开Axios官网：http://www.axios-js.com/
解压后打开文件夹找到这个文件
打开WebStorm

2.Layui整合Axios

在lay-config.js中注册

将表格页面的AJAX请求改为Axios的，本次项目我们主要用到的就是表格

定位到AJAX请求

导入Axios

模仿AJAX配置Axios

在axios.js中写拦截器

---

# 总结 难点：
1.理解Layui 和 Layui MINI的关系
2.理解Axios、AJAX、promise的关系
3.理解Axios配置的代码
4.理解拦截器的作用

第四章预计三天内更新，涉及前端项目的创建和跨域问题以及完成登录页面。