Hướng dẫn CRUD với Spring Boot, REST và AngularJS trong Java

Xây dựng ứng dụng CRUD với Spring Boot REST và AngularJS: Hướng dẫn chi tiết từ thiết kế cơ sở dữ liệu đến triển khai sản phẩm.

Trong bài viết này là một hướng dẫn chi tiết và cung cấp cho người đọc nhiều kiến thức về việc xây dựng ứng dụng CRUD với Spring Boot REST và AngularJS bao gồm xây dựng backend với Spring Boot REST, xây dựng frontend với AngularJS và triển khai ứng dụng.

1. Giới thiệu

Giới thiệu về việc xây dựng ứng dụng CRUD với Spring Boot REST và AngularJS.

Việc xây dựng ứng dụng CRUD (Create, Read, Update, Delete) là một nhu cầu thiết yếu trong phát triển ứng dụng web. Với ứng dụng CRUD, người dùng có thể thêm, xem, sửa và xóa dữ liệu một cách dễ dàng. Trong bài viết này, chúng ta sẽ tìm hiểu cách xây dựng một ứng dụng CRUD đơn giản với Spring Boot REST và AngularJS.

Bài viết này được đăng tại [free tuts .net]

Mục đích và lợi ích của việc xây dựng ứng dụng CRUD.

Mục đích của việc xây dựng ứng dụng CRUD là tạo ra một ứng dụng web cho phép người dùng thao tác với cơ sở dữ liệu một cách nhanh chóng và thuận tiện. Lợi ích của việc sử dụng ứng dụng CRUD bao gồm tăng tính khả dụng của dữ liệu, giảm thời gian và chi phí cho việc quản lý dữ liệu và nâng cao hiệu suất làm việc.

Đề cập đến các công nghệ và công cụ được sử dụng.

Trong bài viết này, chúng ta sẽ sử dụng Spring Boot REST để xây dựng API và AngularJS để xây dựng giao diện người dùng. Ngoài ra, chúng ta cũng sẽ sử dụng MySQL để lưu trữ dữ liệu và sử dụng công cụ Postman để kiểm tra các yêu cầu HTTP của API. Với những công nghệ và công cụ này, chúng ta có thể xây dựng một ứng dụng CRUD đơn giản nhưng hiệu quả.

2. Tạo dự án với Spring Boot

Tạo dự án.

Để xây dựng ứng dụng CRUD với Spring Boot REST và AngularJS, ta có thể thực hiện các bước sau đây:

Bước 1: Tạo dự án Spring Boot

• Sử dụng Spring Initializr để tạo một dự án Spring Boot với các phụ thuộc cần thiết cho RESTful web service và JPA.

Các bạn có thể tạo dự án Spring Boot với các phụ thuộc cần thiết trên trang web

• Thêm các thư viện Spring Boot cho RESTful web service và JPA trong file pom.xml.

Để thêm các thư viện này, bạn có thể sử dụng cú pháp sau trong file pom.xml:

<dependencies>
    <!-- Thêm các thư viện cho phát triển ứng dụng RESTful web service và JPA -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>
    
    <dependency>
        <groupId>com.h2database</groupId>
        <artifactId>h2</artifactId>
        <scope>runtime</scope>
    </dependency>
    
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <optional>true</optional>
    </dependency>
</dependencies>

Lưu ý rằng Maven sẽ tự động tải các thư viện này từ kho Maven Central. Sau khi chỉnh sửa file pom.xml, bạn cần chạy lệnh mvn install để tải xuống các thư viện mới và cập nhật dự án của mình.

Bước 2: Tạo API RESTful

• Tạo các lớp Entity cho các đối tượng cần được quản lý và lưu trữ trong cơ sở dữ liệu.
• Tạo các Repository cho các Entity để cung cấp chức năng truy xuất và lưu trữ dữ liệu.
• Tạo các Service cho các Repository để cung cấp các chức năng thực thi của các API RESTful.

Bước 3: Tạo giao diện AngularJS

• Tạo các component trong AngularJS để hiển thị dữ liệu và cho phép người dùng tương tác với API RESTful.
• Sử dụng AngularJS để tạo các HTTP Request để gọi các API RESTful và lấy dữ liệu trả về.
• Sử dụng AngularJS để hiển thị dữ liệu trả về cho người dùng.

Bước 4: Kiểm tra và triển khai

• Chạy ứng dụng trên máy cục bộ và kiểm tra các chức năng của nó.
• Triển khai ứng dụng trên một máy chủ để người dùng truy cập và sử dụng.

Giải thích kiến trúc của ứng dụng.

Lớp Controller: Đây là lớp đảm nhiệm xử lý các request từ phía client, xử lý dữ liệu trả về cho client thông qua các API RESTful đã được tạo ra ở Bước 2.

Lớp Service: Đây là lớp đảm nhiệm xử lý các thao tác liên quan đến xử lý dữ liệu của ứng dụng, kết nối với các lớp Repository để truy cập cơ sở dữ liệu.

Lớp Repository: Đây là lớp đảm nhiệm kết nối và truy cập dữ liệu từ cơ sở dữ liệu thông qua JPA.

Cơ sở dữ liệu: Là nơi lưu trữ các thông tin liên quan đến ứng dụng. Cơ sở dữ liệu thường được thiết kế theo mô hình quan hệ hoặc NoSQL.

Giao diện người dùng: Được tạo ra bằng AngularJS, giao diện người dùng giúp người dùng tương tác với các API RESTful để thực hiện các thao tác

3. Xây dựng backend với Spring Boot REST

Tạo các API REST để thực hiện các chức năng CRUD.

Để tạo các API REST trong Spring Boot, bạn có thể sử dụng các annotation như @RestController và @RequestMapping.

Cụ thể, @RestController là một annotation kết hợp giữa @Controller và @ResponseBody. Nó được sử dụng để xác định một lớp là một RESTful controller trong Spring Boot. @RequestMapping là một annotation được sử dụng để ánh xạ một yêu cầu HTTP đến một phương thức xử lý trong controller.

Ví dụ, để tạo một API REST trả về một chuỗi đơn giản, bạn có thể tạo một lớp controller như sau:

@RestController
@RequestMapping("/api")
public class MyController {
    
    @GetMapping("/hello")
    public String hello() {
        return "Hello, world!";
    }
}

Trong đó, @GetMapping ánh xạ yêu cầu HTTP GET đến đường dẫn "/api/hello" đến phương thức hello() trong controller. Phương thức này sẽ trả về chuỗi "Hello, world!".

Bạn có thể tạo các API REST khác bằng cách sử dụng các annotation khác như @PostMapping, @PutMapping và @DeleteMapping để xử lý các yêu cầu HTTP POST, PUT và DELETE.

Phân quyền truy cập và bảo mật dữ liệu.

Spring Security cho phép bạn phân quyền truy cập cho các API REST của bạn thông qua việc định nghĩa các quyền và sử dụng các annotation như @PreAuthorize.

Cụ thể, bạn có thể định nghĩa các quyền truy cập trong file cấu hình Spring Security bằng cách sử dụng đối tượng UserDetails và GrantedAuthority. UserDetails đại diện cho người dùng trong hệ thống, bao gồm tên đăng nhập, mật khẩu và danh sách các quyền của người dùng. GrantedAuthority đại diện cho một quyền truy cập trong hệ thống.

Ví dụ, để định nghĩa một UserDetails và một GrantedAuthority, bạn có thể tạo một lớp implement interface UserDetails và một lớp implement interface GrantedAuthority như sau:

public class MyUserDetails implements UserDetails {
    private String username;
    private String password;
    private List<GrantedAuthority> authorities;
 
    // Constructor, getter, setter
}

public class MyGrantedAuthority implements GrantedAuthority {
    private String authority;
 
    // Constructor, getter, setter
}

Sau đó, bạn có thể cấu hình Spring Security để sử dụng các UserDetails và GrantedAuthority này.

Ví dụ, bạn có thể định nghĩa một AuthenticationProvider để cung cấp thông tin đăng nhập và phân quyền cho Spring Security:

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
 
    @Autowired
    private AuthenticationProvider authenticationProvider;
 
    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.authenticationProvider(authenticationProvider);
    }
}

Sau đó, bạn có thể sử dụng các annotation như @PreAuthorize để áp dụng các quyền truy cập cho từng API REST của bạn.

Ví dụ, để áp dụng quyền "ROLE_ADMIN" cho một API REST, bạn có thể sử dụng annotation như sau:

@RestController
@RequestMapping("/api")
public class MyController {
    
    @PreAuthorize("hasRole('ROLE_ADMIN')")
    @GetMapping("/admin")
    public String admin() {
        return "Admin page";
    }
}

Trong đó, @PreAuthorize sử dụng một biểu thức SpEL (Spring Expression Language) để kiểm tra quyền truy cập của người dùng. Biểu thức "hasRole('ROLE_ADMIN')" kiểm tra xem người dùng có quyền "ROLE_ADMIN" hay không. Nếu không, API REST này sẽ trả về mã trạng thái 403 (Forbidden).

4. Xây dựng frontend với AngularJS

Để xây dựng frontend với Angular JS, bạn cần thức thi lần lượt 3 bước sau:

Đầu tiên, nếu bạn vẫn chưa hiểu Angular JS là gì thì hãy đọc kỹ nhé!!

Giới thiệu về AngularJS và kiến trúc của ứng dụng.

AngularJS là một framework phát triển web được viết bằng JavaScript và được phát triển bởi Google. Nó được sử dụng để xây dựng các ứng dụng web đơn trang (Single Page Application - SPA) và có thể tích hợp với các API REST của backend để thực hiện các chức năng CRUD.

Kiến trúc của một ứng dụng AngularJS bao gồm các thành phần như controller, service, directive và filter. Controller quản lý dữ liệu và logic của một phần của trang web, service cung cấp dữ liệu và logic xử lý cho các controller, directive là các thành phần UI được sử dụng để hiển thị dữ liệu và filter được sử dụng để xử lý dữ liệu trước khi hiển thị.

Bước 1: Cài đặt và cấu hình AngularJS và các thư viện liên quan.

Để bắt đầu phát triển với AngularJS, trước tiên bạn cần cài đặt Node.js và npm (Node Package Manager). Sau đó, bạn có thể cài đặt AngularJS bằng npm với lệnh sau:

npm install -g @angular/cli

Sau khi cài đặt thành công, bạn có thể tạo một ứng dụng AngularJS mới bằng lệnh:

ng new my-app

Bước 2: Thiết kế và tạo các thành phần UI, bao gồm các trang, các form, các bảng và các nút điều khiển.

Để thiết kế và tạo các thành phần UI, bạn có thể sử dụng các công cụ như Angular Material hoặc Bootstrap. Angular Material là một bộ công cụ thiết kế UI được thiết kế đặc biệt cho AngularJS, còn Bootstrap là một bộ công cụ thiết kế UI được sử dụng rộng rãi cho các ứng dụng web.

Các bạn có thể đi đến trang chủ của hai trang web bằng cách ấn vài liên kết Angular Material và Bootstrap

Bước 3: Gọi các API REST từ backend để thực hiện các chức năng CRUD.

Và bước cuối cùng làgọi các API REST từ backend, để gọi các API REST từ backend, bạn có thể sử dụng AngularJS's $http service. $http service cho phép bạn gọi các API REST thông qua các phương thức HTTP như GET, POST, PUT và DELETE.

Ví dụ, để gọi một API REST GET từ backend và hiển thị dữ liệu trên trang web, bạn có thể sử dụng controller và $http service như sau:

app.controller('myController', function($scope, $http) {
    $http.get('/api/my-data')
        .then(function(response) {
            $scope.myData = response.data;
        });
});

Trong đó, /api/my-data là đường dẫn đến API REST GET trên backend và $scope.myData là dữ liệu được trả về từ API và được hiển thị trên trang web thông qua AngularJS's data binding.

5. Triển khai ứng dụng

Đưa ứng dụng lên môi trường sản xuất: Để đưa ứng dụng lên môi trường sản xuất, bạn cần phải cấu hình và triển khai ứng dụng trên các máy chủ khác nhau. Bạn cũng cần đảm bảo tính đúng đắn và hiệu suất của ứng dụng.

Cấu hình và triển khai ứng dụng trên các máy chủ khác nhau: Để cấu hình và triển khai ứng dụng trên các máy chủ khác nhau, bạn có thể sử dụng các công cụ như Docker hoặc Kubernetes. Docker là một công cụ giúp đóng gói ứng dụng vào các container để có thể triển khai trên các môi trường khác nhau một cách dễ dàng. Kubernetes là một công cụ quản lý container giúp quản lý các container trên các máy chủ khác nhau và đảm bảo tính đúng đắn và hiệu suất của ứng dụng.

Đảm bảo tính đúng đắn và hiệu suất của ứng dụng: Để đảm bảo tính đúng đắn và hiệu suất của ứng dụng, bạn có thể sử dụng các công cụ như Apache JMeter để kiểm tra hiệu suất và tải trang web của ứng dụng. Bạn cũng nên đảm bảo rằng ứng dụng của bạn được cấu hình đúng trên môi trường sản xuất và được bảo mật một cách an toàn.

6. Các câu hỏi thường gặp

REST API là gì?

REST là viết tắt của Representational State Transfer. REST API là một dạng API (Application Programming Interface) được sử dụng để truyền tải dữ liệu giữa các ứng dụng web và các thiết bị khác nhau bằng cách sử dụng HTTP. RESTful API cho phép truy cập vào các tài nguyên trên máy chủ và thực hiện các hành động CRUD (Create, Read, Update và Delete).

Làm thế nào để xây dựng các API REST với Spring Boot?

Bạn có thể sử dụng các annotation như @RestController và @RequestMapping trong Spring Boot để xây dựng các API REST. Ngoài ra, bạn có thể sử dụng Spring Data JPA để tương tác với cơ sở dữ liệu và thực hiện các chức năng CRUD.

Làm thế nào để phân quyền truy cập trong Spring Boot?

Bạn có thể sử dụng Spring Security để phân quyền truy cập trong Spring Boot. Bạn có thể định nghĩa các quyền truy cập và sử dụng các annotation như @PreAuthorize để áp dụng các quyền truy cập này cho từng API.

Làm thế nào để thiết kế và tạo các thành phần UI với AngularJS?

Bạn có thể sử dụng các thành phần của AngularJS như controller, directive, service và factory để thiết kế và tạo các thành phần UI. Bạn có thể sử dụng các thư viện UI như Bootstrap hoặc Material Design để thiết kế giao diện người dùng đẹp và thân thiện.

Làm thế nào để gọi các API REST từ backend để thực hiện các chức năng CRUD trong AngularJS?

Bạn có thể sử dụng $http service trong AngularJS để gọi các API REST từ backend và thực hiện các chức năng CRUD. Bạn có thể sử dụng

AngularJS và Angular khác nhau như thế nào?

AngularJS là một framework JavaScript được phát triển bởi Google, còn Angular là phiên bản mới hơn của AngularJS với kiến trúc hoàn toàn khác. Angular được viết bằng TypeScript và có hiệu suất và khả năng mở rộng tốt hơn AngularJS.

7. Kết bài viết

Chúng ta đã đi qua một chủ đề khá phức tạp về cách xây dựng ứng dụng web CRUD với Spring Boot, REST và AngularJS trong Java. Hy vọng bài viết này đã giúp bạn có được những kiến thức cần thiết để bắt đầu xây dựng ứng dụng của riêng mình. Nếu bạn có bất kỳ thắc mắc gì hãy để lại phản hồi ở dưới bài viết để được giải đáp nhé!!