FreemarkerJS 路径配置，如何正确设置以优化模板渲染？

FreemarkerJS路径

Freemarker 是一个强大的模板引擎，常用于生成 HTML 页面，在使用 Freemarker 时，处理 JavaScript (JS) 文件的路径是一个常见的问题，本文将详细介绍如何在 Freemarker 中正确引用 JS 文件的路径。

一、Freemarker引入JS的方法

1. 使用<#assign>标签定义JavaScript文件路径

在 Freemarker 模板中，可以使用<#assign> 标签来定义 JavaScript 文件的路径，然后在需要的地方引用这个路径。

   <#assign resPath = "${resources.server}">
   <script src="${resPath}/static/plugins/demo.js"></script>

这种方法可以有效地避免硬编码路径，使模板更加灵活和可维护。

配置静态资源访问路径

在 SpringMVC 中，可以通过配置文件来设置静态资源的访问路径，可以在spring-mvc.xml 文件中进行如下配置：

   <!-FreeMarker视图解析器 -->
   <bean id="freeMarkerConfigurer" class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer">
       <property name="templateLoaderPath" value="\WEB-INF\views"/>
       <property name="defaultEncoding" value="utf-8"/>
       <property name="freemarkerSettings">
           <props>
               <prop key="template_update_delay">1</prop>
               <prop key="locale">zh_CN</prop>
               <prop key="datetime_format">yyyy-MM-dd</prop>
               <prop key="date_format">yyyy-MM-dd</prop>
               <prop key="number_format">#.##</prop>
           </props>
       </property>
       <!-静态资源访问路径 -->
       <property name="freemarkerVariables">
           <map>
               <entry key="resPath" value="${resources.server}"/>
           </map>
       </property>
   </bean>

通过这种方式，可以在模板中直接使用${resPath} 来引用静态资源路径。

使用相对路径

如果项目结构相对简单，也可以使用相对路径来引用 JS 文件。

   <script src="../../static/plugins/demo.js"></script>

但这种方法在项目结构发生变化时可能会失效，不推荐使用。

二、Freemarker与SpringBoot集成中的路径配置

在 SpringBoot 项目中，Freemarker 的配置通常更加简便，以下是一个简单的示例：

添加依赖

在pom.xml 文件中添加 Freemarker 的依赖：

   <dependency>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-freemarker</artifactId>
   </dependency>

配置文件位置

默认情况下，Freemarker 的模板文件放在src/main/resources/templates 目录下，静态资源（如 JS、CSS、图片等）放在src/main/resources/static 目录下。

   src
   └── main
       ├── java
       ├── resources
       │   ├── static
       │   │   ├── css
       │   │   ├── js
       │   │   ├── images
       │   └── templates

配置 Freemarker

在application.properties 或application.yml 文件中配置 Freemarker：

   spring.freemarker.suffix=.ftl
   spring.freemarker.content-type=text/html;charset=UTF-8
   spring.freemarker.request-context-attribute=request

使用相对路径引用静态资源

在 Freemarker 模板中，可以使用相对路径来引用静态资源：

   <script src="/js/demo.js"></script>

这里的/js/demo.js 会被映射到src/main/resources/static/js/demo.js。

三、常见问题及解决方法

${resPath}解析出错

如果在引入静态资源时${resPath} 解析出错，可能是由于配置不正确或路径书写有误，确保spring-mvc.xml 中的配置正确，并且模板中使用的变量名与配置一致。

找不到静态资源

如果浏览器无法找到静态资源，首先检查浏览器的控制台错误信息，确认文件路径是否正确，检查项目的目录结构，确保静态资源确实存在于指定的位置。

跨域问题

当静态资源位于不同的域名或端口时，可能会遇到跨域问题，可以通过配置 CORS（跨源资源共享）来解决，在 SpringBoot 中可以添加一个 CORS 过滤器：

   @Bean
   public WebMvcConfigurer corsConfigurer() {
       return new WebMvcConfigurerAdapter() {
           @Override
           public void addCorsMappings(CorsRegistry registry) {
               registry.addMapping("/**").allowedOrigins("*");
           }
       };
   }

四、单元表格：Freemarker与SpringBoot集成中的路径配置示例

五、相关问题与解答

1. Freemarker中如何动态设置basePath？

答： 可以在 SpringMVC 的配置文件中设置freemarkerVariables，然后在模板中使用${basePath} 来动态获取 basePath。

<property name="freemarkerVariables">
    <map>
        <entry key="basePath" value="${resources.server}"/>
    </map>
</property>

在模板中使用：

<base href="${basePath}">
<script src="${basePath}/static/plugins/demo.js"></script>

2. Freemarker模板中如何引用图片路径？

答： Freemarker 模板中引用图片路径的方式与引用其他静态资源类似，可以使用相对路径或通过配置动态获取路径。

<img src="${basePath}/static/images/logo.png" alt="Logo">

或者使用相对路径：

<img src="/static/images/logo.png" alt="Logo">

确保图片文件实际存在于指定的路径下。

通过以上方法，可以在 Freemarker 中灵活地引入和管理 JavaScript 文件及其他静态资源，提高项目的开发效率和可维护性。

小伙伴们，上文介绍了“freemarkerjs路径”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。