spring boot+thymeleaf+bootstrap实现后台管理系统界面

下面是关于“spring boot+thymeleaf+bootstrap实现后台管理系统界面”的攻略：

准备工作

首先，在开始实现后台管理系统界面之前，需要先进行一些准备工作。

环境配置

可以使用任意的IDE工具，例如Intellij IDEA、Eclipse等。此外，还需要确保以下环境已经配置好：

JDK1.8及以上
Maven3及以上
MySQL5.6及以上

技术栈

为了实现后台管理系统界面，我们将使用以下技术栈：

Spring Boot：快速构建Web应用程序的框架，可以帮助我们轻松地创建REST服务和Web应用程序。
Thymeleaf：一种模板引擎，可以将页面上的数据和渲染逻辑分离开来。
Bootstrap：一种前端框架，提供了许多组件和样式，可以方便地构建样式良好的界面。

创建Spring Boot项目

首先，我们需要创建一个新的Spring Boot项目。可以使用Intellij IDEA来快速创建一个空的Spring Boot项目。

在创建新项目时，需要选择Spring Initializr模板。然后需要输入项目的基本信息并选择所需的依赖项，例如Web、Thymeleaf和MySQL等。创建完成后，可以得到一个基本的Spring Boot项目。

集成Thymeleaf

接下来，我们将配置Thymeleaf。

在pom.xml文件中添加以下依赖：

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

在application.properties文件中添加以下配置：

# Thymeleaf自动刷新
spring.thymeleaf.cache=false

这里设置Thymeleaf的cache属性为false，以便在开发过程中自动刷新模板。

集成Bootstrap

接下来，我们将集成Bootstrap。

在pom.xml文件中添加以下依赖：

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>4.3.1</version>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.4.1</version>
</dependency>

通过WebJars将Bootstrap和jQuery添加到项目中。

创建HTML页面

现在，我们可以开始创建HTML页面了。在src/main/resources/templates目录下创建一个index.html文件。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap后台管理系统</title>
    <link rel="stylesheet" href="/webjars/bootstrap/4.3.1/css/bootstrap.min.css"/>
    <script src="/webjars/jquery/3.4.1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-2">
                <!-- 侧边栏 -->
                <ul class="list-group">
                    <li class="list-group-item active">Dashboard</li>
                    <li class="list-group-item">商品管理</li>
                    <li class="list-group-item">订单管理</li>
                    <li class="list-group-item">客户管理</li>
                </ul>
            </div>
            <div class="col-md-10">
                <!-- 主要内容 -->
                <h1>欢迎使用Bootstrap后台管理系统</h1>
                <p>这是一个演示版后台管理系统界面</p>
            </div>
        </div>
    </div>
</body>
</html>

这个页面使用了Bootstrap的两栏布局，并添加了一个侧边栏，用于显示导航。这个页面也包括了一些占位符文本和样式，这些将在后面用于下一步的示例。

创建后端逻辑

现在，我们需要添加一些后端逻辑。在src/main/java下创建一个package，并在其中添加一个Spring Boot应用程序类。

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }

}

这个类使用了Spring Boot的@SpringBootApplication注解，该注解开启了Spring Boot的自动配置功能。它还包含了一个main方法，该方法运行Spring Boot应用程序。

接下来，我们需要创建一个Controller类。在同一package中，创建一个IndexController类。

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class IndexController {

    @RequestMapping("/")
    public String index(ModelMap model) {
        return "index";
    }
}

这个Controller类使用了Spring的@Controller注解，并具有一个@RequestMapping注解的方法。该方法返回字符串“index”，这将映射到我们之前创建的index.html文件。可以看到，这个方法也包括了一个ModelMap对象，它将在后面的示例中用于传递数据到模板。

创建示例

在完成前面的步骤后，我们现在可以创建两个示例来演示如何使用Thymeleaf和Bootstrap创建后台管理系统界面。

示例1：包含变量和循环

我们将首先创建一个演示如何在模板中使用Thymeleaf模板变量和循环的示例。

首先，在IndexController中添加以下代码：

@RequestMapping("/list")
public String list(ModelMap model) {
    List<String> users = Arrays.asList("张三", "李四", "王五");
    model.addAttribute("users", users);
    return "list";
}

这个方法将返回字符串“list”，然后将创建一个用户列表，并使用ModelMap将其传递到list.html模板中。

然后，创建一个list.html模板，代码如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap后台管理系统 - 用户列表</title>
    <link rel="stylesheet" href="/webjars/bootstrap/4.3.1/css/bootstrap.min.css"/>
    <script src="/webjars/jquery/3.4.1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <!-- 侧边栏 -->
            <ul class="list-group">
                <li class="list-group-item active">Dashboard</li>
                <li class="list-group-item">用户管理</li>
                <li class="list-group-item">订单管理</li>
                <li class="list-group-item">客户管理</li>
            </ul>
        </div>
        <div class="col-md-10">
            <!-- 主要内容 -->
            <h1>用户列表</h1>
            <table class="table">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                </tr>
                </thead>
                <tbody>
                <!-- 循环用户列表 -->
                <tr th:each="user, index : ${users}">
                    <td th:text="${index.index + 1}"></td>
                    <td th:text="${user}"></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>

这个模板使用了Bootstrap的表格组件，并使用了Thymeleaf的循环结构，以显示传递到模板中的用户列表。

示例2：包含表单和按钮

接下来，我们将创建一个演示如何在模板中使用表单和按钮的示例。

首先，在IndexController中添加以下代码：

@RequestMapping("/form")
public String form(ModelMap model) {
    return "form";
}

这个方法将返回字符串“form”，则会在form.html模板中显示一个表单。

然后，创建一个form.html模板，代码如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap后台管理系统 - 表单</title>
    <link rel="stylesheet" href="/webjars/bootstrap/4.3.1/css/bootstrap.min.css"/>
    <script src="/webjars/jquery/3.4.1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-2">
                <!-- 侧边栏 -->
                <ul class="list-group">
                    <li class="list-group-item active">Dashboard</li>
                    <li class="list-group-item">用户管理</li>
                    <li class="list-group-item">订单管理</li>
                    <li class="list-group-item">客户管理</li>
                </ul>
            </div>
            <div class="col-md-10">
                <!-- 主要内容 -->
                <h1>表单</h1>
                <form>
                    <div class="form-group">
                        <label for="exampleInputPassword1">密码</label>
                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
                    </div>
                    <button type="submit" class="btn btn-primary">提交</button>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

这个模板使用了Bootstrap的表单组件，并创建了一个包含单个密码字段和一个提交按钮的表单。

至此，我们使用了Thymeleaf和Bootstrap实现了一个漂亮的后台管理系统界面。代码清晰，易于理解和维护，也便于使用不同的风格进行自定义。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：spring boot+thymeleaf+bootstrap实现后台管理系统界面 - Python技术站