Code ví dụ Spring Boot MongoDB Thymeleaf (Thêm, sửa, xóa)

cuongth

7 năm ago

Code ví dụ Spring Boot MongoDB Thymeleaf (Thêm, sửa, xóa).

Ở bài này mình sẽ sử dụng Spring Boot với Spring Data để thực hiện ví dụ thêm, sửa, xóa dữ liệu với database MongoDB sau đó hiển thị dữ liệu lên web với Thymeleaf.

Các công nghệ sử dụng:

Tạo Database

Khởi động MongoDB và xem lại các thông số cài đặt MongoDB, ví dụ uri MongoDB của mình là mongodb://localhost:27017

Khi Spring boot kết nối tới MongoDB mà database, collection chưa tồn tại thì nó sẽ được tự động tạo.

(Xem lại: Hướng dẫn cài đặt, cấu hình MongoDB)

Tạo Spring Boot Project

Cấu trúc Project

Cấu hình MongoDB:

spring.data.mongodb.uri=mongodb://localhost:27017/stackjava

uri của MongoDB sẽ có dạng: mongodb://username:password@host:port?replicaset=name

Server MongoDB của mình không sử dụng username/password, cũng không tạo Replica Set, và thực hiện kết nối tới database stackjava

File Repository

package stackjava.com.mongodb.repository;

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

import stackjava.com.mongodb.entities.Customer;

@Repository
public interface CustomerRepository extends MongoRepository<Customer, String> {
    
}

Khi extends MongoRepository ta có thể sử dụng luôn các method như findAll, findById, save, delete, deleteById…mà không cần phải tạo các class DAO cho nó.

(Xem lại: Ví dụ Spring Boot – Spring Data MongoDB với MongoRepository)

File entity

package stackjava.com.mongodb.entities;

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

@Document(collection = "customer")
public class Customer {
  @Id
  private String id;

  private String name;

  private String address;

  // getter - setter
}

File Controller

Thông thường sẽ có 1 tầng service nằm giữa controller với dao (repository) nhưng ở đây mình gọi luôn repository ở trong controller cho nhanh.

package stackjava.com.mongodb.controller;

import java.util.Optional;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

import stackjava.com.mongodb.entities.Customer;
import stackjava.com.mongodb.repository.CustomerRepository;

@Controller
public class CustomerController {

  @Autowired
  private CustomerRepository customerRepository;

  @RequestMapping(value = { "/", "/customer-list" })
  public String listCustomer(Model model) {
    model.addAttribute("listCustomer", customerRepository.findAll());
    return "customer-list";
  }

  @RequestMapping("/customer-save")
  public String insertCustomer(Model model) {
    model.addAttribute("customer", new Customer());
    return "customer-save";
  }

  @RequestMapping("/customer-view/{id}")
  public String viewCustomer(@PathVariable String id, Model model) {
    Optional<Customer> customer = customerRepository.findById(id);
    if (customer.isPresent()) {
      model.addAttribute("customer", customer.get());
    }
    return "customer-view";
  }

  @RequestMapping("/customer-update/{id}")
  public String updateCustomer(@PathVariable String id, Model model) {
    Optional<Customer> customer = customerRepository.findById(id);
    if (customer.isPresent()) {
      model.addAttribute("customer", customer.get());
    }
    return "customer-update";
  }

  @RequestMapping("/saveCustomer")
  public String doSaveCustomer(@ModelAttribute("Customer") Customer customer, Model model) {
    customerRepository.save(customer);
    model.addAttribute("listCustomer", customerRepository.findAll());
    return "customer-list";
  }

  @RequestMapping("/updateCustomer")
  public String doUpdateCustomer(@ModelAttribute("Customer") Customer customer, Model model) {
    customerRepository.save(customer);
    model.addAttribute("listCustomer", customerRepository.findAll());
    return "customer-list";
  }

  @RequestMapping("/customerDelete/{id}")
  public String doDeleteCustomer(@PathVariable String id, Model model) {
    customerRepository.deleteById(id);
    model.addAttribute("listCustomer", customerRepository.findAll());
    return "customer-list";
  }
}

Các file view:

<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Spring Boot - Hibernate</title>
<style>
table, th, td, tr {
  border: 1px solid black;
}

td {
  padding-right: 30px;
}
</style>
</head>
<body>
  <h1>List Customer:</h1>
  <a th:href="@{/customer-save}">Add Customer</a>
  <br />
  <br />

  <table>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Address</th>
      <th>View</th>
      <th>Edit</th>
      <th>Delete</th>
    </tr>
    <th:block th:each="customer : ${listCustomer}">
      <tr>
        <td><p th:text="${customer.id}"></p></td>
        <td><p th:text="${customer.name}"></p></td>
        <td><p th:text="${customer.address}"></p></td>
        <td><a th:href="@{/customer-view/} + ${customer.id}">View</a></td>
        <td><a th:href="@{/customer-update/} + ${customer.id}">Edit</a></td>
        <td><a th:href="@{/customerDelete/} + ${customer.id}">Delete</a></td>
      </tr>
    </th:block>
  </table>

</body>
</html>

<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Spring Boot - Hibernate</title>
</head>
<body>
  <a th:href="@{/customer-list}">List Customer</a><br />

  <h1>Add new Customer:</h1>
  <form th:action="@{/saveCustomer}" method="POST" th:object="${customer}">
    	Name: <input th:field="*{name}"/> <br/> <br/>
    	Address: <input th:field="*{address}"/> <br/> <br/>
    <input type="submit" value="Submit" />
  </form>
</body>
</html>

<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Spring Boot - Hibernate</title>
</head>
<body>
  <a th:href="@{/customer-list}">List Customer</a> 
  <br/> <br/>
  
  <table>
    <tr>
      <td>Id: </td>
      <td><p th:text="${customer.id}"/></td>
    </tr>
    <tr>
      <td>Name: </td>
      <td><p th:text="${customer.name}"/></td>
    </tr>
    <tr>
      <td>Address: </td>
      <td><p th:text="${customer.address}"/></td>
    </tr>
  </table>
</body>
</html>

<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Spring Boot - Hibernate</title>
</head>
<body>
  <a th:href="@{/customer-list}">List Customer</a><br />

  <h1>Edit Customer:</h1>
  <form th:action="@{/updateCustomer}" method="POST" th:object="${customer}">
    	Id: <input th:field="*{id}" readonly="true" /> <br/> <br/>
    	Name: <input th:field="*{name}"/> <br/> <br/>
    	Address: <input th:field="*{address}"/> <br/> <br/>
    <input type="submit" value="Submit" />
  </form>
</body>
</html>

Demo:

Tạo mới customer:

sửa customer

Xóa customer

Okay, Done!

Download code ví dụ trên tại đây.

(Xem thêm: Ví dụ Java, Spring với MongoDB)

References:

https://docs.spring.io/spring-data/../reference/html/