爪哇2博客
关
爪哇2博客

春季MVC 角度的js示例

在本教程中，我们将看到Spring MVC 角度的js示例。

春季MVC教程：

在本文中，我们将创建Spring MVC REST API并通过调用REST API使用AngularJs执行CRUD操作。

Github源代码：

这是创建简单的步骤 弹簧Rest API 它将提供CRUD操作和angularJS来调用Spring MVC API。

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

马文依赖

2)现在创建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
 
<项目 xmlns="http://maven.apache.org/POM/4.0.0" xmlns: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>AngularjsSpringRestExample</artifactId>
  <打包>战争</打包>
  <版>0.0.1-快照</版>
  <名称>AngularjsSpringRestExample 马文 网络应用</名称>
  <网址>http://maven.apache.org</url>
  <依存关系>
    <依赖>
      <groupId>unit</groupId>
      <artifactId>unit</artifactId>
      <版>3.8.1</版>
      <范围>测试</范围>
    </依赖>
    <依赖>
   <groupId>爪哇x.小服务程序</groupId>
   <artifactId>爪哇x.小服务程序-api</artifactId>
   <版>3.1.0</版>
  </依赖>
 
  <依赖>
   <groupId>组织.弹簧框架</groupId>
   <artifactId>弹簧-核心</artifactId>
   <版>${弹簧.版}</版>
  </依赖>
  <依赖>
   <groupId>组织.弹簧框架</groupId>
   <artifactId>弹簧-网路mvc</artifactId>
   <版>${弹簧.版}</版>
  </依赖>
   <依赖>
            <groupId>com.fastxml.杰克逊.核心</groupId>
            <artifactId>杰克逊-数据绑定</artifactId>
             <版>2.4.1</版>
        </依赖>
</依存关系>
<建立>
  <finalName>AngularjsSpringRestExample</finalName>
 
  <外挂程式>
   <插入>
    <groupId>组织.阿帕奇.专家.外挂程式</groupId>
    <artifactId>专家-编译器-插入</artifactId>
    <版>3.1</版>
    <组态>
     <资源>${杰克.版}</资源>
     <目标>${杰克.版}</目标>
    </组态>
   </插入>
  </外挂程式>
 
</建立>
<属性>
  <弹簧.版>4.2.1。发布</弹簧.版>
  <杰克.版>1.7</杰克.版>
</属性>
 
</项目>
 

应用配置：

3) 创建如下的web.xml：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<!DOCTYPE 网路-应用程式 上市
“-// Sun Microsystems，Inc.//DTD 网页应用程序2.3 // EN”
"http://java.sun.com/dtd/web-app_2_3.dtd" >
 
<网路-应用程式>
  <显示-名称>原型 已建立 网页 应用</显示-名称>
  <小服务程序>
<小服务程序-名称>弹簧座</小服务程序-名称>
<小服务程序-类>
  组织.弹簧框架.网路.小服务程序.分派器
</小服务程序-类>
<加载-上-启动>1</加载-上-启动>
</小服务程序>
 
<小服务程序-映射>
<小服务程序-名称>弹簧座</小服务程序-名称>
<网址-模式>/</网址-模式>
</小服务程序-映射>
</网路-应用程式>
 


4) 在/ WEB-INF /文件夹中创建一个名为springrest-servlet.xml的xml文件。
如果您想使用不同的弹簧包来搜索控制器，请更改context：component-scan。请参考 春季MVC Hello World示例了解更多。

1
2
3
4
5
6
7
8
9
10
11
12
 
<豆子 xmlns="http://www.springframework.org/schema/beans"
xmlns:语境="http://www.springframework.org/schema/context"
xmlns:多媒体="http://www.springframework.org/schema/mvc" xmlns:si="http://www.w3.org/2001/XMLSchema-instance"
si:schemaLocation=" http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context-3.0.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">
 
<多媒体:注解-驱动的/>
<语境:零件-扫描 基础-包=“ 组织.arpit.java2blog.controller” />
<多媒体:默认-小服务程序-处理程序/>
</豆子>
 

创建bean类

5) 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(长 人口) {
        这个.人口 = 人口;
    }
 
}
 

创建控制器

6) 创建一个名为的控制器“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
 
包 组织.Arpit.爪哇2blog.控制者;
 
进口 爪哇.实用程序.清单;
进口 爪哇x.小服务程序.http.HttpServletRequest;
进口 组织.Arpit.爪哇2blog.豆.国家;
进口 组织.Arpit.爪哇2blog.服务.国家服务;
进口 组织.弹簧框架.豆子.厂.注解.自动接线;
进口 组织.弹簧框架.网路.捆绑.注解.路径变量;
进口 组织.弹簧框架.网路.捆绑.注解.RequestBody;
进口 组织.弹簧框架.网路.捆绑.注解.请求映射;
进口 组织.弹簧框架.网路.捆绑.注解.请求方法;
进口 组织.弹簧框架.网路.捆绑.注解.休息Controller;
 
@休息Controller
上市 类 国家Controller {
 
    @自动接线
    私人的 HttpServletRequest 请求;
    国家服务 国家Service = 新 国家服务();
 
    @请求映射(值 = “ /国家”, 方法 = 请求方法.得到, 标头 = “ Accept = 应用程式lication / json”)
    上市 清单 得到Countries() {
 
        清单 listOfCountries = 国家Service.得到AllCountries();
        返回 listOfCountries;
    }
 
    @请求映射(值 = “ /国家/ {id}”, 方法 = 请求方法.得到, 标头 = “ Accept = 应用程式lication / json”)
    上市 国家 得到CountryById(@路径变量 整型 ID) {
        返回 国家Service.得到Country(ID);
    }
 
    @请求映射(值 = “ /国家”, 方法 = 请求方法.开机自检, 标头 = “ Accept = 应用程式lication / json”)
    上市 国家 addCountry(@RequestBody 国家 国家) {
        返回 国家Service.addCountry(国家);
    }
 
    @请求映射(值 = “ /国家”, 方法 = 请求方法.放, 标头 = “ Accept = 应用程式lication / json”)
    上市 国家 updateCountry(@RequestBody 国家 国家) {
        返回 国家Service.updateCountry(国家);
 
    }
 
    @请求映射(值 = “ /国家/ {id}”, 方法 = 请求方法.删除, 标头 = “ Accept = 应用程式lication / json”)
    上市 虚空 deleteCountry(@路径变量(“ID”) 整型 ID) {
        国家Service.deleteCountry(ID);
 
    }
}
 

创建服务类

7) 在包中创建一个类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
 
包 组织.Arpit.爪哇2blog.服务;
 
进口 爪哇.实用程序.数组列表;
进口 爪哇.实用程序.哈希图;
进口 爪哇.实用程序.清单;
 
进口 组织.Arpit.爪哇2blog.豆.国家;
 
/ *
*它只是一个辅助类，应该由数据库实现代替。
*这不是很好的书面课，仅用于演示。
* /
上市 类 国家服务 {
 
    静态的 哈希图<整数,国家> 国家IdMap=得到CountryIdMap();
 
    上市 国家服务() {
        超();
 
        如果(国家IdMap==空值)
        {
            国家IdMap=新 哈希图<整数,国家>();
            //在初始化时创建Country的一些对象
            国家 印度国家=新 国家(1, “印度”,10000);
            国家 中国国家=新 国家(4, “中国”,20000);
            国家 尼泊尔国家=新 国家(3, “尼泊尔”,8000);
            国家 不丹国家=新 国家(2, “不丹”,7000);
 
            国家IdMap.放(1,印度国家);
            国家IdMap.放(4,中国国家);
            国家IdMap.放(3,尼泊尔国家);
            国家IdMap.放(2,不丹国家);
        }
    }
 
    上市 清单 得到AllCountries()
    {
        清单 国家 = 新 数组列表(国家IdMap.价值观());
        返回 国家;
    }
 
    上市 国家 得到Country(整型 ID)
    {
        国家 国家= 国家IdMap.得到(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视图

8) 创造 角度的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
 
<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，这是创建新的国家/地区操作
                        方法 = “ 开机自检”;
                        网址 = '/ AngularjsSpringRestExample /国家';
                    } 其他 {
                        // Id出现在表单数据中，它是编辑国家/地区的操作
                        方法 = “放”;
                        网址 = '/ AngularjsSpringRestExample /国家';
                    }
 
                    $http({
                        方法 : 方法,
                        网址 : 网址,
                        数据 : 角度的.托森($范围.国家Form),
                        标头 : {
                            '内容类型' : 'application / json'
                        }
                    }).然后( _成功, _错误 );
                };
 
                // HTTP 删除-按ID删除国家
                $范围.deleteCountry = 功能(国家) {
                    $http({
                        方法 : '删除',
                        网址 : '/ AngularjsSpringRestExample / 国家 /' + 国家.ID
                    }).然后(_成功, _错误);
                };
 
             //如果进行编辑，则填充表单字段并为form.id分配国家ID
                $范围.editCountry = 功能(国家) {
 
                    $范围.国家Form.国家的名字 = 国家.国家的名字;
                    $范围.国家Form.人口 = 国家.人口;
                    $范围.国家Form.ID = 国家.ID;
                };
 
                / *私有方法* /
                // HTTP 得到-获取所有国家/地区集合
                功能 _refreshCountryData() {
                    $http({
                        方法 : '得到',
                        网址 : 'http：// localhost：8080 / AngularjsSpringRestExample / 国家'
                    }).然后(功能 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 / AngularjsSpringRestExample / rest / 国家'
                    }).然后(功能 successCallback(响应) {
                        $范围.国家 = 响应.数据;
                    }, 功能 errorCallback(响应) {
                        安慰.日志(响应.statusText);
                    });
                }
 

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

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

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

运行应用程序

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


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

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

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

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

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

让我们检查Rest API的Get方法

12) 测试您的get方法REST服务
网址：“http：// localhost：8080 / AngularjsSpringRestExample / 国家 /”.

您将获得以下输出：

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

项目结构：

春季MVC 角度的js项目结构


我们以Spring MVC 角度的js示例为例，如果您仍然遇到任何问题，请发表评论。


导入联系人

您可能还喜欢：


导入联系人

您可能还喜欢：

分享这个

作者

关注作者

相关文章

  • 7月10日

    春季MVC教程

    在这篇文章中，我们将学习Spring MVC教程。 春季MVC框架是一个健壮的模型视图控制器框架，可帮助我们开发松耦合的Web应用程序。它借助MVC架构分离Web应用程序的不同方面。模型：模型携带应用程序数据。它通常以[…]

  • 9月13日

    春季MVC + 弹簧数据 + 冬眠 + 的MySQL示例

    在这篇文章中，我们将看到Spring MVC，Spring Data，hibernate和mysql CRUD示例的集成。在上一教程中我们已经看到了Spring MVC，hibernate和mysql示例。 春季数据 JPA提供了CRUD API，因此您不必’不必编写样板代码。您只需要创建存储库接口，spring就会提供[…]

  • 8月26日

    使用@ControllerAdvice示例的Spring MVC异常处理

    在这篇文章中，我们将看到如何使用@ControllerAdvice在Spring MVC中进行异常处理。在上一篇文章中，我们已经看到了如何使用@ExceptionHandler来处理异常，但是@ExceptionHandler只能应用于一个控制器，但是如果要全局（即跨多个控制器）处理异常怎么办？您可以使用@ControllerAdvice处理[…]

  • 8月26日

    使用@ExceptionHandler示例的Spring MVC异常处理

    在这篇文章中，我们将看到如何使用@ExceptionalHandler在Spring MVC中进行异常处理。发生异常时，可以使用@ExceptionHandler重定向到错误视图。让我们借助示例来理解这一点：源代码：下载单击以开始20KB .zip 1）在Eclipse中使用maven创建一个动态Web项目“SpringMVCExceptionalHandlerExample”Maven依赖项2）…]

  • 8月25日

    春季MVC休眠MySQL CRUD示例

    在这篇文章中，我们将看到Spring MVC，hibernate和mysql CRUD示例的集成。在上一教程中，我们已经看到了Spring 休息与hibernate的集成。 春季MVC教程Spring MVC你好世界示例Spring MVC休眠MySQL示例Spring MVC 春季数据示例Spring MVC Interceptor示例Spring MVC 角度的js […]

  • 8月23日

    春季MVC + 日志4j示例

    在本文中，我们将看到如何将Spring MVC与log4j集成。 春季MVC教程：Spring MVC hello世界示例Spring MVC休眠MySQL示例Spring MVC拦截器示例Spring MVC 角度的js示例Spring MVC @RequestMapping示例Spring组件，服务，存储库和控制器示例Spring MVC @ModelAttribute注释示例Spring MVC @RestController注释示例Spring […]

发表评论 取消回复

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

订阅我们的新闻

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


成为朋友

©2020 爪哇2博客