开发者社区> bengle> 正文

基于Angular创建后台数据模拟(译)

简介: 前后端分离开发一个痛点,前端开发数据mock问题,看了这篇文章会有不错的启发。
+关注继续查看

我们已经习惯用AngularJS来创建前后端分离的应用,同时为了便于开发也会通过在前端代码库中使用mock数据来模拟服务端的接口。使用mock数据具有以下诸多的好处:

* 如果你并不是接口api的开发者,使用mock数据你就不用等待接口api设计完成就可以开始本地开发
* 如果你自己开发接口的api,使用mock数据不仅可以让你更专注于前端开发,还不比纠结于后端具体的细节实现
* 你可以快速的开发内容而不用管后台逻辑
* 建立mock服务还可以帮助你设计接口api的结构
* mock数据服务还可以给其他angular组件在对应服务上做单元测试用

本文我们介绍的是ngMockE2E模块提供的$httpBackend服务。需要注意的是它跟ngMock模块提供的同名服务是不同的哦~这两个$httpBackend服务连api都极为相似,但是ngMock版的$httpBackend主要用来做单元测试,因此它额外增加了很多测试用例和调用的功能在里面。我们今天要介绍的这个ngMockE2E则是针对angular应用开发中后端数据mock功能。

$httpBackend使用ngResource($resource)的resources给我们提供了一个mock终端。它可以应用到所有的http方法并返回特殊的句柄--例如:GET,POST,DELETE等等。它有效的取代了$http在Angular中的服务栈,因此它具有穿越的特性,无服务的请求可以直接穿越到服务端。它使得我们可以在静态服务器上创建包涵了所有服务的完美应用。

接下来我们先不急于开发一个完整的Angular应用,先从怎样开发简单的后段CRUD功能入手。这里我们首先开发如下功能:

* List - Resource.query()
* Create - Resource.save() or resource.$save()
* Get - Resource.get()
* Update - Resource.update() or resource.$update()
* Delete/remove - Resource.remove or resource.$remove()

例子中用到的所有代码都可以从这里点我啊得到。

多余的事情不说,我们现在就开始。从Angular的模版开始,先声明app module并加入项目需要依赖的模块。

var app = angular.module('app', [
  'ngResource',
  'ngMockE2E'
]);

然后在定义一个提供Angular组件和后端mock数据的接口服务的Contract resources。

app.factory('Contact', ['$resource', function($resource) {
  return $resource(
    '/contacts/:id',
    {id: '@id'},
    {
      'update': {
        method: 'PUT'
      }
    }
  );
}]);

完成Contact resources的定义我们就可以开始定义mock backend了。$httpBackend其实是通过一个run模块来定义的,在我们的例子中我们把它添加到app的run模块中,然后定义一组contacts。

app.run(['$httpBackend', function($httpBackend) {
  contacts = [
    {
      id: 1,
      name: 'Ada Lovelace',
      phone: '8445551815'
    },
    {
      id: 2,
      name: 'Grace Hopper',
      phone: '8445551906'
    },
    {
      id: 3,
      name: 'Charles Babbage',
      phone: '8445556433'
    }
  ];

  // $httpBackend interactions are defined here...
}]);

这个contacts数组是mock backend的所有操作都可以访问的,就像一个数据仓库,这是创建mock数据仓库的一种方式。另一种方式是创建一个以resources的id为下标的关联数组。另外为了简单和条理清晰我们还要定义一些数组查找和操作的基础方法,不想这么麻烦就直接用underscore或者lodash。

我们先模拟一个最简单的通讯录接口,用get方式请求/contacts就返回整个通讯录。

// Query; returns all contacts.
$httpBackend.whenGET('/contacts').respond(contacts);

再来实现Contact.save方法。ngResource的对应方法可以发送一个携带通讯录数据的post请求,这样后端就会增加一条新的纪录。

// Save; create a new contact.
$httpBackend.whenPOST('/contacts').respond(function(method, url, data) {
  var newContact = angular.fromJson(data);
  contacts.push(newContact);

  return [200, newContact, {}];
});

因为angular组件会把数据当作json来处理且不会复查,所以一定要注意将序列化的通讯录数据转成json。创建一条新的纪录就像在contacts数组push一条数据一样简单。

获取一条通讯录数据相对就比较麻烦了,我们必须做两件事:从请求url中提取ID;从关联数组中查找到这个ID。代码如下:

// Get; return a single contact.
$httpBackend.whenGET(/\/contacts\/(\d+)/, undefined, ['id']).respond(function(method, url, data, headers, params) {
  var contact = findContactById(params.id);

  if (contact == null) {
    return [404, undefined, {}];
  }

  return [200, contact, {}];
});

我们用一个正则匹配url,获取到id的集合。angular把匹配的到的结果保存到params的id属性上,也就是whenGET方法的第三个入参。再抓去这个值传到findContactById方法中,将查询的结果返回给我们。最后,我们返回查询结果,如果为空就返回404。

findContactById方法将ID的值转成数字,过滤数组找到匹配值并返回。

function findContactById(id) {
  // Convert id to a number.
  var contactId = Number(id);

  var matches = contacts.filter(function(contact) {
    return contact.id === contactId;
  });

  var contact = matches.shift();

  return contact;
}

update方法于get方法很相似,区别只在于怎样更新通讯录数据。代码如下:

// Update; change details for an existing contact.
$httpBackend.whenPUT(/\/contacts\/(\d+)/, undefined, undefined, ['id']).respond(function(method, url, data, headers, params) {
  var contact = findContactById(params.id),
      parsedData = angular.fromJson(data);

  if (contact == null) {
    return [404, undefined, {}];
  }

  angular.extend(contact, parsedData);

  return [200, contact, {}];
});

成功找到这条数据之后再使用angualr.extend方法将更新的数据拷贝到contact对象的属性上。这样我们不用破坏代码里相关的任何引用包括contacts数组。

最后是delete方法。仍然跟get和put类似,删除操作仍然依赖于findContactById方法来查找通讯录。一旦再contact对象中找到它的位置,就使用array#splice删除掉contact对象中的这条纪录:

// Delete; remove existing contact.
$httpBackend.whenDELETE(/\/contacts\/(\d+)/, undefined, ['id']).respond(function(method, url, data, headers, params) {
  var contact = findContactById(params.id);

  if (contact == null) {
    return [404, undefined, {}];
  }

  // Replace contacts array with filtered results, removing deleted contact.
  contacts.splice(contacts.indexOf(contact), 1);

  return [200, undefined, {}];
});

完成这些后台服务和数据的定义,我们就可以把整个应用跑起来了。整个页面应用的和核心控制器是一个所有服务功能之行时调用的简单事务。随着通讯录的get操作,结果就会呈现在我们面前。然后使用更新功能给Grace Hopper所在列添加她的联系人姓名。创建操作是添加Gloria Gordan Bolotsky到通讯录。删除操作是将Charls Babbage从通讯录删除。增加,删除,更新的操作是放在一个promise队列中,结果会返回到成功的回调函数中。这就是整个控制器做的事情。

app.controller('MainCtrl', function($scope, Contact) {
  //List
  $scope.contacts = Contact.query();

  // Get
  $scope.ada = Contact.get({id: 1});

  // Update
  Contact.get({id: 2}).$promise
    .then(function(contact2) {
      contact2.name = 'Rear Admiral Grace Hopper';
      return contact2.$update().$promise;
    })
    .then(updateContactsList);

  // Create
  var newContact = new Contact({
    name: 'Gloria Gordon Bolotsky',
    phone: '8445556433'
  });
  newContact.$save()
    .then(updateContactsList);

  // Delete
  Contact.remove({id: 3}).$promise
    .then(updateContactsList);

  function updateContactsList() {
    // Refresh contacts list
    $scope.contacts = Contact.query();
  }
});

最后一步创建这个简单应用的视图部分:

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-resource.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-mocks.js"></script>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>All contacts:</p>
    <ul>
      <li ng-repeat="contact in contacts">{{ contact.name }}</li>
    </ul>

    <p>Contact 1: {{ ada.name }}</p>
  </body>

</html>

代码给我们简单演示了从通讯录服务检索一条联系人记录。页面中需要引入:angular,ngResource和ngMockE2E几个文件。

终于完成了!虽然简单但是可以给我们使用mock模拟CRUD操作到现代web应用打下基础。

原文地址:http://madebymunsters.com/blog/posts/creating-a-mock-backend-in-angular/

祁幽小贵 译

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Angular 应用里 NullInjectorError - No provider for XX 错误的一个场景和分析过程
Angular 应用里 NullInjectorError - No provider for XX 错误的一个场景和分析过程
13 0
Angular 模块封装概念常见的错误理解
Angular 模块封装概念常见的错误理解
10 0
Angular 中的可观察对象
Angular 中的可观察对象
107 0
Angular 里使用 FormControl 的步骤(二)
Angular 里使用 FormControl 的步骤
64 0
Angular 里使用 FormControl 的步骤(一)
Angular 里使用 FormControl 的步骤
96 0
【Angular教程】自定义管道
【Angular教程】自定义管道
108 0
创建第一个Angular应用的正确姿势
作为Google公司提供的一套开源的项目框架,Angular的模版功能强大且丰富,是一个比较完善的前端框架,包含服务,模版,数据双向绑定,模版化,路由,过滤器,自定义指令,依赖注入等所有功能,ng模块化比较大胆的引入了Java的一些东西(依赖注入),能够很容易的写出可复用的代码,对于敏捷开发的团队来说非常有帮助。
481 0
使用Stackblitz一分钟之内创建一个Angular应用
使用Stackblitz一分钟之内创建一个Angular应用
81 0
Angular 如何使用 InjectionToken 的方式得到当前 location 信息
Angular 如何使用 InjectionToken 的方式得到当前 location 信息
69 0
Angular路由开发的一个实际例子
Angular路由开发的一个实际例子
39 0
Angular应用一个创建场景的问题分析
Angular应用一个创建场景的问题分析
62 0
Angular应用的部署方式
Angular应用的部署方式
86 0
Angular页面调试一个有用的小技巧 - normalizeDebugBindingName和normalizeDebugBindingValue - [object Object]
Angular页面调试一个有用的小技巧 - normalizeDebugBindingName和normalizeDebugBindingValue - [object Object]
57 0
Angular refreshView的执行原理
Angular refreshView的执行原理
77 0
Angular 自定义 structural 指令的一个例子
Angular 自定义 structural 指令的一个例子
71 0
+关注
bengle
文章
问答
视频
相关电子书
更多
Angular从零到一
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载