Hướng dẫn spring boot angular mongodb rest api tutorial - hướng dẫn khởi động mùa xuân góc mongodb phần còn lại api

Question

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách xây dựng một ví dụ về Stack 8 + Spring Boot + MongoDB với một ứng dụng CRUD. Máy chủ back-end sử dụng Spring Boot với Spring Web MVC cho bộ điều khiển REST và Dữ liệu lò xo MongoDB để tương tác với cơ sở dữ liệu MongoDB. Mặt trước được thực hiện với góc 8, httpclient & router.

Nội dung chính Show

Kiến trúc khởi động Angular 8 & Spring
Mùa xuân khởi động back-end
Tổng quan
Công nghệ
Cấu trúc dự án
Thực hiện
Angular 8 Front-end
Tổng quan
Công nghệ
Cấu trúc dự án
Thực hiện
Đọc thêm
Sự kết luận
Mã nguồn

Các phiên bản mới hơn: - Boot lò xo 10 + Angular + MongoDB ví dụ - Angular 11 + Spring Boot + MongoDB Ví dụ - Angular 12 + Spring Boot + MongoDB Ví dụ - Angular 13 + Spring Boot + MongoDB Ví dụ - Angular 14 + Spring Boot + MongoDB Ví dụ
– Angular 10 + Spring Boot + MongoDB example
– Angular 11 + Spring Boot + MongoDB example
– Angular 12 + Spring Boot + MongoDB example
– Angular 13 + Spring Boot + MongoDB example
– Angular 14 + Spring Boot + MongoDB example

Thực hành nhiều hơn: - Angular 8 + Spring Boot: Xác thực JWT với ví dụ về bảo mật lò xo - Angular 8 + Spring Boot + PostgreSQL Ví dụ: Ứng dụng Crud - Angular 8 + Spring Boot: Tệp tải lên ví dụ - Angular 8 + Spring Boot: Ví dụ về phân trang
– Angular 8 + Spring Boot: JWT Authentication with Spring Security example
– Angular 8 + Spring Boot + PostgreSQL example: CRUD App
– Angular 8 + Spring Boot: File upload example
– Angular 8 + Spring Boot: Pagination example

Máy chủ không có: Angular 8 Firebase crud thời gian thực DB | Angularfiredatabase
Angular 8 Firebase CRUD Realtime DB | AngularFireDatabase

Nội dung

Góc 8 & Spring Boot MongoDB CRUD ví dụ
Kiến trúc khởi động Angular 8 & Spring
Mùa xuân khởi động back-end
- Tổng quan
- Công nghệ
- Cấu trúc dự án
- Thực hiện
  - Tạo và thiết lập dự án khởi động mùa xuân
  - Định cấu hình Dữ liệu mùa xuân MongoDB
  - Xác định mô hình dữ liệu
  - Tạo giao diện kho lưu trữ
  - Tạo bộ điều khiển API REST Spring
  - Chạy máy chủ khởi động Spring
Angular 8 Front-end
- Tổng quan
- Công nghệ
- Cấu trúc dự án
- Thực hiện
  - Tạo và thiết lập dự án khởi động mùa xuân
  - Định cấu hình Dữ liệu mùa xuân MongoDB
  - Xác định mô hình dữ liệu
  - Tạo giao diện kho lưu trữ
  - Tạo bộ điều khiển API REST Spring
  - Chạy máy chủ khởi động Spring
  - Angular 8 Front-end
Thiết lập dự án Angular 8
Thiết lập mô -đun ứng dụng
Xác định các tuyến đường cho angular aproutingModule

Thêm Navbar và bộ định tuyến Chế độ xem vào ứng dụng Angular CRUD

Tạo dịch vụ dữ liệu
Tạo các thành phần góc
Chạy ứng dụng Angular

Đọc thêm

Sự kết luận

Mã nguồn

Hướng dẫn spring boot angular mongodb rest api tutorial - hướng dẫn khởi động mùa xuân góc mongodb phần còn lại api

Chúng tôi sẽ xây dựng một ứng dụng hướng dẫn đầy đủ trong đó:Edit button to update a Tutorial:

Mỗi hướng dẫn có ID, tiêu đề, mô tả, trạng thái được công bố.

Chúng tôi có thể tạo, truy xuất, cập nhật, xóa hướng dẫn.Published using Publish button
Chúng tôi cũng có thể tìm thấy hướng dẫn theo tiêu đề.Delete button
Các hình ảnh dưới đây cho thấy ảnh chụp màn hình của hệ thống của chúng tôi.Update button

- Thêm hướng dẫn:

- Lấy tất cả các hướng dẫn:

Kiến trúc khởi động Angular 8 & Spring

Mùa xuân khởi động back-end

Tổng quan
– Angular Client sends HTTP Requests and retrieve HTTP Responses using HttpClient Module, shows data on the components. We also use Angular Router for navigating to pages.

Mùa xuân khởi động back-end

Tổng quan

Công nghệ

Cấu trúc dự án	Thực hiện	Tạo và thiết lập dự án khởi động mùa xuân
Định cấu hình Dữ liệu mùa xuân MongoDB	Xác định mô hình dữ liệu	Tạo giao diện kho lưu trữ
Tạo bộ điều khiển API REST Spring	Xác định mô hình dữ liệu	Tạo giao diện kho lưu trữ
Tạo bộ điều khiển API REST Spring	Chạy máy chủ khởi động Spring	Angular 8 Front-end
Thiết lập dự án Angular 8	Chạy máy chủ khởi động Spring	Angular 8 Front-end
Thiết lập dự án Angular 8	Chạy máy chủ khởi động Spring	Angular 8 Front-end
Thiết lập dự án Angular 8	Xác định mô hình dữ liệu	Tạo giao diện kho lưu trữ
Tạo bộ điều khiển API REST Spring	Chạy máy chủ khởi động Spring	Angular 8 Front-end

Thiết lập dự án Angular 8

Công nghệ

Cấu trúc dự án
Thực hiện
Tạo và thiết lập dự án khởi động mùa xuân
Định cấu hình Dữ liệu mùa xuân MongoDB

Cấu trúc dự án

Thực hiện
Tạo và thiết lập dự án khởi động mùa xuân
Định cấu hình Dữ liệu mùa xuân MongoDB
Xác định mô hình dữ liệuapplication.properties.
Tạo giao diện kho lưu trữ contains dependencies for Spring Boot Web MVC and Spring Data MongoDB.

Thực hiện

Tạo và thiết lập dự án khởi động mùa xuân

Định cấu hình Dữ liệu mùa xuân MongoDB

Xác định mô hình dữ liệupom.xml and add these dependencies:


	org.springframework.boot
	spring-boot-starter-web



	org.springframework.boot
	spring-boot-starter-data-mongodb

Định cấu hình Dữ liệu mùa xuân MongoDB

Xác định mô hình dữ liệu

spring.data.mongodb.database=bezkoder_db
spring.data.mongodb.port=27017

Xác định mô hình dữ liệu

Tạo giao diện kho lưu trữ
In model package, we define

spring.data.mongodb.database=bezkoder_db
spring.data.mongodb.port=27017

6 class.

model/Tutorial.java

package com.bezkoder.spring.data.mongodb.model;

import org.springframework.data.annotation.Id;
import org.springframework.data.mongodb.core.mapping.Document;

@Document(collection = "tutorials")
public class Tutorial {
  @Id
  private String id;

  private String title;
  private String description;
  private boolean published;

  ...
}

Tạo bộ điều khiển API REST Spring

Tạo giao diện kho lưu trữ

Tạo bộ điều khiển API REST Spring
In repository package, create

spring.data.mongodb.database=bezkoder_db
spring.data.mongodb.port=27017

7 interface that extends

spring.data.mongodb.database=bezkoder_db
spring.data.mongodb.port=27017

5.

repository/TutorialRepository.java

package com.bezkoder.spring.data.mongodb.repository;

import java.util.List;

import org.springframework.data.mongodb.repository.MongoRepository;

import com.bezkoder.spring.data.mongodb.model.Tutorial;

public interface TutorialRepository extends MongoRepository {
  List findByTitleContaining(String title);
  List findByPublished(boolean published);
}

Chạy máy chủ khởi động Spring

Chúng tôi cũng xác định các phương thức tìm kiếm tùy chỉnh: -

package com.bezkoder.spring.data.mongodb.repository;

import java.util.List;

import org.springframework.data.mongodb.repository.MongoRepository;

import com.bezkoder.spring.data.mongodb.model.Tutorial;

public interface TutorialRepository extends MongoRepository {
  List findByTitleContaining(String title);
  List findByPublished(boolean published);
}

1: Trả về tất cả các hướng dẫn mà tiêu đề chứa đầu vào

package com.bezkoder.spring.data.mongodb.repository;

import java.util.List;

import org.springframework.data.mongodb.repository.MongoRepository;

import com.bezkoder.spring.data.mongodb.model.Tutorial;

public interface TutorialRepository extends MongoRepository {
  List findByTitleContaining(String title);
  List findByPublished(boolean published);
}

2. -

package com.bezkoder.spring.data.mongodb.repository;

import java.util.List;

import org.springframework.data.mongodb.repository.MongoRepository;

import com.bezkoder.spring.data.mongodb.model.Tutorial;

public interface TutorialRepository extends MongoRepository {
  List findByTitleContaining(String title);
  List findByPublished(boolean published);
}

3: Trả về tất cả các hướng dẫn với

package com.bezkoder.spring.data.mongodb.repository;

import java.util.List;

import org.springframework.data.mongodb.repository.MongoRepository;

import com.bezkoder.spring.data.mongodb.model.Tutorial;

public interface TutorialRepository extends MongoRepository {
  List findByTitleContaining(String title);
  List findByPublished(boolean published);
}

4 có giá trị dưới dạng đầu vào ____34.
–

package com.bezkoder.spring.data.mongodb.repository;

import java.util.List;

import org.springframework.data.mongodb.repository.MongoRepository;

import com.bezkoder.spring.data.mongodb.model.Tutorial;

public interface TutorialRepository extends MongoRepository {
  List findByTitleContaining(String title);
  List findByPublished(boolean published);
}

1: returns all Tutorials which title contains input

package com.bezkoder.spring.data.mongodb.repository;

import java.util.List;

import org.springframework.data.mongodb.repository.MongoRepository;

import com.bezkoder.spring.data.mongodb.model.Tutorial;

public interface TutorialRepository extends MongoRepository {
  List findByTitleContaining(String title);
  List findByPublished(boolean published);
}

2.
–

package com.bezkoder.spring.data.mongodb.repository;

import java.util.List;

import org.springframework.data.mongodb.repository.MongoRepository;

import com.bezkoder.spring.data.mongodb.model.Tutorial;

public interface TutorialRepository extends MongoRepository {
  List findByTitleContaining(String title);
  List findByPublished(boolean published);
}

3: returns all Tutorials with

package com.bezkoder.spring.data.mongodb.repository;

import java.util.List;

import org.springframework.data.mongodb.repository.MongoRepository;

import com.bezkoder.spring.data.mongodb.model.Tutorial;

public interface TutorialRepository extends MongoRepository {
  List findByTitleContaining(String title);
  List findByPublished(boolean published);
}

4 having value as input

package com.bezkoder.spring.data.mongodb.repository;

import java.util.List;

import org.springframework.data.mongodb.repository.MongoRepository;

import com.bezkoder.spring.data.mongodb.model.Tutorial;

public interface TutorialRepository extends MongoRepository {
  List findByTitleContaining(String title);
  List findByPublished(boolean published);
}

4.

Việc triển khai được cắm tự động bởi Spring Data MongoDB.

Tạo bộ điều khiển API REST Spring

Cuối cùng, chúng tôi tạo một bộ điều khiển cung cấp API để tạo, truy xuất, cập nhật, xóa và tìm hướng dẫn.

controller/TutorialController.java

package com.bezkoder.spring.data.mongodb.controller;
...

@CrossOrigin(origins = "http://localhost:8081")
@RestController
@RequestMapping("/api")
public class TutorialController {

  @Autowired
  TutorialRepository tutorialRepository;

  @GetMapping("/tutorials")
  public ResponseEntity> getAllTutorials(@RequestParam(required = false) String title) {
    
  }

  @GetMapping("/tutorials/{id}")
  public ResponseEntity getTutorialById(@PathVariable("id") String id) {
    
  }

  @PostMapping("/tutorials")
  public ResponseEntity createTutorial(@RequestBody Tutorial tutorial) {
    
  }

  @PutMapping("/tutorials/{id}")
  public ResponseEntity updateTutorial(@PathVariable("id") String id, @RequestBody Tutorial tutorial) {
    
  }

  @DeleteMapping("/tutorials/{id}")
  public ResponseEntity deleteTutorial(@PathVariable("id") String id) {
    
  }

  @DeleteMapping("/tutorials")
  public ResponseEntity deleteAllTutorials() {
    
  }

  @GetMapping("/tutorials/published")
  public ResponseEntity> findByPublished() {
    
  }

}

-

package com.bezkoder.spring.data.mongodb.repository;

import java.util.List;

import org.springframework.data.mongodb.repository.MongoRepository;

import com.bezkoder.spring.data.mongodb.model.Tutorial;

public interface TutorialRepository extends MongoRepository {
  List findByTitleContaining(String title);
  List findByPublished(boolean published);
}

6 là để cấu hình nguồn gốc được phép. - Chú thích

package com.bezkoder.spring.data.mongodb.repository;

import java.util.List;

import org.springframework.data.mongodb.repository.MongoRepository;

import com.bezkoder.spring.data.mongodb.model.Tutorial;

public interface TutorialRepository extends MongoRepository {
  List findByTitleContaining(String title);
  List findByPublished(boolean published);
}

7 được sử dụng để xác định bộ điều khiển và để chỉ ra rằng giá trị trả về của các phương thức nên được liên kết với thân phản hồi web. -

package com.bezkoder.spring.data.mongodb.repository;

import java.util.List;

import org.springframework.data.mongodb.repository.MongoRepository;

import com.bezkoder.spring.data.mongodb.model.Tutorial;

public interface TutorialRepository extends MongoRepository {
  List findByTitleContaining(String title);
  List findByPublished(boolean published);
}

8 tuyên bố rằng tất cả URL API trong bộ điều khiển sẽ bắt đầu với

package com.bezkoder.spring.data.mongodb.repository;

import java.util.List;

import org.springframework.data.mongodb.repository.MongoRepository;

import com.bezkoder.spring.data.mongodb.model.Tutorial;

public interface TutorialRepository extends MongoRepository {
  List findByTitleContaining(String title);
  List findByPublished(boolean published);
}

9. - Chúng tôi sử dụng

package com.bezkoder.spring.data.mongodb.controller;
...

@CrossOrigin(origins = "http://localhost:8081")
@RestController
@RequestMapping("/api")
public class TutorialController {

  @Autowired
  TutorialRepository tutorialRepository;

  @GetMapping("/tutorials")
  public ResponseEntity> getAllTutorials(@RequestParam(required = false) String title) {
    
  }

  @GetMapping("/tutorials/{id}")
  public ResponseEntity getTutorialById(@PathVariable("id") String id) {
    
  }

  @PostMapping("/tutorials")
  public ResponseEntity createTutorial(@RequestBody Tutorial tutorial) {
    
  }

  @PutMapping("/tutorials/{id}")
  public ResponseEntity updateTutorial(@PathVariable("id") String id, @RequestBody Tutorial tutorial) {
    
  }

  @DeleteMapping("/tutorials/{id}")
  public ResponseEntity deleteTutorial(@PathVariable("id") String id) {
    
  }

  @DeleteMapping("/tutorials")
  public ResponseEntity deleteAllTutorials() {
    
  }

  @GetMapping("/tutorials/published")
  public ResponseEntity> findByPublished() {
    
  }

}

0 để tiêm bean

spring.data.mongodb.database=bezkoder_db
spring.data.mongodb.port=27017

7 vào biến cục bộ.
–

package com.bezkoder.spring.data.mongodb.repository;

import java.util.List;

import org.springframework.data.mongodb.repository.MongoRepository;

import com.bezkoder.spring.data.mongodb.model.Tutorial;

public interface TutorialRepository extends MongoRepository {
  List findByTitleContaining(String title);
  List findByPublished(boolean published);
}

7 annotation is used to define a controller and to indicate that the return value of the methods should be be bound to the web response body.
–

package com.bezkoder.spring.data.mongodb.repository;

import java.util.List;

import org.springframework.data.mongodb.repository.MongoRepository;

import com.bezkoder.spring.data.mongodb.model.Tutorial;

public interface TutorialRepository extends MongoRepository {
  List findByTitleContaining(String title);
  List findByPublished(boolean published);
}

8 declares that all Apis’ url in the controller will start with

package com.bezkoder.spring.data.mongodb.repository;

import java.util.List;

import org.springframework.data.mongodb.repository.MongoRepository;

import com.bezkoder.spring.data.mongodb.model.Tutorial;

public interface TutorialRepository extends MongoRepository {
  List findByTitleContaining(String title);
  List findByPublished(boolean published);
}

9.
– We use

package com.bezkoder.spring.data.mongodb.controller;
...

@CrossOrigin(origins = "http://localhost:8081")
@RestController
@RequestMapping("/api")
public class TutorialController {

  @Autowired
  TutorialRepository tutorialRepository;

  @GetMapping("/tutorials")
  public ResponseEntity> getAllTutorials(@RequestParam(required = false) String title) {
    
  }

  @GetMapping("/tutorials/{id}")
  public ResponseEntity getTutorialById(@PathVariable("id") String id) {
    
  }

  @PostMapping("/tutorials")
  public ResponseEntity createTutorial(@RequestBody Tutorial tutorial) {
    
  }

  @PutMapping("/tutorials/{id}")
  public ResponseEntity updateTutorial(@PathVariable("id") String id, @RequestBody Tutorial tutorial) {
    
  }

  @DeleteMapping("/tutorials/{id}")
  public ResponseEntity deleteTutorial(@PathVariable("id") String id) {
    
  }

  @DeleteMapping("/tutorials")
  public ResponseEntity deleteAllTutorials() {
    
  }

  @GetMapping("/tutorials/published")
  public ResponseEntity> findByPublished() {
    
  }

}

0 to inject

spring.data.mongodb.database=bezkoder_db
spring.data.mongodb.port=27017

7 bean to local variable.

Bạn có thể tiếp tục từng bước để triển khai máy chủ khởi động mùa xuân này trong bài đăng: Spring Boot với ví dụ MongoDB CRUD bằng cách sử dụng dữ liệu lò xo
Spring Boot with MongoDB CRUD example using Spring Data

Chạy máy chủ khởi động Spring

Chạy ứng dụng khởi động mùa xuân với lệnh maven:

package com.bezkoder.spring.data.mongodb.controller;
...

@CrossOrigin(origins = "http://localhost:8081")
@RestController
@RequestMapping("/api")
public class TutorialController {

  @Autowired
  TutorialRepository tutorialRepository;

  @GetMapping("/tutorials")
  public ResponseEntity> getAllTutorials(@RequestParam(required = false) String title) {
    
  }

  @GetMapping("/tutorials/{id}")
  public ResponseEntity getTutorialById(@PathVariable("id") String id) {
    
  }

  @PostMapping("/tutorials")
  public ResponseEntity createTutorial(@RequestBody Tutorial tutorial) {
    
  }

  @PutMapping("/tutorials/{id}")
  public ResponseEntity updateTutorial(@PathVariable("id") String id, @RequestBody Tutorial tutorial) {
    
  }

  @DeleteMapping("/tutorials/{id}")
  public ResponseEntity deleteTutorial(@PathVariable("id") String id) {
    
  }

  @DeleteMapping("/tutorials")
  public ResponseEntity deleteAllTutorials() {
    
  }

  @GetMapping("/tutorials/published")
  public ResponseEntity> findByPublished() {
    
  }

}

2.

Angular 8 Front-end

Tổng quan

- Thành phần

package com.bezkoder.spring.data.mongodb.controller;
...

@CrossOrigin(origins = "http://localhost:8081")
@RestController
@RequestMapping("/api")
public class TutorialController {

  @Autowired
  TutorialRepository tutorialRepository;

  @GetMapping("/tutorials")
  public ResponseEntity> getAllTutorials(@RequestParam(required = false) String title) {
    
  }

  @GetMapping("/tutorials/{id}")
  public ResponseEntity getTutorialById(@PathVariable("id") String id) {
    
  }

  @PostMapping("/tutorials")
  public ResponseEntity createTutorial(@RequestBody Tutorial tutorial) {
    
  }

  @PutMapping("/tutorials/{id}")
  public ResponseEntity updateTutorial(@PathVariable("id") String id, @RequestBody Tutorial tutorial) {
    
  }

  @DeleteMapping("/tutorials/{id}")
  public ResponseEntity deleteTutorial(@PathVariable("id") String id) {
    
  }

  @DeleteMapping("/tutorials")
  public ResponseEntity deleteAllTutorials() {
    
  }

  @GetMapping("/tutorials/published")
  public ResponseEntity> findByPublished() {
    
  }

}

3 là một thùng chứa với

package com.bezkoder.spring.data.mongodb.controller;
...

@CrossOrigin(origins = "http://localhost:8081")
@RestController
@RequestMapping("/api")
public class TutorialController {

  @Autowired
  TutorialRepository tutorialRepository;

  @GetMapping("/tutorials")
  public ResponseEntity> getAllTutorials(@RequestParam(required = false) String title) {
    
  }

  @GetMapping("/tutorials/{id}")
  public ResponseEntity getTutorialById(@PathVariable("id") String id) {
    
  }

  @PostMapping("/tutorials")
  public ResponseEntity createTutorial(@RequestBody Tutorial tutorial) {
    
  }

  @PutMapping("/tutorials/{id}")
  public ResponseEntity updateTutorial(@PathVariable("id") String id, @RequestBody Tutorial tutorial) {
    
  }

  @DeleteMapping("/tutorials/{id}")
  public ResponseEntity deleteTutorial(@PathVariable("id") String id) {
    
  }

  @DeleteMapping("/tutorials")
  public ResponseEntity deleteAllTutorials() {
    
  }

  @GetMapping("/tutorials/published")
  public ResponseEntity> findByPublished() {
    
  }

}

4. Nó có thanh điều hướng liên kết đến các đường dẫn đường qua

package com.bezkoder.spring.data.mongodb.controller;
...

@CrossOrigin(origins = "http://localhost:8081")
@RestController
@RequestMapping("/api")
public class TutorialController {

  @Autowired
  TutorialRepository tutorialRepository;

  @GetMapping("/tutorials")
  public ResponseEntity> getAllTutorials(@RequestParam(required = false) String title) {
    
  }

  @GetMapping("/tutorials/{id}")
  public ResponseEntity getTutorialById(@PathVariable("id") String id) {
    
  }

  @PostMapping("/tutorials")
  public ResponseEntity createTutorial(@RequestBody Tutorial tutorial) {
    
  }

  @PutMapping("/tutorials/{id}")
  public ResponseEntity updateTutorial(@PathVariable("id") String id, @RequestBody Tutorial tutorial) {
    
  }

  @DeleteMapping("/tutorials/{id}")
  public ResponseEntity deleteTutorial(@PathVariable("id") String id) {
    
  }

  @DeleteMapping("/tutorials")
  public ResponseEntity deleteAllTutorials() {
    
  }

  @GetMapping("/tutorials/published")
  public ResponseEntity> findByPublished() {
    
  }

}

5.

- Thành phần

package com.bezkoder.spring.data.mongodb.controller;
...

@CrossOrigin(origins = "http://localhost:8081")
@RestController
@RequestMapping("/api")
public class TutorialController {

  @Autowired
  TutorialRepository tutorialRepository;

  @GetMapping("/tutorials")
  public ResponseEntity> getAllTutorials(@RequestParam(required = false) String title) {
    
  }

  @GetMapping("/tutorials/{id}")
  public ResponseEntity getTutorialById(@PathVariable("id") String id) {
    
  }

  @PostMapping("/tutorials")
  public ResponseEntity createTutorial(@RequestBody Tutorial tutorial) {
    
  }

  @PutMapping("/tutorials/{id}")
  public ResponseEntity updateTutorial(@PathVariable("id") String id, @RequestBody Tutorial tutorial) {
    
  }

  @DeleteMapping("/tutorials/{id}")
  public ResponseEntity deleteTutorial(@PathVariable("id") String id) {
    
  }

  @DeleteMapping("/tutorials")
  public ResponseEntity deleteAllTutorials() {
    
  }

  @GetMapping("/tutorials/published")
  public ResponseEntity> findByPublished() {
    
  }

}

6 có và hiển thị các hướng dẫn. - Thành phần

spring.data.mongodb.database=bezkoder_db
spring.data.mongodb.port=27017

6 có biểu mẫu để chỉnh sửa các chi tiết hướng dẫn dựa trên

spring.data.mongodb.database=bezkoder_db
spring.data.mongodb.port=27017

1. - Thành phần

package com.bezkoder.spring.data.mongodb.controller;
...

@CrossOrigin(origins = "http://localhost:8081")
@RestController
@RequestMapping("/api")
public class TutorialController {

  @Autowired
  TutorialRepository tutorialRepository;

  @GetMapping("/tutorials")
  public ResponseEntity> getAllTutorials(@RequestParam(required = false) String title) {
    
  }

  @GetMapping("/tutorials/{id}")
  public ResponseEntity getTutorialById(@PathVariable("id") String id) {
    
  }

  @PostMapping("/tutorials")
  public ResponseEntity createTutorial(@RequestBody Tutorial tutorial) {
    
  }

  @PutMapping("/tutorials/{id}")
  public ResponseEntity updateTutorial(@PathVariable("id") String id, @RequestBody Tutorial tutorial) {
    
  }

  @DeleteMapping("/tutorials/{id}")
  public ResponseEntity deleteTutorial(@PathVariable("id") String id) {
    
  }

  @DeleteMapping("/tutorials")
  public ResponseEntity deleteAllTutorials() {
    
  }

  @GetMapping("/tutorials/published")
  public ResponseEntity> findByPublished() {
    
  }

}

9 có hình thức để gửi hướng dẫn mới.
–

spring.data.mongodb.database=bezkoder_db
spring.data.mongodb.port=27017

6 component has form for editing Tutorial’s details based on

spring.data.mongodb.database=bezkoder_db
spring.data.mongodb.port=27017

1.
–

package com.bezkoder.spring.data.mongodb.controller;
...

@CrossOrigin(origins = "http://localhost:8081")
@RestController
@RequestMapping("/api")
public class TutorialController {

  @Autowired
  TutorialRepository tutorialRepository;

  @GetMapping("/tutorials")
  public ResponseEntity> getAllTutorials(@RequestParam(required = false) String title) {
    
  }

  @GetMapping("/tutorials/{id}")
  public ResponseEntity getTutorialById(@PathVariable("id") String id) {
    
  }

  @PostMapping("/tutorials")
  public ResponseEntity createTutorial(@RequestBody Tutorial tutorial) {
    
  }

  @PutMapping("/tutorials/{id}")
  public ResponseEntity updateTutorial(@PathVariable("id") String id, @RequestBody Tutorial tutorial) {
    
  }

  @DeleteMapping("/tutorials/{id}")
  public ResponseEntity deleteTutorial(@PathVariable("id") String id) {
    
  }

  @DeleteMapping("/tutorials")
  public ResponseEntity deleteAllTutorials() {
    
  }

  @GetMapping("/tutorials/published")
  public ResponseEntity> findByPublished() {
    
  }

}

9 component has form for submission new Tutorial.

- Các thành phần này gọi các phương thức

ng new Angular8ClientCrud
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

0 sử dụng Angular

ng new Angular8ClientCrud
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

1 để thực hiện các yêu cầu HTTP và nhận phản hồi.

Công nghệ

Góc 8
Góc httpclient
Bộ định tuyến góc

Cấu trúc dự án

- Có 3 thành phần:

ng new Angular8ClientCrud
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

2,

ng new Angular8ClientCrud
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

3,

ng new Angular8ClientCrud
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

4. -

ng new Angular8ClientCrud
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

5 có các phương thức gửi các yêu cầu HTTP đến API. -định tuyến ứng dụng.module.ts xác định các tuyến đường cho từng thành phần. - Thành phần

ng new Angular8ClientCrud
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

6 chứa chế độ xem bộ định tuyến và thanh điều hướng. -

ng new Angular8ClientCrud
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

7 tuyên bố các thành phần góc và nhập các mô -đun cần thiết.
–

ng new Angular8ClientCrud
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

5 has methods for sending HTTP requests to the Apis.
– app-routing.module.ts defines routes for each component.
–

ng new Angular8ClientCrud
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

6 component contains router view and navigation bar.
–

ng new Angular8ClientCrud
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

7 declares Angular components and import necessary modules.

Thực hiện

Thiết lập dự án Angular 8

Hãy để mở CMD và sử dụng Angular CLI để tạo một dự án góc mới như lệnh sau:

ng new Angular8ClientCrud
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

Chúng tôi cũng cần tạo một số thành phần và dịch vụ:

ng g s services/tutorial

ng g c components/add-tutorial
ng g c components/tutorial-details
ng g c components/tutorials-list

Bây giờ bạn có thể thấy rằng cấu trúc thư mục dự án của chúng tôi trông như thế này.

Thiết lập mô -đun ứng dụng

Mở App.Module.ts và nhập

ng new Angular8ClientCrud
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

8,

ng new Angular8ClientCrud
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

9:

...
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [ ... ],
  imports: [
    ...
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Xác định các tuyến đường cho angular aproutingModule

Có 3 tuyến chính: -

ng g s services/tutorial

ng g c components/add-tutorial
ng g c components/tutorial-details
ng g c components/tutorials-list

0 cho thành phần

ng new Angular8ClientCrud
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

2 -

ng g s services/tutorial

ng g c components/add-tutorial
ng g c components/tutorial-details
ng g c components/tutorials-list

2 cho thành phần

ng new Angular8ClientCrud
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

3 -

ng g s services/tutorial

ng g c components/add-tutorial
ng g c components/tutorial-details
ng g c components/tutorials-list

4 cho thành phần

ng new Angular8ClientCrud
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

4
–

ng g s services/tutorial

ng g c components/add-tutorial
ng g c components/tutorial-details
ng g c components/tutorials-list

0 for

ng new Angular8ClientCrud
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

2 component
–

ng g s services/tutorial

ng g c components/add-tutorial
ng g c components/tutorial-details
ng g c components/tutorials-list

2 for

ng new Angular8ClientCrud
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

3 component
–

ng g s services/tutorial

ng g c components/add-tutorial
ng g c components/tutorial-details
ng g c components/tutorials-list

4 for

ng new Angular8ClientCrud
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

4 component

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TutorialsListComponent } from './components/tutorials-list/tutorials-list.component';
import { TutorialDetailsComponent } from './components/tutorial-details/tutorial-details.component';
import { AddTutorialComponent } from './components/add-tutorial/add-tutorial.component';

const routes: Routes = [
  { path: '', redirectTo: 'tutorials', pathMatch: 'full' },
  { path: 'tutorials', component: TutorialsListComponent },
  { path: 'tutorials/:id', component: TutorialDetailsComponent },
  { path: 'add', component: AddTutorialComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Thêm Navbar và bộ định tuyến Chế độ xem vào ứng dụng Angular CRUD

Hãy để mở SRC/app.component.html, thành phần

package com.bezkoder.spring.data.mongodb.controller;
...

@CrossOrigin(origins = "http://localhost:8081")
@RestController
@RequestMapping("/api")
public class TutorialController {

  @Autowired
  TutorialRepository tutorialRepository;

  @GetMapping("/tutorials")
  public ResponseEntity> getAllTutorials(@RequestParam(required = false) String title) {
    
  }

  @GetMapping("/tutorials/{id}")
  public ResponseEntity getTutorialById(@PathVariable("id") String id) {
    
  }

  @PostMapping("/tutorials")
  public ResponseEntity createTutorial(@RequestBody Tutorial tutorial) {
    
  }

  @PutMapping("/tutorials/{id}")
  public ResponseEntity updateTutorial(@PathVariable("id") String id, @RequestBody Tutorial tutorial) {
    
  }

  @DeleteMapping("/tutorials/{id}")
  public ResponseEntity deleteTutorial(@PathVariable("id") String id) {
    
  }

  @DeleteMapping("/tutorials")
  public ResponseEntity deleteAllTutorials() {
    
  }

  @GetMapping("/tutorials/published")
  public ResponseEntity> findByPublished() {
    
  }

}

3 này là bộ chứa gốc cho ứng dụng của chúng tôi, nó sẽ chứa phần tử

ng g s services/tutorial

ng g c components/add-tutorial
ng g c components/tutorial-details
ng g c components/tutorials-list

7.src/app.component.html, this

package com.bezkoder.spring.data.mongodb.controller;
...

@CrossOrigin(origins = "http://localhost:8081")
@RestController
@RequestMapping("/api")
public class TutorialController {

  @Autowired
  TutorialRepository tutorialRepository;

  @GetMapping("/tutorials")
  public ResponseEntity> getAllTutorials(@RequestParam(required = false) String title) {
    
  }

  @GetMapping("/tutorials/{id}")
  public ResponseEntity getTutorialById(@PathVariable("id") String id) {
    
  }

  @PostMapping("/tutorials")
  public ResponseEntity createTutorial(@RequestBody Tutorial tutorial) {
    
  }

  @PutMapping("/tutorials/{id}")
  public ResponseEntity updateTutorial(@PathVariable("id") String id, @RequestBody Tutorial tutorial) {
    
  }

  @DeleteMapping("/tutorials/{id}")
  public ResponseEntity deleteTutorial(@PathVariable("id") String id) {
    
  }

  @DeleteMapping("/tutorials")
  public ResponseEntity deleteAllTutorials() {
    
  }

  @GetMapping("/tutorials/published")
  public ResponseEntity> findByPublished() {
    
  }

}

3 component is the root container for our application, it will contain a

ng g s services/tutorial

ng g c components/add-tutorial
ng g c components/tutorial-details
ng g c components/tutorials-list

7 element.


  
    bezKoder
    
      
        Tutorials
      
      
        Add

Tạo dịch vụ dữ liệu

Dịch vụ này sẽ sử dụng Angular

ng new Angular8ClientCrud
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

1 để gửi các yêu cầu HTTP. Bạn có thể thấy rằng các chức năng của nó bao gồm các hoạt động CRUD và phương thức tìm kiếm.
You can see that its functions includes CRUD operations and finder method.

services/tutorial.service.ts/tutorial.service.ts

spring.data.mongodb.database=bezkoder_db
spring.data.mongodb.port=27017

0

Tạo các thành phần góc

Như bạn đã biết trước đây, có 3 thành phần tương ứng với 3 tuyến được xác định trong

ng g s services/tutorial

ng g c components/add-tutorial
ng g c components/tutorial-details
ng g c components/tutorials-list

9.

Thêm thành phần mục mới
Danh sách các mục thành phần
Thành phần chi tiết vật phẩm

Bạn có thể tiếp tục từng bước để thực hiện ứng dụng góc này trong bài đăng: angular 8 crud Ứng dụng với API Web
Angular 8 CRUD Application example with Web API

Các phiên bản mới hơn: - Ví dụ về angular 10 crud với API Web - Angular 11 CRUD Ví dụ với API Web - Angular 12 CRUD Ví dụ với API Web - Angular 13 CRUD Ví dụ với API Web - Angular 14 CRUD Ví dụ với API Web
– Angular 10 CRUD example with Web API
– Angular 11 CRUD example with Web API
– Angular 12 CRUD example with Web API
– Angular 13 CRUD example with Web API
– Angular 14 CRUD example with Web API

Chạy ứng dụng Angular

Bạn có thể chạy ứng dụng này với lệnh:

...
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [ ... ],
  imports: [
    ...
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

0. Nếu quá trình thành công, hãy mở trình duyệt với URL:

...
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [ ... ],
  imports: [
    ...
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

1 và kiểm tra nó.
If the process is successful, open Browser with Url:

...
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [ ... ],
  imports: [
    ...
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

1 and check it.

Đọc thêm

Dữ liệu mùa xuân MongoDB
MVC Web Spring
Góc httpclient

- Angular 8 + Spring Boot: Xác thực JWT với ví dụ về bảo mật lò xo - Angular 8 + Spring Boot + PostgreSQL Ví dụ: Ứng dụng CRUD - Angular 8 + Spring Boot: Ví dụ về tải lên tệp
– Angular 8 + Spring Boot + PostgreSQL example: CRUD App
– Angular 8 + Spring Boot: File upload example

Sự kết luận

Bây giờ chúng tôi có một cái nhìn tổng quan về Angular 8 + Spring Boot + MongoDB ví dụ khi xây dựng một ứng dụng CRUD.

Chúng tôi cũng xem xét kiến trúc máy khách-máy chủ cho API REST bằng cách sử dụng Spring Web MVC & Spring DataODB, cũng như cấu trúc dự án Angular 8 để xây dựng ứng dụng Front-end để thực hiện các yêu cầu HTTP và tiêu thụ phản hồi.

Hướng dẫn tiếp theo cho bạn biết thêm chi tiết về cách triển khai hệ thống:-Back-end-Front-end:
– Back-end
– Front-end:

Sử dụng góc 8
Sử dụng góc 10
Sử dụng góc 11
Sử dụng góc 12
Sử dụng góc 13
Sử dụng góc 14

Bạn sẽ muốn biết cách thực hiện phân trang: Angular 8 + Spring Boot: Ví dụ về phân trang
Angular 8 + Spring Boot: Pagination example

Hoặc chạy cả hai dự án ở một nơi: Cách tích hợp Angular với API Boot Boot REST
How to Integrate Angular with Spring Boot Rest API

Máy chủ không có: Angular 8 Firebase crud thời gian thực DB | Angularfiredatabase
Angular 8 Firebase CRUD Realtime DB | AngularFireDatabase

Chúc bạn học hỏi, hãy gặp lại bạn!

Mã nguồn

Bạn có thể tìm thấy mã nguồn Github cho hướng dẫn này tại: Spring Boot + Angular Ví dụ GitHub

programming mongodb

Hướng dẫn spring boot angular mongodb rest api tutorial - hướng dẫn khởi động mùa xuân góc mongodb phần còn lại api

Kiến trúc khởi động Angular 8 & Spring

Mùa xuân khởi động back-end

Tổng quan

Công nghệ

Cấu trúc dự án

Thực hiện

Tạo và thiết lập dự án khởi động mùa xuân

Định cấu hình Dữ liệu mùa xuân MongoDB

Xác định mô hình dữ liệu

Tạo giao diện kho lưu trữ

Tạo bộ điều khiển API REST Spring

Chạy máy chủ khởi động Spring

Angular 8 Front-end

Tổng quan

Công nghệ

Cấu trúc dự án

Thực hiện

Thiết lập dự án Angular 8

Thiết lập mô -đun ứng dụng

Xác định các tuyến đường cho angular aproutingModule

Thêm Navbar và bộ định tuyến Chế độ xem vào ứng dụng Angular CRUD

Tạo dịch vụ dữ liệu

Tạo các thành phần góc

Chạy ứng dụng Angular

Đọc thêm

Sự kết luận

Mã nguồn

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội