Mock.js 模拟数据_mockjs模拟数据-CSDN博客

本文链接：https://blog.csdn.net/weixin_52053631/article/details/130756038

文章描述了如何使用Mockjs创建模拟JSON数据，并通过Webpack配置在项目中使用。它详细解释了安装Mockjs，创建mock文件夹，编写JSON数据，创建mockServe.js来定义模拟请求，以及在main.js中引入。此外，还介绍了对axios的二次封装，添加请求和响应拦截器，以处理进度条效果，并展示了如何使用mockRequests进行请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方文档：mockjs官网

1. 安装：npm i --save mockjs

2. 创建mock文件夹

3. 准备JSON数据（mock文件夹下创建相应的JSON文件），例如：

[
  {
    "id": "1",
    "imgUrl": "/images/banner1.jpg"
  },
  {
    "id": "2",
    "imgUrl": "/images/banner2.jpg"
  },
]

4. 创建 mockServe.js ，通过mockjs插件实现模拟数据（注：webpack默认对外暴露的：图片、JSON数据格式）

// 先引入mockjs模块
import Mock from 'mockjs'
// 把JOSN数据格式引入进来
import banner from './banner.json'
import floor from './floor.json'

//mock数据,第一个参数：请求的地址 第二个参数：请求数据
Mock.mock("/mock/banner",{code:200,data:banner})  ;
Mock.mock("/mock/floor",{code:200,data:floor});// 先引入mockjs模块
import Mock from 'mockjs'
// 把JOSN数据格式引入进来
import banner from './banner.json'
import floor from './floor.json'

//mock数据,第一个参数：请求的地址 第二个参数：请求数据
Mock.mock("/mock/banner",{code:200,data:banner})  ;
Mock.mock("/mock/floor",{code:200,data:floor});

5. 在main.js引入mockServe.js

//引入MockServe.js-----mock虚拟数据
import '@/mock/mockServe'

6. 创建mock的请求文件 mockAjax.js

//对于axios进行二次封装
import axios from 'axios'
//引入进度条
import nprogress from 'nprogress'
//引入进度条的样式
import 'nprogress/nprogress.css'

// console.log(nprogress)   //nprogress 是一个对象
//start:进度条开始  done：进度条结束

//利用axios对象的方法create，去创建一个axios实例
const mockRequests =axios.create({
    //配置对象
    baseURL:'/mock',
    timeout:5000,
})

//请求拦截器
requests.interceptors.request.use((config)=>{
    //config：配置对象，对象里面有一个属性很重要，headers请求头
    //进度条开始动
    nprogress.start();
    return config
})

//响应拦截器
requests.interceptors.response.use((res)=>{
    //成功的回调函数
    //进度条结束
    nprogress.done()
    return res.data
}),(error)=>{
    //失败的回调函数
}

//对外暴露
export default requests

//当前的这个模块：API进行统一管理
import requests from "@/api/request";
//引入mock
import mockRequests from "@/api/mockAjax";

//三级联动接口
// /api/product/getBaseCategoryList   get   无参数
// 发请求:axios发请求返回结果Promise对象

// export const reqCategoryList = () => {
//     return requests({
//         url: '/product/getBaseCategoryList',
//         method: 'get'
//     })
// }
export const reqCategoryList = () => requests({url: '/product/getBaseCategoryList', method: 'get'})


//获取mock,切记不能用真实的url
export const reqGetBannerList = ()=> mockRequests.get('/banner')

就可以使用啦