二.三 测试验证
二.三.一 查询页面
二.三.二 添加验证
二.三.三 修改验证
二.三.四 删除验证
SpringBoot 整合 Bootstrap,一个基本的页面处理。
三. 采用 WebJars 引入资源
上面是在 static 目录下的 plugins 目录下,将前端常用的 框架包放置进去, 是一个又一个的 css js 文件。
如果能将 web前端资源(js,css等)打成jar包文件,然后借助Maven工具,以jar包形式对web前端资源进行统一依赖管理,
保证这些Web资源版本唯一性, 这样就太好了。
是有这样的工具的,叫做 WebJars
放置了常见的资源框架。
三.一 添加资源依赖
在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>
三.二 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
谢谢您的观看,如果喜欢,请关注我,再次感谢 !!!