专栏首页Node开发前后端分离--MockJS模拟API返回数据

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

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

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

简介

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

安装

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

npm install mockjs --save

MockJS语法规则

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

Mock.mock(url, template);

Mock.setup(setting);

MockJS简单使用

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

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。看看有什么效果:

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('服务器可能出现异常!');
});

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

{
  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接口服务:

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

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

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

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

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应该如下:

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

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

{
    "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服务的运行,就不需要频繁改动前端的代码。比如我们需要实现登录功能,我们可以略微改动返回格式,将返回格式改为返回用户信息即可:

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的基本使用有很多封装好的随机数方法,不过语法都比较简单,有需要的自己查看官方文档,贴下官方文档地址:

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

本文分享自微信公众号 - 程序猿周先森(zhanyue_org),作者:逆月翎

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 简单理解Token机制

    互联网发展到现在已经到了一个非常成熟的时代,所以不再是一个你写一个静态网站就可以进行疯狂盈利的时代了。现在对产品有着很多的要求,健壮性,安全性这...

    逆月翎
  • NodeJS require()源码解析

    最开始谈NodeJS的时候写过一篇文章谈了它与Java各自的优缺点。NodeJS最早的定位是什么样的呢?最早开发者Ryan Dahl是想提升自...

    逆月翎
  • 浅谈MVC--Node中如何使用ORM?

    在正常的开发中,大部分都会使用MVC为主要的系统架构模式。而Model一般包含了复杂的业务逻辑以及数据逻辑,因为Model中逻辑的复杂度,所以我们有必要降低系统...

    逆月翎
  • 干货 | 携程Mock本地化实践

    这里说的Mock指的是系统测试或者接口测试场景下,模拟被依赖的其他服务接口进行响应返回的工具。测试人员通过服务接口级Mock的手段隔绝真实外部依赖,创造可控、稳...

    携程技术
  • 测试利器之Mock server

    【问题分析】 通过Fiddler抓包查看请求,Moco Server已经返回了对应的XML文件,但是浏览器还是依然报错,如图所示:

    用户5521279
  • 送给前端的你:可视化快速生成模拟数据服务——Easy Mock

    ? 内容来源:2017年11月18日,大搜车前端工程师高攀在“2017中国开源年会”进行《Easy Mock 接口数据模拟服务》演讲分享。IT 大咖说(微信i...

    IT大咖说
  • 100 Days of SwiftUI —— Day 10:类

    最初,类看起来与结构体非常相似,因为我们使用它们来创建具有属性和方法的新数据类型。但是,它们引入了一个新的,重要的且复杂的功能,即继承——使一个类在另一个类的基...

    韦弦zhy
  • python用户输入(三)

    name = "Li QW" #定义变量 fname = name  #fname等于name变量产生的值 print("My name is " , name...

    py3study
  • python学习笔记(三)-表单处理

    表单类 默认情况下,Flask-WTF能保护所有表单免受跨站请求伪造攻击(CSRF)

    py3study
  • 24. 企业级开发基础5:面向对象特征(封装)

    在我们程序开发过程中,定义好类型之后就可以通过类型来创建对象 如:我们定义一个中华人民共和国公民的类型

    大牧莫邪

扫码关注云+社区

领取腾讯云代金券