SpringBoot 开发使用thymeleaf模板开发html页面

约定不等于承诺〃 2022-05-28 05:22 227阅读 0赞

springboot技术学习 **[https://www.itkc8.com][https_www.itkc8.com]**

建立一个Springboot maven项目。文件目录就如下：

![1-1][]

接下来呢就是pom文件映入相关jar包了。一定要引入thymeleaf。(更多内容看文章最后的github链接,项目已上传至github)

**\[html\]** [view plain][] [copy][view plain]

1.  **<****properties****>**  
2.          **<****project.build.sourceEncoding****>**UTF-8**</****project.build.sourceEncoding****>**  
3.    
4.            
5.          **<****thymeleaf.version****>** 3.0.2.RELEASE **</****thymeleaf.version****>**  
6.          **<****thymeleaf-layout-dialect.version****>** 2.1.1 **</****thymeleaf-layout-dialect.version****>**  
7.      **</****properties****>**  
8.    
9.    
10.   
11.     **<****dependencies****>**  
12.         **<****dependency****>**  
13.             **<****groupId****>**org.springframework.boot**</****groupId****>**  
14.             **<****artifactId****>**spring-boot-starter-web**</****artifactId****>**  
15.         **</****dependency****>**  
16.   
17.         **<****dependency****>**  
18.             **<****groupId****>**org.springframework.boot**</****groupId****>**  
19.             **<****artifactId****>**spring-boot-starter-thymeleaf**</****artifactId****>**  
20.             **<****version****>**1.0.2.RELEASE**</****version****>**  
21.         **</****dependency****>**  
22.     **</****dependencies****>**

接下来就是配置了，在resource文件夹下创建一个application文件配置thymeleaf

![1-2][]

配置完成后开始代码的撰写，首先是controller层，我写了三个方法，首页，跳转，和视图的三种。源码如下：

**\[java\]** [view plain][] [copy][view plain]

1.  **package** com.thymeleaf.controller;  
2.    
3.  **import** org.springframework.stereotype.Controller;  
4.  **import** org.springframework.ui.Model;  
5.  **import** org.springframework.web.bind.annotation.RequestMapping;  
6.    
7.  /\*\* 
8.   \* Created by zhouhaishui on 2017/5/2. 
9.   \*/  
10. @Controller  
11. **public** **class** pageController \{  
12.   
13.     /\*\* 
14.      \* 首页 
15.      \* @return 
16.      \*/  
17.     @RequestMapping("/")  
18.     **public** String page()\{  
19.         **return** "system/index";  
20.     \}  
21.   
22.   
23.     /\*\* 
24.      \* 跳转 
25.      \* @return 
26.      \*/  
27.     @RequestMapping("/redirect")  
28.     **public** String page2()\{  
29.         **return** "redirect/redirect";  
30.     \}  
31.   
32.   
33.     /\*\* 
34.      \*视图 
35.      \* @param model 
36.      \* @return 
37.      \*/  
38.     @RequestMapping("/model")  
39.     **public** String page3(Model model)\{  
40.         model.addAttribute("name","seawater");  
41.         **return** "hello";  
42.     \}  
43. \}

在resource文件夹下按照自己的需要建立文件夹html文件。我这里用改的就三个页面所以就没有那么多啦，大家根据自己的需要去建立。

![1-3][]

然后就运行就可以了。

页面如下：

![2-1][]

![2-3][]

![2-2][]

所谓的不可以跳转是不存在的，只是没有配置对呢。附上项目源码：有兴趣的可以去github上看看这个[thymeleaf][]项目。

当然html中一些写法是需要参考thymeleaf的规则的，这里就不详细描述，可以到[thymeleaf官方网站][thymeleaf 1]查看。

springboot技术学习 **[https://www.itkc8.com][https_www.itkc8.com]**

[https_www.itkc8.com]: https://www.itkc8.com/
[1-1]: /images/20220528/98877cf1ba7c43328bd96ae5ec200080.png
[view plain]: https://blog.csdn.net/zhouseawater/article/details/71082664#
[1-2]: /images/20220528/45fb2eb41b86461b90b87b772bc8ccbb.png
[1-3]: /images/20220528/27f5b625f710499e82658474dfcdbf30.png
[2-1]: /images/20220528/ebbc5c25d4d24341b95e0a9f4929e192.png
[2-3]: /images/20220528/1cf69ead7aa04246a4efeffd63f5e13a.png
[2-2]: /images/20220528/21ab7fe5e2f845c0bbf870fff6a8e62a.png
[thymeleaf]: https://github.com/zhouseawater/thymeleaf
[thymeleaf 1]: http://www.thymeleaf.org/