springboot通过jar包方式引入bootstrap

程序员文章站 2022-07-03 11:30:56

...

一、springboot引入bootstrap的两种方式

SpringBoot结合前端有主要有两种方法，一种是在static里面直接加入下载的bootstrap中的css或js；另一种是引入webjars，以jar包的形式加入项目。
手动在static中引入bootstrap需要自己去手动下载bootstrap，而引入webjars通过jar包方式就需要配置pom.xml即可。
webjars方式引入bootstrap，实际上就是通过webjars方式管理前端静态资源的方式，具体的可以参考：https://www.jianshu.com/p/66d...
WebJars官网找到项目所需的依赖，例如在pom.xml引入 jQuery、BootStrap前端组件等。

二、webjars方式引入

新建一个SpringBoot Web项目。然后在pom文件引入webjars的jar，pom文件代码如下：

       <dependency>
           <groupId>org.webjars</groupId>
           <artifactId>bootstrap</artifactId>
           <version>3.3.5</version>
       </dependency>
       <dependency>
           <groupId>org.webjars</groupId>
           <artifactId>jquery</artifactId>
           <version>3.1.1</version>
       </dependency>

然后我们观察下项目的依赖包：

然后在src/main/resources/templates文件下新建index.html，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Dalaoyang</title>
   <link rel="stylesheet" href="/webjars/bootstrap/3.3.5/css/bootstrap.min.css" />
   <script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
   <script src="/webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"><br/>
   <div class="alert alert-success">
       <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
       <h3>index首页</h3>Hello, <strong>springboot and bootstrap！！！</strong>
   </div>
</div>
</body>
</html>

引入的bootstrap包的路径可以通过官网进行查看：
配置结束，启动项目，访问http://localhost:8888/

springboot通过jar包方式引入bootstrap

一、springboot引入bootstrap的两种方式

二、webjars方式引入

Andriod开发中引入jar包的正确方式介绍

Andriod开发中引入jar包的正确方式介绍

SpringBoot工程中导入本地自定义Jar包——通过Maven打包导包（超详细）

springboot通过jar包方式引入bootstrap

Springboot中引入本地jar包，并通过maven把项目成功打包成jar包部署

基于springboot部署jar包通过nginx负载均衡

springboot扫描引入jar包的service等组件方式

SpringBoot引入第三方jar包或本地jar包的处理方式

使用springboot的jar包能够以service方式启动

解决:打包SpringBoot项目成jar包后，其他的项目无法引入jar包中的对象