SpringBoot-Thymeleaf使用模板

HTML页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>工具人</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" />
</head>
<body>
<div id="app" class="container" style="margin-bottom:10rem">
    <div class="row justify-content-md-center">
        <div class="col-md-12 alert alert-secondary text-center" role="alert">
            <h1>功能列表</h1>
        </div>
    </div>
    <div class="row justify-content-md-center">
        <div class="col-md-auto font-weight-bolder">
            <ul>
                <li><div>跳转 <a th:href="@{/xxx/config}"><span>信息配置</span></a> 页面</div></li>
                <li><div>跳转 <a th:href="@{/xxx/download}"><span>列表下载</span></a> 页面</div></li>
            </ul>
        </div>
    </div>
</div>

<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script th:src="@{/webjars/popper.js/1.16.0/umd/popper.min.js}"></script>
<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/webjars/vue/vue.min.js}"></script>
<script>
    $(function(){
         var app = new Vue({
            el: '#app',
            data: function () {
                return {

                };
            },
            mounted: function() {

            },
            methods: {

            },
        });
    });
</script>
</body>
</html>

POM依赖

<dependency>
  <groupId>org.webjars</groupId>
  <artifactId>webjars-locator</artifactId>
  <version>0.36</version>
</dependency>

<dependency>
  <groupId>org.webjars</groupId>
  <artifactId>vue</artifactId>
  <version>2.6.11</version>
</dependency>

<dependency>
  <groupId>org.webjars</groupId>
  <artifactId>bootstrap</artifactId>
  <version>4.5.3</version>
</dependency>
posted @ 2022-03-01 16:42  oxy-blogs  阅读(43)  评论(0)  编辑  收藏  举报