Full Stack Thymeleaf + Spring Boot + MongoDB

Voranat Jumpajan
Nov 6 · 2 min read

เรื่องนี้ตามหัวข้อเลยครับ ขอบอกก่อนเลยครับว่าการทำ Full Stack ใน Spring Boot นี้เป็นอะไรที่สะดวกมากสำหรับการทำweb applicationในตอนนี้ผมก็จะมาทำ Full Stack แบบเป็นการบันทึกข้อมูล และแสดงข้อมูล Customer ก่อนอื่นผมจะถือว่าผู้อ่านติดตั้ง MongoDB แล้วนะครับแล้วเรามาเริ่มเลยดีกว่า

ขั้นตอนมีดังนี้

  1. เข้า NetBeans
  2. File > new project > java with maven > spring boot basic project > set name
  3. เมื่อได้ file project แล้ว ก็ ไปที่ pom.xml เพิ่ม dependencies ตามนี้เลย

<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
</dependency>

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
</dependency>

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-mongodb</artifactId>
</dependency>

<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-configuration-processor</artifactId>
<optional>true</optional>
</dependency>

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>

4. เริ่มเขียน Code เลย แต่ก่อนอื่นเราต้องเข้าใจโครงสร้างของ Project ก่อนดังรูป(เป็นรูปที่ดูง่ายสุดที่หามาแล้ว เปลี่ยนจาก JSP เป็น Thymeleaf และ DAOImplเราไม่สร้าง เพราะใช้ส่วนของ ServiceImplแทน )

4.1 เริ่มที่ออกแบบข้อมูลก่อน ว่าจะมีอะไรบ้าง สร้างไฟล์ Customer.java ขึ้นมา

@Data
public class Customer {
@Id
private String id;

private String firstName;

private String lastName;

private Integer age;
@Email
private String email;

void setId(String id) {
throw new UnsupportedOperationException(“Not supported”);
}

}

4.2 สร้าง CustomerRepository.java ซึ่งอยู่ในส่วนของ DAO

public interface CustomerRepository extends MongoRepository<Customer, String> {

List<Customer> findByFirstName(String firstName);

public Optional<Customer> findById(int theId);

public List<Customer> findAllByOrderByLastNameAsc();

public void deleteById(int theId);
}

4.3 ในส่วนของ Service จะมี 2 ไฟล์ คือ interface และ class ที่ implements มาจาก interface ก่อนอื่นสร้างไฟล์ interface ก่อน ชื่อ CustomerService.java

public interface CustomerService {

public List<Customer> findAll();

public void save(Customer theCustomer);
}

แล้วสร้างไฟล์ CustomerServiceImpl.java

@Service
public class CustomerServiceImpl implements CustomerService {

private final CustomerRepository customerRepository;

@Autowired
public CustomerServiceImpl(CustomerRepository theCustomerRepository) {
customerRepository = theCustomerRepository;
}

@Override
public List<Customer> findAll() {
return customerRepository.findAllByOrderByLastNameAsc();
}

@Override
public void save(Customer theCustomer) {
customerRepository.save(theCustomer);
}

}

4.4 สร้าง CustomerController.java อยู่ในส่วนของ controller

@Controller
@RequestMapping(“/customer”)
public class CustomerController {

private CustomerService customerService;

public CustomerController(CustomerService theCustomerService) {
customerService = theCustomerService;
}
@GetMapping(“/list”)
public String listCustomer(Model theModel) {

List<Customer> theCustomer = customerService.findAll();

theModel.addAttribute(“customers”, theCustomer);

return “customer/list-customers”;
}

@GetMapping(“/showFormForAdd”)
public String showFormForAdd(Model theModel) {

Customer theCustomer = new Customer();

theModel.addAttribute(“customer”, theCustomer);

return “customer/customer-form”;
}

@PostMapping(“/save”)
public String saveCustomer(@ModelAttribute(“customer”) Customer theCustomer) {

customerService.save(theCustomer);

return “redirect:/customer/list”;
}

}

ในส่วนของ Backend เสร็จแล้วต่อไปเป็นส่วนของ Frontend ซึ่งเราใช้ Thymeleaf

5. เข้าไปที่ resources > template แล้วสร้าง folder ชื่อ customer แล้วสร้างไฟล์ list-customer.html เพื่อแสดงข้อมูลจากฐานข้อมูล


ต่อไปก็สร้าง ไฟล์ customer-form.html เพื่อใช้เพิ่มข้อมูลเข้าไป


จะเห็นได้ว่าการทำ Full Stack โดยใช้ Spring Boot ค่อนข้างสะดวก เพราะมีเครื่องมือให้ใช้เยอะมาก ในตอนนี้ก็จบเท่านี้ครับ หวังว่าจะเอาไปต่อยอดกันได้ครับฮ่าๆๆๆ

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade