SpringBoot静态资源整合Bootstrap(十)下

简介: SpringBoot静态资源整合Bootstrap(十)

二.三 测试验证


二.三.一 查询页面


175d9398080782aa30edcf6ab24a8b84.png


二.三.二 添加验证


dfba39ccda3755cf051e2be8536e2f08.png


c9e4daf05c2ce0c2a3aa75b75e3d2aba.png


二.三.三 修改验证


4ffb126790022510b9afc519399e2965.png


95350c6e9e8c6b7b9b0fe6a532ebe24d.png


二.三.四 删除验证


db14be08ef7a3bd346154289f03d8051.png


e2f5415efd497a4dde520ca173c88293.png


SpringBoot 整合 Bootstrap,一个基本的页面处理。


三. 采用 WebJars 引入资源


上面是在 static 目录下的 plugins 目录下,将前端常用的 框架包放置进去, 是一个又一个的 css js 文件。


如果能将 web前端资源(js,css等)打成jar包文件,然后借助Maven工具,以jar包形式对web前端资源进行统一依赖管理,

保证这些Web资源版本唯一性, 这样就太好了。


是有这样的工具的,叫做 WebJars


官网: https://www.webjars.org/


1d30b40dfa0b323cfd06afa273c36736.png


放置了常见的资源框架。


三.一 添加资源依赖


在pom.xml 中添加依赖


  <!--添加一个webjar jquery-->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.5.1</version>
        </dependency>
        <!--引入bootstrap-->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>3.4.1</version>
        </dependency>


caec1cd067b9e9f51a851f67427050fe.png


三.二 index.html 中引用替换


添加了相应的依赖的话,用 webjars 进行引用,没有的话,还是原先的引用方式


   <link rel="StyleSheet" href="webjars/bootstrap/3.4.1/css/bootstrap.css" type="text/css">
    <link rel="StyleSheet" href="static/plugins/bootstrap-table/bootstrap-table.min.css" type="text/css" />
    <link rel="StyleSheet" href="static/plugins/bootstrap-select/bootstrap-select.min.css" type="text/css" />
    <link rel="StyleSheet" href="static/plugins/font-awesome/css/font-awesome.min.css" type="text/css">
    <link rel="StyleSheet" href="static/plugins/flavr/flavr.css" type="text/css" />
    <link rel="StyleSheet" href="static/plugins/bootstrap-table/bootstrap-table.min.css" type="text/css" />
    <link rel="StyleSheet" href="static/css/common/common.css" type="text/css" />


bootstrap 和 jquery 用 webjars 的引用,其他的仍然有 static/plugins 的方式进行引用。


<script type="text/javascript" src="webjars/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript" src="webjars/bootstrap/3.4.1/js/bootstrap.js"></script>
<script type="text/javascript" src="static/plugins/bootstrap-table/bootstrap-table.js"></script>
<script type="text/javascript" src="static/plugins/bootstrap-select/bootstrap-select.min.js"></script>
<script type="text/javascript" src="static/plugins/flavr/flavr.min.js"></script>
<script type="text/javascript" src="index.js"></script>


功能操作是一样的,没有受到影响。


本章节的代码放置在 github 上:


https://github.com/yuejianli/springboot/tree/develop/StaticBootstrap


谢谢您的观看,如果喜欢,请关注我,再次感谢 !!!

相关文章
|
JavaScript 前端开发 Java
SpringBoot之静态资源规则与定制化
SpringBoot之静态资源规则与定制化
476 1
|
存储 前端开发 Java
Springboot静态资源映射及文件映射
在Spring Boot项目中,为了解决前端访问后端存储的图片问题,起初尝试通过静态资源映射实现,但发现这种方式仅能访问打包时已存在的文件。对于动态上传的图片(如头像),需采用资源映射配置,将特定路径映射到服务器上的文件夹,确保新上传的图片能即时访问。例如,通过`addResourceHandler(&quot;/img/**&quot;).addResourceLocations(&quot;file:E:\\myProject\\forum_server\\&quot;)`配置,使前端可通过URL直接访问图片。
1054 0
Springboot静态资源映射及文件映射
|
JavaScript Java Maven
【SpringBoot(二)】带你认识Yaml配置文件类型、SpringMVC的资源访问路径 和 静态资源配置的原理!
SpringBoot专栏第二章,从本章开始正式进入SpringBoot的WEB阶段开发,本章先带你认识yaml配置文件和资源的路径配置原理,以方便在后面的文章中打下基础
783 4
|
SQL 前端开发 Java
springboot+bootstrap实现图书商城管理(大三下学期课程设计)
这篇文章是作者在CSDN上记录的自己的课程设计过程,详细描述了使用Spring Boot和Bootstrap框架实现的图书商城管理项目,包括了顾客端和商家端的功能要求、技术参数、设计要求、运行环境、技术要求以及开发过程中遇到的一些问题和解决办法。
springboot+bootstrap实现图书商城管理(大三下学期课程设计)
springboot静态资源目录访问,及自定义静态资源路径,index页面的访问
本文介绍了Spring Boot中静态资源的访问位置、如何进行静态资源访问测试、自定义静态资源路径和静态资源请求映射,以及如何处理自定义静态资源映射对index页面访问的影响。提供了两种解决方案:取消自定义静态资源映射或编写Controller来截获index.html的请求并重定向。
springboot静态资源目录访问,及自定义静态资源路径,index页面的访问
|
Java 数据库连接 数据库
springboot启动配置文件-bootstrap.yml常用基本配置
以上是一些常用的基本配置项,在实际应用中可能会根据需求有所变化。通过合理配置 `bootstrap.yml`文件,可以确保应用程序在启动阶段加载正确的配置,并顺利启动运行。
2359 2
|
前端开发 Java Spring
springboot+thymeleaf+bootstrap 超级无敌简洁的页面展示 商城管理页面
这篇文章展示了一个使用Spring Boot、Thymeleaf和Bootstrap框架开发的简洁、响应式的商城管理页面,包括美食介绍、产品详情、购物车等功能,适合初学者学习和使用。
springboot+thymeleaf+bootstrap 超级无敌简洁的页面展示 商城管理页面
|
JavaScript 前端开发 Java
SpringBoot_web开发-webjars&静态资源映射规则
https://www.91chuli.com/ 举例:jquery前端框架
402 0
自主定义访问路径-----SpringBoot自主定义静态资源访问路径的方法
自主定义访问路径-----SpringBoot自主定义静态资源访问路径的方法
|
搜索推荐 前端开发 JavaScript
SpringBoot静态资源访问控制和封装集成方案
该文档描述了对基于SpringBoot的项目框架进行优化和整合的过程。原先采用前后端分离,后端兼做前端,但随着项目增多,升级维护变得复杂。因此,决定整合后台管理页面与后端代码,统一发布。设计上,框架包含后台管理资源,项目则配置具体业务页面,项目可通过覆盖框架资源实现个性化。关键步骤包括:自定义静态资源访问路径、解决图标与字体文件访问问题、设定自定义欢迎页面和页面图标,以及确保项目能正确访问框架静态资源。通过扫描jar包、解压和拷贝资源到项目目录,实现了框架静态资源的动态加载。此外,调整静态资源访问优先级,保证正确加载。最终实现支持jar和war包的项目结构优化。
563 4