前后端分离--MockJS模拟API返回数据

其实，我们都知道前后端分离已经逐渐成为业界项目开发标准方式。在Web开发前后端不分离的时代，开发人员既要开发前端，还得开发后端，而且视图和业务逻辑混合在一起，这时候一般我们一个完整的开发流程是这样的：前端根据UI设计稿设计html界面，然后后端实现服务接口，等服务接口实现完毕后，后端将前端的html改成jsp并集成后端开发的服务接口，最终测试进行上线。这种方式缺点很明显，前端无法单独进行调试而且前端jsp代码混杂后端业务逻辑，而且前端工作严重依赖于后端。

所以慢慢衍生出以重新的架构模式，在开发阶段前后端约定好Restful API的返回格式，然后后端业务逻辑设计Restful API，前端按照约定好的返回格式协同开发前端并独立完成测试工作。等前后端工作都完成后，前后端一起进行联调测试。这样做的优点在于将前后端进行分离，代码可维护性变强，而且前后端可以协同开发，开发效率更是可以大大提高。而刚才也说到了前后端可以协同开发，那前端如果开发完成如何在API还没有完成的情况下机型模拟数据测试呢？所以本篇文章介绍一个前端开发利器---mockJS模拟Restful API 返回数据。

简介

MochJS实际上就是一个模拟数据生成工具，可以模拟各种业务场景返回不同格式的数据。支持生成随机文本、数字、日期、邮箱、颜色、图片等。而且使用非常简单，我们使用MockJS就可以实现后端Restful API还未提供的情况下前端完成模拟测试。

安装

MockJS安装其实很简单，我们使用npm安装下依赖就可以，使用命令：

代码语言：javascript复制

npm install mockjs --save

MockJS语法规则

MockJS基本语法其实很简单，我们可以使用Mock.mock()指定一个测试url，然后指定返回格式的模板，格式模板按照和后端返回的格式去设计。同时我们还可以使用Mock.setup()设置配置信息如超时时间等,目前Mock.setup()仅能用于配置ajax请求。

代码语言：javascript复制

Mock.mock(url, template);

Mock.setup(setting);

MockJS简单使用

其实使用Mock一般有两种方案，前端直接使用Mock以及使用Node搭建一个可停止服务的Mock服务。这两种方案有什么区别呢？我们先来看看第一种方案，在前端项目中直接引用Mock。首先我们先创建一个api.js用于配置Mock的基本配置信息：

代码语言：javascript复制

import Mock from 'mockjs';

const url = {
    testUrl: 'http://api.niyueling.cn/test/testOne',
}
module.exports = [
    Mock.mock(url.testUrl, {
        "userInfo|4": [{ //生成num个userInfo的数据
            "id| 1": 1, //数字从1开始后续依次加一
            "name": "@cname", //名字为随机中文名字
            "ago|18-28": 25, //年龄为18-28之间的随机数字
            "sex|1": ["男", "女"], //性别是数组中的一个，随机的
            "job|1": ["web", "UI", "python", "php"] //工作是数组中的一个
        }]
    })
]

然后接下来我们去页面组件中调用我们刚才配置的url。看看有什么效果：

代码语言：javascript复制

var that = this;

this.$req({
    method: "get",
    url: 'http://api.niyueling.cn/test/testOne',
    data: {

    }
}).then(function(res) {
    console.log(res);
}).catch(function(e) {
    _this.$message.error('服务器可能出现异常!');
});

然后我们可以看看控制台打印的信息：

代码语言：javascript复制

{
  userInfo: [
    { id: 1, name: '阎杰', ago: 24, sex: '男', job: 'python' },
    { id: 2, name: '杜军', ago: 18, sex: '男', job: 'UI' },
    { id: 3, name: '秦秀兰', ago: 24, sex: '男', job: 'php' },
    { id: 4, name: '周刚', ago: 26, sex: '女', job: 'python' }
  ]
}

按照我们想要的效果返回数据了，可以发现mock的使用很简单，但是这种集成在前端项目里面存在一个问题：如果后端Restful API实现完毕，前端需要将这部分调用mock的代码注释掉，不然真正的API调用会被mock拦截掉。这样前端会改动来改动去工作量大还不好维护。所以我们可以使用第二种方案：使用Node搭建一个简单的可停止运行的Mock服务。考虑到一部分人没使用过Node，不知道什么是express，什么是路由，所以我们可以直接使用express构建器快速搭建一个小型express项目，express项目里面项目路由都是配置成功的，我们可以直接实现Mock接口服务：

代码语言：javascript复制

//全局安装express-genetator项目构建器
npm install -g express-generator

//使用全局构建器创建一个express项目，名称为demo_project
express demo_project

//进入项目安装依赖
cd demo_project && npm install

接着我们就可以开始设计Mock服务，express项目默认给我们配置好两个路由，我们可以打开routes/users.js实现第一个Mock路由：

代码语言：javascript复制

var Mock = require('mockjs')

xlsMallRouters.testMock = function (req, res) {
    var par = paramAll(req);

    return res.json(new PKG(Mock.mock({
        "userInfo|4": [{ //生成|num个如下格式名字的数据
            "id| 1": 1, //数字从当前数开始后续依次加一
            "name": "@cname", //名字为随机中文名字
            "ago|18-28": 25, //年龄为18-28之间的随机数字
            "sex|1": ["男", "女"], //性别是数组中的一个，随机的
            "job|1": ["web", "UI", "python", "php"] //工作是数组中的一个
        }]
    })));
}
router.post('/testMock', xlsMallRouters.testMock);

然后通过app.js文件，我们可以定位到项目运行于9000端口，routes/users.js这个路由文件对应路由为users, 上面代码使用router.post表示应该是post请求，所以这个Mock服务的完整url应该如下：

代码语言：javascript复制

http://127.0.0.1:9000/users/testMock  POST

我们可以调用Mock服务地址测试返回结果：

代码语言：javascript复制

{
    "status": 200,
    "payload": {
        "userInfo": [
            {
                "id": 1,
                "name": "叶洋",
                "ago": 22,
                "sex": "女",
                "job": "web"
            },
            {
                "id": 2,
                "name": "秦超",
                "ago": 22,
                "sex": "男",
                "job": "python"
            },
            {
                "id": 3,
                "name": "程杰",
                "ago": 27,
                "sex": "男",
                "job": "php"
            },
            {
                "id": 4,
                "name": "潘娟",
                "ago": 22,
                "sex": "女",
                "job": "UI"
            }
        ]
    }
}

数据格式返回和刚才完全一致，但是多了一个优点在于后端Restful API还未实现，而前端需要测试，我们就可以使用npm run start命令你个启动这个Mock服务获取返回数据进行测试，当后端API实现完成，我们就停止这个Mock服务的运行，就不需要频繁改动前端的代码。比如我们需要实现登录功能，我们可以略微改动返回格式，将返回格式改为返回用户信息即可：

代码语言：javascript复制

xlsMallRouters.testMock = function (req, res) {
    var par = paramAll(req);

    return res.json(new PKG(Mock.mock({
        "userInfo|1": [{ //登录成功返回用户信息
            "id| 1": 1, //数字从当前数开始后续依次加一
            "name": "@cname", //名字为随机中文名字
            "ago|18-28": 25, //年龄为18-28之间的随机数字
            "sex|1": ["男", "女"], //性别是数组中的一个，随机的
            "job|1": ["web", "UI", "python", "php"], //工作是数组中的一个
            token: "TKN:R:r:D:QZtyGm5HDZAxi:lxy" //用户登录凭证
        }]
    })));
}
router.post('/testMock', xlsMallRouters.testMock);

关于Mock的基本使用有很多封装好的随机数方法，不过语法都比较简单，有需要的自己查看官方文档，贴下官方文档地址：

代码语言：javascript复制

https://github.com/nuysoft/Mock/wiki/Getting-Started

网站 api express javascript node.js

0 人点赞