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




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


CodeLean.vn

Post a Comment

Mới hơn Cũ hơn