分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了基于ngMockE2E实现后台数据模拟，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_301_3@

@H_301_3@ 引言

@H_301_3@

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

@H_301_3@

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

@H_301_3@

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

@H_301_3@

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

@H_301_3@

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

@H_301_3@的：

@H_301_3@

@H_301_3@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 $http BACkend mock.

@H_301_3@

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

@H_301_3@

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

@H_301_3@

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

@H_301_3@

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

@H_301_3@

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

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

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

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

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

@H_301_3@

@H_301_3@ 下面开始我们的Demo：

@H_301_3@

@H_301_3@ 我们需要在html（index.html）页面引入2个文件angular.jsangular-mock s.js

@H_301_3@

<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>

@H_301_3@

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

@H_301_3@

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

@H_301_3@

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

@H_301_3@

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

@H_301_3@

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

@H_301_3@

<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>

@H_301_3@

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

@H_301_3@

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

@H_301_3@

<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>

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

@H_301_3@

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

@H_301_3@

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

@H_301_3@

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

@H_301_3@

<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>

@H_301_3@

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

@H_301_3@

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

@H_301_3@

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

@H_301_3@

$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,{}];
    });

@H_301_3@我们用一个正则匹配url，获取到id的集合。angular把匹配的到的结果保存到params的id属性上，也就是

@H_301_3@

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

@H_301_3@

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

@H_301_3@

@H_301_3@ 下面我们看一下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下载地址：@L_673_148@

大佬总结

以上是大佬教程为你收集整理的基于ngMockE2E实现后台数据模拟全部内容，希望文章能够帮你解决基于ngMockE2E实现后台数据模拟所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：e ngmocke ngmocke2e 后台基于实现数据模拟

上一篇: Angularjs 实现 switch 开关下一篇:angular.min.js:107 TypeError: ...

猜你在找的Angularjs相关文章

Angularjs基础(八) 2022-04-20
angularjs – 在IE9中使用Angular 2需要什么？ 2019-10-10
angularjs – $http从服务到控制器的POST响应 2019-10-10
如何使用Typescript在Angular 2中创建TreeView？ 2019-10-10
angularjs – 尝试基于常量在控制器中动态设置templateUrl 2019-10-10
angular – 在app.component.ts中导入HTTP_PROVIDERS 2019-10-10
如何使用Observable初始化Reactive Angular2表单？ 2019-10-10
angular – 使用ng2-smart-table编辑和创建 2019-10-10
angularjs – 角度组件绑定未定义 2019-10-10
angularjs – 在ui.router中只更改状态更改的一个视图？ 2019-10-10