springboot的使用html页面及css、js路径的配置
1. springboot集成 html页面
在pom.xml
文件中增加thymeleaf
的starter引用
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>
springboot项目,在application.yml
配置文件中增加如下配置
spring:thymeleaf:prefix: classpath:/templatessuffix: .htmlcache: false
- prefix
prefix意为前缀 - suffix
suffix意为后缀
如我的页面为hello-world.html,它所在的目录结构就应该为
resource–> templates --> hello-world.html
在controller中,return的值则为 /hello-world
,系统会自动给加上.html
的后缀
然后增加如下controller中就可以访问到hello-world.html
页面了
@Controller
@RequestMapping("/")
public class HelloWorldController {@RequestMapping("hello-world")public String index() {return "/hello-world";}}
2.页面中引用本地js、css文件的路径配置
我的页面中本来都是直接使用的element-ui和vue直接提供的在线js,但是因为页面嵌套会有跨域的问题,所以页面中的js、css都要改为使用本地文件。在网上试了很多的方法,最后使用排除法缩减到最后的方法如下:
在
resource
目录下,创建static
目录,在static
目录下分别创建js
目录和css
目录来存放js文件和css文件。在springboot入口的Application文件中增加WebMvc配置,首先继承
WebMvcConfigurationSupport
类,然后重写addResourceHandlers
方法,在里面增加对/css
路径和/js
路径的映射。public class ApplicationBootStrap extends WebMvcConfigurationSupport {public static void main(String[] args) {SpringApplication.run(ApplicationBootStrap.class, args);}@Overrideprotected void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/css/**").addResourceLocations(ResourceUtils.CLASSPATH_URL_PREFIX + "/static/css/");registry.addResourceHandler("/js/**").addResourceLocations(ResourceUtils.CLASSPATH_URL_PREFIX + "/static/js/");super.addResourceHandlers(registry);}}
页面引用配置
- 1.
html
标签 要增加xmlns:th="http://www.thymeleaf.org"
引用 - 2.
<header>
标签中增加<base th:href="@{/}">
配置 - 3.css引入增加
th:href
配置路径,js引入增加th:src
路径配置。这里要注意link
要有rel="stylesheet"
,script
要有type="text/javascript"
的格式说明,这是规范。
然后就大功造成了。文件内配置如以下代码。
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head><base th:href="@{/}"><meta charset="UTF-8"><!-- import CSS --><link rel="stylesheet" href="../../static/css/index.css" th:href="@{/css/index.css}"/> </head> <body> <div id="app"></div> </body> <!-- import Vue before Element --> <script src="../../static/js/vue-2.6.12.js" th:src="@{/js/vue-2.6.12.js}" type="text/javascript"></script> <!-- import JavaScript --> <script src="../../static/js/index.js" th:src="@{/js/index.js}" type="text/javascript"></script> <script src="../../static/js/jquery1.7.2.min.js" th:src="@{/js/jquery1.7.2.min.js}" type="text/javascript"></script> <script>let vm = new Vue({el: '#app',.....业务代码省略....}) </script> </html>
- 1.
springboot的使用html页面及css、js路径的配置相关推荐
- h5有缓存css,taro H5配置 cdn css js 缓存 hash 配置
1.taro使用详情请参考本https://nervjs.github.io/taro/docs搭建 2.关于文件的配置,在config/index.js添加相关配置 使得pages下面对应的文件夹可 ...
- nginx资源定向 css js路径问题
今天玩玩项目,学学nginx发现还不错,速度还可以,但是CSS JS确无法使用,原来Iginx配置时需要对不同类型的文件配置规则,真是很郁闷,不过想想也还是很有道理.闲暇之际,把配置贴上来. #use ...
- 关于Springboot项目页面中css,js文件加载失败的问题
记录一个刚开始接触Springboot时踩到的小坑.问题如下: 正在写一个登录功能,页面套用了bootstrap的模板,用浏览器打开页面有样式,但是整个项目跑起来的时候跳转的页面就会丢失样式,浏览器控 ...
- HTML期末大学生网页设计作业——奇恩动漫HTML (1页面) HTML+CSS+JS网页设计期末课程大作业
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
- HTML期末大学生网页设计作业——奇恩动漫HTML (1页面) HTML+CSS+JS网页设计期末课程大作业...
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
- HTML期末大学生网页设计作业——奇恩动漫HTML (1页面) HTML CSS JS网页设计期末课程大作业
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
- HTML网页设计期末课程大作业 ~中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码
HTML网页设计期末课程大作业 ~ 中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
- HTML期末大作业—— 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计
HTML期末大作业-- 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感 ...
- HTML期末作业课程设计期末大作业——体育排球5页面带注册HTML+CSS+JS(学生网页设计作业源码)
HTML期末作业课程设计期末大作业--体育排球5页面带注册HTML+CSS+JS(学生网页设计作业源码) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
- HTML期末大作业~ 蓝色版爱宠之家(5个页面)带留言板宠物 学生网页设计作业源码(HTML+CSS+JS)
HTML期末大作业~ 蓝色版爱宠之家(5个页面)带留言板宠物 学生网页设计作业源码(HTML+CSS+JS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
最新文章
- 一文看懂自动驾驶关键技术
- 关于.h .lib .dll的总结
- 玩转GIT系列之【git切换到某个tag之后提示“detached HEAD】
- 连接mysql报错有乱码_连接mysql服务器报错时,出现乱码
- 可输入可下拉的输入选择框
- mysql索引原理传送门_MySQL索引底层实现原理
- HTML5缓存和GPS定位
- matlab 中的元组(cell)
- kotlin版本组件化+mvvm项目架构
- 中国的粮食储备,多的远超你想象,抢粮的人纯粹是傻冒
- GEE开发之Landsat_SR计算地表温度(不推荐)
- 微型计算机硬件系统包括什么,微型计算机的硬件系统包括什么?
- 程序员菜谱3中粥做法
- 游戏开发中的专业术语
- 使用摄像头解析二维码,且可以生成含具体信息的二维码
- 如何区别劳动合同和劳务派遣合同
- 大家都在用的视频音频提取器,免费用!
- 福州大学计算机基础教学与等级考试暂行规定,福州大学计算机基础教学与等级考试暂行规定...
- 干货分享:Totoro 在自动化测试领域的深耕与收获
- html显示在最上面,怎样把div显示在html的最上面?