MockJS入门（一）

最近因为公司产品需要，接触到了前后台交互，由于后台开发接口等需要时间，所以就研究了一下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