Thymeleaf

虽然工作的朋友都建议我使用vue，但我自己还是觉得有必要了解一下Thymeleaf

这里做一个登录的界面吧

首先引入依赖

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

第二部编写配置

# 模板缓存
spring.thymeleaf.cache= false
# 模板编码
spring.thymeleaf.encoding=UTF-8
# 模板样式
spring.thymeleaf.mode = HTML5
# 指定模板页面存放路径
spring.thymeleaf.prefix = classpath:/templates/
# 指定模板页面名称的后缀
spring.thymeleaf.suffix = .html

# 配置国际化文件基础名
spring.messages.basename=i18n.login

 

创建控制类controller

package com.along.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import com.along.entity.emp;
import com.along.service.empService;

@RestController
public class empController {

    @Autowired
    empService empservice;
    
    @GetMapping("/query")
    public List<emp> findAll(){
        return empservice.findAll();
    }
}

创建模板页面，引入静态资源文件

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
    <title>用户登录界面</title>
    <link th:href="@{/login/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/login/css/signin.css}" rel="stylesheet">
</head>
<body class="text-center">
<!--  用户登录form表单 -->
<form class="form-signin">
    <img class="mb-4" th:src="@{/login/img/login.jpg}" width="72" height="72">
    <h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">请登录</h1>
    <input type="text" class="form-control"
           th:placeholder="#{login.username}" required="" autofocus="">
    <input type="password" class="form-control"
           th:placeholder="#{login.password}" required>
    <div class="checkbox mb-3">
        <label>
            <input type="checkbox" value="remember-me"> [[#{login.rememberme}]]
        </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit" th:text="#{login.button}">登录</button>
    <p class="mt-5 mb-3 text-muted">&copy; <span th:text="${currentYear}">2018</span>-<span th:text="${currentYear}+1">2019</span></p>
    <a class="btn btn-sm" th:href="@{/toLoginPage(l='zh_CN')}">中文</a>
    <a class="btn btn-sm" th:href="@{/toLoginPage(l='en_US')}">English</a>
</form>
</body>
</html>

项目目录

 

 这里就不编写多语言国际化文件和区域信息解析器了，有需要的可以找我

运行结果图

 

 

有需要源码的兄弟可以加我v

 

 

 

龙欺

 

posted @ 2020-05-21 23:05  龙欺  阅读(293)  评论(0)    收藏  举报