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


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

相关文章
|
3月前
|
JavaScript 前端开发 Java
SpringBoot之静态资源规则与定制化
SpringBoot之静态资源规则与定制化
|
3月前
|
移动开发 Java HTML5
Springboot web静态资源配置
Springboot web静态资源配置
50 0
|
4月前
|
前端开发 JavaScript Java
Springboot 使用thymeleaf 服务器无法加载resources中的静态资源异常处理
Springboot 使用thymeleaf 服务器无法加载resources中的静态资源异常处理
166 0
|
6月前
|
Java 关系型数据库 MySQL
[笔记]Springboot入门《一》springboot+jpa+bootstrap+crud
[笔记]Springboot入门《一》springboot+jpa+bootstrap+crud
|
6月前
|
Java Spring
springboot中的静态资源规则~
springboot中的静态资源规则~
|
3月前
|
Java
springboot WebMvcConfigurer详解自定义配置请求静态资源
springboot WebMvcConfigurer详解自定义配置请求静态资源
|
4月前
|
Java
Springboot配置静态资源
Springboot配置静态资源
20 1
|
4月前
|
缓存 前端开发 JavaScript
SpringBoot中静态资源映射处理
SpringBoot中静态资源映射处理
42 0
|
7月前
|
XML 前端开发 JavaScript
SpringBoot中静态资源访问
SpringBoot中静态资源访问
117 0
|
8月前
|
Java 容器 Spring
springBoot静态资源配置及其原理
springBoot静态资源配置及其原理
109 0