MockJS快速入门

本文介绍了MockJS在前后端分离环境下如何模拟后端接口,让前端独立开发。讲解了MockJS的数据模板定义,包括7种生成规则,如`min-max`、`count`等,适用于不同数据类型的随机生成,并提供了完整的模拟接口实现代码示例。

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

什么是MockJS

在前后端分离的开发环境中,前端同学需要等待后端同学给出接口及接口文档之后,才能继续开发。而MockJS可以让前端同学独立于后端同学进行开发,前端同学可以根据业务先梳理出接口文档并使用MockJS模拟后端接口。那么MockJS是如何模拟后端接口的呢?MockJS通过拦截特定的AJAX请求,并生成给定的数据类型的随机数,以此来模拟后端同学提供的接口。

准备工作

写在最前面:有的小伙伴可能不太会部署前端环境,这里我将代码上传到github中,有需要的小伙伴可以把代码下载下来,对照着代码看下面的教程。

首先安装MockJS,安装axios是为了发送AJAX请求测试模拟的接口,使用其他方式如原生AJAX请求或$.ajax都是可以的,使用其他方式发送AJAX请求无需安装axios。

npm install mockjs --save
npm install axios --save

使用webpack打包工具打包vue单文件。
首先安装css-loader、style-loader、vue、vue-loader、vue-template-compiler。

npm install css-loader style-loader --save-dev
npm install vue vue-loader vue-template-compiler --save-dev

然后在webpack.config.js配置文件中添加对应的loader,完整的配置图如下。

const path = require("path");
const {VueLoaderPlugin} = require('vue-loader');
module.exports = {
    entry: './webapp/App.js',
    output: {
        filename: 'App.js',
        path: path.resolve(__dirname, './dist')
    },
	module: {
		rules: [
            {
                test: /\.css/,
                use: ['style-loader', 'css-loader']
            },
	        {
			    test: /\.vue$/,
			    use: 'vue-loader'
		    }
		]
	},
	plugins: [
		new VueLoaderPlugin()
	],
	mode: "production"
}

创建一个mock.js文件,接着在入口文件中(main.js)引入。

require('./mock.js');

在mock.js文件中引入MockJS。

import Mock from 'mockjs';

后面我们将在mock.js中编写模拟接口。

目录结构如下:


index.html是主页文件,main.js是入口文件,mock.js是模拟接口文件,webpack.config.js是webpack配置文件,./dist/main.js是打包后的入口文件,./src/axios/api.js是封装axios请求的文件。

正式开始

MockJS有两种方式定义模拟接口返回的数据,一种是使用数据模板定义,这种方式自由度大,可以自定义各种随机的数据类型,一种是使用MockJS的Random工具类的方法定义,这种方式自由度小,只能随机出MockJS提供的数据类型。赶时间的小伙伴可以直接跳到2.使用Rndom工具类定义模拟接口返回值。

1.数据模板定义模拟接口返回值

先举一个例子

//mock.js数据模板
{
    'string|1-10':'string'
}
//接口返回的生成的数据===>
{
    'string':'stringstringstring'
}

数据模板的格式为 ‘属性名|生成规则’:‘属性值’ ,生成规则决定了生成的数据的属性值。
生成规则一共有7种,分别是:

  1. ‘name|min-max’: value
  2. ‘name|count’: value
  3. ‘name|min-max.dmin-dmax’: value
  4. ‘name|min-max.dcount’: value
  5. ‘name|count.dmin-dmax’: value
  6. ‘name|count.dcount’: value
  7. ‘name|+step’: value

对于不同的数据类型,可以使用的生成规则是不同的,属性值的数据类型可以是Number、Boolean、String、Object、Array、Function、Null,不可以是Undefined,下面我将对每一种数据类型分别使用7种生成规则,以此来观察每一种数据类型可以使用哪些生成规则,想要直接看结论的同学直接拉至1.8的表格中。

1.1’name|min-max’: value

在开始之前大家可以去我的github把项目下载运行起来,结合项目更加直观,通过刷新了解每一个生成规则具体随机出了什么样的数据。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值