springmvc怎么访问js

SpringMVC访问JS的方式包括：将JS文件放在静态资源文件夹中、使用注解配置静态资源路径、在HTML文件中引用JS文件。其中，最常见的做法是将JS文件放在静态资源文件夹中，这样可以确保前端文件和后端逻辑分离，提升代码的可维护性和可读性。

将JS文件放在静态资源文件夹中是一个非常直接和高效的方式。SpringMVC默认会将某些文件夹作为静态资源文件夹，比如/static、/public、/resources等。你只需要将JS文件放置在这些文件夹中，然后在HTML文件中通过相对路径引用即可。这样不仅便于管理，还能利用浏览器缓存来提升性能。

一、将JS文件放在静态资源文件夹中

SpringMVC默认会将某些文件夹作为静态资源文件夹，你可以将JS文件放在这些文件夹中，比如/static、/public、/resources等。这样可以保证前后端分离，并且利用浏览器缓存来提升性能。

1.1 配置静态资源文件夹

SpringMVC默认的静态资源文件夹包括/static、/public、/resources、/META-INF/resources。你可以将JS文件放在这些文件夹中。例如，将你的JS文件放在/static/js文件夹中，然后在HTML文件中通过相对路径引用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <script src="/js/your-script.js"></script>
</head>
<body>
    <!-- Your HTML content -->
</body>
</html>

1.2 自定义静态资源路径

如果默认的静态资源路径不符合你的需求，你可以在SpringMVC的配置文件中自定义静态资源路径。在Spring Boot中，你可以通过修改application.properties文件来实现：

spring.resources.static-locations=classpath:/custom-static/

然后将你的JS文件放在/custom-static/js文件夹中，同样在HTML文件中通过相对路径引用。

二、使用注解配置静态资源路径

在某些情况下，你可能需要自定义静态资源的路径，这时可以使用SpringMVC的注解配置来实现。通过配置类来设置静态资源的路径，使得前端文件能够被正确地加载。

2.1 创建配置类

你可以创建一个配置类，并使用@EnableWebMvc和WebMvcConfigurer接口来配置静态资源路径。例如：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/")
                .addResourceLocations("classpath:/static/");
    }
}

2.2 引用JS文件

在HTML文件中，你可以像之前一样通过相对路径引用JS文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <script src="/static/js/your-script.js"></script>
</head>
<body>
    <!-- Your HTML content -->
</body>
</html>

三、在HTML文件中引用JS文件

正确地引用JS文件是前端开发的基础，确保JS文件能够被正确加载和执行是非常重要的。你可以通过以下几种方式在HTML文件中引用JS文件。

3.1 内联JS代码

你可以直接在HTML文件的<head>或<body>标签中内联JS代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline JS Example</title>
    <script>
        // Your JS code
        console.log('Hello, world!');
    </script>
</head>
<body>
    <!-- Your HTML content -->
</body>
</html>

3.2 外部JS文件

将JS代码放在外部文件中，然后在HTML文件中引用，这是推荐的做法，因为这样可以提高代码的可维护性和重用性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>External JS Example</title>
    <script src="/static/js/your-script.js"></script>
</head>
<body>
    <!-- Your HTML content -->
</body>
</html>

四、优化和最佳实践

在实际开发中，为了提升页面加载速度和用户体验，你可以采取一些优化和最佳实践。

4.1 使用CDN

对于常见的第三方库，比如jQuery、Bootstrap等，你可以使用CDN（Content Delivery Network）来加载它们，这样可以加快文件加载速度：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CDN Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <!-- Your HTML content -->
</body>
</html>

4.2 缓存控制

设置合理的缓存策略可以显著提升页面加载速度。你可以在SpringMVC配置类中设置缓存控制：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.resource.VersionResourceResolver;
@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/")
                .addResourceLocations("classpath:/static/")
                .setCachePeriod(3600)
                .resourceChain(true)
                .addResolver(new VersionResourceResolver().addContentVersionStrategy("/"));
    }
}

4.3 异步加载JS文件

为了不阻塞页面的渲染，你可以将JS文件异步加载：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Async JS Example</title>
    <script src="/static/js/your-script.js" async></script>
</head>
<body>
    <!-- Your HTML content -->
</body>
</html>

4.4 合并和压缩JS文件

通过合并和压缩JS文件，可以减少HTTP请求次数和文件大小，从而提升页面加载速度。你可以使用工具如Webpack、Gulp等来实现这一点。

总结：

通过将JS文件放在静态资源文件夹中、使用注解配置静态资源路径、在HTML文件中正确引用JS文件，你可以确保SpringMVC项目中的前端文件能够被正确加载和执行。此外，通过使用CDN、设置缓存控制、异步加载JS文件、合并和压缩JS文件等优化措施，可以显著提升页面加载速度和用户体验。总之，合理的项目结构和优化策略是确保SpringMVC项目高效运行的关键。