快捷導(dǎo)航

SpringBoot整合BootStrap實戰(zhàn)

更新時間：2021年09月02日 10:52:22 作者：java菜魚

這篇文章主要介紹了SpringBoot整合BootStrap實戰(zhàn)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

SpringBoot整合BootStarp

一開始在將BootStrap整合到項目中時，以為SpringBoot項目和以前的javaWeb一樣，直接在頁面中引用css,js即可，但是打開界面時，樣式效果出不來，后來看了幾篇文章以及自己摸索，現(xiàn)將代碼展示如下：

1.Pom文件

<properties>
        <webjars-locator>0.32-1</webjars-locator>
        <bootstrap>3.3.7</bootstrap>
        <jquery>3.3.1</jquery>
</properties>

這是需要導(dǎo)入的依賴

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>webjars-locator</artifactId>
    <version>${webjars-locator}</version>
</dependency>
 
<!-- bootstrap -->
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>${bootstrap}</version>
</dependency>
 
<!-- jquery -->
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>${jquery}</version>
</dependency>

2.在resource下創(chuàng)建一個l文件路徑：statis/webjars

3.將頁面放在src/main/webapp/WEB-INF/views下

這是我自己新建的,如上所示

4.界面添加以下幾行

<script src="/webjars/jquery/jquery.min.js"></script>
<script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css" rel="external nofollow" />

5.application.yml配置文件中

spring:  
    mvc:
      view:
        prefix: /WEB-INF/views/ #前綴
         suffix: .jsp   #后綴

6. Controller

@Controller
@RequestMapping(value = "/show")
public class PageController {
	
    @RequestMapping("/getHelloJsp")
    public String helloJsp(ModelMap map) {
        // 加入一個屬性，用來在模板中讀取
        // map.addAttribute("name", "wade");
        return "hello";
    }	
}

此時啟動項目的啟動類，輸入url:localhost:端口號/show/getHelloJsp 即可正確的顯示頁面的樣式

注意

因為我顯示的是jsp

所以你還得提前在pom中添加關(guān)于jsp的兩個依賴

<dependency>
   <groupId>org.apache.tomcat.embed</groupId>
   <artifactId>tomcat-embed-jasper</artifactId>
   <scope>provided</scope>
</dependency>
        
<dependency>  
     <groupId>javax.servlet.jsp.jstl</groupId>  
     <artifactId>jstl-api</artifactId>  
     <version>1.2</version>  
</dependency>

因為是初學(xué)springBoot所以文件路徑各方面可能沒有按照springBoot的規(guī)范來，以后慢慢糾正，如有更好的方式，請不吝賜教。

希望能給大家一個參考吧，也希望大家多多支持腳本之家。

您可能感興趣的文章: