springboot访问html,js

最新推荐文章于 2024-07-21 11:21:32 发布
最新推荐文章于 2024-07-21 11:21:32 发布
阅读量610 收藏
点赞数
分类专栏： springboot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/changerzhuo_319/article/details/114866808
版权

目标: 前端页面和服务端代码都放在springboot项目中,并通过jar的形式对外提供前后端服务。

环境: springboot  2.1.0.RELEASE

关键点： springboot会有一些默认的静态资源存放目录，且会自动从这些目录中加载解析静态资源，支持的目录如下图所示，我这里使用的static资源目录

1. 在resources目录下创建static目录， 该目录可以存放前端页面需要的一切资源，如：html， js，css， image等资源， 如下图：

2.idea编辑html页面发现不能实时看到效果， 可以修改以下配置看到静态资源的实时效果

2.1 勾选"自动构建项目"

2.2  快捷键"ctrl+shift+alt+/"打开选择面板,选择registry

2.3 勾选如图的第一个选项, 保存后重启idea,就能看到html的实时变动了

 

changerzhuo
关注
专栏目录
SpringBoot项目中访问HTML页面
xyl的博客
04-25 5174
SpringBoot默认的页面映射路径（即模板文件存放的位置）为“classpath:/templates/*.html”。静态文件路径为“classpath://”，其中可以存放JS、CSS等模板共用的静态文件。1、将HTML页面存放在resources/static目录下的访问将HTML页面存放在 resources（资源目录）下的 static 目录中。
在SpringBoot中Java调用JS，实现即配即用API
weixin_38390086的博客
07-03 2075
但是java语言有个特性，必须进行编译，然后才能执行，但是javascript脚本能直接执行，所以我们的每个流程通过js实现核心逻辑，并将js配置到数据库，即可实现即配即用的能力。这样我就可以通过FlowBean的配置在这4个流程中进行调用，并且流程可重复执行，只要配置不一样就会获取不一样的结果。数据校验一般都是给定值，给定校验规则，如果符合要求则校验通过，否在校验不通过抛出异常。以上4个实现对应4个流程，每个流程依赖config配置，我们再定义一个流程配置对象。不知各位元芳怎么看？
SpringBoot项目中如何访问HTML页面
最新发布
nanxun___的博客
07-21 1681
springboot项目启动后，默认会到静态资源 resources->static 目录下查找index.html页面在静态资源路径找不到 index.html 文件，会到 resources->templates 目录下找 index.html 三.用Controller控制层返回任意html页面 1.在pom.xml文件中添加依赖 2.书写Controller层 注解要写@controller而不是@restController，前者用来渲染页面，后者用来返回数据
springboot+css+js+html Demo
01-20
springboot+css+js+html 入门例子，希望能对你提供帮助。
1.Web开发探究
qq_39393387的博客
09-29 213
Web开发探究 接下来呢，我们开始学习SpringBoot与Web开发，从这一章往后，就属于我们实战 部分的内容了； 其实SpringBoot的东西用起来非常简单，因为SpringBoot最大的特点就是自动装配。 使用SpringBoot的步骤： 创建一个SpringBoot应用，选择我们需要的模块，SpringBoot就会默认将我们的需要的模块自动配置好。 手动在配置文件中配置部分配置项目就可以运行起来了。 专注编写业务代码，不需要考虑以前那样一大堆的配置了。 要熟悉掌握开发，之前学习的自动配置的原理
SpringBoot
WinnerBear的博客
01-12 252
什么是SpringBoot SpringBoot是Spring项目中的一个子工程，与我们所熟知的Spring-framework 同属于spring的产品:
springboot html引入js_十分钟带你掌握springboot微服务架构的基本使用
weixin_39820177的博客
11-26 1077
Spring Boot 介绍我们先用1分钟简单了解一下Spring Boot。百科给的定义是：Spring Boot是由Pivotal团队提供的全新框架，其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。通过这种方式，Spring Boot致力于在蓬勃发展的快速应用开发领域(rapid application d...
Spring Boot：企业常用的 Starter以及实现
公众号-老炮说Java
09-27 357
点击上方蓝色字体，选择“标星公众号”优质文章，第一时间送达 关注公众号后台回复pay或mall获取实战项目资料+视频 作者：SimpleWucnblogs.com/SimpleWu/p/...
Springboot访问templates下的html页面，CSS，JS失效
03-02
然而，有时在尝试访问`templates`目录下的HTML页面时，可能会遇到CSS和JavaScript失效的问题。这个问题通常是由于静态资源处理配置不正确或者路径引用不准确导致的。以下是一些可能的原因及解决方案： 1. **静态...
springboot访问vue的html,Springboot中如何访问静态资源
weixin_33800074的博客
07-20 2115
1. application中需要先行的两个配置项1.1 spring.mvc.static-path-pattern这个配置项是告诉springboot，应该以什么样的方式去寻找资源。默认配置为 /* 。换句话说，只有静态资源满足什么样的匹配条件，Spring Boot才会处理静态资源请求比如下面这个配置spring.mvc.static-path-pattern=/soul/*问题1：配置这个...
springboot如何使用thymeleaf模板访问html页面
08-27
下面将详细介绍如何在Spring Boot中设置和使用Thymeleaf访问HTML页面。 首先，我们需要在`pom.xml`文件中引入必要的依赖。Spring Boot的`spring-boot-starter-web`依赖提供了基本的Web支持，而`spring-boot-starter...
SpringBoot页面跳转访问css、js等静态资源引用无效解决.docx
06-03
2. `/static`：这个目录专门用来存放所有可以直接被浏览器访问的静态资源，如JavaScript（js）、CSS样式表（css）、图片（jpg、png等）以及HTML页面。 3. `/templates`：这个目录下的文件不能直接被浏览器访问，它们...
Springboot 实践（7）springboot添加html页面，实现数据库数据的访问
qq_37647812的博客
08-17 2064
Springboot 实践（7）springboot添加html页面，实现数据库数据的访问 1、创建html页面 2、配置导航栏 3、添加datagrid信息栏
springboot-静态文件 js,css,html等
热门推荐
hupoling的专栏
11-14 10万+
 静态页面 spring boot项目只有src目录，没有webapp目录，会将静态访问(html/图片等)映射到其自动配置的静态目录，如下 /static /public /resources /META-INF/resources 比如，在resources建立一个static目录和index.htm静态文件，访问地址http://localhost:8080/ind...
springboot的使用html页面及css、js路径的配置
wejack的专栏
05-12 1万+
1. springboot集成 html页面 在pom.xml文件中增加thymeleaf的starter引用 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> springboot项目，在application.y
SpringBoot2.1.X 访问静态资源（img、html、css、js）
分享我的点点滴滴，在成长路上与你同行！
09-10 1224
一、目录结构 src/main/java：存放代码 src/main/resources static: 存放静态文件，比如 css、js、image, （访问方式 http://localhost:8080/js/main.js） templates:存放静态页面jsp,html,tpl ...
springboot 通过thymeleaf引入静态html页面并引入js、css文件
weixin_41463944的博客
05-16 749
springboot 通过thymeleaf引入静态html页面并引入js、css文件
springboot静态资源html访问,SpringBoot访问html和js等静态资源配置
weixin_36098917的博客
05-30 661
SpringBoo推荐使用thymeleaf模板作用前端页面展示，整体结构如下所示：这里我并没有引入thymeleaf模板，所以页面放在了pages目录下。application.yml配置如下：server:port: 9000context-path: /ssoaddress: sso.serverspring:mvc:static-path-pattern: /**# 默认值为 classp...
spring boot 开发web项目（静态资源 html css js）
ccdok123的专栏
02-09 945
方法一： spring boot 是一个jar, 因此静态资源就不是再存放到webapps中，存放到哪里？ 静态资源存放路径通过WebmvcAtuoConfiguration类-addResourceHandlers()指定: /webjars/ webjars资源地址 WebJars - Web Libraries in Jars 方法二、 spring boot 约定：spring boot 将一些目录结构设置成静态资源存放目录，我们的静态资源直接存放这些目录即可 Resourceprop
springboot访问templates的html并加载html里的js
05-24
要访问Spring Boot中的模板并加载HTML中的JS脚本，可以按照以下步骤进行： 1. 在Spring Boot中配置模板引擎，例如使用Thymeleaf： ``` @Configuration public class WebConfig { @Bean public ViewResolver viewResolver() { ThymeleafViewResolver resolver = new ThymeleafViewResolver(); resolver.setTemplateEngine(templateEngine()); resolver.setCharacterEncoding("UTF-8"); return resolver; } @Bean public SpringTemplateEngine templateEngine() { SpringTemplateEngine engine = new SpringTemplateEngine(); engine.setTemplateResolver(templateResolver()); return engine; } private ITemplateResolver templateResolver() { SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver(); resolver.setPrefix("classpath:/templates/"); resolver.setSuffix(".html"); resolver.setTemplateMode(TemplateMode.HTML); return resolver; } } ``` 2. 在模板HTML文件中引入JS脚本： ``` <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>My Page</title> <script type="text/javascript" src="/js/myScript.js"></script> </head> <body> <h1 th:text="${pageTitle}">Page Title</h1> <p th:text="${pageContent}">Page Content</p> </body> </html> ``` 3. 在Spring Boot中配置静态资源路径，例如JS脚本： ``` @Configuration @EnableWebMvc public class MvcConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/js/**").addResourceLocations("classpath:/static/js/"); } } ``` 4. 现在，可以访问模板HTML页面并加载JS脚本了，例如： ``` http://localhost:8080/myPage ``` 其中，`myPage`是模板HTML文件名，位于`classpath:/templates/`路径下。`myScript.js`是JS脚本文件名，位于`classpath:/static/js/`路径下。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值