[Spring Framework] Vòng lặp với Thymeleaf

Mô tả

Tạo ứng dụng hiển thị thông tin sinh viên đã cho sẵn. Mục đích để luyện tập về

Sử dụng cấu hình ứng dụng bằng annotation thông qua việc xây dựng các lớp ApplicationConfig, ApplicationInitializer

Sử dụng vòng lặp trong themeleaf

Thực hiện

Bước 1: Tạo project mới đặt tên là iteration-in-thymeleaf

Bước 2: Tổ chức cấu trúc ứng dụng như sau

Bước 3: Thêm thư viện vào file build.gradle

Thư viện sử dụng cho Spring

// https://mvnrepository.com/artifact/org.springframework/spring-webmvc

compile group: 'org.springframework', name: 'spring-webmvc', version: '5.1.7.RELEASE'
// https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api
providedCompile group: 'javax.servlet', name: 'javax.servlet-api', version: '4.0.0'

Thư viện sử dụng cho Thymeleaf

// https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf-spring5
compile group: 'org.thymeleaf', name: 'thymeleaf-spring5', version: '3.0.9.RELEASE'

Bước 4: Cài đặt lớp ApplicationInitializer.java

Đây là lớp cấu hình khởi tạo cho ứng dụng thay thế cho file web.xml

package com.codelean;

import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;

public class ApplicationInitializer extends AbstractAnnotationConfigDispatcherServletInitializer {
    @Override
    protected Class<?>[] getRootConfigClasses() {
        return new Class[]{ApplicationConfig.class};
    }

    @Override
    protected Class<?>[] getServletConfigClasses() {
        return new Class[0];
    }

    @Override
    protected String[] getServletMappings() {
        return new String[]{"/"};
    }
}

Lớp ApplicationInitializer được kế thừa từ lớp abstract AbstractAnnotationConfigDispatcherServletInitializer.

Lưu ý: Phương thức getServletMappings() xác định url đi qua DispatcherServlet.

Bước 5: Cài đặt lớp ApplicationConfig.java

Lớp ApplicationConfig được dùng để cấu hình cho toàn bộ ứng dụng, nó thay thế cho file dispatcher-servlet.xml

package com.codelean;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.ApplicationContext;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.thymeleaf.TemplateEngine;
import org.thymeleaf.spring5.ISpringTemplateEngine;
import org.thymeleaf.spring5.SpringTemplateEngine;
import org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver;
import org.thymeleaf.spring5.view.ThymeleafViewResolver;
import org.thymeleaf.templatemode.TemplateMode;

@Configuration
@EnableWebMvc
@ComponentScan("com.codelean")
public class ApplicationConfig implements WebMvcConfigurer {

    @Autowired
    private ApplicationContext applicationContext;

    @Bean
    public SpringResourceTemplateResolver templateResolver(){
        SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
        templateResolver.setApplicationContext(applicationContext);
        templateResolver.setPrefix("/WEB-INF/views/");
        templateResolver.setSuffix(".html");
        templateResolver.setTemplateMode(TemplateMode.HTML);
        return templateResolver;
    }

    @Bean
    public TemplateEngine templateEngine(){
        TemplateEngine templateEngine = new SpringTemplateEngine();
        templateEngine.setTemplateResolver(templateResolver());
        return templateEngine;
    }

    @Bean
    public ThymeleafViewResolver viewResolver(){
        ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
        viewResolver.setTemplateEngine((ISpringTemplateEngine) templateEngine());
        return viewResolver;
    }
}

Bước 6: Cấu hình tomcat server

Chạy ứng dụng để đảm bảo các bước cài đặt và cấu hình hoạt động tốt.

Bước 7: Cài đặt lớp Student

package com.codelean.model;

public class Student {
    private String id;
    private String name;
    private String email;

    public Student() {

    }

    public Student(String id, String name, String email) {
        this.id = id;
        this.name = name;
        this.email = email;
    }

    public String getId() {
        return id;
    }

    public String getName() {
        return name;
    }

    public void setId(String id) {
        this.id = id;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }
}

Bước 8: Tổ chức dữ liệu

Tạo interface StudentService, interface chứa các phương thức để xử lý dữ liệu như:

• findAll(): Trả về danh sách tất cả các student
• findById(String id): Tìm student theo id
• create(Student student): Tạo một student mới
• update(String id, Student studentupate): Cập nhập thông tin student theo id
• remove(String id): Xoá student theo id 

Bước 9: Cài đặt StudentController

package com.codelean.controller;

import com.codelean.service.StudentService;
import com.codelean.service.StudentServiceImpl;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
@RequestMapping("student/")
public class StudentController {

    private StudentService studentService = new StudentServiceImpl();

    @GetMapping("display")
    public ModelAndView listStudent(){
        ModelAndView modelAndView = new ModelAndView("student/list", "students", studentService.findAll());
        return modelAndView;
    }
}

Bước 10: Cài đặt file list.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>List Student</title>
</head>
<body>
<h1>Display Student List</h1>
<table border="1">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
    </tr>
    <th:block th:each="student : ${students}">
        <tr>
            <td th:text="${student.id}"></td>
            <td th:text="${student.name}"></td>
            <td th:text="${student.email}"></td>

        </tr>
    </th:block>
</table>
</body>
</html>

Bước 11: Chạy ứng dụng

http://localhost:8080/student/display

Mã nguồn tham khảo tại: https://github.com/CodeLean-VN/iteration-in-thymeleaf

Trao đổi các vấn đề chưa hiểu tại: Codelean Comminity 

CodeLean.vn