Spring Boot 学习笔记--整合Thymeleaf

1.新建Spring Boot项目

添加spring-boot-starter-thymeleaf依赖

1 <dependency>
2     <groupId>org.springframework.boot</groupId>
3     <artifactId>spring-boot-starter-thymeleaf</artifactId>
4 </dependency>

2.添加静态文件

根据spring boot默认规则,脚本和样式默认都放在src/main/resources/static下,我这里引入的metro-bootstrap-master(一个开源的模板)

结构如图所示:

 

3.演示html页面

根据spring boot默认规则,页面放置在src/main/resources/templates下,也可以在application.properties自定义路径。

 

 1 ########################################################
 2 ###THYMELEAF (ThymeleafAutoConfiguration)
 3 ########################################################
 4 #spring.thymeleaf.prefix=classpath:/templates/
 5 #spring.thymeleaf.suffix=.html
 6 #spring.thymeleaf.mode=HTML5
 7 #spring.thymeleaf.encoding=UTF-8
 8 #spring.thymeleaf.content-type=text/html
 9 # set to false for hot refresh
10 
11 spring.thymeleaf.cache=false

 

 

具体html代码如下:

<html xmlns:th="http://www.thymeleaf.org"><head><meta content="text/html;charset=utf-8" /><meta http-equiv="x-ua-compatible" content="IE=edge"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link th:href="@{css/metro-bootstrap.min.css}" rel="stylesheet"/><link th:href="@{css/font-awesome.min.css}" rel="stylesheet"/><link th:href="@{css/docs.css}" rel="stylesheet"/></head><body><div class="grid"><div class="row col-md-12"><div class="tile tile-clouds col-md-3 col-xs-12"  ><h1 th:text="${s[0]}"></h1></div><div class="tile tile-emerald col-md-3 col-xs-12"  ><h1 th:text="${s[1]}"></h1></div><div class="tile tile-turquoise col-md-3 col-xs-12"  ><h1 th:text="${s[2]}"></h1></div><div class="tile tile-amethyst col-md-3 col-xs-12"  ><h1 th:text="${s[3]}"></h1></div></div></div></body><script th:src="@{js/jQuery/jquery.min.js}"></script><script th:src="@{js/bootstrap/bootstrap.min.js}"></script><script th:src="@{js/metro-docs.js}"></script><script th:inline="javascript">var s = [[${s}]];console.log(s);</script>
</html>

4.视图和数据

新建一个controller,新建一个数组返回数据,代码如下:

package com.haq.web;import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;@Controller
@RequestMapping("/")
public class SampleController {
@RequestMapping("/index")public String index(Model model){String[] s = {"我是1","我是2","我是3","我是4"};model.addAttribute("s",s);return "index";}}

5.运行

启动spring boot,返回http://127.0.0.1:8080/index,效果如图所示:

后记:欢迎大家交流学习,有问题还望多多指教,O(∩_∩)O谢谢。

 

转载于:https://www.cnblogs.com/floay/p/6483553.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/417228.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mongo php update 写法,mongodb update 字符 操作

下面常用的update操作&#xff0c;用mongodb2.6.3版本测试的&#xff0c;官方发布的稳定版本2.4&#xff0c;建议用稳定版。 一&#xff0c;upsert表示如果有数据就不插入&#xff0c;没数据就插入 1&#xff0c;命令行下 db.peoples.update( //查找name等于tank的用户... { na…

js 打印

window.print(); 打印隐藏部分<style type"text/css" media"print">.noprint{display:none;}</style>

oracle 增加一个新分区,oracle 11g 新增分区

oracle 11g新增了间隔分区、虚拟列分区和引用分区。详细的介绍请查看官方文件&#xff1a;1. 间隔分区间隔分区是范围分区的一种扩展。在引入间隔分区之前&#xff0c;DBA 需要显式定义每个分区的值范围&#xff0c;随着分区值的增长可用分区会逐渐减少直到没有可使用的分区为止…

jquery.uploadify flash IE6上传无效

类似$().window&#xff0c;以div方式打开弹窗&#xff0c;弹窗中iframe中就是上传页面&#xff0c;页面加载时就加载上传页面会产生这个问题。解决办法&#xff1a;打开弹窗后再给iframe赋src值。

如何手动修改oracle表空间,ORACLE数据库创建和修改表空间

-建立表空间(oracle中的tablespace(表空间))CREATE TABLESPACE data01DATAFILE D:\oracle\ora92\oradata\db\DATA01.dbf SIZE 200MUNIFORM SIZE 128k;#指定区尺寸为128k,如不指定&#xff0c;区尺寸默认为64k--建立临时表空间CREATE TEMPORARY TABLESPACE temp_dataTEMPFILE D:…

dexpler的使用方法

https://www.abartel.net/dexpler/转载于:https://www.cnblogs.com/yuqt/p/6490848.html

jquery.uploadify参数

uploadify函数的参数为json格式&#xff0c;可以对json对象的key值的修改来进行自定义的设置&#xff0c;如multi设置为true或false来控制是否可以进行多文件上传&#xff0c;下面就来介绍下这些key值的意思&#xff1a; uploader &#xff1a; uploadify.swf 文件的相对路径&a…

Kaggle入门篇

Kaggle入门篇转载于:https://www.cnblogs.com/akrusher/articles/6492096.html

超链接js点击后页面向上滚动问题解决

超链接js点击后页面向上滚动问题解决 <a href"#" οnclick"fun();return false;"></a>

Oracle数据导入要多久,oracle数据库备份导入要注意的几个问题

oracle数据库备份导入要注意的几个问题(1)oracle数据库备份的导入对数据库的版本有要求&#xff0c;也即源数据库(导出产生备份的数据库)的版本要和目标数据库(导入数据库)的版本一致&#xff0c;否则可能导致导入失败。(2)备份中的用户名(数据库导出时所使用的用户)和导入数据…

BZOJ 4241 分块

思路&#xff1a; 考虑分块 f[i][j]表示从第i块开头到j的最大值 cnt[i][j]表示从第i块开始到序列末尾j出现了多少次 边角余料处理一下就好啦~ //By SiriusRen #include <cmath> #include <cstdio> #include <algorithm> using namespace std; const int …

common lisp 学习第一天 初步接触

http://common-lisp.net/project/lispbox/lispbox 集成了Emacs、Slime和CCL。解压后直接运行lispbox.bat即可//(quote x) 返回 x&#xff0c;我们简记为 x> (quote x)x> xx//(atom x) 当 x 是一个原子或者空表时返回原子 t&#xff0c;否则返回NIL。在 Common Lisp 中我们…

oracle数据泵导入分区表,数据泵导入分区表统计信息报错(七)

其实问题的引出是由于出现第一篇文章中描述的问题&#xff0c;不过随着问题的深入研究&#xff0c;挖掘出了一些隐藏的很深的问题&#xff0c;不过问题的研究也慢慢脱离了原本的问题。在解决了表统计信息锁定的问题后&#xff0c;在回过头看看导致第一篇文章中错误的具体原因。…

django ORM创建数据库方法

1、指定连接pymysql(python3.x) 先配置_init_.py import pymysqlpymysql.install_as_MySQLdb() 2、配置连接mysql文件信息 settings.py DATABASES {default: {ENGINE: django.db.backends.mysql, NAME: django_orm, #你的数据库名称USER: root, #你的数据库用户名PASSWOR…

common lisp 学习第二天 简单数据库操作

//简单数据操作单一记录> (defun make-cd (title artist rating ripped)(list :title title :artist artist :rating rating :ripped ripped))make-cd> (make-cd "Roses" "Kathy Mattea" 7 t)(:TITLE "Roses" :ARTIST "Kathy Mattea&…

通过配置文件登陆有密码的mysql不需要输入密码

下面方式通过配置文件登陆有密码的mysql&#xff0c;不需要输入密码。 &#xff08;1&#xff09;先配置一个.my.cnf配置文件。 [client]userxxxxpasswordxxxxxx (2)直接登陆mysql服务 [rootlocalhost scripts]# HOME/var/lib/zabbix mysql 直接登陆&#xff0c;这里的HOME一…

并联机械臂的pid控制Matlab,机械手PID控制(chap2_1ctrl.m)

【实例简介】【实例截图】【核心代码】function [sys,x0,str,ts] spacemodel(t,x,u,flag)switch flag,case 0,[sys,x0,str,ts]mdlInitializeSizes;case 3,sysmdlOutputs(t,x,u);case {2,4,9}sys[];otherwiseerror([Unhandled flag ,num2str(flag)]);endfunction [sys,x0,str,…

common lisp 学习第三天 函数、注释

//函数定义(defun name(parameter*函数参数)"Optional documentation string.函数描述"body-form*函数体)函数名称风格frob-widget函数描述&#xff1a;(documentation foo function)获取foo函数的描述函数体由任意数量的lisp表达式构成&#xff0c;在函数被调用时依…

【计算机视觉】基于OpenCV的人脸识别

一点背景知识 OpenCV 是一个开源的计算机视觉和机器学习库。它包含成千上万优化过的算法&#xff0c;为各种计算机视觉应用提供了一个通用工具包。根据这个项目的关于页面&#xff0c;OpenCV 已被广泛运用在各种项目上&#xff0c;从谷歌街景的图片拼接&#xff0c;到交互艺术展…

Mysql显示创建表的sql语句

show create table 表名 返回 create table A( ……