springboot项目搭建1021-springboot整合freemarker-配置静态资源

太过爱你忘了你带给我的痛 2022-03-28 05:57 310阅读 0赞

项目地址：[https://github.com/wenrongyao/springboot-demo.git][https_github.com_wenrongyao_springboot-demo.git]

摘要：上一篇帖子项目简单整合了freemarker，但是静态资源（js，img，css等）比没有办法访问，这篇帖子讲述怎么整合静态资源，这边以整合jquery和layer（弹窗组件）为例。

1、新建static存放静态资源，也可以建别的目录

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dyb25neWFv_size_16_color_FFFFFF_t_70][]

2、在模板文件中引入静态资源，这边做了一个小小的封装，因为这些资源基本上每个文件都要用到，所以为了避免在每个文件中都单独去引入，这个新建了一个公共的引入文件common.ftl

common.ftl文件如下

<#--公共样式-start-->
    <#--layui弹窗组件-->
    <link rel="stylesheet" type="text/css" href="${request.contextPath}/static/layui-2.4.5/css/layui.css">
    <#--公共样式-end-->
    
    <#--公共js-start-->
    <#--jquery-->
    <script src="${request.contextPath}/static/jquery/jquery.min-2.1.1.js"></script>
    <#--layui弹窗组件-->
    <script type="text/javascript" src="${request.contextPath}/static/layui-2.4.5/layui.all.js"></script>
    <#--公共js-end-->

3、在需要使用这个类库的页面上通过<\#include "">方式引入

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    <#include "./common/common.ftl">
    </head>
    <body>
    
    <script>
        $(function () {
            layer.msg("${name}");
        })
    </script>
    </body>
    </html>

4、编写controller导航页

@RequestMapping("/hello02")
        public String hello02(Model model) {
            model.addAttribute("name", "kangkang");
            return "hello-free-marker02";
        }

注意此时直接访问并不能加载静态资源，springmvc会当作controller路径解析，所以需要在application.properties配置一个静态资源路径。

#配置mvc静态资源
    spring.mvc.static-path-pattern=/static/**

如果你上面用的不是static这边也要对应

5、结果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dyb25neWFv_size_16_color_FFFFFF_t_70 1][]

[https_github.com_wenrongyao_springboot-demo.git]: https://github.com/wenrongyao/springboot-demo.git
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dyb25neWFv_size_16_color_FFFFFF_t_70]: /images/20220328/a511aacc97554d999dd270b3c6666622.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dyb25neWFv_size_16_color_FFFFFF_t_70 1]: /images/20220328/87f02687776f4f7bb426aef161f3aec7.png