使用Thymaleaf技术作为前端整合开发项目流程

后续会在此基础上进行进一步推进，如有不懂之处，在前面SpringBoot文章中有详细介绍。

目录

一.引用依赖

二.配置文件路径

三.新建模板页面

四.引用静态资源

五.新建C层

六.@Controller标签

七.设置页面并测试

八.封装数据并设置页面

---

一.引用依赖

首先创建项目，在创建时引用Thymaleaf依赖。

完成以上步骤则创建好一个新的项目。此时的pom文件中已经引用了依赖。

也可手动添加这些依赖。

<dependencies>
        <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.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>3.0.3</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter-test</artifactId>
            <version>3.0.3</version>
            <scope>test</scope>
        </dependency>
    </dependencies>

项目创建好后，先查看Maven文件使用是否正确，如果正确，继续下一步。

二.配置文件路径

这里使用的.yml文件格式，配置好路径的前缀和后缀，为了后面写的时候简化路径。

spring:
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html

三.新建模板页面

在resources文件下的templates包中新建一个HTML文件，该页面为显示页面，也就是MVC中的V层。

四.引用静态资源

在resources文件下的static包下新建img包和css包。如果新建后发现为static.img或static.css，则需点击文件显示栏的设置，中的Tree Appearance中的Compact Middle Pacages项勾去即可。

图片放在img包中，样式放在css包中。

五.新建C层

在demo包下，新建controller包，在该包下建立页面，简便写法就是包.文件名

六.@Controller标签

返回页面中的内容。需要识别返回的页面，并且进一步识别页面中的内容，所以需要使用该标签。

@Controller
public class index {
    @RequestMapping("/index")   //设置访问路径
    public String index(){       //由于返回的页面路径是个String型，所以这里必须使用String类型返回值，
        return "index";       //因为配置文件中配置好了前缀和后缀，所以这里直接写文件名即可
    }
}

七.设置页面并测试

这里对于图片引用将使用th:src进行引用

<img th:src="@{/img/404.png}">

八.封装数据并设置页面

这里使用ModelAndView类。在这里将控制器方法中处理的结果数据传递到结果页面，也就是把在结果页面上需要的数据放到ModelAndView对象中即可，用来在一个请求过程中传递处理的数据。

ModelAndView.addObject(String attributeName, Object attributeValue)；
modelAndView.setViewName(String ViewName);

addObject方法----键值对形式，在C层根据键去取值，给Model设置，也就是给模型设置。

setViewName方法----给View设置，也就是给页面设置

@RequestMapping("/number")
    public ModelAndView number() {
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.addObject("index", "123456798456123465789");
        modelAndView.setViewName("index");
        return modelAndView;
    }

封装后，在页面进行展示，从中取值

<p th:text="${index}"></p>   //这里写的就是封装时的k值