基于ngMockE2E实现后台数据模拟

引言

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

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

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

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

在网上找了一些基于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.jsangular-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,data,headers,params) {
        var student= findStudentById(params.id);

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

        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+)/,params) {
        var student = findstudentById(params.id),parsedData = angular.fromJson(data);

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

        angular.extend(student,parsedData);

        return [200,{}];
    });

同样我们根据在URL截获的id参数在数组中查询到对应的数据记录，然后利用angular.extend方法将数据记

录更新。

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

$httpBackend.whenDELETE(/\/students\/(\d+)/,params) {
        var student = findstudentById(params.id);

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

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

        return [200,{}];
    });

通过上面的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).passThrough();

很多时候我们会遇到请求页面地址的问题，但是我们并不希望在这个请求被拦截，让页面的渲染被阻止，也不需

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

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

原文链接：https://www.f2er.com/angularjs/148998.html

基于ngMockE2E实现后台数据模拟

猜你在找的Angularjs相关文章