SpringBoot之前端文件管理

简介: WebJars能使Maven的依赖管理支持OSS的JavaScript库/CSS库,比如jQuery、Bootstrap等。 (1)添加js或者css库 pom.xml  Xml代码          org.

WebJars能使Maven的依赖管理支持OSS的JavaScript库/CSS库,比如jQuery、Bootstrap等。 

(1)添加js或者css库 
pom.xml 

Xml代码   收藏代码
  1. <dependency>  
  2.     <groupId>org.webjars</groupId>  
  3.     <artifactId>bootstrap</artifactId>  
  4.     <version>3.3.7-1</version>  
  5. </dependency>  
  6. <dependency>  
  7.     <groupId>org.webjars</groupId>  
  8.     <artifactId>jquery</artifactId>  
  9.     <version>3.1.1</version>  
  10. </dependency>  



src/main/resources/static/demo.html 

Html代码   收藏代码
  1. <html>  
  2.     <head>  
  3.         <script src="/webjars/jquery/3.1.1/jquery.min.js"></script>  
  4.         <script src="/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>  
  5.         <title>WebJars Demo</title>  
  6.         <link rel="stylesheet" href="/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css" />  
  7.     </head>  
  8.     <body>  
  9.         <div class="container"><br/>  
  10.             <div class="alert alert-success">  
  11.                 <href="#" class="close" data-dismiss="alert" aria-label="close"</a>  
  12.                 Hello, <strong>WebJars!</strong>  
  13.             </div>  
  14.         </div>  
  15.     </body>  
  16. </html>  



启动应用后可以看到以下log: 

引用
2017-02-09 13:52:48.117  INFO 6188 --- [           main] o.s.w.s.handler.SimpleUrlHandlerMapping  : Mapped URL path [/webjars/**] onto handler of type [class org.springframework.web.servlet.resource.ResourceHttpRequestHandler]



启动应用访问 http://localhost:8080/demo.html 
 

(2)省略版本号 

很少在代码中硬编码版本号,所以需要隐藏它。 

pom.xml添加webjars-locator 
org.springframework.web.servlet.resource.WebJarsResourceResolver 

Java代码   收藏代码
  1. <dependency>  
  2.     <groupId>org.webjars</groupId>  
  3.     <artifactId>webjars-locator</artifactId>  
  4.     <version>0.31</version>  
  5. </dependency>  



src/main/resources/static/demo.html 

引用
<script src="/webjars/jquery/3.1.1/jquery.min.js"></script> 
<script src="/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script> 
<title>WebJars Demo</title> 
<link rel="stylesheet" href="/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css" /> 

-> 

<script src="/webjars/jquery/jquery.min.js"></script> 
<script src="/webjars/bootstrap/js/bootstrap.min.js"></script> 
<title>WebJars Demo</title> 
<link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css" />



启动应用再次访问 http://localhost:8080/demo.html 结果和上边一样。 

引入的开源JavaScript库/CSS库将会以jar的形式被打包进工程! 
spring-boot-demo1-0.0.1-SNAPSHOT.jar\BOOT-INF\lib 

引用
bootstrap-3.3.7-1.jar 
└─ META-INF 
    └─ resources 
        └─ webjars 
            └─ bootstrap 
                └─ 3.3.7-1 
                    ├─ css 
                    |   ├─ bootstrap.min.css 
                    |   ├─ bootstrap.min.css.gz # Gzip文件 
                    ...



引用
jquery-3.1.1.jar 
└─ META-INF 
    └─ resources 
        └─ webjars 
            └─ jquery 
                └─ 3.1.1 
                    ├─ jquery.min.js 
                    ...
目录
相关文章
|
15天前
|
JSON 缓存 前端开发
SpringBoot的 ResponseEntity类讲解(具体讲解返回给前端的一些事情)
本文讲解了SpringBoot中的`ResponseEntity`类,展示了如何使用它来自定义HTTP响应,包括状态码、响应头和响应体,以及如何将图片从MinIO读取并返回给前端。
29 3
|
11天前
|
前端开发 Java 数据库
springBoot:template engine&自定义一个mvc&后端给前端传数据&增删改查 (三)
本文介绍了如何自定义一个 MVC 框架,包括后端向前端传递数据、前后端代理配置、实现增删改查功能以及分页查询。详细展示了代码示例,从配置文件到控制器、服务层和数据访问层的实现,帮助开发者快速理解和应用。
|
1月前
|
机器学习/深度学习 数据采集 JavaScript
ADR智能监测系统源码,系统采用Java开发,基于SpringBoot框架,前端使用Vue,可自动预警药品不良反应
ADR药品不良反应监测系统是一款智能化工具,用于监测和分析药品不良反应。该系统通过收集和分析病历、处方及实验室数据,快速识别潜在不良反应,提升用药安全性。系统采用Java开发,基于SpringBoot框架,前端使用Vue,具备数据采集、清洗、分析等功能模块,并能生成监测报告辅助医务人员决策。通过集成多种数据源并运用机器学习算法,系统可自动预警药品不良反应,有效减少药害事故,保障公众健康。
ADR智能监测系统源码,系统采用Java开发,基于SpringBoot框架,前端使用Vue,可自动预警药品不良反应
|
2月前
|
JavaScript 前端开发 Java
SpringBoot + Vue 前端后分离项目精进版本
这篇文章详细介绍了一个基于SpringBoot + Vue的前后端分离项目的搭建过程,包括前端Vue项目的初始化、依赖安装、页面创建和路由配置,以及后端SpringBoot项目的依赖添加、配置文件修改、代码实现和跨域问题的解决,最后展示了项目运行效果。
SpringBoot + Vue 前端后分离项目精进版本
|
2月前
|
前端开发 IDE Java
"揭秘前端转Java的秘径:SpringBoot Web极速入门,掌握分层解耦艺术,让你的后端代码飞起来,你敢来挑战吗?"
【8月更文挑战第19天】面向前端开发者介绍Spring Boot后端开发,通过简化Spring应用搭建,快速实现Web应用。本文以创建“Hello World”应用为例,展示项目基本结构与运行方式。进而深入探讨三层架构(Controller、Service、DAO)下的分层解耦概念,通过员工信息管理示例,演示各层如何协作及依赖注入的使用,以此提升代码灵活性与可维护性。
45 2
|
2月前
|
前端开发 JavaScript Java
【Azure 应用服务】App Service For Windows 中如何设置代理实现前端静态文件和后端Java Spring Boot Jar包
【Azure 应用服务】App Service For Windows 中如何设置代理实现前端静态文件和后端Java Spring Boot Jar包
|
4月前
|
前端开发 Java 微服务
Spring Boot与微前端架构的集成开发
Spring Boot与微前端架构的集成开发
|
3月前
|
存储 Java Spring
Spring Boot中的应用配置文件管理
Spring Boot中的应用配置文件管理
|
4月前
|
JavaScript 前端开发 Java
基于SpringBoot+Vue+uniapp的在线开放课程的Web前端的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的在线开放课程的Web前端的详细设计和实现(源码+lw+部署文档+讲解等)
|
4月前
|
前端开发 安全 Java
家政系统(用户端)介绍Java18+前端html+后端springboot
家政系统(用户端)介绍Java18+前端html+后端springboot
45 0