记录学习thymeleaf的过程

最新推荐文章于 2021-07-13 13:34:54 发布

weixin_43550933

最新推荐文章于 2021-07-13 13:34:54 发布

阅读量317

点赞数 1

分类专栏： thymeleaf学习文章标签： html intellij idea spring boot

本文链接：https://blog.csdn.net/weixin_43550933/article/details/106734321

版权

thymeleaf学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近刚接触thymeleaf，想记录下自己的学习经历：

#我们要在springboot中使用thymeleaf，首先要做好准备工作：
##1.导入依赖

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

##2.在idea中安装thymeleaf插件
File>>Settings>>Plugins 在应用商店搜索，下载安装完后重启idea
##3.在我们要使用的html页面添加如下代码

<html lang="en" xmlns:th="http://www.thymeleaf.org">

#首先说一说@{}的使用,用于写入url，比如说：导入某个css文件啦，写请求啦

<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">

<form class="form-signin"   th:action="@{/user/login}">

#接下来就是通过小例子来学习怎么使用thymeleaf来获得后台数据，一个简单的登录页面，登录成功跳转，失败给出提示
先附上html和controller主要源码

<form class="form-signin"   th:action="@{/user/login}">
			<img class="mb-4" th:src="@{/img/bootstrap-solid.svg}" alt="" width="72" height="72">
			<h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">Please sign in</h1>
			<p th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
			<input type="text" name="username" class="form-control" required="" autofocus="">
			<input type="password" name="password" class="form-control"   required="">
			<div class="checkbox mb-3">
			</div>
			<button class="btn btn-lg btn-primary btn-block" type="submit" >Sign in</button>
			<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
			<a class="btn btn-sm">中文</a>
			<a class="btn btn-sm">English</a>
		</form>

当我们点击登录时，我们填写的用户名和密码就交给下面的controller处理，符合要求就跳到dashboard.html，否则还在index.html,并显示出提示信息，注意观察以上第四行代码，除了我们熟悉的EL表达式外，还有th:if="${not #strings.isEmpty(msg)}"这句，其作用是只有满足th:if的条件才会显示p标签（我试了下其实写不写if都可以,），而且thymeleaf提供了一些特殊的类供我们使用，如上面的#strings,还有否定词not或！

 @RequestMapping("/user/login")
    public String login(@RequestParam("username")String username,
                        @RequestParam("password")String password,
                        Model model){
        if (!StringUtils.isEmpty(username)&&"123".equals(password)){
            //return "redirect:/main.html";
            return "dashboard";
        }else{
            model.addAttribute("msg","用户名或密码错误");
            return "index";
        }


    }

再回到上面的代码，我们发现return了dashboard或index，而我们页面的位置在templates/dashboard.html或templates/index.html，这是为什么呢？通过查看源码可知，thymeleaf默认的视图解析位置是classpath:/templates/xx.html",所以我们只需要返回xx就行了

@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {

	private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8;

	public static final String DEFAULT_PREFIX = "classpath:/templates/";

	public static final String DEFAULT_SUFFIX = ".html";

当我们运行上面的代码时，发现了一个小问题，我们输入正确，点击登录。跳转到dashboard.html，可是发现地址栏把我们密码泄露了，这里提供两个解决方法：
1.在form表单中把method写为post
2.通过一个假的重定向请求，再为这个重定向请求设置视图对应到dashboard.html，这样地址栏就不会显示密码（开发中经常使用）

 @RequestMapping("/user/login")
    public String login(@RequestParam("username")String username,
                        @RequestParam("password")String password,
                        Model model){
        if (!StringUtils.isEmpty(username)&&"123".equals(password)){
            return "redirect:/main.html";
            
        }else{
            model.addAttribute("msg","用户名或密码错误");
            return "index";
        }


    }

@Configuration
public class MyConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("index");
        registry.addViewController("/main.html").setViewName("dashboard");

    }
    @Bean
    public LocaleResolver localeResolver(){
        return new MyLocaleResolver();
    }
}

注意：这里的main.html不是一个页面，而是一个普通的请求名字，就像上边的/user/login一样，第五行的代码其实就是设置项目的主页

我又来了呢，今天下雨了，蛮凉快的，可是又有点困，凑合学了一点关于fragment东西。
fragment主要用于提高代码的复用性，而且，他还可以传递参数哦。老规矩，还是通过例子来讲解
在很多时候，我们许多页面都有一些共同的地方，如菜单栏啦，导航栏啦等等
在这里插入图片描述
上面两个图的左边和顶部都是一样的。
我们怎么能把这些共同代码抽取出来呢
1.先在templates下见一个common文件夹，然后在文件夹下建一个commom.html,主要内容如下

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 顶部-->
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" ****th:fragment="dingbu****">
    <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#" th:text="${session.username}"></a>
    <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
    <ul class="navbar-nav px-3">
        <li class="nav-item text-nowrap">
            <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">Sign out</a>
        </li>
    </ul>
</nav>
<!--侧边-->
<nav class="col-md-2 d-none d-md-block bg-light sidebar" ****th:fragment="cebian"****>
    <div class="sidebar-sticky">
        <ul class="nav flex-column">
            <li class="nav-item">
                <a th:class="${active=='main'?'nav-link active':'nav-link'}" th:href="@{/m.html}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home">
                        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                        <polyline points="9 22 9 12 15 12 15 22"></polyline>
                    </svg>
                    首页 <span class="sr-only">(current)</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">
                        <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
                        <polyline points="13 2 13 9 20 9"></polyline>
                    </svg>
                    Orders
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart">
                        <circle cx="9" cy="21" r="1"></circle>
                        <circle cx="20" cy="21" r="1"></circle>
                        <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
                    </svg>
                    Products
                </a>
            </li>
            <li class="nav-item">
                <a th:class="${active=='custom'?'nav-link active':'nav-link'}" th:href="@{/customer/admin}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users">
                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                        <circle cx="9" cy="7" r="4"></circle>
                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                        <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                    </svg>
                    员工管理
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart-2">
                        <line x1="18" y1="20" x2="18" y2="10"></line>
                        <line x1="12" y1="20" x2="12" y2="4"></line>
                        <line x1="6" y1="20" x2="6" y2="14"></line>
                    </svg>
                    Reports
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers">
                        <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
                        <polyline points="2 17 12 22 22 17"></polyline>
                        <polyline points="2 12 12 17 22 12"></polyline>
                    </svg>
                    Integrations
                </a>
            </li>
        </ul>

        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
            <span>Saved reports</span>
            <a class="d-flex align-items-center text-muted" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
            </a>
        </h6>
        <ul class="nav flex-column mb-2">
            <li class="nav-item">
                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                        <polyline points="14 2 14 8 20 8"></polyline>
                        <line x1="16" y1="13" x2="8" y2="13"></line>
                        <line x1="16" y1="17" x2="8" y2="17"></line>
                        <polyline points="10 9 9 9 8 9"></polyline>
                    </svg>
                    Current month
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                        <polyline points="14 2 14 8 20 8"></polyline>
                        <line x1="16" y1="13" x2="8" y2="13"></line>
                        <line x1="16" y1="17" x2="8" y2="17"></line>
                        <polyline points="10 9 9 9 8 9"></polyline>
                    </svg>
                    Last quarter
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                        <polyline points="14 2 14 8 20 8"></polyline>
                        <line x1="16" y1="13" x2="8" y2="13"></line>
                        <line x1="16" y1="17" x2="8" y2="17"></line>
                        <polyline points="10 9 9 9 8 9"></polyline>
                    </svg>
                    Social engagement
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                        <polyline points="14 2 14 8 20 8"></polyline>
                        <line x1="16" y1="13" x2="8" y2="13"></line>
                        <line x1="16" y1="17" x2="8" y2="17"></line>
                        <polyline points="10 9 9 9 8 9"></polyline>
                    </svg>
                    Year-end sale
                </a>
            </li>
        </ul>
    </div>
</nav>
</html>

我们可以发现，在两部分代码中，我们都添加了th:fragment属性
2.接下来，我们就可以在其他地方使用他们了，在list.html中

<div th:insert="~{common/common::cebian(active='custom')}"></div>

通过这行代码来调用我们写的菜单栏代码，注意：括号里为他所带的参数，在fragement中可以对参数进行判断等操作，比如在上段代码的17行，当active为main 时，class为nav-link active，我们自己写的css就会让他变得高亮，否则class为nav-link ,不高亮。

又结束了

如果有不对或者需要补充的地方，大家一起交流。

weixin_43550933

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
记录学习thymeleaf的过程

最近刚接触thymeleaf，想记录下自己的学习经历：#我们要在springboot中使用thymeleaf，首先要做好准备工作：##1.导入依赖<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </d
复制链接

扫一扫