Springboot当中通过引入依赖的形式使用前端框架

柔光的暖阳◎ 2022-12-30 01:29 49阅读 0赞

在现在很多大型公司很多都前后端分离开发，而前端也是独立启动的，但是也有很多公司直接是独立的一个项目，前端页面直接在java程序当中，应对与这种独立项目我们可以采用springboot给我们提供的依赖形式来引入前端包，也挺方便的，需要的朋友们下面随着小编来一起学习学习吧。

### 目录 ###

*   *  简单了解其原理
     *  用法详解
     *  总结

个人感觉这个是有必要了解的，有的公司他确实就是这么在引用，假如你刚进公司不了解这个也挺尴尬的哈，本篇文章主要讲解webjars,以jar包的方式引入静态资源；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMTgzOQ_size_16_color_FFFFFF_t_70][]

## 简单了解其原理 ##

以下是springboot配置的mvc，他配置的springmvc相关配置都存在WebMvcAutoConfiguration这个类下，其中就包含了以下内容。

所有自动配置包都包含在这个jar包当中，想要了解springboot为我们配置的默认值，我们可以去以下包找。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMTgzOQ_size_16_color_FFFFFF_t_70 1][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMTgzOQ_size_16_color_FFFFFF_t_70 2][]

从这个配置当中我们可以提取到关键信息：所有 /webjars/\*\* ，都去 classpath:/META-INF/resources/webjars/ 找资源；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMTgzOQ_size_16_color_FFFFFF_t_70 3][]

## 用法详解 ##

**1、引入依赖**

<dependency>
        <groupId>org.webjars</groupId>
        <artifactId>jquery</artifactId>
        <version>3.5.1</version>
    </dependency>

jar包依赖官网: [http://www.webjars.org/][http_www.webjars.org].

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMTgzOQ_size_16_color_FFFFFF_t_70 4][]

**2、观察结构**

我们观察添加完依赖的jar包结构，会发现他和springboot配置的mvc当中上面的配置正好衔接到一块。  
这也正是他配置的classpath:/META-INF/resources/webjars/去这个地方找资源的原因。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMTgzOQ_size_16_color_FFFFFF_t_70 5][]

**3、项目引用**

springboot给我们配置好了映射，我们直接访问

localhost:8080/webjars/jquery/3.5.1/jquery.js

这个时候会发现他是可以直接访问的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMTgzOQ_size_16_color_FFFFFF_t_70 6][]

代码当中直接引用即可：

## 总结 ##

有些知识并不一定能用得到，在很多情况的时候，我们只需要知道有这个东西就行了，当真正用到的时候，我们最起码知道有个这么个东西，然后再去找文档看，然后来使用即可。当然这是我个人学习的方式，我的脑子有限，不可能什么都记得住。不知道你们是否跟我一样呢

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMTgzOQ_size_16_color_FFFFFF_t_70 7][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMTgzOQ_size_16_color_FFFFFF_t_70]: /images/20221120/7f1625fda5684a649d256a89d7802035.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMTgzOQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201223201521394.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMTgzOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMTgzOQ_size_16_color_FFFFFF_t_70 2]: /images/20221120/d285c5fb38eb4650bd5d8f10f5d4bbdf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMTgzOQ_size_16_color_FFFFFF_t_70 3]: /images/20221120/8cdc3a7a78744b0d8d635c08d2867bcf.png
[http_www.webjars.org]: http://www.webjars.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMTgzOQ_size_16_color_FFFFFF_t_70 4]: /images/20221120/13fa49cc8f5e4023843665d7c755a695.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMTgzOQ_size_16_color_FFFFFF_t_70 5]: /images/20221120/69bc5888a5fe4cca92742c9056ddbac5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMTgzOQ_size_16_color_FFFFFF_t_70 6]: /images/20221120/f0b568669ad04511bb399992f51510af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMTgzOQ_size_16_color_FFFFFF_t_70 7]: /images/20221120/d898894643d04d05acf0c283b79b24bd.png