SpringBoot集成Thymeleaf前端模版

時間 2019-11-13

標籤 springboot 集成 thymeleaf 前端模版欄目 Spring 简体版

原文原文鏈接

一、在application.properties配置文件中添加 thymeleaf 的配置信息html

spring.datasource.driverClassName=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/test
spring.datasource.username=root
spring.datasource.password=root

spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
spring.thymeleaf.cache=false

二、在pom.xml中引入thymeleaf 的jar包mysql

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

三、建立PageController並添加index方法web

package com.cppdy.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class PageController {
    
    @RequestMapping("index")
    public String index(Model model) {
        model.addAttribute("name","吹泡泡的魚");
        return "index";
    }

}

四、在src/main/resources下建立templates（默認訪問此文件下的html），並建立index.htmlspring

　在src/main/resources下建立static（默認訪問此文件夾下的靜態文件），在static文件夾建立images文件夾，並放入一張圖片sql

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>SpringBoot</title>
</head>
<body>
    Welcome to cppdy
    <p th:text="${name}"></p>
    <img alt="吹泡泡的魚" th:src="@{/images/logo.jpg}"/>
    <br/>
    <input th:value="${name}"/>
</body>
</html>