SpringBoot-Thymeleaf使用模板
阿新 • • 發佈:2022-03-01
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依賴
作者:oxy-blogs 出處:https://www.cnblogs.com/oxy-blogs/p/15951092.html 宣告:文章如有問題請聯絡本人,侵權必刪,歡迎轉載,但請標明作者與出處<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>