📺

[SB13] Chi tiết Spring Boot + Thymeleaf + MySQL + i18n + Web Demo

Created
Oct 27, 2021 3:28 PM
Tags
spring bootbasictut
Chapter
13

Giới thiệu

Trong loạt series về Spring Boot này, chúng ta đã đi qua hết tất cả các kiến thức căn bản và cần thiết.

  1. 📖
    [SB1] Hướng dẫn @Component và @Autowired
  2. ☎️
    [SB2] @Autowired - @Primary - @Qualifier
  3. 🚤
    [SB3] Spring Bean Life Cycle + @PostConstruct và @PreDestroy
  4. 🌟
    [SB4] @Component vs @Service vs @Repository
  5. 📃
    [SB5] Component Scan là gì?
  6. 📹
    [SB6] @Configuration và @Bean
  7. 🚌
    [SB7] Spring Boot Application Config và @Value
  8. 📞
    [SB8] Tạo Web Helloworld với @Controller + Thymeleaf
  9. 🧵
    [SB9] Giải thích cách Thymeleaf vận hành + Expression + Demo Full
  10. 🎲
    [SB10] @RequestMapping + @PostMapping + @ModelAttribute + @RequestParam + Web To-Do với Thymeleaf
  11. 🎎
    [SB11] Hướng dẫn Spring Boot JPA + MySQL
  12. 🎺
    [SB12] Spring JPA Method + @Query

Hôm nay, chúng ta sẽ vận dụng toàn bộ kiến thức đã học để tạo ra website quản lý công việc bằng Spring Boot + Thymeleaf + MySQL.

Cài đặt

Chúng ta sẽ các dependencies sau:

  1. spring-boot-starter-web
  2. lombok
  3. spring-boot-starter-thymeleaf
  4. spring-boot-starter-data-jpa
  5. mysql-connector-java

pom.xml

Cấu trúc thư mục:

image
image

Tạo Database

script.sql

Thêm 1 record vào DB

Xem thử kết quả:

image

Cấu hình ứng dụng

Cấu hình là phần cực kì quan trọng rồi, chúng ta phải cung cấp cho Spring Boot các thông tin về Database và Thymeleaf.

Ngoài ra, tùy chỉnh một số thông tin để giúp chúng ta lập trình đơn giản hơn.

application.properties

Tạo Model

Tạo model Todo liên kết tới bảng todo trong Database.

Phần này chúng ta sử dụng Lombok và Hibernate Todo.java

Ngoài ra, chúng ta tạo thêm một đối tượng là TodoValidator, có trách nhiệm kiểm tra xem một object Todo là hợp lệ hay không.

Vậy là xong phần chuẩn bị Model.

TodoConfig

Trong ứng dụng của mình, tôi muốn tự tạo ra Bean TodoValidator.

Đây là lúc sử dụng @Configuration và @Bean đã học tại bài Spring Boot #6

config/TodoConfig.java

Tầng Repository

Tầng Repository, chịu trách nhiệm giao tiếp với Database. Chúng ta sử dụng Spring JPA.

repository/TodoRepository.java

Tầng Service

Tầng Service, chị trách nhiệm thực hiện các xử lý logic, business, hỗ trợ cho tầng Controller.

service/TodoService.java

Tầng Controller

Tầng Controller, nơi đón nhận các request từ phía người dùng, và chuyển tiếp xử lý xuống tầng Service.

controller/TodoController.java

Templates

Tầng Controller đã trả về templates, nhiệm vụ tiếp theo là sử dụng Template Engine để xử lý các templates này và trả về webpage cho người dùng.

Template Engine chúng ta sử dụng sẽ là Thymeleaf, đã học tại các bài Spring Boot #8#9#10.

index.html

listTodo.html

addTodo.html

success.html

failed.html

i18n

Trong các template, tôi có sử dụng các message tĩnh, những message này hỗ trợ đa ngôn ngữ.

Chúng ta định nghĩa các message này tại thư mục i18n.

i18n/messages_vi.properties

i18n/messages_en.properties

Chạy thử ứng dụng

Chạy ứng dụng:

App.java

Truy cập địa chỉ: http://localhost:8085/

image

Vì chúng ta cấu hình Locale là vi, nên ngôn ngữ đều hiện Tiếng Việt, rất tuyệt :3

Bấm vào Xem danh sách công việc để tới /listTodo

image

Vì chúng ta đã insert 1 bản ghi vào Database từ trước, nên ở đây nó hiện ra 1 việc cần làm.

Bấm vào Thêm công việc để tới /addTodo

image

Bấm Add để lưu thông tin vào Database.

image

Vậy là giờ chúng ta có 2 công việc :3

image

Bây giờ giả sử dụng ta gửi lên request tạo ra một Todo không hợp lệ.

TodoValidator sẽ trả về null -> thêm thất bại

image

Kết

Vậy là chúng ta đã đi được nửa Series Spring Boot.

Trong các phần tới, chúng ta sẽ tìm hiểu về cách làm RestAPI với Spring Boot, đây mới là phần mạnh mẽ của nhất.

  1. 🖊️
    [SB14] Restful API + @RestController + @PathVariable + @RequestBody

💁 Nếu có, toàn bộ project / code mẫu được lưu trữ tại GitHub

🌟 Đây là một bài viết trong Series Làm chủ Spring Boot – Zero to Hero

Nếu bạn phát hiện bài viết có lỗi hoặc outdated, hãy báo lại giúp mình theo email: loda.namnh@gmail.com hoặc qua Nam Hoàng Nguyễn (facebook.com)