spring-boot2.0 thymeleaf bootstrap 整合示例

最新推荐文章于 2024-09-28 15:16:57 发布

小桥流水人家jjh

最新推荐文章于 2024-09-28 15:16:57 发布

阅读量1w

点赞数 5

分类专栏： web 文章标签： spring-boot2.0 thymeleaf bootstrap

本文链接：https://blog.csdn.net/u013506207/article/details/82354970

版权

web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

spring-boot2.0 thymeleaf bootstrap 整合示例

本文主要讲述如何结合在springboot项目中结合thymeleaf和bootstrap。最后会把项目的下载地址放出来。

先看看最终效果：

效果看完之后，有木有心动，接下来我们一起自己动手打造一个。

新建项目

首先在idea或者eclipse(STS)中新建springboot项目，在选择依赖（Dependences）时引入web和thymeleaf，如果忘记了也没关系，后面给出的pom.xml里面有完整的依赖，直接拷贝到自己项目的pom.xml即可。

引入需要的依赖

在pom.xml加入以下依赖：
1 引入bootstrap：

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>3.3.5</version>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.1.1</version>
</dependency>

2 引入nekohtml解除html严格语法限制：

<dependency>
    <groupId>net.sourceforge.nekohtml</groupId>
    <artifactId>nekohtml</artifactId>
</dependency>

如果按以上步骤做完，pom.xml中的所有依赖的内容如下，如果自己新建项目有异常的直接复制以下到自己的pom.xml中：

<dependencies>
 <!--引入thymeleaf-->
 <dependency>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-thymeleaf</artifactId>
 </dependency>
 <!--解除HTML严格语法-->
 <dependency>
     <groupId>net.sourceforge.nekohtml</groupId>
     <artifactId>nekohtml</artifactId>
 </dependency>

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

 <!--bootstrap-->
 <!-- 在springboot中集成bootstrap https://blog.csdn.net/sinat_24048051/article/details/77531834-->
 <dependency>
     <groupId>org.webjars</groupId>
     <artifactId>bootstrap</artifactId>
     <version>3.3.5</version>
 </dependency>
 <dependency>
     <groupId>org.webjars</groupId>
     <artifactId>jquery</artifactId>
     <version>3.1.1</version>
 </dependency>

 <dependency>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-test</artifactId>
     <scope>test</scope>
 </dependency>
</dependencies>

编辑文件

下面我们将新建需要用到的3个文件，模拟真实开发过程中mvc这块内容。
需要新建的文件有实体类 Article.java，控制器 SiteController.java，页面 index.html。
文件结构如下：
项目结构

Article

首先在项目的 src\main\java\com 目录下新建model文件夹用以存放需要的所有实体类，然后在model文件夹中新建实体类Article.java，内容如下：

public class Article {

    private String title;
    private String content;
    private String url;

    get/set ... //省略
}

SiteController

接着我们需要新建一个controller作为我们测试要访问的controller，这个controller利用thymeleaf将数据渲染到页面。
在项目的 src\main\java\com 路径下新建一个包，包名为 controller 存放所有的控制器；接着在这个包下面新建SiteController.java，内容如下：

@Controller
public class SiteController {

    @RequestMapping("/")
    public String index(Model model) {
        ArrayList<Article> list = new ArrayList<>();
        list.add(new Article("Async：简洁优雅的异步之道","在异步处理方案中，目前最为简洁优雅的便是async函数（以下简称A函数）。","www.baidu.com"));
        list.add(new Article("H5 前端性能测试实践","H5 页面发版灵活，轻量，又具有跨平台的特性，在业务上有很多应用场景。","www.baidu.com"));
        list.add(new Article("学习Python的建议","Python是最容易入门的编程语言。","www.baidu.com"));
        model.addAttribute("articleList",list);
        return "index";
    }

}

index.html

这个文件主要用以呈现最终的页面效果，主要内容来源于bootsrap官网给出的demo，在文件夹 bootstrap-3.3.7\docs\examples\jumbotron路径下，同学们可以前往官网下载，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <!--https://blog.csdn.net/sinat_24048051/article/details/77531834-->
    <script src="webjars/jquery/3.1.1/jquery.min.js"></script>
    <script src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="webjars/bootstrap/3.3.5/css/bootstrap.min.css" />
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Project name</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <form class="navbar-form navbar-right">
                    <div class="form-group">
                        <input type="text" placeholder="Email" class="form-control">
                    </div>
                    <div class="form-group">
                        <input type="password" placeholder="Password" class="form-control">
                    </div>
                    <button type="submit" class="btn btn-success">Sign in</button>
                </form>
            </div><!--/.navbar-collapse -->
        </div>
    </nav>

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
        <div class="container">
            <h1>Hello, world!</h1>
            <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
            <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
        </div>
    </div>

    <div class="container">
        <!-- Example row of columns -->
        <div class="row">
            <div class="col-md-4" th:each="article:${articleList}">
                <h2 th:text="${article.title}">Heading</h2>
                <p th:text="${article.content}">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                <p><a class="btn btn-default" th:href="${'https://'+article.url}" role="button">View details &raquo;</a></p>
            </div>
        </div>

        <hr>

        <footer>
            <p>&copy; 2016 Company, Inc.</p>
        </footer>
    </div> <!-- /container -->
</body>
</html>

其中主要注意的一点是bootstrap样式文件的引入是使用如下形式：

<script src="webjars/......"></script>

而thymeleaf主要体现在下面这几段：

<div class="col-md-4" th:each="article:${articleList}">
    <h2 th:text="${article.title}">Heading</h2>
    <p th:text="${article.content}">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
    <p><a class="btn btn-default" th:href="${'https://'+article.url}" role="button">View details &raquo;</a></p>
</div>