如何把网上下载的前端页面在Spring Boot中跑起来（CSS，JavaScript，程序运行等路径设置）

这个功能非常有用，估计99.99%的java web开发者都干过，本人是初学者，特写这个博客记录下！

方便本人以后查阅，方便以后进行投机取巧

这里使用thymeleaf模板引擎！

在网上下载了一个Bootstrap 页面，如下：

把页面复制到Spring Boot中运行：

使用thymeleaf模板引擎修改文件路径后：

这样就达到了投机取巧的功能，

修改下程序运行的路径：

刷新下界面

其中对应源码如下：

<!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>学生后台登录</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>你好! 这里是学生登录后台界面</h4><h6 class="font-weight-light">继续登录.</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>

如何把网上下载的前端页面在Spring Boot中跑起来（CSS，JavaScript，程序运行等路径设置）相关推荐

springboot拦截html页面元素,Spring Boot 中如何使用拦截器（十五）
关于拦截器,大家一定都不陌生,spring boot 中是如何使用拦截器的呢?今天就举个例子,来给大家说明一下,废话不多说,开始撸代码!!! 1.创建一个新的spring boot项目,并引入相应的j ...
web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例企业网站制作...
web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例企业网站制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...
web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例企业网站制作
web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例企业网站制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...
学生HTML个人网页作业作品下载网站设计——大圣娶亲电影(4页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设
HTML5期末大作业:学生HTML个人网页作业作品下载网站设计--大圣娶亲电影(4页) HTML+CSS+JavaScript 学生DW网页设计作业成品作品介绍 1.网页作品简介 :HTML期末大学 ...
HTML大学生动漫网页设计作业源码 ~ 火影忍者动漫7页面带特效带轮播(HTML+CSS+JavaScript)...
HTML大学生动漫网页设计作业源码 ~ 火影忍者动漫7页面带特效带轮播(HTML+CSS+JavaScript) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业 ...
HTML大学生动漫网页设计作业源码 ~ 火影忍者动漫7页面带特效带轮播(HTML+CSS+JavaScript)
HTML大学生动漫网页设计作业源码 ~ 火影忍者动漫7页面带特效带轮播(HTML+CSS+JavaScript) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业 ...
前端页面语言国际化,实现中英切换
之前web项目一直都是中文为主的,现在随着业务的需求,需要将网站语言支持多语言,这个着实给不管是前台还是后台都增加了不小的挑战,因为之前做的时候根本没有考虑多语言的问题,导致很多页面写的不是很灵活,样 ...
vue拦截器刷新登陆页面_Vue + Spring Boot 项目实战（六）：前端路由与登录拦截器-Go语言中文社区...
前言这一篇主要讲前端路由与登录拦截器的实现.放在一起讲是因为我在开发登录拦截器时因为这个路由的问题遇到了很多坑,花费了很长时间,网上的解决方案都不怎么靠谱,综合了好几种办法才最终成功,其实关于这个部 ...
spring官网上下载的所有版本的spring插件
废话不多说,直接上干货,Eclipse4.2到Eclipse4.14.0的所有版本的spring插件:https://pan.baidu.com/s/1UEsTexAILKYZwShMnHeM6A 我 ...

如何把网上下载的前端页面在Spring Boot中跑起来（CSS，JavaScript，程序运行等路径设置）

如何把网上下载的前端页面在Spring Boot中跑起来（CSS，JavaScript，程序运行等路径设置）相关推荐

最新文章

热门文章