📅 最后修改于: 2023-12-03 14:59:17.638000 🧑 作者: Mango
在本示例中，我们将介绍如何使用 Angular 和 Spring Boot 实现 CRUD 操作。我们将创建一个简单的 web 应用程序，该应用程序将允许用户执行以下操作：
请确保您安装了以下软件和工具：
使用以下命令创建一个新的 Spring Boot 应用程序：
$ mvn spring-boot:run
要检查应用程序是否正在运行，请使用浏览器访问 http://localhost:8080。您应该看到以下内容：
Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.
Fri Jan 08 08:04:26 CST 2021
There was an unexpected error (type=Not Found, status=404).
No message available
使用以下命令创建一个新的 Angular 应用程序：
$ ng new frontend
然后将进入项目目录并使用以下命令运行该应用程序：
$ cd frontend
$ ng serve
现在，您可以在浏览器中访问 http://localhost:4200 来查看您的应用程序。
启动 PostgreSQL 数据库并创建一个新的数据库和用户。可以使用以下命令执行此操作：
$ sudo -u postgres psql
password=# create database users;
password=# create user dev with encrypted password 'password';
password=# grant all privileges on database users to dev;
在 Spring Boot 应用程序中，我们需要配置数据库连接。要执行此操作，请将以下代码添加到 application.properties 文件中：
spring.datasource.url=jdbc:postgresql://localhost:5432/users
spring.datasource.username=dev
spring.datasource.password=password
spring.jpa.hibernate.ddl-auto=update
在 Spring Boot 应用程序中，我们需要创建一个实体类来表示用户。以下是一个简单的实体类示例：
@Entity
@Table(name = "users")
public class User {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String name;
private String email;
private String phone;
// getters and setters
}
在 Spring Boot 应用程序中，我们需要创建一个存储库来管理用户。以下是一个简单的存储库示例：
@Repository
public interface UserRepository extends JpaRepository<User, Long> {
}
在 Spring Boot 应用程序中，我们需要创建一个控制器来管理用户的 CRUD 操作。以下是一个简单的控制器示例：
@RestController
@RequestMapping("/api/users")
public class UserController {
@Autowired
private UserRepository userRepository;
@GetMapping
public List<User> getUsers() {
return userRepository.findAll();
}
@PostMapping
public User createUser(@RequestBody User user) {
return userRepository.save(user);
}
@PutMapping("/{id}")
public User updateUser(@PathVariable Long id, @RequestBody User user) {
User existingUser = userRepository.findById(id).orElse(null);
existingUser.setName(user.getName());
existingUser.setEmail(user.getEmail());
existingUser.setPhone(user.getPhone());
return userRepository.save(existingUser);
}
@DeleteMapping("/{id}")
public void deleteUser(@PathVariable Long id) {
userRepository.deleteById(id);
}
}
现在，我们将在 Angular 应用程序中创建组件来管理用户的 CRUD 操作。以下是一个简单的组件示例：
import { Component, OnInit } from '@angular/core';
import { User } from '../models/user';
import { UserService } from '../services/user.service';
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
users: User[] = [];
user: User = { name: '', email: '', phone: '' };
constructor(private userService: UserService) {}
ngOnInit() {
this.userService.getUsers().subscribe(users => (this.users = users));
}
createUser() {
this.userService.createUser(this.user).subscribe(_ => this.ngOnInit());
}
updateUser(user: User) {
this.userService.updateUser(user).subscribe(_ => this.ngOnInit());
}
deleteUser(id: number) {
this.userService.deleteUser(id).subscribe(_ => this.ngOnInit());
}
}
在 Angular 应用程序中，我们需要创建服务来管理用户的 CRUD 操作。以下是一个简单的服务示例：
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { User } from '../models/user';
@Injectable({
providedIn: 'root'
})
export class UserService {
private baseUrl = 'http://localhost:8080/api/users';
constructor(private http: HttpClient) {}
getUsers(): Observable<User[]> {
return this.http.get<User[]>(this.baseUrl);
}
createUser(user: User): Observable<Object> {
return this.http.post(`${this.baseUrl}`, user);
}
updateUser(user: User): Observable<Object> {
return this.http.put(`${this.baseUrl}/${user.id}`, user);
}
deleteUser(id: number): Observable<Object> {
return this.http.delete(`${this.baseUrl}/${id}`);
}
}
在 Angular 应用程序中，我们需要创建一个模型类来表示用户。以下是一个简单的模型类示例：
export interface User {
id?: number;
name: string;
email: string;
phone: string;
}
现在，我们将在 Angular 应用程序中创建模板来显示和管理用户的 CRUD 操作。以下是一个简单的模板示例：
<div class="users">
<h2>Users</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users">
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.phone }}</td>
<td>
<button (click)="deleteUser(user.id)">Delete</button>
</td>
</tr>
</tbody>
</table>
<h2>Add user</h2>
<form>
<input type="text" [(ngModel)]="user.name" placeholder="Name" />
<input type="text" [(ngModel)]="user.email" placeholder="Email" />
<input type="text" [(ngModel)]="user.phone" placeholder="Phone" />
<button (click)="createUser()">Add</button>
</form>
<h2>Edit user</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users">
<td><input type="text" [(ngModel)]="user.name" /></td>
<td><input type="text" [(ngModel)]="user.email" /></td>
<td><input type="text" [(ngModel)]="user.phone" /></td>
<td>
<button (click)="updateUser(user)">Save</button>
</td>
</tr>
</tbody>
</table>
</div>
现在，我们可以使用以下命令运行 Angular 应用程序：
$ ng serve
然后，我们可以在浏览器中访问 http://localhost:4200 来查看应用程序。您应该看到以下内容：
Users
Name Email Phone
John john@example.com 555-555-5555
Jane jane@example.com 555-555-5555
Add user
Name Email Phone
john@example.com123-456-7890
jane@example.com123-456-7890
bob@example.com 123-456-7890
Edit user
Name Email Phone
John john@example.com 555-555-5555 Save
Jane jane@example.com 555-555-5555 Save
在本示例中，我们介绍了如何使用 Angular 和 Spring Boot 实现 CRUD 操作。我们创建了一个包含所有 CRUD 操作的简单的 web 应用程序，并在其中使用了 PostgreSQL 数据库。我们还介绍了如何在 Angular 应用程序中创建组件、服务、模型类和模板。