SpringBoot整合BootStrap实战

完整攻略：

创建SpringBoot项目

首先，我们需要创建一个SpringBoot项目。打开IDEA，点击“New Project”，选择Spring Initializr，填写项目信息，勾选“Web”和“Thymeleaf”作为依赖，点击“Next”，填写项目的Group和Artifact信息，点击“Finish”创建项目。

引入BootStrap依赖

打开项目的pom.xml文件，加入以下依赖：

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>4.6.0</version>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.6.0</version>
</dependency>

这里我们使用了WebJars来管理BootStrap和jQuery的依赖。在使用WebJars时，我们不需要手动下载和配置这些依赖，只需要在pom.xml中引入即可。

创建一个Controller

我们创建一个UserController来处理用户相关的请求。在UserController中，我们使用Thymeleaf模板引擎来渲染页面。

@Controller
public class UserController {
    @GetMapping("/")
    public String index() {
        return "index";
    }
}

在上述代码中，我们使用@GetMapping注解来将URL映射到index()方法，这个方法返回“index”字符串，表示用Thymeleaf渲染index.html页面。

创建一个Thymeleaf模板

在src/main/resources/templates目录下，创建一个index.html文件，写入以下代码：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Spring Boot with Bootstrap Example</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/4.6.0/css/bootstrap.min.css}">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1 class="text-center">Spring Boot with Bootstrap Example</h1>
        </div>
    </div>
</div>
<script th:src="@{/webjars/jquery/3.6.0/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/4.6.0/js/bootstrap.min.js}"></script>
</body>
</html>

在上述代码中，我们引入了Bootstrap的CSS和JavaScript文件，并使用Thymeleaf的方式来引用WebJars中的文件，这样我们就可以在页面中使用Bootstrap了。

运行项目

现在我们可以运行项目并访问http://localhost:8080/来验证我们的代码是否正常工作。如果一切正常，页面应该会显示出一个带有“Spring Boot with Bootstrap Example”标题的页面。

示例1：整合BootStrap实现表格展示

在上述基础上，我们可以进一步实现BootStrap样式化展示数据。我们创建一个TestController来展示一个包含数据的表格：

@Controller
public class TestController {
    @GetMapping("/table")
    public String table(Model model) {
        List<Map<String, String>> data = new ArrayList<>();
        Map<String, String> map1 = new HashMap<>();
        map1.put("id", "1");
        map1.put("name", "Tom");
        map1.put("age", "20");
        data.add(map1);

        Map<String, String> map2 = new HashMap<>();
        map2.put("id", "2");
        map2.put("name", "Jerry");
        map2.put("age", "21");
        data.add(map2);

        model.addAttribute("data", data);

        return "table";
    }
}

在上述代码中，我们传入了一个包含两个Map的List，每个Map表示一行数据，其中包含id、name和age三个属性。最后，我们通过model.addAttribute方法将数据传递到页面中。

下面是一个包含表格的Thymeleaf模板：

<!DOCTYPE html>
<html xmlns:th="http://thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap Table Example</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/4.6.0/css/bootstrap.min.css}">
</head>
<body>
<div class="container">
    <table class="table">
        <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="item : ${data}">
            <td th:text="${item.id}"></td>
            <td th:text="${item.name}"></td>
            <td th:text="${item.age}"></td>
        </tr>
        </tbody>
    </table>
</div>
<script th:src="@{/webjars/jquery/3.6.0/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/4.6.0/js/bootstrap.min.js}"></script>
</body>
</html>

在上述代码中，我们使用了Bootstrap的表格样式，并使用了Thymeleaf循环遍历数据，并将数据渲染到表格中。

现在，我们可以访问http://localhost:8080/table来查看展示的数据表格。

示例2：整合BootStrap实现表单提交

在上述基础上，我们可以进一步实现BootStrap样式化表单。我们创建一个UserController来处理用户提交的表单，然后返回一个包含Bootstrap样式表单的页面：

@Controller
public class UserController {
    @GetMapping("/form")
    public String form(Model model) {
        model.addAttribute("user", new User());
        return "form";
    }

    @PostMapping("/form")
    public String submitForm(@ModelAttribute User user) {
        return "redirect:/success";
    }
}

在上述代码中，我们通过@GetMapping注解创建了一个form()方法来处理GET请求，向页面中传递了一个新的User对象。然后，我们通过@PostMapping注解创建了一个submitForm()方法来处理POST请求，接收提交的表单数据，并跳转到一个成功页面。

下面是一个包含Bootstrap样式的表单的Thymeleaf模板：

<!DOCTYPE html>
<html xmlns:th="http://thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap Form Example</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/4.6.0/css/bootstrap.min.css}">
</head>
<body>
<div class="container">
    <form th:action="@{/form}" th:object="${user}" method="post">
        <div class="form-group">
            <label for="name">Name:</label>
            <input type="text" th:field="*{name}" class="form-control" id="name" placeholder="Enter name">
        </div>
        <div class="form-group">
            <label for="age">Age:</label>
            <input type="number" th:field="*{age}" class="form-control" id="age" placeholder="Enter age">
        </div>
        <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" th:field="*{email}" class="form-control" id="email" placeholder="Enter email">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>
<script th:src="@{/webjars/jquery/3.6.0/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/4.6.0/js/bootstrap.min.js}"></script>
</body>
</html>

在上述代码中，我们使用了Bootstrap的输入框样式，并使用了Thymeleaf来渲染输入框中的值。在form表单中，我们使用了th:object属性来引用一个名为“user”的对象，并使用了th:field属性来为输入框设置绑定值。

现在，我们可以访问http://localhost:8080/form来查看包含Bootstrap样式的表单，并提交数据查看效果。如果一切正常，应该会跳转到success页面。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：SpringBoot整合BootStrap实战 - Python技术站

SpringBoot整合BootStrap实战

相关文章