最近因为公司产品需要,接触到了前后台交互,由于后台开发接口等需要时间,所以就研究了一下mockjs模拟假数据,
众所周知Mock.js
因为两个重要的特性风靡前端:
-
数据类型丰富
支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。 -
拦截 Ajax 请求
不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。安全又便捷
mockjs入门操作:
开发环境:WebStorm+Vue+MockJs
1.首先搭建一个新的vue项目,进行配置化,具体不知道怎么配置的可以网上查相关资源
2.今天主要讲一下mockjs的配置和使用:
1. 安装:npm install mockjs
2. 在main.js中全局配置mockjs,如果项目中package.json里有axios,还需要在main.js中配置一下axios,如下图,便于在组件中调用模拟的接口,类似于ajax调用。
3. 安装express:npm install express --save
以上这些是配置环节就差不多了。
3. 模拟接口服务模块:
-
在项目的views中新建一个文件夹mock,在其中创建一个MockServer.js文件,首先引入express,引入mockjs,将express实例化,然后就可以进行操作了
-
在例子中做了一个跨域请求的处理,因为要模拟真实调用接口的环境,否则不配置会有跨域问题报错;
-
接下来模拟json数据,“/getDataListForDJZM”是我自定义的一个接口名
-
code可以自定义,我这里0代表成功,然后按照接口传过来的数据格式进行模拟
-
@cword等大家可以去mockjs