用Jersey构建RESTful服务9--Jersey+SQLServer+Hibernate4.3+Spring3.2+AngularJS

一、总体说明

本例运行演示了用 Jersey 构建 RESTful 服务中，如何集成 angular,用MVC分层的方式访问 RESTful 服务。

1.上上文的项目 Demo7) 2.angular 库 ,本例为1.2.3 版本 3.样式 bootstrap-3.1.1.min.js

1.完成项目结构

 创建相应的目录结构

angularjs 、bootstrap 的js,css文件放别放入相应的目录，

在js目录下再创建 app.js 、controller.js

在partials目录下再创建 create.html、 list.html 、 detail.html

完整目录结构如下

在list.html填入如下内容,主要是显示用户列表ng-repeat为 angularjs 迭代器 ``作用是数据绑定:

 div 

 a href="#/create" title="Create" span /span /a 

 /div 

 div 

 h3 Users /h3 

 /div 

 hr / 

 li ng-repeat="user in users | filter:query | orderBy:orderProp" 

 div 

 a href="#/users/" title="edit" 

 span /span /a 

 /div 

 h4 userId: /h4 

 p userName: a href="#/users/" /a Age: /p 

 hr / 

 /li 

 hr / 

修改create.html用来添加用户信息，ng-model是模型

 div 

 h3 Create /h3 

 /div 

 form role="form" name="userForm" 

 div nbsp; /div 

 div ng-class="{has-error: userForm.userId.$invalid}" 

 div 

 i ng-show="userForm.url.$error.required" 

 label for="urlInput" userId /label 

 /div 

 div 

 input 

 type="test" 

 id="urlInput"

 name="userId" ng-model="user.userId" required 

 /div 

 /div 

 div nbsp; /div 

 div ng-class="{has-error: userForm.userName.$invalid}" 

 div 

 i ng-show="userForm.userName.$error.required" 

 label for="nameInput" userName /label 

 /div 

 div 

 input 

 type="text" 

 id="nameInput"

 name="userName" 

 ng-model="user.userName" 

 required 

 /div 

 /div 

 div nbsp; /div 

 div ng-class="{has-error: userForm.url.$invalid}" 

 div 

 i ng-show="userForm.url.$error.required" 

 label for="urlInput" age /label 

 /div 

 div 

 input 

 type="text" 

 id="urlInput"

 name="age" ng-model="user.age" required 

 /div 

 /div 

 div ng-hide="showConfirm" 

 div 

 a href="#users" Cancel /a 

 button 

 ng-click="add()" 

 ng-disabled="isClean() || userForm.$invalid"

 Save /button 

 /div 

 /div 

修改detail.html用来显示用户信息并提供修改、删除等功能

 form role="form" name="userForm" 

 div nbsp; /div 

 div ng-class="{has-error: userForm.userId.$invalid}" 

 div 

 i ng-show="userForm.url.$error.required" 

 label for="urlInput" userId /label 

 /div 

 div 

 input 

 type="test" 

 id="urlInput"

 name="userId" ng-model="user.userId" required 

 /div 

 /div 

 div nbsp; /div 

 div ng-class="{has-error: userForm.userName.$invalid}" 

 div 

 i ng-show="userForm.userName.$error.required" 

 label for="nameInput" userName /label 

 /div 

 div 

 input 

 type="text" 

 id="nameInput"

 name="userName" 

 ng-model="user.userName" 

 fend-focus="focusUserNameeInput"

 required 

 /div 

 /div 

 div nbsp; /div 

 div ng-class="{has-error: userForm.url.$invalid}" 

 div 

 i ng-show="userForm.url.$error.required" 

 label for="urlInput" age /label 

 /div 

 div 

 input 

 type="text" 

 id="urlInput"

 name="age" ng-model="user.age" required 

 /div 

 /div 

修改index.html作为主页面,嵌入其他子页面，ng-app声明这个是模块，ng-controller说明他的控制器叫ListCtrl,ng-view用来存放子视图（页面）。

 !doctype html 

 html ng-app="appMain" ng-controller="ListCtrl" 

 head 

 meta charset="utf-8"/ 

 meta name="viewport" content="width=device-width, initial-scale=1.0" 

 link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/ 

 /head 

 body 

 !-- navbar -- 

 div /div 

 !-- footer -- 

 div id="footer" 

 div 

 Project Example - by a href="http://www.waylau.com" target="_blank" www.waylau.com /a | 

 a href="https://github.com/waylau" target="_blank" GitHub Project /a 

 /div 

 /div 

 script src="js/bootstrap-3.1.1.min.js" /script 

 script src="js/angular-1.2.3.js" /script 

 script src="js/angular-resource-1.2.3.js" /script 

 script src="js/angular-route-1.2.3.js" /script 

 script src="js/angular-cookies-1.2.3.js" /script 

 script src="js/app.js" /script 

 script src="js/controller.js" /script 

 /body 

 /html 

修改app.js ，声明模块appMain,提供路由功能，说明了调转到哪个页面，用哪个控制器

 angular.module(appMain, [ngRoute]).config([$routeProvider, function ($routeProvider) {

 $routeProvider.

 when(/users, {templateUrl: partials/list.html, controller: ListCtrl}).

 when(/users/:userId, {templateUrl: partials/detail.html, controller: DetailCtrl}).

 when(/create, {

 templateUrl: partials/create.html,

 controller: CreateController

 otherwise({redirectTo: /users});

 }]);

修改controller.js，控制器。主要是对业务逻辑的操作，常见的CURD功能，http访问RESTful接口，并且返回数据

 var url = http://localhost:8089/RestDemo/rest;

 function ListCtrl($scope, $http) {

 $http.get( url + /users ).success(function(data) {

 $scope.users = data;

 $scope.orderProp = age;

 function DetailCtrl($scope, $routeParams, $http) {

 $http.get( url + /users/+$routeParams.userId).success(function(data) {

 $scope.user = data;

 $scope.save = function() {

 $http.put( url + /users, $scope.user).

 success(function(data, status, headers, config){

 $location.path(/);

 }).error(function(data, status, headers, config){

 alert("error"+status);

 }) ;

 $scope.remove = function(){

 $http({

 method:DELETE,

 url: url + /users/+ $scope.user.userId ,

 .success(function(data, status, headers, config){

 $location.path(/);

 }).error(function(data, status, headers, config){

 alert("error"+status);

 }) ;

 function CreateController($scope, $http) {


  Go语言：RESTful API 服务，急速入门！ 

 REST即表述性状态传递（英文：Representational State Transfer，简称REST），它是一种针对网络应用的设计和开发方式，可以降低开发的复杂性，提高系统的可伸缩性


  Java单元测试之 Jersey Restful 

 对于程序员是否有必要编写test case，何时编写依然存在很多争议，各种互斥的方法论（SE/AM/XP/TDD），以及不同的开发文化，但是可以确定是编写单元测试用例有助于提高编程能力。


 杜万-Java reactive programming - Reactor 3 and Spring WebFlux

 立即下载