Vue项目Mock.js配置与Ajax请求模拟完整指南

Mock.js模拟数据背景与安装

当后端尚未提供JSON数据接口，而前端需要基于数据进行页面开发时，可以使用Mock.js生成模拟数据源，通过发送Ajax请求来获取并展示数据。

第一步，通过命令行工具安装Mock.js依赖库。

npm install mockjs --save-dev

Mock配置文件结构搭建

第二步，在项目的src目录下创建一个名为mock的文件夹，用于存放Mock相关的配置文件。

第三步，在新增的mock文件夹中创建两个文件：一个JSON数据文件（例如list.json）和一个Mock服务配置文件（mockServe.js）。

list.json文件的内容结构如下，用于定义模拟数据的格式和示例值。

[
    {
        "date": '2016-05-02',
        "name": '王小虎',
        "address": '上海市普陀区金沙江路 1518 弄'
    },
    {
        "date": '2016-05-02',
        "name": '王小虎',
        "address": '上海市普陀区金沙江路 1518 弄'
    },
    {
        "date": '2016-05-02',
        "name": '王小虎',
        "address": '上海市普陀区金沙江路 1518 弄'
    },
    {
        "date": '2016-05-02',
        "name": '王小虎',
        "address": '上海市普陀区金沙江路 1518 弄'
    },
]

mockServe.js文件负责配置Mock规则，具体代码如下。

// 先引入mockjs模块
import Mock from 'mockjs';
// 引入你编写json所在文件的路径
import list from './list.json';
// 模拟数据返回
Mock.mock("/mock/list", {
    code: 200,
    data: list
});

Mock服务引入与Axios封装

第四步，将mockServe.js文件引入到src目录下的main.js入口文件中，确保Mock服务在应用启动时生效。

import '@/mock/mockServe'

API接口统一管理与调用

第五步，在src目录下的api文件夹中创建mockAjax.js文件，用于封装Axios请求实例。

// 对于axios进行二次封装
import axios from 'axios';
// 1.利用axios对象的方法create，去创建一个axios实例
// 2.request就是axios，只不过稍微配置一下
const request = axios.create({
    // 配置对象
    // 基础路径：发请求的时候，路径中会出现mock
    baseURL:"/mock",
    // 代表请求超时的时间
    timeout:5000
})
//请求拦截器----在项目中发请求（请求没有发出去）可以做一些事情
request.interceptors.request.use((config) => {
    return config;
  });
  //响应拦截器----当服务器手动请求之后，做出响应（相应成功）会执行的
  request.interceptors.response.use((res) => {
      //相应成功做的事情
      return res.data;
    },
    (err) => {
      alert("服务器响应数据失败");
    }
  );
// 对外暴露
export default request;

第六步，在src目录下的api文件夹中创建index.js文件，用于统一导出API接口。

import mockRequest from './mockAjax'
export const reqGetList = () => mockRequest({url:'/list',methods:'get'})

第七步，在需要发送请求的具体页面组件中编写调用模拟接口的代码。

import {reqGetList} from '@/api/index.js
mouted(){
    reqGetList().then(res=>{
        console.log(res)
    })
}

完成上述步骤后，即可在页面中成功请求到预先定义的假数据。

此外，也可以选择在入口文件中统一管理API模块，以便全局调用。

具体在main.js中的配置方式如下，将API挂载到Vue原型上。

// 任意组件可以使用API相关的接口
import * as API from '@/api'
Vue.prototype.api = API;

随后，在需要请求数据的页面组件中，通过挂载的API实例发送请求，代码示例如下。

this.api.reqGetList().then(res=>{
	this.dataList = res.data;
})

至此，关于在Vue中使用Mock.js编写假数据并请求获取的完整流程介绍完毕。如需了解更多相关Vue Mock.js内容，可搜索本站历史文章或继续浏览后续教程，感谢支持。

Vue中使用Mock.js模拟后端数据及请求流程

Mock.js模拟数据背景与安装

Mock配置文件结构搭建

Mock服务引入与Axios封装

API接口统一管理与调用

实用工具推荐