本地部署到服务器上的资源路径问题

本地部署到服务器上的资源路径问题

服务器端的源代码的静态资源目录层级

当使用Thymeleaf时,在templates的目录下为返回的html页面,下面以两个例子解释当将代码部署到tomcat时访问资源的路径配置问题

例子一 index.html(在templates的根目录下)

调用controller的接口

http://localhost:8080/community/index

java 复制代码
    @GetMapping("/index")
    public String getIndexPage(Model model, Page page){
        //方法调用前,SpringMVC会自动实例化Model和Page,并将Page注入Model,
        // 所以,在thymeleaf中可以直接访问Page对象中的数据,不需要使用model.addAttribute()方法进行数据模型的添加
        page.setRows(discussPostService.findDiscussPostRows(0));//查询帖子的总数
        page.setPath("/index");//设置当前的访问路径,用于前端复用分页链接
        List<Map<String,Object>> results = new ArrayList<>();//最终要存放的数据
        List<DiscussPost> discussPosts = discussPostService.findDiscussPosts(0, page.getOffset(), page.getLimit());//由用户给出的参数,查询帖子
        //遍历帖子,将帖子的信息和用户的信息封装到Map中
        for (DiscussPost post : discussPosts) {
            User user = userService.findUserById(post.getUserId());//根据帖子的userId查询用户
            Map<String,Object> map = Map.of("post",post,"user",user);//将帖子和用户封装到Map中
            results.add(map);//将Map添加到List中
        }
        model.addAttribute("results",results);//将List添加到model中
        return "/index";//返回模板的路径,在resources/templates下的index.html
    }
}
点击F12在浏览器查看部署到Tomcat的资源路径

由上图可以看出index的页面在http://localhost:8080/community的目录下,而css与js都分别在http://localhost:8080/community/css/和http://localhost:8080/community/js/下,因此静态资源的路径都会在根目录即http://localhost:8080/community下

那么如果我们要在index.html中使用js和css文件,我们的访问路径就应该是http://localhost:8080/community/css/bootstrap.min.css和http://localhost:8080/community/js/global.js

而下面使用@配置的恰恰是相对路径

html 复制代码
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
<script th:src="@{/js/global.js}"></script>

当使用/开头时也就是根目录,而当前项目的根目录为http://localhost:8080/community 其中的community是我们在application.yml中所配置的项目名称

yml 复制代码
server:
  port: 8080
  servlet:
    context-path: /community

也就是说静态资源目录(src/main/resources/static)下的资源都会被tomcat注入到根目录下http://localhost:8080/community

例子二

http://localhost:8080/community/discuss/detail/274

对于这个请求的tomcat目录如下图

此时如果想要在html中访问到静态资源,目录还依然应该是http://localhost:8080/community/css/和http://localhost:8080/community/js/

但是此时的页面路径为http://localhost:8080/community/discuss/detail/274,那么想要达到根目录可以使用/也可以使用.../来退到上级

如果使用/代码仍然为

htnl 复制代码
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
<script th:src="@{/js/global.js}"></script>

但是也可以使用.../,但是不具有普适性,需要根据路径来自定义.../的数量

复制代码
<link rel="stylesheet" th:href="@{../../css/bootstrap.min.css}"/>
<script th:src="@{../../js/global.js}"></script>

但是如果此时代码为<script th:src="@{../js/global.js}"></script>那么html依然无法解析到tomcat中的静态资源,因为此时实际路径仍然为http://localhost:8080/community/js/,但是由于我们使用了一个.../,那么此时的访问路径为http://localhost:8080/community/discuss/js/,仍然会存在问题

相关推荐
艾伦_耶格宇1 小时前
【ACP】阿里云云计算高级运维工程师--ACP
运维·阿里云·云计算
一位摩羯座DBA2 小时前
Redhat&Centos挂载镜像
linux·运维·centos
计算机毕设定制辅导-无忧学长2 小时前
西门子 PLC 与 Modbus 集成:S7-1500 RTU/TCP 配置指南(一)
服务器·数据库·tcp/ip
cui_win3 小时前
【网络】Linux 内核优化实战 - net.core.flow_limit_table_len
linux·运维·网络
风清再凯3 小时前
自动化工具ansible,以及playbook剧本
运维·自动化·ansible
深圳安锐科技有限公司3 小时前
深圳安锐科技发布国内首款4G 索力仪!让斜拉桥索力自动化监测更精准高效
运维·安全·自动化·自动化监测·人工监测·桥梁监测·索力监测
猫头虎3 小时前
猫头虎 AI工具分享:一个网页抓取、结构化数据提取、网页爬取、浏览器自动化操作工具:Hyperbrowser MCP
运维·人工智能·gpt·开源·自动化·文心一言·ai编程
cocologin5 小时前
RIP 技术深度解析
运维·网络·网络协议
cv高级工程师YKY5 小时前
SRE - - PV、UV、VV、IP详解及区别
大数据·服务器·uv
庸子5 小时前
基于Jenkins和Kubernetes构建DevOps自动化运维管理平台
运维·kubernetes·jenkins