爪哇2博客
爪哇2博客

春季靴 AngularJS示例

在这篇文章中,我们 are going to see how to 创造 春季靴 AngularJS示例。

我们将使用竞彩篮球分析 开机 1.5.3 Release版本,它附带 冬眠的 5.我们将创建一个 春季靴 AngularJS应用程序将具有 AngularJS 作为用户 接口。它将提供用户界面,您可以从中添加,更新或删除客户数据库。我们将使用控制器,服务和DAO类来实现这些功能。我们将使用休眠的SessionFactory类连接到MySQL数据库。

Github源代码:

春季靴 AngularJS示例:

以下是创建一个 春季靴 AngularJS示例。

项目结构:

春季靴 AngularJS项目结构

用于创建以下项目的工具:

  1. 春季靴 1.5.3。发布
  2. 春天4.3.8。发布
  3. Tomcat嵌入8
  4. 马文 3
  5. 爪哇 8
  6. 休眠5.3.5
  7. MySQL 5.7.18

步骤1:  创建一个 在Eclipse中使用Maven的动态Web项目 named “竞彩篮球分析BootAngularJSExample”.
第2步: 更改“pom.xml” as below:

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
 
<项目 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> 组织 .Arpit.爪哇2blog</groupId>
    <artifactId>弹簧BootHibernateExample</artifactId>
 
    <>0.0.1-快照</>
    <名称>弹簧BootHibernateExample 马文 网络应用</名称>
    < 网址 >http://maven.apache.org</url>
    <父母>
        <groupId> 组织 .弹簧框架.开机</groupId>
        <artifactId>弹簧-开机-起动机-父母</artifactId>
        <>1.5.3。发布</>
    </父母>
    <依存关系>
        <依赖>
            <groupId> 组织 .弹簧框架.开机</groupId>
            <artifactId>弹簧-开机-起动机- 网路 </artifactId>
        </依赖>
        <依赖>
            <groupId> 组织 .弹簧框架.开机</groupId>
            <artifactId>弹簧-开机-起动机-数据- pa </artifactId>
        </依赖>
        <依赖>
            <groupId>MySQL的</groupId>
            <artifactId>MySQL的-连接器-爪哇</artifactId>
        </依赖>
        <! - JSTL 对于 JSP - >
        <依赖>
            <groupId>爪哇x.小服务程序</groupId>
            <artifactId>jstl</artifactId>
        </依赖>
 
        <! - 对于 JSP 汇编 - >
        <依赖>
            <groupId> 组织 .阿帕奇.雄猫.嵌入</groupId>
            <artifactId>雄猫-嵌入-碧玉</artifactId>
            <范围>提供</范围>
        </依赖>
        <! - https://mvnrepository.com/artifact/org.threeten/threetenbp - >
        <依赖>
            <groupId> 组织 .三十</groupId>
            <artifactId>三重bp</artifactId>
            <>0.7.2</>
        </依赖>
    </依存关系>
    <建立>
        <finalName>弹簧BootHibernateExample</finalName>
    </建立>
</项目>
 

弹簧-boot-starter-parent提供了任何spring项目所需的所有maven默认值。
由于我们正在开发Web应用程序,因此我们还需要添加 弹簧-boot-starter-web依赖 并且我们还需要包含pring-boot-starter-data-jpa以便在休眠状态下运行该应用程序。您还需要为MySql JDBC驱动程序添加mysql-connector-java。如果使用任何其他数据库,则需要使用其他数据库连接器。
让’s首先进行休眠配置。

休眠配置

第三步: 创建一个名为“休眠配置.java”在软件包.org.arpit.java2blog中

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
 
组织 .Arpit.爪哇2blog;  
进口 爪哇.实用程序.物产;
 
进口 爪哇x. sql .数据源;
 
进口 组织 .弹簧框架.豆子..注解.;
进口 组织 .弹簧框架.开机. 奥姆 . pa .实体ManagerFactoryBuilder;
进口 组织 .弹簧框架.语境.注解.;
进口 组织 .弹簧框架.语境.注解.组态;
进口 组织 .弹簧框架.数据库.数据源.司机ManagerDataSource;
进口 组织 .弹簧框架. 奥姆 .休眠5.冬眠TransactionManager;
进口 组织 .弹簧框架. 奥姆 .休眠5.LocalSessionFactoryBean;
进口 组织 .弹簧框架. 奥姆 . pa .LocalContainerEntityManagerFactoryBean;
进口 组织 .弹簧框架. 奥姆 . pa .供应商.冬眠JpaVendorAdapter;
进口 组织 .弹簧框架.交易.注解.启用交易管理;
 
@组态
@启用交易管理
上市 休眠配置 {
    @(“ $ {db.driver}”)
    私人的 驱动器;
 
    @(“ $ {db.password}”)
    私人的 密码;
 
    @(“ $ {db.url}”)
    私人的 网址 ;
 
    @(“ $ {db.username}”)
    私人的 用户名;
 
    @(“ $ {hibernate.dialect}”)
    私人的 方言;
 
    @(“ $ {hibernate.show_sql}”)
    私人的 SHOW_SQL;
 
    @(“ $ {hibernate.hbm2ddl.auto}”)
    私人的 HBM2DDL_AUTO;
 
    @(“ $ {entitymanager.packagesToScan}”)
    私人的 PACKAGES_TO_SCAN;
 
    @
    上市 数据源 数据源() {
        司机ManagerDataSource 数据源 = 司机ManagerDataSource();
        数据源.setDriverClassName(驱动器);
        数据源.setUrl( 网址 );
        数据源.setUsername(用户名);
        数据源.设置密码(密码);
        返回 数据源;
    }
 
    @
    上市 LocalSessionFactoryBean 会议Factory() {
        LocalSessionFactoryBean 会议Factory = LocalSessionFactoryBean();
        会议Factory.setDataSource(数据源());
        会议Factory.setPackagesToScan(PACKAGES_TO_SCAN);
        物产 冬眠的属性 = 物产();
        冬眠的属性.(“休眠。方言”, 方言);
        冬眠的属性.(“ 冬眠的.show_sql”, SHOW_SQL);
        冬眠的属性.(“ 冬眠的.hbm2ddl.auto”, HBM2DDL_AUTO);
        会议Factory.setHibernateProperties(冬眠的属性);
 
        返回 会议Factory;
    }
 
    @
    上市 冬眠TransactionManager 交易Manager() {
        冬眠TransactionManager 交易Manager = 冬眠TransactionManager();
        交易Manager.setSessionFactory(会议Factory(). 得到 Object());
        返回 交易Manager;
    }  
}
 

上面的类使用@Configuration和@Bean注释进行注释。这些注释用于在竞彩篮球分析中定义bean。

@组态 类似于<beans> tag in 弹簧 XML配置 和  @豆 与...类似<bean> tag.

@Value 批注用于从属性文件中注入变量。在这种情况下,它将从application.properties中读取,我们将在下一步中创建它。

步骤4: 创建一个名为“application.properties”在/ src / 主要 / resources包中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
测井.水平=调试
#数据库
D b .司机: com .MySQL的.数据库.司机
D b . 网址 : 数据库:MySQL的://本地主机:3306 / 顾客Data
D b .用户名:
D b .密码: 管理员
 
#休眠
冬眠的.方言: 组织 .冬眠的.方言.MySQL5方言
冬眠的.show_sql: 真正
冬眠的.hbm2ddl.汽车: 创造
实体经理.包sToScan: 组织
 
弹簧. pa .属性.冬眠的.enable_lazy_load_no_trans=真正
 

模型类

步骤5: 创建一个名为“Customer.java”在软件包.org.arpit.java2blog中.model

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
 
组织 .Arpit.爪哇2blog.模型;
 
进口 爪哇x.坚持不懈.;
进口 爪哇x.坚持不懈.实体;
进口 爪哇x.坚持不懈.产生价值;
进口 爪哇x.坚持不懈.GenerationType;
进口 爪哇x.坚持不懈. ID ;
进口 爪哇x.坚持不懈.;
 
/ *
*这是我们的模型类,它对应于数据库中的Customer表
* /
@实体
@(名称=“顾客”)
上市 顾客{
 
    @ ID
    @(名称=“ID”)
    @产生价值(战略=GenerationType.身份)
     整型 ID ;
 
    @(名称=“顾客姓名”)
     顾客姓名;
 
    @(名称=“电子邮件”)
     电子邮件;
 
    上市 顾客() {
        ();
    }
    上市 顾客( 顾客姓名, 电子邮件) {
        ();
        这个.顾客姓名=顾客姓名;
        这个.电子邮件=电子邮件;
    }
    上市 得到 CustomerName() {
        返回 顾客姓名;
    }
    上市 虚空 setCustomerName( 顾客姓名) {
        这个.顾客姓名 = 顾客姓名;
    }
    上市 得到 Email() {
        返回 电子邮件;
    }
    上市 虚空 setEmail( 电子邮件) {
        这个.电子邮件 = 电子邮件;
    }
    上市 整型 得到 ID () {
        返回 ID ;
    }
    上市 虚空 设置名称( 整型 ID ) {
        这个. ID = ID ;
    }
 
}
 

@实体 用于创建持久性pojo类。对于此java类,您将在数据库中具有相应的表。 @Column用于将带注释的属性映射到表中的相应列。

创建客户表:

使用以下DDL在数据库中创建客户表。

CREATE TABLE CUSTOMER (
ID 整型 (11)NOT NULL AUTO_INCREMENT,
顾客姓名 变种 char(255)DEFAULT NULL,
电子邮件 变种 char(255)DEFAULT NULL,
PRIMARY KEY ( ID )
)

控制器类

步骤6: 创建一个名为“CustomerController.java”在软件包.org.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
 
组织 .Arpit.爪哇2blog.控制者;
 
进口 爪哇.实用程序.清单;
 
进口 组织 .Arpit.爪哇2blog.模型.顾客;
进口 组织 .Arpit.爪哇2blog.服务.客户服务;
进口 组织 .弹簧框架.豆子..注解.自动接线;
进口 组织 .弹簧框架. UI .模型;
进口 组织 .弹簧框架. 网路 .捆绑.注解.路径变量;
进口 组织 .弹簧框架. 网路 .捆绑.注解.RequestBody;
进口 组织 .弹簧框架. 网路 .捆绑.注解.请求映射;
进口 组织 .弹簧框架. 网路 .捆绑.注解.请求方法;
进口 组织 .弹簧框架. 网路 .捆绑.注解.RestController;
 
@RestController
上市 客户控制器 {
 
    @自动接线
    客户服务 客户服务;
 
    @请求映射( = “ / 得到 AllCustomers”, 方法 = 请求方法. 得到 , 标头 = “ Accept = 应用程式 lication / json”)
    上市 清单<顾客> 得到 AllCustomers(模型 模型) {
 
        清单<顾客> 清单OfCustomers = 客户服务. 得到 AllCustomers();
        模型.addAttribute(“顾客”, 顾客());
        模型.addAttribute(“ 清单OfCustomers”, 清单OfCustomers);
        返回 清单OfCustomers;
    }
 
    @请求映射( = “ /” , 方法 = 请求方法. 得到 , 标头 = “ Accept = 应用程式 lication / json”)
    上市 去首页() {
        返回 “重定向:/ 得到 AllCustomers”;
    }
 
    @请求映射( = “ / 得到 Customer / {id}”, 方法 = 请求方法. 得到 , 标头 = “ Accept = 应用程式 lication / json”)
    上市 虚空 得到 CustomerById(@路径变量 整型 ID ) {
        客户服务. 得到 Customer( ID );
    }
 
    @请求映射( = “ / addCustomer”, 方法 = 请求方法.开机自检, 标头 = “ Accept = 应用程式 lication / json”)
    上市 顾客 addCustomer(@RequestBody 顾客 顾客) {
        返回 客户服务.addCustomer(顾客);
 
    }
 
    @请求映射( = “ / addCustomer”, 方法 = 请求方法., 标头 = “ Accept = 应用程式 lication / json”)
    上市 顾客 更新Customer(@RequestBody 顾客 顾客) {
        返回 客户服务.更新Customer(顾客);
 
    }  
 
    @请求映射( = “ / 删除Customer / {id}”, 方法 = 请求方法.删除, 标头 = “ Accept = 应用程式 lication / json”)
    上市 虚空 删除Customer(@路径变量(“ID”) 整型 ID ) {
        客户服务.删除Customer( ID );
 
    }  
}
 

服务层

步骤7: 创建一个名为“CustomerService.java”在软件包.org.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
 
组织 .Arpit.爪哇2blog.服务;
 
进口 爪哇.实用程序.清单;
 
进口 爪哇x.交易.交易性;
 
进口 组织 .Arpit.爪哇2blog..客户道;
进口 组织 .Arpit.爪哇2blog.模型.顾客;
进口 组织 .弹簧框架.豆子..注解.自动接线;
进口 组织 .弹簧框架.刻板印象.服务;
 
@服务(“客户服务”)
上市 客户服务 {
 
    @自动接线
    客户道 客户道;
 
    @交易性
    上市 清单<顾客> 得到 AllCustomers() {
        返回 客户道. 得到 AllCustomers();
    }
 
    @交易性
    上市 顾客 得到 Customer( 整型 ID ) {
        返回 客户道. 得到 Customer( ID );
    }
 
    @交易性
    上市 顾客 addCustomer(顾客 顾客) {
        客户道.addCustomer(顾客);
        返回 顾客;
    }
 
    @交易性
    上市 顾客 更新Customer(顾客 顾客) {
        客户道.更新Customer(顾客);
        返回 顾客;
    }
 
    @交易性
    上市 虚空 删除Customer( 整型 ID ) {
        客户道.删除Customer( ID );
    }
}
 

DAO层

步骤8: 创建一个名为的接口“CustomerDao.java”在软件包.org.arpit.java2blog中.dao

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
组织 .Arpit.爪哇2blog.;
 
进口 爪哇.实用程序.清单;
 
进口 组织 .Arpit.爪哇2blog.弹簧靴.顾客;
 
上市 接口 客户道 {
    上市 清单<顾客> 得到 AllCustomers() ;
 
    上市 顾客 得到 Customer( 整型 ID ) ;
 
    上市 顾客 addCustomer(顾客 顾客);
 
    上市 虚空 更新Customer(顾客 顾客) ;
 
    上市 虚空 删除Customer( 整型 ID ) ;
}
 

步骤9: 创建一个名为“CustomerDaoImpl.java”在软件包.org.arpit.java2blog中.dao

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
 
组织 .Arpit.爪哇2blog.;
 
进口 爪哇.实用程序.清单;
 
进口 组织 .Arpit.爪哇2blog.模型.顾客;
进口 组织 .冬眠的.冬眠;
进口 组织 .冬眠的.届会;
进口 组织 .冬眠的.会话工厂;
进口 组织 .弹簧框架.豆子..注解.自动接线;
进口 组织 .弹簧框架.刻板印象.资料库;
 
@资料库
上市 客户DaoImpl 实施 客户道{
 
    @自动接线
    私人的 会话工厂 会议Factory;
 
    上市 虚空 setSessionFactory(会话工厂 科幻 ) {
        这个.会议Factory = 科幻 ;
    }
 
    上市 清单<顾客> 得到 AllCustomers() {
        届会 会议 = 这个.会议Factory. 得到 CurrentSession();
        清单<顾客>  客户清单 = 会议.创造Query(“来自客户”).清单();
        返回 客户清单;
    }
 
    上市 顾客 得到 Customer( 整型 ID ) {
        届会 会议 = 这个.会议Factory. 得到 CurrentSession();
        顾客 顾客 = (顾客) 会议. 得到 (顾客., ID );
        返回 顾客;
    }
 
    上市 顾客 addCustomer(顾客 顾客) {
        届会 会议 = 这个.会议Factory. 得到 CurrentSession();
        会议.保存(顾客);
        返回 顾客;
    }
 
    上市 虚空 更新Customer(顾客 顾客) {
        届会 会议 = 这个.会议Factory. 得到 CurrentSession();
        会议.更新(顾客);
    }
 
    上市 虚空 删除Customer( 整型 ID ) {
        届会 会议 = 这个.会议Factory. 得到 CurrentSession();
        顾客 p = (顾客) 会议.加载(顾客., 整数( ID ));
         如果 (空值 != p) {
            会议.删除(p);
        }
    }
}
 

AngularJS视图

步骤10: 创建一个名为“customerDataAngularJS.html”在.src.main.webapp软件包中

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
 
<html>
<>
<script
     src ="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
 
<标题>弹簧 开机 AngularJS </标题>
<script 类型=“文本/ 爪哇script”>
             变种 应用程式 = 角度的.模组(“用户管理”, []);
 
            //控制器部分
             应用程式 .控制者(“ 客户控制器”, 功能($范围, $http) {
 
                $范围.顾客 = [];
                $范围.客户表格 = {
                     ID : -1,
                    顾客姓名 : ,
                    电子邮件 :
                };
 
                //现在从服务器加载数据
                _refreshCustomerData();
 
                //添加/编辑客户的HTTP 开机自检 / 放 方法
                //在id的帮助下,我们将找出它是put操作还是post操作
 
                $范围.SubmitCustomer = 功能() {
 
                     变种 方法 = ;
                     变种 网址 = ;
                     如果 ($范围.客户表格. ID == -1) {
                        //表单数据中没有ID,这是创建新的客户操作
                        方法 = “ 开机自检”;
                         网址 = '/ addCustomer';
                    } 其他 {
                        // ID 出现在表单数据中,它是编辑客户操作
                        方法 = “放”;
                         网址 = '/ addCustomer';
                    }
 
                    $http({
                        方法 : 方法,
                         网址 : 网址 ,
                        数据 : 角度的.托森($范围.客户表格),
                        标头 : {
                            '内容类型' : 'application / json'
                        }
                    }).然后( _成功, _错误 );
                };
 
                // HTTP 删除-通过ID删除客户
                $范围.删除Customer = 功能(顾客) {
                    $http({
                        方法 : '删除',
                         网址 : '/ 删除Customer /' + 顾客. ID
                    }).然后(_成功, _错误);
                };
 
             //如果要进行编辑,请填充表单字段并为form.id分配客户ID
                $范围.editCustomer = 功能(顾客) {
 
                    $范围.客户表格.顾客姓名 = 顾客.顾客姓名;
                    $范围.客户表格.电子邮件 = 顾客.电子邮件;
                    $范围.客户表格. ID = 顾客. ID ;
                };
 
                / *私有方法* /
                // HTTP 得到 -获取所有客户集合
                功能 _refreshCustomerData() {
                    $http({
                        方法 : '得到',
                         网址 : 'http:// localhost:8080 / 得到 AllCustomers'
                    }).然后(功能 successCallback(响应) {
                        $范围.顾客 = 响应.数据;
                    }, 功能 errorCallback(响应) {
                        安慰. 日志 (响应.statusText);
                    });
                }
 
                功能 _成功(响应) {
                    _refreshCustomerData();
                    _clearFormData()
                }
 
                功能 _错误(响应) {
                    安慰. 日志 (响应.statusText);
                }
 
                //清除表格
                功能 _clearFormData() {
                    $范围.客户表格. ID = -1;
                    $范围.客户表格.顾客姓名 = ;
                    $范围.客户表格.电子邮件 = ;
 
                };
            });
        </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脚 {
    字体系列: 等宽;
}
 
d ,th {
    边境: 1px 固体 灰色;
    宽度: 25%;
    文字对齐: 剩下;
    填充: 5px 10px;
}
</style>
<>
<身体 ng - 应用程式 =“用户管理” ng -控制者=“ 客户控制器”>
    <h1>顾客 市场</h1>
    <形成 ng -提交=“ SubmitCustomer()”>
        <>
 
            < TR >
                <科尔斯潘="2">/编辑 顾客</>
            </ TR >
            < TR >
                < d >顾客 名称</ d >
                < d ><输入 类型=“文本” ng -模型=“ 客户表格.customerName” /></ d >
            </ TR >
            < TR >
                < d >电子邮件</ d >
                < d ><输入 类型=“文本” ng -模型=“ 客户表格.email” /></ d >
            </ TR >
            < TR >
                < d 科尔斯潘="2"><输入 类型=“提交” =“提交”
                    =“蓝色按钮” /></ d >
            </ TR >
        </>
    </形成>
    <>
        < TR >
 
            <>顾客 名称</>
            <>电子邮件</>
            <>运作方式</>
 
        </ TR >
 
        < TR ng -重复=“客户中的客户”>
 
            < d >{{ 顾客.顾客姓名 }}</ d >
            < d >{{ 顾客.电子邮件 }}</ d >
 
            < d ><a ng -点击=“ editCustomer(客户)” =“蓝色按钮”>编辑</a>
                | <a ng -点击=“ 删除Customer(客户)” =“红色按钮”>删除</a></ d >
        </ TR >
 
    </>
</身体>
</html>
 

说明:

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
  // HTTP 得到 -获取所有客户集合
                功能 _refreshCustomerData() {
                    $http({
                        方法 : '得到',
                         网址 : 'http:// localhost:8080 / 得到 AllCustomers'
                    }).然后(功能 successCallback(响应) {
                        $范围.顾客 = 响应.数据;
                    }, 功能 errorCallback(响应) {
                        安慰. 日志 (响应.statusText);
                    });
                }
                }
 

春季靴主文件

步骤11: 创建一个名为“竞彩篮球分析BootAngularJSApplication.java”在软件包.org.arpit.java2blog中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
组织 .Arpit.爪哇2blog;
进口 组织 .弹簧框架.开机.弹簧应用;
进口 组织 .弹簧框架.开机.自动配置.弹簧Boot应用程序;
 
@弹簧Boot应用程序
上市 弹簧BootAngularJSApplication {
 
    上市 静态的 虚空 主要([] args)
    {
        弹簧应用.(弹簧BootAngularJSApplication., args);  
    }
}
 

我们刚刚添加了@竞彩篮球分析Boot应用程序,它可以完成所有工作。
让’进一步了解此注释。
@竞彩篮球分析Boot应用程序是添加以下所有内容的注释:

@组态使该类成为应用程序上下文的Bean定义的源。
@EnableAutoConfiguration使竞彩篮球分析引导能够添加类路径设置和各种属性设置中提供的bean。
通常,您将为竞彩篮球分析 MVC应用程序添加@EnableWebMvc,但是当竞彩篮球分析 开机在类路径上看到spring-webmvc时,它将自动添加它。
这会将应用程序标记为Web应用程序,并激活诸如设置DispatcherServlet之类的关键行为。
@ComponentScan告诉竞彩篮球分析在默认包中寻找其他组件,配置和服务,从而允许它找到控制器。
如果未定义特定的程序包,则将从声明此批注的类的程序包中进行扫描。

运行应用程序

步骤12: 现在该进行Maven构建了。

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

步骤13: 提供目标为全新安装spring-boot:run(如下所示),然后单击run

春季靴 AngularJS 马文构建

 

步骤14: 完成Maven构建后,让’进入浏览器并输入以下URL。

http:// localhost:8080 / 顾客DataAngularJS.html
您将在下面的屏幕上看到。
春季靴 AngularJS空白
将以下详细信息添加到“客户名称”:“John” 和 电子邮件 as “John@gmail.com”然后点击提交。
春季靴 AngularJS添加客户
现在,我正在使用上述方法添加更多客户。
春季靴 AngularJS添加客户列表
让’单击名称为David的客户ID:3对应的编辑链接。
我正在从更改电子邮件地址“david@gmail.com” to “change@gmail.com”
春季靴 AngularJS编辑客户
当您单击提交时,您将看到以下屏幕。
春季靴 AngularJS编辑客户2
如您所见,大卫’的电子邮件地址已更改为“change@gmail.com”.
让’单击与客户ID:2相对应的删除链接,该客户名为Martin,您将在下面的屏幕上看到。
春季靴 AngularJS删除客户
如您所见,Martin已从列表中删除。
那’关于竞彩篮球分析 开机 AngularJS示例的全部内容。
您可能还喜欢:

导入联系人

您可能还喜欢:

分享这个

作者

关注作者

相关文章

  • 1月11日

    春季靴 JDBC示例

    在本文中,我们将看到竞彩篮球分析 开机 JDBC示例。众所周知,竞彩篮球分析 开机会执行许多自动配置,这有助于我们避免大量样板代码。对于JDBC,spring 开机提供了自动配置,例如根据application.properties自动创建DataSource和JDBCTemplate对象。所以你只需要[…]

  • 一月02

    春季靴开发工具教程

    在这篇文章中,我们’我会一直在寻找spring为开发人员提供的体验。概述使用Eclipse,竞彩篮球分析 Tool Suite,Intellij ID ea等IDE,一个典型的开发设置包括一个应用程序代码库,该代码库已部署在Web应用程序服务器上,例如Wildfly或Tomcat甚至Glassfish。发展的速度是[…]

  • 12月26日

    春季靴 H2数据库示例

    在这篇文章中,我们 are going to see how to 创造 春季靴 应用程式 lication 整型 egrating with H2 数据base. What is H2 数据base? H2 is open source 数据base. It is very fast 和 smaller in size. It is in-memory 数据base 和 keeps all 数据 in memory. If you start 和 stop 日 e 应用程式 lication, all 日 e 数据 […]

  • 12月22日

    春季靴 Crud存储库

    在这篇文章中,我们’我将寻找如何创建和使用竞彩篮球分析 开机 Crud存储库。 弹簧Boot CrudRepository为您要管理的实体类型提供了完善的CRUD功能。该接口主要用作标记接口,以捕获要使用的类型并帮助您发现扩展此[…]

  • 4月10日

    弹簧和竞彩篮球分析 开机之间的区别

    在这篇文章中,我们 will see difference between 弹簧 和 春季靴. If you have followed 弹簧 项目 over time, you might have noticed it has become increasingly com plex. If you want to 创造 a 弹簧 应用程式 lication, you still need to 放 a lot of efforts. 春季靴 is 整型 roduced to 保存 time to 开机strap […]

  • 9月17日

    春季靴 SOAP Web服务示例

    在这篇文章中,我们 will see how to 创造 soap 网路 服务s with 春季靴. We will 创造 contract first soap 网路 服务 with 春季靴. We will focus on how to define configurations 对于 soap 网路 服务s. Tools used JDK 1.8, 蚀, 马文 弹簧-boot – Underlying 应用程式 lication framework wsdl4j – 对于 publishing WSDL 对于 our […]

发表评论 取消回复

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

订阅我们的新闻

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


让’s be Friends

©2020 爪哇2博客