使用mockjs 模拟前后台交互

最新推荐文章于 2024-08-13 17:03:54 发布

moguPeople

最新推荐文章于 2024-08-13 17:03:54 发布

阅读量3.5k

点赞数

分类专栏：实用方法 Mock.js 前后台交互前端数据模拟文章标签： Mock.js 前后台分离前后台交互前端数据模拟

本文链接：https://blog.csdn.net/fly_wugui/article/details/83688472

版权

本文介绍了在Vue项目中使用Mock.js进行前后台交互模拟的详细步骤。从安装Mock.js开始，到创建mock文件夹和相关配置文件，再到在main.js中引入并拦截请求。接着讲解如何定义API接口和在组件中使用模拟数据，以及解决遇到的404错误和设置请求延时的方法。此外，还提供了相关参考资料，帮助读者更好地理解和应用Mock.js。

摘要由CSDN通过智能技术生成

使用背景： vue项目 axios
使用详情：
1、首先安装

	# 在项目中安装
    npm install mockjs

2、在项目中使用
在项目中src文件夹下新建mock文件夹新建mock.js 和index.js文件这里面用来生成基础的接口
项目结构截图：
新建mock文件夹新建mock.js 和index.js文件
数据
mock.js 文件

//-----------------mock.js-------------------
// 引入mockjs
import Mock from 'mockjs'

// 创建模拟数据 具体的数据生成方法 请查看文档http://mockjs.com/examples.html
function creatPostMock () {
   
  const list = []
  const mockdata = {
   
    id: '@increment', // 数据定义 @increment
    'object|1': {
   
      '310000': '上海市',
      '320000': '江苏省',
      '330000': '浙江省',
      '340000': '安徽省'
    },
    name: '@pick(["a", "e", "i", "o", "u"])',
    m1: '@integer(60, 100)',
    m2: '@integer(60, 100)',
    m3: '@integer(60, 100)',
    m4: '@integer(60, 100)',
    m5: '@integer(60, 100)',
    m6: '@integer(60, 100)',
    m7: '@integer(60, 100)',
    m8: '@integer(60, 100)',
    m9: '@integer(60, 100)'
  }
  for (var i = 0; i < 10; i++) {
   
    const a = Mock.mock(mockdata)
    list.push(a)
  }
  const data = {
   
    data: {
   },
    size