后台管理系统-6-vue3之mockjs模拟和axios请求数据
文章目录
- 1 工具简介
-
- 1.1 axios
- 1.2 mockjs
-
- 1.2.1 /api/mockData/home.js(制造首页数据)
- 1.2.2 /api/mock.js(Mock.mock拦截请求)
- 1.2.3 main.js(引入控制是否生效)
- 1.3 Home.vue中使用(axios)
- 2 axios请求接口URL统一管理
-
- 2.1 axios的拦截器
- 2.2 对axios进行二次封装
-
- 2.2.1 request.js(拦截器和错误处理)
- 2.2.2 api.js(封装URL)
- 2.2.3 main.js(全局引入和注册)
- 2.3 Home.vue中使用
- 3 参考附录
使用mock.js模拟数据，使用axios请求接口，并对URL统一管理。
1 工具简介
要学会制造假数据，把交互请求的流程，根据接口文档跑通，还要制造出数据。
有一种工具，拦截住请求把我们制造的数据，根据接口文档实现。
1.1 axios
axios是一个基于Promise的HTTP客户端，常用于浏览器和Node.js环境中发送网络请求。
安装npm install axios。
1.2 mockjs
Mock.js是一个流行的JavaScript库，用于在前端开发中生成模拟数据(Mock Data)，常用于前后端分离开发时，前端在没有依赖后端接口的情况下进行开发和测试。
安装npm install mockjs。
新建一个api目录，下面新建一个mock.js文件，同时下面新建一个mockData目录，其中添加一个home.js，用于模拟首页静态表的数据。
