AngularJS（3）——使用$resourse定义Restful服务

柔情只为你懂 2022-07-24 06:17 11阅读 0赞

#     #

# 如何理解Rest服务 #

##     ##

## 一种架构风格。 ##

Rest（Representational State Transfer）  表述性状态转移

Rest 是一种架构风格，在rest架构风格中，对象被抽象为一种资源（resource）。

表述性状态是对资源数据在某个瞬间状态的快照，资源的某个瞬时状态被定义为一种表述。

请求一个资源==访问一个具有指定性和描述性的URI，经由http，将资源的表述从服务器转移到客户端。

REST： 指的是一种软件架构风格，设计风格而不是标准，只是提供了一组设计原则和约束条件。

RESTful：如果一个架构符合REST原则，就称它为RESTful架构。

## 面向资源的架构。 ##

Rest式架构意味着，方法信息都在HTTP方法里，面向资源的架构（ROA）意味着，信息域消息都在URI里，二者结合起来是很强大的。一个面向资源的Rest式web服务，通过HTTP请求的一行数据，基本就知道客户端想做什么事情了。HTTP请求的其余部分只是细节而已。如果HTTP方法跟方法信息对不上，那么服务就算不上是Rest式的。如果作用域信息不放在URI里面，那么服务就不是面向资源的。

## 资源的表现层 ##

那么什么是资源的表现层，大家一定看晕了，简单说，什么是资源，web服务就是我们经常说的网站，那么一个网站上的资源可以是一段文字，可以是一个图片，一段音乐，等等。这些资源有多种表现方式，这些表现方式就是资源的表现层，比如HTML，XML，PNG，JSON

## 状态转移（State Transfer） ##

对这个网站的访问就引发了客户端对服务器的一次请求，如果客户端想要操作服务器就需要通过一种手段去让服务器发生状态转移，而这种转换是通过资源表现出来的。这就是表现层状态转移。客户端使用HTTP来操作资源，http是一种无状态的协议，也就是说，当你第一次请求数据的时候，服务器给你数据，当你用同一个客户端再次请求数据的时候，它还会做重复的操作。协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。

## HTTP动词 ##

对于资源的具体操作类型，由HTTP动词表示。

常用的HTTP动词有下面五个（括号里是对应的SQL命令）。

*  GET（SELECT）：从服务器取出资源（一项或多项）。
 *  POST（CREATE）：在服务器新建一个资源。
 *  PUT（UPDATE）：在服务器更新资源（客户端提供改变后的完整资源）。
 *  PATCH（UPDATE）：在服务器更新资源（客户端提供改变的属性）。
 *  DELETE（DELETE）：从服务器删除资源。

综上什么是restful服务：

（1）每一个URI代表一种资源；

（2）客户端和服务器之间，传递这种资源的某种表现层；

（3）客户端通过HTTP动词，对服务器端资源进行操作，实现"表现层状态转化"。

# 代码实现 #

我们的项目前台是用angularjs，在前台使用的是$resourse定义Restful服务

1.先在index.html 中引入需要的js:

2.自己写的服务：js/services.js

声明module，定义工厂服务

<span style="font-family:KaiTi_GB2312;">angular.module('itoo-exam-evaluation.services',['ngResource'])
     
    .factory("userService", function($resource){
    return $resource('http://localhost:8100/localhost/'+'login'+'/userCode/:userCode'+'/password/:password',{},
    {
            query:{method:'GET',params:{},isArray:false}
    });
    })</span>

3.把服务模块添加到app.js依赖的数组里面

angular.module('itoo-exam-evaluation',['ionic','itoo-exam-evaluation.controllers',
    'itoo-exam-evaluation.routes',
    'itoo-exam-evaluation.services',
    'itoo-exam-evaluation.directives'])

数据地址：

.constant('studentWebUrl','http://localhost:8100/192.168.22.248/');//调试的时候使用的本地接口

4.Controller.js中传递服务的参数，在controller中调用服务(query)

.controller('userCtrl', function($scope,$ionicPopup,$state,userService)
      userService.query({userCode:userCode,password:password},function(data){
    //判断返回结果是否为真
    if(data.result==true){
    if(data.allUsers.password==password){
    /*如果用户名密码正确，将用户名密码写入localStorage中，跳转到今日课程页面*/
                  localStorage.setItem("userCode", userCode);
                  localStorage.setItem("password", password);
    /*alert(localStorage.getItem("userCode"));*/
    /*跳转到今日课程界面*/
                  $state.go("evaluationTask");
    }else{
                    var alertPopup = $ionicPopup.alert({
                        title:'提示',
                        template:'密码错误!',
                        okType:'button-positive'
    });
                    alertPopup.then(function(res){
                      $scope.userInfo.password='';
    });
     
    }
    }else{
                var alertPopup = $ionicPopup.alert({
                        title:'提示',
                        template:'用户名错误!',
                        okType:'button-positive'
    });
                    alertPopup.then(function(res){
                      $scope.userInfo.userCode='';
                      $scope.userInfo.password='';
    });
    }
    },function(){});

5.后台登陆接口：

/*登陆接口*/
    @ResponseBody
    @RequestMapping(value="/login/userCode/{userCode}/password/{password}",method=RequestMethod.GET,produces ="text/html;charset=UTF-8")
    publicString login(@PathVariable("userCode")String userCode,@PathVariable("password")String password){
    System.out.println("用户名为："+userCode);
    System.out.println("密码为："+password);
    return"{\"result\":true,\"allUsers\":{\"id\":\"12EBA23Qsew345\",\"userName\":\"1\",\"userCode\":\"1\",\"password\":\"1\",\"headImage\":\"img/01.jpg\",\"roleType\":0}}";
    }

RequestMapping是一个用来处理请求地址映射的注解，可用于类或方法上。用于类上，表示类中的所有响应请求的方法都是以该地址作为父路径。使用注解需要在ApplicationContext.xml中配置<context:component-scan base-package="itoo.exam"> 去扫描包中的注解。

也可以在JSP中写AJAX去请求数据：

$.ajax({
               url:'student/1/course/5',
               type:'DELETE',
               success:function(data){
                    alert(data);
    },
                error:function(data){
                    alert("error");
    }
    })

# 总结 #

现在越来越多的公司倾向于采用面向服务(service-oriented)的架构，由后端提供给前端RESTful的接口，这么做是为了更好的做前后端的依赖分离。如果所有的关键业务逻辑都封装成REST调用，就意味着在上层只需要考虑如何用这些REST接口构建具体的应用。那些后端程序员们根本不操心具体数据是如何从一个页面传递到另一个页面的。当后端程序员提供了REST服务之后，不论后台用的是什么语言，都不会对前台造成影响的。