您的位置：首页 > 其它

基于ngMockE2E实现后台数据模拟

2016-08-27 10:44 127 查看

引言

今天老大给了新任务，在开始给我说的时候让我改造一个指引，上面的流程是比较简单的，所以在开始的时候

没有当回事，因为对这些东西比较熟悉了，但是在说完需求以后告诉我这个项目不创建后台，所有的流程操作都在前

台完成，这一下子就整懵逼了，没有后台数据怎么办，那些流程的流转咋弄，结果老大说数据只需要模拟一份就可以

了，不需要入库，但是上面的什么流程启动，发送，保存功能都需要实现。

在网上找了一些基于angular模拟后台数据的方法，最终确定用ngMockE2E来实现，关于ngMockE2E的说明是这样

的：

The ngMockE2E is an angular module which contains mocks suitable for end-to-end testing. Currently there is only one mock present in this module - the e2e $httpBackend mock.

其实ngMockE2E的工作原理这样的：如果我们在module中引入了ngMockE2E这个模块，页面中的所有的请求则不会

真正的请求到后台，而是被其中的$httpBackend拦截，$httpBackend会提供相应的get、post、put、delte请求，一

旦请求地址和提供的地址想匹配则执行相应的方法。

简单总结一下这么做的好处：

1、如果你并不是接口api的开发者，使用mock数据你就不用等待接口api设计完成就可以开始本地开发

2、如果你自己开发接口的api，使用mock数据不仅可以让你更专注于前端开发，还不比纠结于后端具体的细节实

3、你可以快速的开发内容而不用管后台逻辑

4、建立mock服务还可以帮助你设计接口api的结构

5、mock数据服务还可以给其他angular组件在对应服务上做单元测试用

下面开始我们的Demo：

我们需要在html（index.html）页面引入2个文件 angular.js angular-mocks.js

<span style="font-size:18px;"><span style="font-size:18px;"><!DOCTYPE html>
<html ng-app="app">

<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="angular.js"></script>
<!--<script src="angular-resource.js"></script>-->
<script src="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 students:</p>
<ul>
<li ng-repeat="student in students">{{ student.name }}</li>
</ul>

<p>Student1: {{ ada.name }}</p>

</body>

</html></span></span>

所需要的文件我已经上传到csdn，在文章末尾有下载地址；

下面来看我们的app.js文件的内容，首先看看我们的module以及依赖的模块

<span style="font-size:18px;"><span style="font-size:18px;">var app = angular.module('app', [
'ngMockE2E'
]);</span></span>

下面来完成我们的$httpBackend的定义，它的定义式需要通过一个run模块来完成的，在我们的demo中我们把它添

加到一个run模块中，然后定义一组students

<span style="font-size:18px;"><span style="font-size:18px;">app.run(['$httpBackend', function($httpBackend) {
students= [
{
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...
}]);</span></span>

这个students数组是mock backbend所有的操作都可以操作的，就像我们后台的数据库一样，这是我我们创建前台模拟数据库的一种方式，另外几种创建方式读者自行学习。

下面我们先简单的来模拟一个查询学生的接口，用get方式请求后返回整个学生集合。

<span style="font-size:18px;"><span style="font-size:18px;">// Query; returns all students.
$httpBackend.whenGET('/students').respond(students<span style="font-family: SimSun;">);</span></span></span>

我们你需要发出一个get请求，请求地址为“/studnets”,则可以接收到所有的学生。

<span style="font-size:18px;"><span style="font-size:18px;">  $http.get("/students").success(function (data) {
$scope.students= data;
})
</span></span>

这样我们就可以在页面中循环输出所有的学生的姓名。

下面我们来实现保存的方法，也就是想students数组中增加一条新纪录，利用post请求携带student数据。

<span style="font-size:18px;"><span style="font-size:18px;">// Save; create a new contact.
$httpBackend.whenPOST('/students').respond(function(method, url, data) {
var newStudent = angular.fromJson(data);
students.push(newStudent);

return [200, newStudent, {}];
});</span></span>

  因为angular组件会把数据当作json来处理且不会复查，所以一定要注意将序列化的学生数据转成json。创建一

条新的纪录就像在students数组push一条数据一样简单。

如果我们想要在对象中获取一条学生记录就需要做两件事情：从URL中获取ID，根据id在数组中取值。

$httpBackend.whenGET(/\/students\/(\d+)/, undefined, ['id']).respond(function(method, url, data, headers, params) {
var student= findStudentById(params.id);

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

return [200, student, {}];
});
  我们用一个正则匹配url，获取到id的集合。angular把匹配的到的结果保存到params的id属性上，也就是

whenGET方法的第三个入参。再抓去这个值传到findStudentById方法中，将查询的结果返回给我们。最后，我们返回

查询结果，如果为空就返回404。

下面我们看一下findStudentById的方法的代码：



function findStudentById(id) {

var studentId = Number(id);

var matches = students.filter(function(student) {
return student.id === studentId;
});

var student = matches.shift();

return student;
}
下面来介绍更新的方法，和get方法是差不多的：

   $httpBackend.whenPUT(/\/students\/(\d+)/, undefined, undefined, ['id']).respond(function(method, url, data, headers, params) {
var student = findstudentById(params.id),
parsedData = angular.fromJson(data);

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

angular.extend(student, parsedData);

return [200, student, {}];
});
同样我们根据在URL截获的id参数在数组中查询到对应的数据记录，然后利用angular.extend方法将数据记

录更新。

删除方法同样和上面的get或者put方法类似，先根据ID查找到相应的记录，然后删除。

$httpBackend.whenDELETE(/\/students\/(\d+)/, undefined, ['id']).respond(function(method, url, data, headers, params) {
var student = findstudentById(params.id);

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

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

return [200, undefined, {}];
});
通过上面的GET、PUT、DELETE、POST等操作我们已经完成了对后台的服务的模拟和数据的定义，到这我们的后台模

拟就已经完成了，下面就是定义我们应用控制器，在这控制器我们将对服务进行调用来完成对后台操作的模拟。

app.controller('MainCtrl', function($scope,$http) {
var tempData= {
name: '晓儿',
phone: '1221212212',
sex:'男'
};
$http.post("/students",tempData).success(function (data) {
console.log(data);
})
$http.put("/students/1",tempData).success(function (data) {
console.log(data);
})

$http.delete("/students/2").success(function (data) {
console.log(data);
})
$http.get("/students").success(function (data) {
$scope.students = data;
})
});
在这这个demo中我只是给大家简单的打印了一下，没有进行详细的显示，但是原理都是比较容易懂得，demo到这

给大家介绍的也差不多了，希望对大家有帮助。

再这在给大家介绍一个在上面demo中没有写的一个用法，就是API文档中提到的passThrough关键字，看一下这个

东西的基本用法：



$httpBackend.whenGET(/\/views\//, undefined, undefined).passThrough();
很多时候我们会遇到请求页面地址的问题，但是我们并不希望在这个请求被拦截，让页面的渲染被阻止，也不需

要返回数据，这就需要我们的passThrough,像上面那样符合请求地址的，则不进行阻拦。

PS:demo下载地址：点我下载

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航