SpringBoot 2.2.5 整合Thymeleaf模版引擎,并实现简单的页面操作

前言:该博客主要是记录自己学习的过程,方便以后查看,当然也希望能够帮到大家。

完整代码地址在结尾!!

第一步,在pom.xml加入依赖,如下



    org.springframework.boot
    spring-boot-starter-web



    org.springframework.boot
    spring-boot-starter-thymeleaf



    net.sourceforge.nekohtml
    nekohtml

第二步,配置application.yml,如下

spring:
  thymeleaf:
    cache: false # 关闭thymeleaf缓存,开发时使用,否则没有实时画面
    check-template-location: true # 检查模板是否存在,然后再呈现
    enabled: true  # 启用MVC Thymeleaf视图分辨率
    encoding: utf-8
    mode: HTML # 指定模板编码
    prefix: classpath:/templates # 设置thymeleaf路径默认为src/main/resources/templates
    servlet:
      content-type: text/html # Content-Type值
    suffix: .html # 构建URL时附加查看名称的后缀.

server:
  port: 8082
  servlet:
    context-path: /templates # 在构建URL时的前缀

第三步,在src/main/resources目录下创建templates文件夹,用于放html文件,并创建index.html




    
    Title


访问 Model:
访问列表
id: 姓名: 年龄: 性别:
常用th属性:
th:text:文本替换;
th:utext:支持html的文本替换。
th:value:属性赋值  
th:each:遍历循环元素
th:if:判断条件,类似的还有th:unless,th:switch,th:case
th:insert:代码块引入,类似的还有th:replace,th:include,常用于公共代码块提取的场景
th:fragment:定义代码块,方便被th:insert引用
th:object:声明变量,一般和*{}一起配合使用,达到偷懒的效果。
th:attr:设置标签属性,多个属性可以用逗号分隔

第四步,分别创建类Test,iTestService,TestServiceImpl,TestController用于测试

Test
import lombok.Data;

import java.io.Serializable;

/**
 * @Description:
 * @Author: luoyu
 * @Date: 2020/4/12 下午1:24
 * @Version: 1.0.0
 */
@Data
public class Test implements Serializable {

    private String id;
    private String name;
    private int age;
    private String sex;

}
iTestService
import com.luoyu.thymeleaf.entity.Test;

import java.util.List;

/**
 * @Description:
 * @Author: luoyu
 * @Date: 2020/4/12 下午1:23
 * @Version: 1.0.0
 */
public interface iTestService {

    /**
     * @Author: luoyu
     * @Description: 随机返回一组数据用于展示
     * @Date: 2020/5/10 4:43 下午
     * @Return: java.util.List
     * @Throws:
     */
    List getTest();

}
TestServiceImpl
import com.luoyu.thymeleaf.entity.Test;
import com.luoyu.thymeleaf.service.iTestService;
import org.springframework.stereotype.Service;

import java.util.ArrayList;
import java.util.List;
import java.util.Random;

/**
 * @Description:
 * @Author: luoyu
 * @Date: 2020/4/12 下午1:27
 * @Version: 1.0.0
 */
@Service
public class TestServiceImpl implements iTestService {

    /**
     * @Author: luoyu
     * @Description: 随机返回一组数据用于展示
     * @Date: 2020/5/10 4:43 下午
     * @Return: java.util.List
     * @Throws:
     */
    @Override
    public List getTest() {
        List testList = new ArrayList<>();
        Random random = new Random();
        int count = random.nextInt(30);
        for (int i = 0; i < count; i++) {
            Test test = new Test();
            if(i%3 == 0){
                test.setId("123");
                test.setName("李白");
                test.setAge(18);
                test.setSex("男");
            }else if(i%3 == 1){
                test.setId("456");
                test.setName("韩信");
                test.setAge(20);
                test.setSex("男");
            }else {
                test.setId("789");
                test.setName("露娜");
                test.setAge(16);
                test.setSex("女");
            }
            testList.add(test);
        }
        return testList;
    }

}
TestController
import com.luoyu.thymeleaf.entity.Test;
import com.luoyu.thymeleaf.service.iTestService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

import java.util.List;

/**
 * @Description:
 * @Author: luoyu
 * @Date: 2020/4/11 下午8:17
 * @Version: 1.0.0
 */
@RestController
@RequestMapping("/test")
public class TestController {

    @Autowired
    private iTestService iTestService;

    @GetMapping("/getlist")
    public ModelAndView index(){
        ModelAndView mv = new ModelAndView();
        List testList = iTestService.getTest();
        mv.addObject("list", testList);
        mv.addObject("model", "测试一下模块名");
        mv.setViewName("/index.html");
        return mv;
    }

}

第四步,启动项目,访问:http://localhost:8082/templates/test/getlist,端口号根据配置文件application.yml里面的端口号进行修改,刷新可以随机请求到不同的数据,文中只列举了简单的交互方式,还有各种复杂好玩的方式,有需要的可以自行百度了解

完整代码地址:https://github.com/Jinhx128/springboot-demo
注:此工程包含多个module,本文所用代码均在thymeleaf-demo模块下

后记:本次分享到此结束,本人水平有限,难免有错误或遗漏之处,望大家指正和谅解,欢迎评论留言。

你可能感兴趣的:(SpringBoot 2.2.5 整合Thymeleaf模版引擎,并实现简单的页面操作)