Angular / Gulp 应用程序的模拟后端

Question

我想在不依赖真实后端的情况下提供 json 响应来模拟后端以加快开发速度。前端应用程序是一个 Angular 应用程序，我们使用 Gulp 作为开发和构建工具。

例如具有特定的 api (.../custumers/123) return 静态 json 结果。

是否可能已经有一个 gulp 工具？

Answer 1

您可以为此使用 mock server。

Answer 2

我选择了 json-server and gulp-json-srv，我认为它有一些简单和快速设置的好处。

gulpfile.js 配置启动 json-server 并使用 "gulp mock" 任务代理 http 调用：

gulp.task('mock', ['connect-mock'], function () {
    jsonServer.start({
        data: 'db.json',
        port: 8087
    });
});

gulp.task('connect-mock', function () {
    connect.server({
        port: 8085,
        livereload: true,
        middleware: function (connect, o) {
            return [(function () {
                var url = require('url');
                var proxy = require('proxy-middleware');
                var options = url.parse('http://127.0.0.1:8087');
                options.route = '/v2';
                return proxy(options);
            })()];
        }
    });
});

db.json 模拟数据：

{
    "customers": [
        { "id": 1, "name": "Johnny B" },
        { "id": 2, "name": "Steve G" },
        { "id": 3, "name": "Glenn H" }
    ]

Answer 3

我建议您查看 https://github.com/wongatech/angular-multimocks。这允许您为您的 api 创建模拟响应，并允许您通过应用程序中的 url 在它们之间实时切换。

我们最初是在我工作的地方创建它来解决这个确切问题的，现在伦敦的多家大型科技公司都在使用它。

您可以像下面这样定义每个模拟，您可以为一个资源创建多个不同的响应，然后将它们安排到场景中。文件 mockResources.json 定义了可用的场景和描述每个场景应该使用每个资源的哪个版本。

模拟示例：

{
  "httpMethod": "GET",
  "statusCode": 200,
  "uri": "/customer/cart",
  "response": {
    "id": "foo"
  }
}

场景列表示例：

{
  "_default": [
    "root/_default.json",
    "account/anonymous.json",
    "orders/_default.json"
  ],
  "loggedIn": [
    "account/loggedIn.json"
  ]
}

它允许您模拟不同的休息动词、不同的 uris、添加响应延迟（用于测试缓慢的响应，或者也让您的应用程序更生动）。

它是我们开发的核心部分，与我们的验收测试紧密结合。

查看演示@ http://tech.wonga.com/angular-multimocks，项目自述文件提供了有关设置的详细说明，很乐意帮助解决任何进一步的问题。

Angular / Gulp 应用程序的模拟后端

Mock backend for Angular / Gulp app

backend

mocking

angularjs

gulp