axios官网：https://www.axios-http.cn/docs/intro
Axios 是一个基于 promise 网络哀求库，作用于node.js 和欣赏器中。 它是 isomorphic 的(即同一套代码可以运行在欣赏器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (欣赏端) 则使用 XMLHttpRequests。
一、安装axios：npm install axios -D
二、在Home.vue中进行axios的引入和使用
欣赏器的哀求的结果：有200的返回值，但是没有获取到api内里的数据，结果如下，每次刷新欣赏器都会获取一次get哀求：
三、有没有一种工具，可以拦截哀求数据，根据接口文档来制造数据，就要用到mockjs
mockjs的官网地点：http://mockjs.com/
安装mock：npm install mockjs -D
- (.venv) PS C:\Users\CMCC\PycharmProjects\VIIE3-后台重构\my-vue-app> npm install mockjs -D added 2 packages in 5s
如果匹配到api/home/getTableData的路径就会进行拦截，使用mock内里的方法来获取假数据：
- import Mock from 'mockjs';
- // 引入mockdata下的home里面的api，也就是暴漏出去的gettableData（）
- import homeApi from"./mockData/home"
- //mock用法里面的参数：1、拦截的路径,可以采用正则表达式进行编写；2、方法；3、制造出的假数据
- Mock.mock("/api\/home\/getTableData",'get',homeApi.getTableData()) ;
2.界说处理哀求的方法
在api文件夹下创建mockData文件夹，在其中创建home.js,以后全部的mock的假数据都在这个文件内里实现：
- export default {
- getTableData: () => {
- return {
- code: 200,
- data: {
- tableData: [
- {
- name: "比亚迪",
- todayBuy: 500,
- monthBuy: 3500,
- totalBuy: 22000,
- },
- {
- name: "小鹏",
- todayBuy: 300,
- monthBuy: 2200,
- totalBuy: 24000,
- },
- {
- name: "理想",
- todayBuy: 800,
- monthBuy: 4500,
- totalBuy: 65000,
- },
- {
- name: "华为",
- todayBuy: 1200,
- monthBuy: 6500,
- totalBuy: 45000,
- },
- {
- name: "问界",
- todayBuy: 300,
- monthBuy: 2000,
- totalBuy: 34000,
- },
- {
- name: "大众",
- todayBuy: 350,
- monthBuy: 3000,
- totalBuy: 22000,
- },
- ],
- },
- }
- }
- }
这个是拦截器的开关，当我们必要制造假数据，验证我们写的接口是否可用的时候就可以添加下面这个注册语句，如果使用的是真实的接口就把下面的语句注销就行。 import "@/api/mock.js"
4、在home.vue内里使用axios进行哀求api：然后将数据在欣赏器控制台中进行打印：
- axios({
- url:'/api/home/getTableData',
- method:'get'
- }).then(res=>{
- console.log(res.data)
- // 要学会制造数据，把交互的流程，接口的文档跑通
- // 有没有一种工具，可以拦截请求数据，根据接口文档来制造数据，就要用到mockjs
- })
5、然后根据哀求拿到的数据进行HOME.VUE前端内容的完满让前端能够展示出获取的表格的数据
注：data内里另有一层tableData，在赋值的时候要特别注意，很容易出错。
- axios({
- url:'/api/home/getTableData',
- method:'get'
- }).then(res=>{
- console.log(res.data)
- // 要学会制造数据，把交互的流程，接口的文档跑通
- // 有没有一种工具，可以拦截请求数据，根据接口文档来制造数据，就要用到mockjs
- if(res.data.code==200){
- console.log(res.data.data.tableData)
- tableData.value=res.data.data.tableData
- }
- })
终极的结果，原来表格使用的是HOME.VUE内里静态的表格数据，现在使用的是axios接口内里，被mock拦截的制造的数据；只要将main.js内里的mock注销，那前端页面又会回到HOME.VUE内里使用静态数据的状态，大家可以切换了看下结果。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
