SpringBoot中引⽤js、css⽂件的⽅法
注：本⽂并⾮⾃⼰原创，⽽是借鉴很多⼈的经验，总结⽅便⾃⼰使⽤
html ⽂件放在resources/templates下，在Controller请求处理⽅法返回时会⾃动到这个⽬录下查：
js/css 等静态资源放在=resources/static=下，在html中引⼊时，会⾃动到这个⽬录下查:
@RequestMapping("/helloSocket")//注意：这⾥有requestMapping
public String index(){
//返回⼀个指定页⾯ index.html
return"index";
}
在index.html中引⼊JS⽂件时，写法：
注1：这⾥在static下创建了⼀个js⽂件夹
<script src="./js/sockjs.min.js"></script>
<script src="./js/stomp.min.js"></script>
注2：如果Controller类名上有RequestMapping("/aa")，src中要写两个"…"
<script src="../js/sockjs.min.js"></script>
<script src="../js/stomp.min.js"></script>
“/”：代表当前项⽬的根路径
“/**” 访问当前项⽬的任何资源，只要没有匹配的处理映射，则都去静态资源的⽂件夹映射
"classpath:/META‐INF/resources/",
"classpath:/resources/",
"classpath:/static/",
"classpath:/public/"
"/"：当前项⽬的根路径
其中默认配置的 /webjars/** 映射到 classpath:/META-INF/resources/webjars/
（2）使⽤webjars
  先说⼀下什么是webjars？我们在Web开发中，前端页⾯中⽤了越来越多的JS或CSS，如jQuery等等，平时我们是将这些Web资源拷贝到Java的⽬录下，这种通过⼈⼯⽅式拷贝可能会产⽣版本误差，拷贝版本错误，前端页⾯就⽆法正确展⽰。
  WebJars 就是为了解决这种问题衍⽣的，将这些Web前端资源打包成Java的Jar包，然后借助Maven这些依赖库的管理，保证这些Web资源版本唯⼀性。
  WebJars 就是将js, css 等资源⽂件放到 classpath:/META-INF/resources/webjars/ 中，然后打包成jar 发布到maven仓库中。  以jQuery为例，⽂件存放结构为：
META-INF/resources/webjars/jquery/2.1.4/jquery.js
META-INF/resources/webjars/jquery/2.1.4/jquery.min.js
META-INF/resources/webjars/jquery/2.1.4/jquery.min.map
META-INF/resources/webjars/jquery/2.1.4/webjars-requirejs.js
使⽤⽅式就是在l⽂件添加配置：
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>2.1.4</version>
</dependency>
  Spring Boot 默认将 /webjars/** 映射到 classpath:/META-INF/resources/webjars/ ，结合我们上⾯讲到的访问资源的规则，便可以得知我们在页⾯中引⼊jquery.js的⽅法为：(该⽅式是maven项⽬引⼊依赖，不是⾃⼰导⼊⽂件）
jquery是什么选择器<script type="text/javascript" src="/webjars/jquery/2.1.4/jquery.js"></script>
例⼦：
我的⽬录结构：
这是我的代码：
controller和⽅法都有@requestMapping
@Controller
@RequestMapping("yuanchuang2")
public class UserController_js {
@Autowired
private UserService userService;
//分页查询
@RequestMapping(value ="showUserByPage")
@ResponseBody
public pageBean<User>showUserByPage(@RequestParam(value ="currPage",defaultValue ="1")int currPage,@RequestParam(value ="userName",r equired =false)String userName, Model model){
System.out.println("currPage="+currPage);
templates中的html中引⼊js⽂件：
<script src="../js/jquery-1.12.4.min.js"></script>
也可以写：
<script src="/js/jquery-1.12.4.min.js"></script>
因为此时只要没有匹配的处理映射，则都去静态资源的⽂件夹映射，即在"classpath:/static/"，下到js⽂件夹的⽂件
⽽我的bootStrap是由maven导⼊依赖的，所以在html导⼊⽅式为：
<script src="/webjars/bootstrap/4.1.3/js/bootstrap.min.js"></script>
特别注意：
bootStrap和bootStrap Table插件使⽤了Jquery，所以Jquery的引⼊顺序必须放在bootStrap和bootStrap Table之前，否则识别不了，⽆法使⽤：
<!--注意顺序：-->
<script src="/view/jquery/jquery-1.12.4.min.js"></script>
<script src="/view/bootstrap-table/bootstrap.min.js"></script>
<script src="/view/bootstrap-table/bootstrap-table.min.js"></script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。