新建Spring Thymeleaf项目

2021/9/18 23:35:02

编程Tag： 页面 html spring static 新建 Thymeleaf

本文主要是介绍新建Spring Thymeleaf项目，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

文章目录

- 新建Spring Thymeleaf项目
- - 通过IDE新建项目
  - 添加maven依赖
  - 添加thymeleaf的html页面。
  - - 创建静态页面-static
    - 创建动态页面-templates
  - 新建Controller
  - 配置端口号-默认8080
  - 执行代码
  - 在浏览器中访问
  - 项目地址
  - 参考

新建Spring Thymeleaf项目

如果你想快速的搭建一个前后端一体的项目用于学习http（最好有点Java基础），那么你可以通过IDE(非社区版)来创建Spring项目，并通过项目中自带的Tomcat搭建服务，再通过自带的Thymeleaf来创建Web项目。

具体流程如下：

通过IDE新建项目

File --> New --> Project --> 选择Spring Initializr，Next --> 填写信息，选择Java版本，Next -->
选择Web，选择Spring Web，Next --> 填写项目信息，Finish。

在这里插入图片描述

添加maven依赖

打开项目根目录下的pom.xml文件，添加thymeleaf所需的maven依赖:

<!--添加static和templates的依赖-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

修改完maven依赖后别忘了重新Reload下maven依赖。

添加thymeleaf的html页面。

可以看到resource目录下有static和templates两个目录。static下面放是静态页面，templates目录下放的是动态页面。

创建静态页面-static

我们创建先一个静态页面static/static.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>这是一个静态页面 可以直接访问!</h2>
</body>
</html>

它的访问地址是http://localhost:8201/static.html，不过需要我们启动服务之后才能访问。

创建动态页面-templates

接着我们创建一个动态页面。

先在resource目录下新建application.yml配置文件，同时添加配置，为的指明动态动态html文件的路径。配置如下：

  spring:
    thymeleaf:
        prefix: classpath:/templates/

接着创建html文件templates/index.html：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Spring Boot新建的HTML页面</title>
</head>
<body>
<h1>Hello Spring Boot!!!</h1>

<!-- 使用WebController#index方法中传递的参数 -->
<div>
    <p th:text="${value1}"></p>
    <p th:text="${value2}"></p>
</div>

<div>
    <p>猫了个咪</p>
</div>

<script>
    <!-- 这里可以写js代码 -->
</script>
</body>
</html>

新建Controller

动态的html文件创建好了，要想访问动态页面，还需要对应的Controller类中的方法提供支持。具体如下：

1、新建一个Java类（名字随便起，不过一般习惯是XXXController），在类名顶部添加@Controller依赖即可。

2、新建一个方法，方法名字随便起，方法上方需要添加@RequestMapping("相对路径")注解，方法的返回值对应的是动态页面的名称。

@Controller
public class WebController {
    
    @RequestMapping("/index")
    public String index(Model model, HashMap<String, Object> map) {
        model.addAttribute("value1", "欢迎欢迎, 热烈欢迎");
        map.put("value2", "欢迎进入HTML页面");     
        return "index";// index.xml
    }
}

配置端口号-默认8080

在application.properties中添加配置，增加spring.application.name和server.port：

spring.application.name=spring-thymeleaf
server.port=8201

这一步可以省略，默认端口号为8080，这里我们配置的端口号为8201.

执行代码

一切准备就绪后，Run --> Run ThymeleafApplication即可运行项目，或者点击顶部工具类的Run按钮。

项目成功运行后，Run面板会有下图所示的log：

在这里插入图片描述

在浏览器中访问

访问静态页面：
http://localhost:8201/static.html

访问动态页面首页
http://localhost:8201/index

效果如下：
在这里插入图片描述

至此大功告成。

项目地址

tinytongtong / spring-thymeleaf

参考

https://dzone.com/articles/introduction-to-thymeleaf-in-spring-boot

这篇关于新建Spring Thymeleaf项目的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

新建Spring Thymeleaf项目

文章目录

新建Spring Thymeleaf项目

通过IDE新建项目

添加maven依赖

添加thymeleaf的html页面。

创建静态页面-static

创建动态页面-templates

新建Controller

配置端口号-默认8080

执行代码

在浏览器中访问

项目地址

参考

相关编程文章