第三章 Layui整合Axios

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

文章目录

第三章 Layui整合Axios
前言
一、下载Layui + Layui MINI
- 1.下载Layui
- 2.下载Layui MINI
- 2.将两个压缩包解压到“高校宿舍管理系统”文件夹内
二、Layui是什么？Layui MINI又是什么？
- 1.Layui是什么？
- 1.Layui MINI又是什么？
三、调整Layui
- 1.无需打开WebStorm的简单调整
- 2.打开WebStorm进行的细节调整
四、Axios
- 1.什么是Axios？
- 2.为什么使用Axios
四、Layui整合Axios
- 1.下载源码
- 2.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.理解拦截器的作用

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

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

【高校宿舍管理系统】终章完成主页以及项目总结
终章完成主页以及项目总结提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录终章完成主页以及项目总结前言一.完成主页 1. ...
【高校宿舍管理系统】第二章整合Mybatis和写CRUD的基本流程以及使用代码生成器生成Mapper等相关代码
第二章整合Mybatis和写CRUD的基本流程以及使用代码生成器生成Mapper等相关代码提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正 ...
【高校宿舍管理系统】第九章寝室编号设置和宿舍初始化以及预选设置
第九章寝室编号设置和宿舍初始化以及预选设置提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录第九章寝室编号设置和宿舍初始化以 ...
【高校宿舍管理系统】第一章建立数据库以及项目框架搭建
第一章建立数据库以及项目框架搭建提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录第一章建立数据库以及项目框架搭建前言一 ...
【高校宿舍管理系统】第七章机构管理和功能菜单权限分配
第七章机构管理和功能菜单权限分配提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录第七章机构管理和功能菜单权限分配前言一 ...
【高校宿舍管理系统】第八章学生管理和楼宇管理以及寝室管理
第八章学生管理和楼宇管理以及宿舍管理提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录第八章学生管理和楼宇管理以及宿舍管理 ...
【毕业设计】大学宿舍管理系统高校宿舍管理系统
基于Springboot的大学宿舍管理系统&&高校宿舍管理系统绪论课题主要内容系统建设目标系统采用 B/S 架构,后端基于 Java 语言和 SpringBoot 框架的方式进 ...
【计算机毕业文章】基于SSM的高校宿舍管理系统的设计与实现
摘要近年来, 伴随着互联网产业的快速发展和大力推广,"数字化"."信息化"为关键字的校园建设已经成为了各大院校发展的共同课题.宿舍是在大学校园里面学习和生活 ...
高校宿舍管理系统详细需求分析说明书
(详细)高校宿舍管理系统需求分析说明书(文末-->获取原文档) 版本状态版本作者参与者起止日期注释审阅者团队版本日期签名教学管理委员会 V1.1 2019.06.1 ...

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