2022-07-01 mockjs学习笔记:mock的下载和引入,在vue项目中引入mock

原创

已于 2023-03-30 23:40:29 修改 · 433 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#mock #后端 #前后端交互 #交互 #mockjs

于 2022-07-01 22:31:09 首次发布

本文介绍了MockJS工具的用途，如何在Vue项目中安装和配置，包括创建mock.config.js和mock.js，以及在main.js中引入。详细讲解了MockJS的语法规范，如数据模板的生成规则，并提供了在Vue项目中引入MockJS的步骤，以及将接口定义分离到单独文件的方法。

文章目录

1.简介

Mockjs 是一款模拟数据生成工具，模拟 Ajax 请求，通过随机生成数据,
模拟各种业务场景并返回模拟数据，帮助前端在后台未提供接口时实现独立开发。
Mockjs支持的随机数据类型很丰富，包括文本、数字、布尔值、日期、邮箱、链接、图片、颜色等

2.安装和官网

安装命令:npm install mockjs -D
官网:http://mockjs.com/examples.html

3.文件结构

vue脚手架中的mock:

import Mock from 'mockjs';
import {
   
   USER_API} from '@/components/demos/api.url'

Mock.mock(USER_API.getUser, {
   
   
  user: {
   
   
    name: 'chow'
  }
});

创建 mock.config.js，作为配置文件，用来配置拦截 ajax 请求是的响应时间

import Mock from 'mockjs'

Mock.setup({
   
   
  timeout: '300-1000'
});

创建 mock.js，作为顶层入口文件，引入各个具体业务的 mock 文件和配置文件 mock.config.js

import './mock.config';

import './components/demos/demo9/mock';

在 mock.config.js 中还可以预置一些常用的用于生成默认数据形态的方法

然后项目的入口文件 main.js 中引入入口文件 mock.js（关键）

import './mock'

4.语法规范

数据模板中的每个属性由三部分构成：属性名、生成规则、属性值

// 属性名   name
// 生成规则 rule
// 属性值   value，指定了最终值的初始值和类型， 可以含有@占位符
'name|rule': value
<

最低0.47元/天解锁文章