本教程提供了Spring Boot，Angular 5和spring數據的完整實現，以示例為例構建端到端的單頁Java Web應用程序。我們將使用Spring Boot 1.5公開REST API和angular5并通過路由來構建我們的客戶端不僅要消耗服務器公開的API，還要將MySql數據庫與后端代碼集成以進行CRUD操作，我們將使用angular CLI生成angular項目，并使用spring boot初始化程序生成spring boot項目。在本文中，您將能夠使用CRUD操作構建用戶管理應用程序，該應用程序可以部署到獨立的tomcat或將客戶端和服務器部署到具有跨源請求的其他服務器。

在下一篇文章中，我們將研究通過maven將spring boot和angular 5應用程序打包到一個war文件中并部署到獨立tomcat的不同方法。 另外，您可能對將這個應用程序與帶有Spring Boot Security的Angular5 JWT身份驗證集成感興趣

Angular 5功能

1. Angular 5更快，更輕便且易于使用。

2.材料設計功能和帶有構建優化器的改進的編譯器

3.引入了新的HttpClientModule，它是對現有HttpModule的完整重寫。

4. TypeScript 2.4支持。

5.響應式表單支持

環境設定

我們將要構建的應用程序有兩個不同的部分，即客戶端和服務器，因此，環境設置也針對每個部分。

Angular5環境設置

Angular 5提供了一個漂亮的工具-Angular CLI，以開始使用Angular。 在這里，我們將使用相同的工具來生成示例的angular應用程序，然后對其進行修改以符合我們的要求。要開始使用Angular CLI，需要安裝節點才能使用NPM工具。 您可以通過單擊節點-v來檢查節點上是否已安裝節點。 在我的機器上，我得到以下結果。

如果尚未安裝， 請先訪問NodeJs官方網站進行安裝。完成后，遍歷您的工作區位置并執行以下命令來安裝angular cli并生成示例angular項目。

npm install -g @angular/cli ng new portal-app

完成此操作后，您可以遍歷該位置，并看到一個文件夾portal-app已創建，其中包含由angular cli命令生成的所有文件和文件夾，以開始使用angular5。現在，您可以打開自己喜歡的編輯器以導入項目我將這個項目導入IntellijIdea中，并得到如下結構：

這里要檢查的一件事是，如果您已經使用sudo命令安裝了NodeJ，那么在安裝angular cli時可能會遇到以下權限問題。為避免這種情況，建議始終在安裝任何新命令時使用brew命令軟件。

如果您遇到此問題，請提供對文件夾-/ usr / local / lib / node_modules的讀/寫訪問權限，或按照此處的說明進行操作-Mac 支持

對于Windows用戶，可以使用git命令行或cygwin進行安裝。

Spring Boot環境設置

通過提供默認的初始化程序，Spring Boot團隊確實簡化了Spring Boot環境的設置。打開URL https://start.spring.io/并按如下所示生成項目。

現在解壓縮user-portal.zip并導入到Java IDE中。 以下是最終結構。

CLI命令生成的默認文件

現在讓我們嘗試了解生成的不同文件。

模塊–模塊將應用程序分解為邏輯代碼。 每段代碼或模塊都旨在執行一項任務，所有模塊均由main.ts加載。

組件–組件用于將模塊組合在一起。

tsconfig.json –目錄中tsconfig.json文件的存在表示該目錄是Typescript項目的根。此文件指定了編譯Typescript所需的根文件和TypeScript編譯器動作。

package.json –它包含為角度項目定義的所有依賴項。一旦我們進行nom install，這些依賴項將自動下載。

karma.conf.json – karma單元測試的配置文件。

文件.angular-cli.json將具有所有應用程序配置，例如有關根目錄和out目錄的信息.welcome或main html文件以及main ts文件。 所有其他與環境相關的信息將在此處顯示。

現在是時候運行dfault生成的應用程序并在瀏覽器中查看它了。 如果使用的是IntellijIdea，則可以從其中的終端運行ng serve命令，如果未在終端中單擊以下命令。

cd portal-appng serve

此后，打開瀏覽器并輸入url – http：// localhost：4200 /，角度應用程序啟動。 現在，我們可以開始修改應用程序以創建用戶管理門戶。

Spring Boot Rest API

現在，讓我們首先創建我們的API。我們擁有UerController，其中公開了所有用于CRUD操作的API。@ CrossOrigin用于允許跨源資源共享（CORS），以便我們在不同服務器上運行的角度應用程序可以使用這些資源來自瀏覽器的API。我們還可以使用proxy.config.json在角度端配置代理，這在后續主題中已進行了討論。

UserController.java

package com.devglan.userportal;import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*;import java.util.List;@CrossOrigin(origins = "http://localhost:4200", maxAge = 3600) @RestController @RequestMapping({"/api"}) public class UserController {@Autowiredprivate UserService userService;@PostMappingpublic User create(@RequestBody User user){return userService.create(user);}@GetMapping(path = {"/{id}"})public User findOne(@PathVariable("id") int id){return userService.findById(id);}@PutMappingpublic User update(@RequestBody User user){return userService.update(user);}@DeleteMapping(path ={"/{id}"})public User delete(@PathVariable("id") int id) {return userService.delete(id);}@GetMappingpublic List findAll(){return userService.findAll();} }

Spring Boot服務實現

服務類在這里沒有多余的邏輯，這是一個非常簡單的實現。

UserServiceImpl.java

@Service public class UserServiceImpl implements UserService {@Autowiredprivate UserRepository repository;@Overridepublic User create(User user) {return repository.save(user);}@Overridepublic User delete(int id) {User user = findById(id);if(user != null){repository.delete(user);}return user;}@Overridepublic List findAll() {return repository.findAll();}@Overridepublic User findById(int id) {return repository.findOne(id);}@Overridepublic User update(User user) {return null;} }

Spring數據實施

我們將使用針對ORM相關解決方案的Spring數據JPA實現。要了解Spring數據的內部實現，您可以訪問我的另一篇文章-Spring Boot JPA和Spring Boot Hibernate實現。

UserRepository.java

package com.devglan.userportal;import org.springframework.data.repository.Repository;import java.util.List;public interface UserRepository extends Repository {void delete(User user);List findAll();User findOne(int id);User save(User user); }

Spring Boot數據源配置

application.properties

server.contextPath=/user-portal spring.datasource.url=jdbc:mysql://localhost:3306/testdb spring.datasource.username=root spring.datasource.password=root spring.datasource.driver-class-name=com.mysql.jdbc.Driver spring.jpa.show-sql=true spring.jpa.hibernate.naming.implicit-strategy=org.hibernate.boot.model.naming.ImplicitNamingStrategyLegacyHbmImpl spring.jpa.hibernate.naming.physical-strategy=org.springframework.boot.orm.jpa.hibernate.SpringPhysicalNamingStrategy

默認腳本

CREATE TABLE user(id INT NOT NULL AUTO_INCREMENT,email VARCHAR(255),first_name VARCHAR(255),last_name VARCHAR(255),PRIMARY KEY (id))ENGINE=InnoDB;

創建角度組件

Angular CLI帶有generate命令來創建組件，點擊ng generate component user命令，它將在app文件夾內創建一個用戶文件夾，該用戶文件夾將包含用戶模塊所需的所有文件。

首先，我們將修改app.component.html以包含2個列表用戶鏈接并添加用戶。我們所有的視圖都將被加載到router-outlet中。

app.component.html

<div class="container-fluid"> <div class="col-md-offset-1"><h1>Welcome to {{title}}!</h1> </div><a routerLink="/users"> List Users</a> <a style="margin-left:10px" routerLink="/add">Add User</a> <br/> <router-outlet></router-outlet> </div>

由于我們在上面定義了兩條路由，因此我們需要兩個不同的視圖（user.component.html，add-user.component.html）和組件（user.component.ts，add-user.component.ts）在每個視圖上進行渲染click.Now，現在讓我們實現user.component.ts的代碼。在此，加載該組件時將調用ngOnInit（）方法，它將獲取所有用戶記錄，并填充html頁面。

用戶組件

import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router';import { User } from '../models/user.model'; import { UserService } from './user.service';@Component({selector: 'app-user',templateUrl: './user.component.html',styles: [] }) export class UserComponent implements OnInit {users: User[];constructor(private router: Router, private userService: UserService) {}ngOnInit() {this.userService.getUsers().subscribe( data => {this.users = data;});};deleteUser(user: User): void {this.userService.deleteUser(user).subscribe( data => {this.users = this.users.filter(u => u !== user);})};}

同樣，我們有add-user.component.ts

import { Component } from '@angular/core'; import { Router } from '@angular/router';import { User } from '../models/user.model'; import { UserService } from './user.service';@Component({templateUrl: './add-user.component.html' }) export class AddUserComponent {user: User = new User();constructor(private router: Router, private userService: UserService) {}createUser(): void {this.userService.createUser(this.user).subscribe( data => {alert("User created successfully.");});};}

user.model.ts

export class User {id: string;firstName: string;lastName: string;email: string; }

user.service.ts

import {Injectable} from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http';import { User } from '../models/user.model';const httpOptions = {headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };@Injectable() export class UserService {constructor(private http:HttpClient) {}private userUrl = 'http://localhost:8080/user-portal/api';public getUsers() {return this.http.get(this.userUrl);}public deleteUser(user) {return this.http.delete(this.userUrl + "/"+ user.id);}public createUser(user) {return this.http.post(this.userUrl, user);}}

創建角度視圖

如上所述，我們有兩個視圖– user.component.html和add-user.component.html

user.component.html

<div class="col-md-6"> <h2> User Details</h2><table class="table table-striped"><thead><tr><th class="hidden">Id</th><th>FirstName</th><th>LastName</th><th>Email</th><th>Action</th></tr></theadv<tbody><tr *ngFor="let user of users"><td class="hidden">{{user.id}}</td><td>{{user.firstName}}</td><td>{{user.lastName}}</td><td>{{user.email}}</td><td><button class="btn btn-danger" (click)="deleteUser(user)"> Delete User</button></td></tr></tbody> </table> </div>

add-user.component.html

<div class="col-md-6"><h2 class="text-center">Add User</h2> <form><div class="form-group"><label for="email">Email address:</label><input type="email" [(ngModel)]="user.email" placeholder="Email" name="email" class="form-control" id="email"></div><div class="form-group"><label for="firstName">First Name:</label><input [(ngModel)]="user.firstName" placeholder="First Name" name="firstName" class="form-control" id="firstName"></div><div class="form-group"><label for="lastName">Last Name:</label><input [(ngModel)]="user.lastName" placeholder="Last name" name="lastName" class="form-control" id="lastName"></div><button class="btn btn-success" (click)="createUser()">Create</button> </form> </div>

角路由

現在是時候以角度配置路由了，在此配置中，我們將配置要加載的路徑和相應的組件，這將依次加載相應的視圖。以下是我們的路由配置。

app.routing.module.ts

import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router';import { UserComponent } from './user/user.component'; import {AddUserComponent} from './user/add-user.component';const routes: Routes = [{ path: 'users', component: UserComponent },{ path: 'add', component: AddUserComponent } ];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule],declarations: [] }) export class AppRoutingModule { }

角度模塊

現在我們的應用程序差不多完成了，我們只需要在主模塊中包含以上所有實現即可。

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms';import { AppComponent } from './app.component'; import { UserComponent } from './user/user.component'; import { AppRoutingModule } from './app.routing.module'; import {UserService} from './user/user.service'; import {HttpClientModule} from "@angular/common/http"; import {AddUserComponent} from './user/add-user.component';@NgModule({declarations: [AppComponent,UserComponent,AddUserComponent],imports: [BrowserModule,AppRoutingModule,HttpClientModule,FormsModule],providers: [UserService],bootstrap: [AppComponent] }) export class AppModule { }

Angular CLI代理配置

要在angular CLI中配置代理，我們需要在angular項目的根目錄中創建proxy.config.json文件，并在package.json中編輯啟動腳本。

proxy.config.json

{"/api/*": {"target": "http://localhost:8080/user-portal","secure": false} }

target的值是應用程序的上下文根，而api是用戶API的端點。

package.json

"start": "ng serve --proxy-config proxy.config.json",

現在，請確保將user.service.ts文件中的userUrl值更改為“ / api”，并在UserController.java中注釋@CrossOrigin。完成后，請使用ng serve –proxy-config proxy.config.json或npm開始啟動角度應用

最終申請結構

運行Spring Boot應用程序

我們將使用spring boot嵌入式tomcat功能來部署應用程序。有關此功能的更多信息， 請檢查this 。

UserPortalApplication.java

package com.devglan.userportal;import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplication public class UserPortalApplication {public static void main(String[] args) {SpringApplication.run(UserPortalApplication.class, args);} }

運行Angular應用

現在服務器已啟動，可以用來部署角度應用程序并測試該應用程序。

點擊URL – http：// localhost：4200 / ，您將看到以下結果。

現在，單擊“添加用戶”鏈接，將出現以下表單以添加用戶。

現在，添加多個用戶后，單擊列表用戶。

結論

這幾乎是關于spring boot和angular 5集成教程的。在下一篇文章中，我們將研究使用maven和tomcat在單個war文件中部署此應用程序 。 您可以從此處下載源代碼。如果時間允許，我們將嘗試將Spring Security與之集成。請在下面讓我知道您的評論。

翻譯自: https://www.javacodegeeks.com/2018/03/spring-boot-angular-5-spring-data-rest-example-crud.html

總結

以上是生活随笔為你收集整理的Spring Boot＆Angular 5＆Spring Data＆Rest示例（CRUD）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。