每个 url 路由和子路由的 Spring 单页“/a/** => /a/index.html 除了 /a/static/**”

IT技术 java spring reactjs spring-mvc single-page-application
2021-05-02 00:32:46

我正在构建在子路由下响应单页应用程序的 spring 网站，我当前的 url 结构应该如下所示

localhost/admin/** => react app
localhost/**       => spring thymeleaf/rest/websocket app for everything else

react app mapping:
localhost/admin/static/**  => static react files
localhost/admin/**         => react index.html for everything else

Example of project resources structure:  
resources/
    admin/         <= my admin react files is here
        index.html
        static/    <= react css, js,  statics
    templates/     <= thymeleaf templates
    static/        <= theamleaf static
    ...

所以我需要index.html为每个 url 路由及其子路由转发react文件。除了静态文件外，基本上都是单页应用程序

看起来是一项常见的任务，以下是我已经尝试过的一些事情：

项目Spring的全部工作演示+react+的gradle如何构建项目，为什么我不能把react在不同的目录中的文件（/资源/静态为例）：https://github.com/varren/spring-react-example

不能使用forward:/admin/index.htmlfor/admin/**因为这会创建递归，因为admin/index.html它也在下面admin/**并且必须以admin/static/**某种方式拦截。

无法使用addResourceHandlers的WebMvcConfigurerAdapter

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/admin/**")
            .addResourceLocations("classpath:/admin/");
}

index.html仅映射到/admin/index.htmlurl，此选项几乎有效，但前提是您从 localhost/admin/index.html

看到这个，这个，这个和许多其他链接，我也有一些解决方案，但也许有通用选项我看不到

1个回答

现在我正在使用自定义ResourceResolver来解决这个问题

演示：https : //github.com/varren/spring-react-example

@Configuration
public class BaseWebMvcConfigurerAdapter extends WebMvcConfigurerAdapter {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {

        ResourceResolver resolver = new AdminResourceResolver();
        registry.addResourceHandler("/admin/**")
                .resourceChain(false)
                .addResolver(resolver);


        registry.addResourceHandler("/admin/")
                .resourceChain(false)
                .addResolver(resolver);
    }


    private class AdminResourceResolver implements ResourceResolver {
        private Resource index = new ClassPathResource("/admin/index.html");

        @Override
        public Resource resolveResource(HttpServletRequest request, String requestPath, List<? extends Resource> locations, ResourceResolverChain chain) {
            return resolve(requestPath, locations);
        }

        @Override
        public String resolveUrlPath(String resourcePath, List<? extends Resource> locations, ResourceResolverChain chain) {
            Resource resolvedResource = resolve(resourcePath, locations);
            if (resolvedResource == null) {
                return null;
            }
            try {
                return resolvedResource.getURL().toString();
            } catch (IOException e) {
                return resolvedResource.getFilename();
            }
        }

        private Resource resolve(String requestPath, List<? extends Resource> locations) {

            if(requestPath == null) return null;

            if (!requestPath.startsWith("static")) {
                return index;
            }else{
                return new ClassPathResource("/admin/" + requestPath);
            }
        }
    }
}
其它你可能感兴趣的问题
上一篇CSS动画从右到左动态 下一篇如何渲染一组 JSX 元素（React 组件）