vue3项目中mockjs的使用

一、安装

npm install mockjs

二、创建mockjs文件夹

1.使用json文件

1 floor.json文件

[{
    "id": "001",
    "name": "家用电器",
    "keywords": [
      "滚筒洗衣机",
      "电热水器"
    ],
    "imgUrl": "/images/floor-1-1.png",
    "navList": [{
        "url": "#",
        "text": "热门"
      },{
        "url": "#",
        "text": "大家电"
      }],
    "carouselList": [
      {
        "id": "0011",
        "imgUrl": "/images/floor-1-b01.png"
      },{
        "id": "0012",
        "imgUrl": "/images/floor-1-b02.png"
      }],
    "recommendList": [
      "/images/floor-1-2.png",
      "/images/floor-1-3.png"
    ],
    "bigImg": "/images/floor-1-4.png"
    ]

2 mockRequest.js文件

// mock模拟接口api
// 对axios二次封装 --主要使用axios请求和响应拦截器
import axios from 'axios'
// 用axios对象的create方法，创建一个axios实例
const request = axios.create({
  // 配置对象
  baseURL: '/mock',
  // 请求超时时间
  timeout: 5000
})

// 请求拦截器：在发请求之前，请求拦截器可以检测到，可以在发送之前做一些操作
request.interceptors.request.use(config => {
  return config
})

// 响应拦截器
request.interceptors.response.use(
  res => {
    // 服务器响应成功，对数据处理
    return res.data
  },
  error => {
    // 响应失败的回调函数
    return Promise.reject(new Error(error))
  }
)
// 对外暴露
export default request

3 mockService.js

//引入mockjs插件开始模拟数据
import Mock from 'mockjs'
// webpack默认对外暴露：图片、json数据格式，所有不需要暴露就能直接引用
//引入数据：JSON数据格式数据
//比如:图片资源、JSON资源【里面不能书写export关键字】，这些资源默认对外暴露【默认暴露】
import floor from './floor.json'

//接口:相当于nodejs里面中间件
//第一个参数：接口的地址  中间件默认是GET请求,可以不写 第三个参数:向这个接口发请求获取到的数据 
Mock.mock('/mock/floor','get', { code: 200, data: floor });

4 man.js中

// mockServer.js --- mock虚拟数据
import '@/mock/mockServe'

使用

// 获取floor数据
export const reqGetFloorList = () => mockRequests.get('/floor')

---

---

---

自己在项目中使用

mockServe.js文件

//引入mockjs插件开始模拟数据
import Mock from 'mockjs'

// Mock.mock 是一个工具类，用于生成各种随机数据，在官网上可以找到。
const Random = Mock.mock('@string("number", 4)')
// 用于接受生成数据的数组
const data = []

const template = {
  number: Random
}
// 将template以数组的方式添加
data.push(template)


// 根据数据模板生成模拟数据
Mock.mock('http://abc.com:5000/captchCode', 'get', {
  code: 200,
  data: data
})

let tableList = [
  {
    id: '5ffa80aD-9CF4-0C77-eBFC-f6612BfAcF4F',
    account: 'admin',
    password: '123456',
    address: '36918166@qq.com'
  },
  {
    id: '4FcC922C-C72c-95c3-Ef92-FbFAc24cc831',
    account: 'ebHoL6',
    password: 'i320Hu74fbn2Gi',
    address: '48165263@qq.com'
  }
]


Mock.mock('http://abc.com:5000/indexdata', 'get', () => {
  return {
    code: '0',
    data: tableList
  }
})

main.ts文件

// mockServer.js --- mock虚拟数据
import '@/mockjs/mockServe'

封装的接口文件中

import hyRequest from '..'
// 因为接口封装过baseurl,所以直接写
export function reqCaptchaCode() {
  return hyRequest.get({
    url: '/captchCode'
  })
}

export function req() {
  return hyRequest.get({
    url: '/indexdata'
  })
}

请求成功时数据结构