爪哇2博客
关
爪哇2博客

使用$ http的AngularJS 宁静的 网页服务示例

这篇文章是AngularJS 网页服务教程的继续

在上一篇文章中，我们已经看到 宁静的Web服务CRUD示例。在本文中，我们将使用AngularJS调用其余的CRUD API。因此，我们将创建一个视图，然后在单击按钮的基础上执行CRUD操作。

源代码：

点击开始
20KB .zip

这是使用jersey创建简单的estest 网页服务（JAXWS）的步骤，该服务将提供CRUD操作。

1) 创建一个 在Eclipse中使用Maven的动态Web项目 named “JAXRSJsonCRUDExample”

马文依赖

2) 我们需要在类路径中添加jersey jars实用程序。

1
2
3
4
5
6
7
8
9
10
11
12
 
<依赖>
   <groupId>com.太阳.球衣</groupId>
   <artifactId>球衣-小服务程序</artifactId>
   <版>${球衣.版}</版>
</依赖>
<依赖>
   <groupId>com.太阳.球衣</groupId>
   <artifactId>球衣-json</artifactId>
   <版>${球衣.版}</版>
</依赖>
 

Jersey在内部使用Jackson进行Json处理，因此它将用于将pojo对象编组为JSON。

现在创建pom.xml，如下所示：
pom.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
<项目 XML文件ns="http://maven.apache.org/POM/4.0.0" XML文件ns:si="http://www.w3.org/2001/XMLSchema-instance"
si:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<模型Version>4.0.0</模型Version>
<groupId>com.Arpit.爪哇2blog</groupId>
<artifactId>JAXRSJsonExample</artifactId>
<打包>战争</打包>
<版>0.0.1-快照</版>
<名称>JAXRSJsonExample 马文 网络应用</名称>
<网址>http://maven.apache.org</url>
   <属性>
        <球衣.版>1.18.3</球衣.版>
    </属性>
<依存关系>
  <依赖>
   <groupId>unit</groupId>
   <artifactId>unit</artifactId>
   <版>3.8.1</版>
   <范围>测试</范围>
  </依赖>
 
  <依赖>
   <groupId>com.太阳.球衣</groupId>
   <artifactId>球衣-小服务程序</artifactId>
   <版>${球衣.版}</版>
  </依赖>
  <依赖>
   <groupId>com.太阳.球衣</groupId>
   <artifactId>球衣-json</artifactId>
   <版>${球衣.版}</版>
  </依赖>
 
  <依赖>
   <groupId>公地-测井</groupId>
   <artifactId>公地-测井</artifactId>
   <版>1.2</版>
  </依赖>
</依存关系>
<建立>
  <finalName>JAXRSJsonExample</finalName>
  <外挂程式>
   <插入>
    <groupId>组织.阿帕奇.专家.外挂程式</groupId>
    <artifactId>专家-编译器-插入</artifactId>
    <版>3.3</版>
    <组态>
     <资源>1.7</资源>
     <目标>1.7</目标>
    </组态>
   </插入>
   <插入>
    <groupId>组织.阿帕奇.专家.外挂程式</groupId>
    <artifactId>专家-战争-插入</artifactId>
    <组态>
     <failOnMissingWebXml>假</failOnMissingWebXml>
    </组态>
   </插入>
  </外挂程式>
</建立>
 
</项目>
 

应用配置：

3) 创建如下的web.xml：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<?XML文件 版="1.0" 编码方式=“ UTF-8”?>
<网路-应用程式 XML文件ns:si="http://www.w3.org/2001/XMLSchema-instance"
XML文件ns="http://java.sun.com/xml/ns/javaee"
si:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
版="3.0">
<显示-名称>原型 已建立 网页 应用</显示-名称>
<小服务程序>
  <小服务程序-名称>球衣-丝绒</小服务程序-名称>
  <小服务程序-类>com.太阳.球衣.精神.容器.小服务程序.Servlet容器</小服务程序-类>
  <在里面-参数>
   <参数-名称>com.太阳.球衣.配置.属性.包装</参数-名称>
   <参数-值>组织.Arpit.爪哇2blog.控制者</参数-值>
  </在里面-参数>
  <在里面-参数>
   <参数-名称>com.太阳.球衣.api.json.POJOMapping功能</参数-名称>
   <参数-值>真正</参数-值>
  </在里面-参数>
 
  <加载-上-启动>1</加载-上-启动>
</小服务程序>
<小服务程序-映射>
  <小服务程序-名称>球衣-丝绒</小服务程序-名称>
  <网址-模式>/休息/*</网址-模式>
</小服务程序-映射>
</网路-应用程式>
 

请更改initParam“com.sun.jersey.config.property.package”属性，以提供正确的控制器软件包名称（如果您未使用相同的软件包）。

创建bean类

4) Create a 豆 名称 “Country.java”在org.arpit.java2blog.bean中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
包 组织.Arpit.爪哇2blog.豆;
 
上市 类 国家{
 
    整型 ID;
    串 国家的名字;
    长 人口;
 
    上市 国家() {
        超();
    }
    上市 国家(整型 i, 串 国家的名字,长 人口) {
        超();
        这个.ID = i;
        这个.国家的名字 = 国家的名字;
        这个.人口=人口;
    }
    上市 整型 得到Id() {
        返回 ID;
    }
    上市 虚空 设置名称(整型 ID) {
        这个.ID = ID;
    }
    上市 串 得到CountryName() {
        返回 国家的名字;
    }
    上市 虚空 setCountryName(串 国家的名字) {
        这个.国家的名字 = 国家的名字;
    }
    上市 长 得到Population() {
        返回 人口;
    }
    上市 虚空 setPopulation(长 人口) {
        这个.人口 = 人口;
    }
 
}
 

创建控制器

5) 创建一个名为的控制器“CountryController.java” in 包 组织.arpit.java2blog.controller

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
包 组织.Arpit.爪哇2blog.控制者;
 
进口 爪哇.实用程序.清单;
 
进口 爪哇x.ws.rs.删除;
进口 爪哇x.ws.rs.得到;
进口 爪哇x.ws.rs.开机自检;
进口 爪哇x.ws.rs.放;
进口 爪哇x.ws.rs.路径;
进口 爪哇x.ws.rs.路径参数;
进口 爪哇x.ws.rs.产生;
进口 爪哇x.ws.rs.核心.媒体类型;
 
进口 组织.Arpit.爪哇2blog.豆.国家;
进口 组织.Arpit.爪哇2blog.服务.国家服务;
 
@路径(“ /国家”)
上市 类 国家Controller {
 
    国家服务 国家Service=新 国家服务();
 
    @得到
    @产生(媒体类型.APPLICATION_JSON)
    上市 清单 得到Countries()
    {
 
        清单 listOfCountries=国家Service.得到AllCountries();
        返回 listOfCountries;
    }
 
    @得到
    @路径(“/{ID}”)
    @产生(媒体类型.APPLICATION_JSON)
    上市 国家 得到CountryById(@路径参数(“ID”) 整型 ID)
    {
        返回 国家Service.得到Country(ID);
    }
 
    @开机自检
    @产生(媒体类型.APPLICATION_JSON)
    上市 国家 addCountry(国家 国家)
    {
        返回 国家Service.addCountry(国家);
    }
 
    @放
    @产生(媒体类型.APPLICATION_JSON)
    上市 国家 updateCountry(国家 国家)
    {
        返回 国家Service.updateCountry(国家);
 
    }
 
    @删除
    @路径(“/{ID}”)
    @产生(媒体类型.APPLICATION_JSON)
    上市 虚空 deleteCountry(@路径参数(“ID”) 整型 ID)
    {
        国家Service.deleteCountry(ID);
 
    }
 
}
 

@Path（/ your_path_at_class_level） ：将路径设置为基本URL + / your_path_at_class_level。基本URL基于您的应用程序名称，servlet和来自web.xml的URL模式” 组态 file.

@Path（/ your_path_at_method_level）：设置基本URL的路径+ / your_path_at_class_level + / your_path_at_method_level

@Produces（MediaType.APPLICATION_JSON [，more-types]）：@Produces定义由@GET注释的方法传递哪种MIME类型。在示例文字中（“text/json”) is produced.

创建服务类

6) 在包中创建一个类CountryService.java 组织.arpit.java2blog.service
它只是一个辅助类，应该由数据库实现代替。它不是很好的书面类，仅用于演示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 
包 组织.Arpit.爪哇2blog.服务;
 
进口 爪哇.实用程序.数组列表;
进口 爪哇.实用程序.哈希图;
进口 爪哇.实用程序.清单;
 
进口 组织.Arpit.爪哇2blog.豆.国家;
进口 组织.Arpit.爪哇2blog.例外.国家NotFoundException;
 
/ *
*它只是一个辅助类，应该由数据库实现代替。
*这不是很好的书面课，仅用于演示。
* /
上市 类 国家服务 {
 
    静态的 哈希图<整数,国家> 国家IdMap=得到CountryIdMap();
 
    上市 国家服务() {
        超();
 
        如果(国家IdMap==空值)
        {
            国家IdMap=新 哈希图<整数,国家>();
            //在初始化时创建国家的对象
            国家 印度国家=新 国家(1, “印度”,10000);
            国家 中国国家=新 国家(4, “中国”,20000);
            国家 尼泊尔国家=新 国家(3, “尼泊尔”,8000);
            国家 不丹国家=新 国家(2, “不丹”,7000);
 
            国家IdMap.放(1,印度国家);
            国家IdMap.放(4,中国国家);
            国家IdMap.放(3,尼泊尔国家);
            国家IdMap.放(2,不丹国家);
        }
    }
 
    上市 清单 得到AllCountries()
    {
        清单 国家 = 新 数组列表(国家IdMap.价值观());
        返回 国家;
    }
 
    上市 国家 得到Country(整型 ID)
    {
        国家 国家= 国家IdMap.得到(ID);
 
        如果(国家 == 空值)
        {
            扔 新 国家NotFoundException(“具有ID的国家”+ID+“ 未找到”);
        }
        返回 国家;
    }
    上市 国家 addCountry(国家 国家)
    {
        国家.设置名称(得到MaxId()+1);
        国家IdMap.放(国家.得到Id(), 国家);
        返回 国家;
    }
 
    上市 国家 updateCountry(国家 国家)
    {
        如果(国家.得到Id()<=0)
            返回 空值;
        国家IdMap.放(国家.得到Id(), 国家);
        返回 国家;
 
    }
    上市 虚空 deleteCountry(整型 ID)
    {
        国家IdMap.去掉(ID);
    }
 
    上市 静态的 哈希图<整数, 国家> 得到CountryIdMap() {
        返回 国家IdMap;
    }
 
    //获取最大ID的实用方法
    上市 静态的 整型 得到MaxId()
    {   整型 最高=0;
    对于 (整型 ID:国家IdMap.键集()) {  
        如果(最高<=ID)
            最高=ID;
 
    }  
 
    返回 最高;
    }
}
 

AngularJS视图

7) 创造 角度的JSCrudExample.html 网页Content文件夹中包含以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
 
<html>
  <头>  
 
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
 
    <标题>AngularJS $http 休息 例</标题>  
<script 类型=“文本/ 爪哇script”>
            变种 应用程式 = 角度的.模组(“国家管理”, []);
 
            //控制器部分
            应用程式.控制者(“ 国家Controller”, 功能($范围, $http) {
 
                $范围.国家 = [];
                $范围.国家Form = {
                    ID : -1,
                    国家的名字 : ”,
                    人口 : ”
                };
 
                //现在从服务器加载数据
                _refreshCountryData();
 
                //用于添加/编辑国家/地区的HTTP 开机自检 / 放方法
                //在id的帮助下，我们将找出它是put操作还是post操作
 
                $范围.SubmitCountry = 功能() {
 
                    变种 方法 = ”;
                    变种 网址 = ”;
                    如果 ($范围.国家Form.ID == -1) {
                        //表单数据中没有ID，这是创建新的国家/地区操作
                        方法 = “ 开机自检”;
                        网址 = “休息/国家”;
                    } 其他 {
                        // Id出现在表单数据中，它是编辑国家/地区的操作
                        方法 = “放”;
                        网址 = “休息/国家”;
                    }
 
                    $http({
                        方法 : 方法,
                        网址 : 网址,
                        数据 : 角度的.托森($范围.国家Form),
                        标头 : {
                            '内容类型' : 'application / json'
                        }
                    }).然后( _成功, _错误 );
                };
 
                // HTTP 删除-按ID删除国家
                $范围.deleteCountry = 功能(国家) {
                    $http({
                        方法 : '删除',
                        网址 : '休息/国家/' + 国家.ID
                    }).然后(_成功, _错误);
                };
 
             //如果进行编辑，则填充表单字段并为form.id分配国家ID
                $范围.editCountry = 功能(国家) {
 
                    $范围.国家Form.国家的名字 = 国家.国家的名字;
                    $范围.国家Form.人口 = 国家.人口;
                    $范围.国家Form.ID = 国家.ID;
                };
 
                / *私有方法* /
                // HTTP 得到-获取所有国家/地区集合
                功能 _refreshCountryData() {
                    $http({
                        方法 : '得到',
                        网址 : 'http：// localhost：8080 / AngularjsJAXRSCRUDExample / 休息 / 国家'
                    }).然后(功能 successCallback(响应) {
                        $范围.国家 = 响应.数据;
                    }, 功能 errorCallback(响应) {
                        安慰.日志(响应.statusText);
                    });
                }
 
                功能 _成功(响应) {
                    _refreshCountryData();
                    _clearFormData()
                }
 
                功能 _错误(响应) {
                    安慰.日志(响应.statusText);
                }
 
                //清除表格
                功能 _clearFormData() {
                    $范围.国家Form.ID = -1;
                    $范围.国家Form.国家的名字 = ”;
                    $范围.国家Form.人口 = ”;
 
                };
            });
        </script>
        <style>
 
       .blue-button{
     背景: ＃25A6E1;
     过滤: 程序: DXImageTransform.Microsoft.gradient( startColorstr='＃25A6E1'，endColorstr ='＃188BC0'，GradientType = 0);
     填充:3px 5px;
     颜色:#fff;
     字体系列:Helvetica Neue，无衬线字体;
     字体大小:12px;
     边界半径:2px;
     -moz-border-radius:2px;
     -webkit-border-radius:4px;
     边境:1px 固体 ＃1A87B9
           }    
 
       。红色按钮{
    背景: ＃CD5C5C;
 
    填充:3px 5px;
    颜色:#fff;
    字体系列:Helvetica Neue，无衬线字体;
    字体大小:12px;
    边界半径:2px;
    -moz-border-radius:2px;
    -webkit-border-radius:4px;
    边境:1px 固体 ＃CD5C5C
           }      
 
       表 {
           字体系列: “ Helvetica Neue”, Helvetica， 无衬线字体;
           宽度: 50%;
       }
 
       标题 {
           文字对齐: 剩下;
           颜色: 银;
           字体粗细: 胆大;
           文字转换: 大写;
           填充: 5px;
       }
 
       日 {
           背景: 钢铁蓝;
           颜色: 白色;
       }
 
       tbody TR：nth-​​child（even） {
           背景: 白色的烟;
       }
 
       tbody TR d：nth-​​child（2） {
           文字对齐:中央;
       }
 
       tbody TR d：nth-​​child（3），
      tbody TR d：nth-​​child（4） {
           文字对齐: 中央;
           字体系列: 等宽;
       }
 
       foot {
           背景: 海绿色;
           颜色: 白色;
           文字对齐: 对;
       }
 
       foot脚 {
           字体系列: 等宽;
       }
 
       吨{
            边境: 1px 固体 灰色;
            宽度: 25%;
            文字对齐: 剩下;
            填充: 5px 10px;
        }
 
        </style>
    <头>
    <身体 ng-应用程式=“国家管理” ng-控制者=“ 国家Controller”>
         <h1>
           AngularJS 宁静的 网路 服务 例 使用 $http
        </h1>
        <形成 ng-提交=“ SubmitCountry（）”>
            <表>
 
                <TR>
                    <日 科尔斯潘="2">加/编辑 国家</日>
                 </TR>
                <TR>
                    <d>国家</d>
                    <d><输入 类型=“文本” ng-模型=“ 国家Form.countryName” /></d>
                </TR>
                <TR>
                    <d>人口</d>
                    <d><输入 类型=“文本” ng-模型=“ 国家Form.population”  /></d>
                </TR>
                <TR>
                    <d 科尔斯潘="2"><输入 类型=“提交” 值=“提交” 类=“蓝色按钮” /></d>
                </TR>
            </表>
        </形成>
        <表>
            <TR>
 
                <日>国家的名字</日>
                <日>人口</日>
                <日>运作方式</日>
 
            </TR>
 
            <TR ng-重复=“国家/地区”>
 
    <d> {{ 国家.国家的名字 }}</d>
    <d >{{ 国家.人口 }}</d>  
 
                <d><a ng-点击=“ editCountry（国家）” 类=“蓝色按钮”>编辑</a> | <a ng-点击=“ deleteCountry（国家）” 类=“红色按钮”>删除</a></d>
            </TR>
 
        </表>
 
  </身体>
</html>
 

说明：

    • 正如我们通过控制器构造函数在ajax示例中所做的那样，我们已经注入了$ http。

1
2
3
4
5
6
 
应用程式.控制者(“ 国家Controller”, 功能($范围, $http) {
 
                $范围.国家 = [];
...
 

    • 我们根据操作定义了各种方法，例如editCountry，deleteCountry，submitCountry
    • 当您单击表单上的提交按钮时，它会根据操作实际调用POST或PUT。如果单击编辑并提交数据，则将对其进行操作，因为它将在现有资源上进行更新。如果您直接提交数据，则将通过POST操作创建新资源，
    • 每次您提交数据时，它都会调用RefereshCountryData（）刷新下面的国家/地区表。
    • 调用$ http时，需要传递方法类型和URL，它将根据它进行调用。您可以相对于Web应用程序的上下文根放置绝对URL或相对URL。

1
2
3
4
5
6
7
8
9
10
11
12
13
 
// HTTP 得到-获取所有国家/地区集合
                功能 _refreshCountryData() {
                    $http({
                        方法 : '得到',
                        网址 : 'http：// localhost：8080 / JAXRSJsonCRUD示例 / 休息 / 国家'
                    }).然后(功能 successCallback(响应) {
                        $范围.国家 = 响应.数据;
                    }, 功能 errorCallback(响应) {
                        安慰.日志(响应.statusText);
                    });
                }
 

8) It ‘是时候进行Maven构建了。

右键点击项目-> Run as -> 马文 建立

9) 提供目标作为全新安装（如下所示）并单击运行

运行应用程序

10) 右键点击  角度的JSCrudExample.html -> run as -> run 上 server
选择Apache tomcat，然后单击完成
10）您应该可以看到以下页面
网址 : “http：// localhost：8080 / AngularjsJAXRSCRUDExample / 角度的JSCrudExample.html”


让我们点击对应于尼泊尔的删除按钮，您将看到以下屏幕：

让我们增加一个人口为15000的新国家法国

单击提交，您将看到以下屏幕。

现在，单击与印度对应的编辑按钮，并将人口从10000更改为100000。

单击提交，您将看到以下屏幕：



让我们检查Rest API的Get方法

11) 测试您的get方法REST服务
网址：“http：// localhost：8080 / AngularjsJAXRSCRUDExample / 休息 / 国家 /”.

您将获得以下输出：

如您所见，所有更改已反映在上述get调用中。

项目结构：


我们使用球衣完成了Restful 网页服务json CRUD示例。如果您仍然遇到任何问题，请发表评论。


导入联系人

您可能还喜欢：

分享这个

作者

关注作者

相关文章

Comments

发表评论 取消回复

您的电子邮件地址不会被公开。 必需的地方已做标记 *

订阅我们的新闻

获取质量教程到您的收件箱。现在订阅。


成为朋友

©2020 爪哇2博客