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

使用方式就是在pom.xml文件添加配置：

		<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项目引入依赖，不是自己导入文件）

<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",required = 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>