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

最新推荐文章于 2024-04-24 15:22:20 发布
最新推荐文章于 2024-04-24 15:22:20 发布
阅读量2.9k 收藏 20
点赞数 4
分类专栏： 高校宿舍管理系统 文章标签： 项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45593575/article/details/116653221
版权

第三章 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.理解拦截器的作用

第四章预计三天内更新，涉及前端项目的创建和跨域问题以及完成登录页面。
313YPHU3
关注
  • 4
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
layui vue admin教程：http配置多个baseURL分别请求不同后端服务
学亮编程手记
10-05 975
响应拦截器用于在每次接收到响应后进行一些操作，比如根据响应的状态码进行处理。这些方法使用 Axios 实例发送对应的 HTTP 请求，并返回 Promise 对象，以便在异步调用时进行处理。这样，在其他文件中导入这个模块时，就可以直接使用该实例进行 HTTP 请求操作。是 99998 时，会显示一个确认对话框，提示会话超时并要求重新登录，并在确认时跳转到登录页面。是 200，500 或 99998，分别进行不同的处理。，它们分别对应两个不同的后端服务。对象发送不同的 GET 请求，分别对应不同的后端服务。
SpringBoot前后端分离 - 预约挂号系统
09-24
项目详细功能参考项目演示内容即可项目优势：1、项目从零开始到完结 附带视频，源码以及相关辅助资料,适合学习使用，项目也可拿来即用。2、几乎全手写代码，功能流程详细 跟着可以独立完成，附带详细代码相关常见bug 和 调试解决方案，让大家学会跟踪快速解决问题。3、系统后端使用LayUI技术，对页面不精通的小伙伴也可以快速完成精美页面的设计及应用，支持统一后台管理，也可拿来做其他项目通用后台4、针对layui 相关技术点薄弱的学员提供相关技术点学习，让快速上手完成项目研发5、选材来自生活，项目真实感强，可用学习使用和就业面试使用，适合作为面试中提高实际项目经验...6、该项目前后端分离，满足前沿技术点..项目技术栈：- 数据库：MySQL8.0- 后端技术：SpringBoot，MyBatisPlus，JWT 等- 日志技术：Log4j- 数据库连接池：druid- 前端技术：LayUI, axios，Echarts，Ztree 等- Web容器：Apache Tomcat 9- 项目管理工具：Maven3.6- 思维导图设计工具：XMIND 8- 开发工具: IDEA2020, WebStorm2020- 数据库设计软件：Power Designer16.5特别提示：1、涉及相关技术点学习，更多侧重大学生或无项目经验以及项目经验较少的学员入门到项目完结项目实战2、项目中功能处理大多提供多种解决方式，如跨域访问，更多让大家了解解决方式的同时学会技术点应用3、加入bug的调试以及代码跟踪处理，更好的让学员更多学会如何解决问题
Vue脚手架安装Jquery、LayUI、Bootstarp、element、Axios以及前端解决跨域问题
最新发布
qq_63352757的博客
04-24 551
如果你还需要使用 Bootstrap 的 JavaScript 组件（如模态框、弹出框等），你也可以在 main.js 中引入 Bootstrap 的 JavaScript 文件。上述代码中，我们首先导入 Vue 库，然后引入 Bootstrap 的 CSS 文件 (bootstrap.css)。在需要使用 Axios 的地方引入并使用它：import axios from 'axios'在 main.js 文件中引入 Bootstrap 的样式。在整个项目中全局引入（在项目的入口文件。
axios封装（通用）
qq_34626688的博客
07-28 8343
axios封装 封装目的： 避免重复设置超时时间，请求头，错误处理；提高代码质量 主要文件目录： post/index.js /* * @Descripttion: axios 封装 * @version: 1.0.0 * @Author: hanjg * @Date: 2020-07-24 10:23:06 * @LastEditors: hanjg * @LastEditTime: 2020-07-27 17:04:07 */ import axios from 'axios' impo
vue+layui+axios 个人学习，持续更新
a赟
08-07 1815
1、官网地址：https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA 2、Vue生命周期中mounted和created的区别？ created：在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。 mounted：在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。 通常created使用的次数多，而mo
axios和layUI配合加载数据表格demo
weixin_34365417的博客
10-08 2390
为什么80%的码农都做不了架构师？>>> ...
Vue+axios 整合 layui+laypage实现真分页
哈
05-21 1020
整合效果
基于SpringBoot+MySQL的高校宿舍管理系统设计与实现.zip
05-19
前端：layui2.5.7 axios0.21.0 jwt(json web token) ztree optable echarts layuimini v2 单页版 后端：springboot2.4.2 mybatis-plus3.4.0 EasyExcel easyexcel 详细介绍参考：...
毕业设计-高校宿舍管理系统(springboot，vue)
02-08
毕业设计 高校宿舍管理系统 毕业设计 高校宿舍管理系统 本系统功能包括：权限管理，菜单管理，项目运行宿舍管理，学生管理，班级管理，宿舍楼管理，各项记录（归寝记录，维修记录，请假记录，晚归记录），各项系统...
JAVA高校宿舍管理系统源码+数据库，前端Vue3，后端SpringBoot+Mybatis-Plus
01-09
软件架构 前端：Vue3、Element-Plus、Axios、ECharts、wangEditor 后端：SpringBoot、Mybatis-Plus 安装教程 选择进入demo项目 cd vue npm install
信息管理系统（springboot，mybatisplus ，axios，thymeleaf.zip
03-05
《信息管理系统：基于SpringBoot、MybatisPlus与Axios、Thymeleaf的实现》 在信息化时代，信息管理系统已经成为企业、机构等组织不可或缺的重要工具，它们能够有效地整合、管理和利用各类信息资源，提高工作效率，...
图书管理系统课设（SpringBoot+LayUi+AJAX+ELEMENTUI+Axios）
10-25
使用了SpringBoot框架，前端页面使用LayUi和ELEMENTUI，部分内容通过Axios完成了前后端的分离；管理员模块实现了对图书，图书类型的管理，能够对未定期归还图书的读者发送消息提醒；读者模块能够实现图书的借阅。
SpringBoot+Mybatis+Vue+Element-ui+layui+layer+axios搭建的成熟后台管理模板框架实现简单的页面增删改查，适合初学者积累学习
qq_34334055的博客
03-12 1778
layui xm-select插件(axios/ajax)远程获取数据
php菜鸟技术天地
06-09 2755
插件：https://maplemei.gitee.io/xm-select/#/senior/update
promise 异步回调案例
mikibiubiu的博客
09-19 271
<script> setTimeout(() => { console.log(5)//5 }) new Promise((resolve, reject) => { console.log(4)//4 resolve(3) ...
layui 封装 ajax请求
qing_er_的博客
08-01 3044
为方便在layui后台管理中提升开发效率，所以在js中封装了方法，以方便使用。
前端架构带你 封装axios，一次封装终身受益「美团后端连连点赞」
Web_boom的博客
10-15 204
基本上可以保证你能应付面试官关于JS的提问
layui之ajax的form表单发送请求（附带一点点头部工具栏的使用）
qq_51615662的博客
06-22 2285
使用layui做项目中的问题，随手解决随手记，方便下次自己不会在上面出错了，也给使用layui的伙伴们避个雷。我在做一个表单的添加，弹出一个layer弹出层，然后填写里面的表单进行提交保存的操作，一个很简单的流程，里面有些小小的注意的点让我绕了不少的圈子。此前我都是一个表格里的数据通过layui的url接口传到servelet中，layer里面的表单提交用的form表单，当我使用它的action提交时，出现了1.数据传不过去2.当我想看前面我写的代码，表单我怎么提交时，我看到了这个东西，
ajax封装layui工具类，用于设置请求头（token）
冷雨清的博客
10-26 4437
ajax封装工具类，用于设置请求头（token） 参数说明 url：请求路径（不可为空） params：请求参数（不可为空） ft：回调方法（不可为空） headers：请求头（true：设置请求头“authorization”和“refresh_token”，false：就设置请求头“authorization”，为空就不设置）（可以为空） noAuthorityFt：无权限响应 （可以为空） contentType：请求类型 （可以为空）默认是json async：是否异步（可以为空）默认是true /
vue整合axios
07-28
回答: Vue整合axios是指在Vue项目中使用axios库来进行网络请求。首先，需要创建一个Vue项目，可以使用vue-cli来快速搭建。然后，将axios库封装到项目中，可以在util文件夹中创建一个http.js文件来封装axios。在main.js中引入并添加到Vue的原型对象中。接下来，可以在项目中使用封装好的axios实例来发起异步请求。如果需要解决跨域问题，可以在开发环境中设置代理来实现跨域请求。需要注意的是，修改配置文件后需要重启项目才能使配置生效。在需要拦截请求或响应的地方，可以使用封装好的axios实例来发起异步请求；而在不需要拦截的地方，可以直接使用未封装的axios来发起异步请求。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *3* [Vue总结（二）—— 整合axios](https://blog.csdn.net/qq_43776195/article/details/123307777)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [axios和vue的整合操作，还不来看看](https://blog.csdn.net/weixin_54217216/article/details/123943445)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

313YPHU3

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值