當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
如何把网上下载的前端页面在Spring Boot中跑起来（CSS，JavaScript，程序运行等路径设置）
生活随笔
收集整理的這篇文章主要介紹了
如何把网上下载的前端页面在Spring Boot中跑起来（CSS，JavaScript，程序运行等路径设置）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
這個功能非常有用，估計(jì)99.99%的java web開發(fā)者都干過，本人是初學(xué)者，特寫這個博客記錄下！
方便本人以后查閱，方便以后進(jìn)行投機(jī)取巧
?
這里使用thymeleaf模板引擎！
?
在網(wǎng)上下載了一個Bootstrap 頁面，如下：
把頁面復(fù)制到Spring Boot中運(yùn)行：
使用thymeleaf模板引擎修改文件路徑后：
這樣就達(dá)到了投機(jī)取巧的功能，
修改下程序運(yùn)行的路徑：
刷新下界面
其中對應(yīng)源碼如下：
login.html
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"><head><!-- Required meta tags --><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>學(xué)生后臺登錄</title><!-- plugins:css --><link rel="stylesheet" th:href="@{/asserts/vendors/iconfonts/mdi/css/materialdesignicons.min.css}" /><link rel="stylesheet" th:href="@{/asserts/vendors/css/vendor.bundle.base.css}" /><!-- endinject --><!-- plugin css for this page --><!-- End plugin css for this page --><!-- inject:css --><link rel="stylesheet" th:href="@{/asserts/css/style.css}" /><!-- endinject --><link rel="shortcut icon" th:href="@{/asserts/images/favicon.png}" /> </head><body><div class="container-scroller"><div class="container-fluid page-body-wrapper full-page-wrapper"><div class="content-wrapper d-flex align-items-center auth"><div class="row w-100"><div class="col-lg-4 mx-auto"><div class="auth-form-light text-left p-5"><div class="brand-logo"><img th:src="@{/asserts/images/logo.svg}"></div><h4>你好! 這里是學(xué)生登錄后臺界面</h4><h6 class="font-weight-light">繼續(xù)登錄.</h6><form class="pt-3"><div class="form-group"><input type="email" class="form-control form-control-lg" id="exampleInputEmail1" placeholder="Username"></div><div class="form-group"><input type="password" class="form-control form-control-lg" id="exampleInputPassword1" placeholder="Password"></div><div class="mt-3"><a class="btn btn-block btn-gradient-primary btn-lg font-weight-medium auth-form-btn" href="../../index.html">登錄</a></div></form></div></div></div></div><!-- content-wrapper ends --></div><!-- page-body-wrapper ends --></div><!-- container-scroller --><!-- plugins:js --><script th:src="@{/asserts/vendors/js/vendor.bundle.base.js}"></script><script th:src="@{/asserts/vendors/js/vendor.bundle.addons.js}"></script><!-- endinject --><!-- inject:js --><script th:src="@{/asserts/js/off-canvas.js}"></script><script th:src="@{/asserts/js/misc.js}"></script><!-- endinject --> </body></html>porn.xml
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>1.5.19.RELEASE</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.loginWebDemo</groupId><artifactId>demo</artifactId><version>0.0.1-SNAPSHOT</version><name>loginWeb</name><description>Demo project for Spring Boot</description><properties><java.version>1.8</java.version><thymeleaf.version>3.0.9.RELEASE</thymeleaf.version><thymeleaf-layout-dialect.version>2.2.2</thymeleaf-layout-dialect.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><!--引入jquery-webjar--><dependency><groupId>org.webjars</groupId><artifactId>jquery</artifactId><version>3.3.1</version></dependency><!--引入bootstrap--><dependency><groupId>org.webjars</groupId><artifactId>bootstrap</artifactId><version>4.0.0</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-jdbc</artifactId></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>runtime</scope></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>?
總結(jié)
以上是生活随笔為你收集整理的如何把网上下载的前端页面在Spring Boot中跑起来（CSS，JavaScript，程序运行等路径设置）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Qt5\MinGw编译器快速解决-QMY
- 下一篇： Spring Boot笔记-发送消息给R