【Springboot 入门培训】#14 WebJars 样式包BootStrap 5架构

通过Mave加载前端常用的bootstrap，jquery框架js包，这些js都封装在java中的jar包中,我们通过引入jar包的方式将前端样式导入到工程中，这样就不用在Spring boot工程中的static文件中配置静态资源了，在开发和部署起来相对简单了很多。如果做互联网项目没有前后端分离实用，但是做内网管理系统来说真的是又快又方便。
WebJars +BootStrap 5源码下载

在https://www.webjars.org/all webjars官网中找到要使用的前端样式POM版本，引入到项目工程中来。

    org.webjars
    bootstrap
    5.1.3


    org.webjars
    jquery
    3.4.1


    org.webjars.npm
    bootstrap-icons
    1.8.3

在项目中创建一个indx.html页面，在页面中引入样式bootstrap与jquery样式。

创建index.html页面，页面的样式使用bootstrap前端架构

    
    
    
    



    


    

        
            登录系统
        
        
            用户名称
            
            请录入员工号
        
        
            密码
            
        
        
            
            记忆密码
        
        登录
    

@Controller
public class ZhtbsController {

    @RequestMapping(value = "/")
    public String index(){
        return "index";
    }
    
    @PostMapping(path = "/login")
    public String login(String acc, Model model) {
        //页面框架
       model.addAttribute("user", acc);
        return "main";
    }

    @GetMapping(path = "/page1")
    public String page1(Model model) {
        //子页面
        return "page1";
    }
    @GetMapping(path = "/page2")
    public String page2(Model model) {
        //子页面
        return "page2";
    }
}

使用 bootstrap 搭建前端框架 main.html

    
    

    
    
    
    
    
    
    
    






    

    
    


        
        

            
测试页面框架 bootstrap 5
            

            

            
Lorem Ipsum Dolor
            

            

            
Lorem Ipsum Dolor
            

            

            Lorem Ipsum Dolor
            

        
    

其他子页page1.html

    page1页面

其他子页page2.html

dhdhdhd

注意：页面架构使用的是 $(“#right”).html(data); html摸板进入到主页面元素中的形式，来加载子页面的方法。所以在子页面中不需要有 html,body,