VUE 中 mock的简单使用

胖达的博客

于 2021-04-13 10:11:03 发布

阅读量192

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_34322905/article/details/115655371

本文介绍了如何在项目中使用MockJS来模拟API接口数据，以支持前端开发。首先，通过npm安装MockJS并将其保存为开发依赖。接着，在mock/index.js文件中配置MockJS，设置延迟时间并定义拦截规则。在mock/ratings.js中定义模拟数据并导出。最后，在main.js中引入mock/index.js，确保在axios请求时可以使用这些模拟数据。这样，即使在没有后端服务的情况下，前端也能正常进行功能开发和测试。

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

安装mockjs
npm install mockjs --save-dev
在项目中创建mock/index.js，并写一个简单的返回示例

// 引入mockjs
import Mock from 'mockjs'
// 引入模板函数类
import ratings from './ratings'

// Mock函数
const { mock } = Mock

// 设置延时
Mock.setup({
  timeout: 400
})

// 使用拦截规则拦截命中的请求，mock(url, post/get, 返回的数据);
mock(/\/api\/ratings\/list/, 'post', ratings.list)

在项目中创建mock/ratings.js

// 引入随机函数
import { Random } from 'mockjs'
// 引入Mock
const Mock = require('mockjs')

// 定义数据
const listData = Mock.mock('organization/api/v1/login/signIn',{
  'data|20': [{
    username: () => Random.cname(),
    time: () => Random.date('yyyy.M.d'),
    content: () => Random.csentence(5, 10)
  }]
});


function list (res) {
  // res是一个请求对象，包含: url, type, body
  return {
    code: 200,
    data: listData.data,
    message: '请求成功'
  }
}

export default { list }

然后在main.js引入mock/index.js

import '@/util/mock/index.js'; // 这里修改成你自己的文件路径

然后再安装了axios的情况下去，直接去请求接口地址即可；

axios.post('organization/api/v1/login/signIn').then(response => {
   console.log(response)
});