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

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

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

在这里插入图片描述

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

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

调用controller的接口

http://localhost:8080/community/index

    @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

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

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

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

server:port: 8080servlet: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,那么想要达到根目录可以使用/也可以使用…/来退到上级

如果使用/代码仍然为

<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/,仍然会存在问题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/41834.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VBA初学:零件成本统计之三(获取材料外协的金额)

第三步&#xff0c;从K3的数据库中获取金额 我这里是使用循环&#xff0c;通过任务单号将金额汇总出来&#xff0c;如果使用数组的话&#xff0c;还要按任务单写GROUP&#xff0c;还要去对应&#xff0c;不如循环直接一点 获取材料和外协金额的表格Sub getje()Dim rowcount A…

leetcode-每日一题

3101. 交替子数组计数https://leetcode.cn/problems/count-alternating-subarrays/ 给你一个 二进制数组 nums 。 如果一个 子数组 中 不存在 两个 相邻 元素的值 相同 的情况&#xff0c;我们称这样的子数组为 交替子数组 。 返回数组 nums 中交替子数组的数量。 示例 …

算法力扣刷题 三十四【71.简化路径】

前言 栈和队列篇。 记录 三十四【71.简化路径】 一、题目阅读 给你一个字符串 path &#xff0c;表示指向某一文件或目录的 Unix 风格 绝对路径 &#xff08;以 ‘/’ 开头&#xff09;&#xff0c;请你将其转化为更加简洁的规范路径。 在 Unix 风格的文件系统中&#xff0c…

3-2 梯度与反向传播

3-2 梯度与反向传播 主目录点这里 梯度的含义 可以看到红色区域的变化率较大&#xff0c;梯度较大&#xff1b;绿色区域的变化率较小&#xff0c;梯度较小。 在二维情况下&#xff0c;梯度向量的方向指向函数增长最快的方向&#xff0c;而其大小表示增长的速率。 梯度的计算 …

使用Python实现深度学习模型:模型解释与可解释人工智能

在深度学习领域,模型解释和可解释性人工智能(XAI)正变得越来越重要。理解深度学习模型的决策过程对于提高模型的透明度和可信度至关重要。本文将详细介绍如何使用Python实现模型解释和可解释性人工智能,包括基本概念、常用方法、代码实现和示例应用。 目录 模型解释与可解…

docker使用镜像jms_all部署jumpserver

创建容器需要挂载出来的服务器对应目录 mkdir -p /data/redis/data mkdir -p /opt/mysql/{data,conf,logs}docker安装redis docker run -d -it --name redis -p 6379:6379 -v /data/redis/data:/data --restart=always

如何第一次从零上传项目到GitLab

嗨&#xff0c;我是兰若&#xff0c;今天想给大家说下&#xff0c;如何上传一个完整的项目到与LDAP集成的GitLab&#xff0c;也就是说这个项目之前是不在git上面的&#xff0c;这是第一次上传&#xff0c;这样上传上去之后&#xff0c;其他小伙伴就可以根据你这个项目的git地址…

3. train_encoder_decoder.py

train_encoder_decoder.py #__future__ 模块提供了一种方式&#xff0c;允许开发者在当前版本的 Python 中使用即将在将来版本中成为标准的功能和语法特性。此处为了确保代码同时兼容Python 2和Python 3版本中的print函数 from __future__ import print_function # 导入标准库…

Lua语言入门

目录 Lua语言1 搭建Lua开发环境1.1 安装Lua解释器WindowsLinux 1.2 IntelliJ安装Lua插件在线安装本地安装 2 Lua语法2.1 数据类型2.2 变量全局变量局部变量命名规范局部变量作用域 2.3 注释单行注释多行注释 2.4 赋值2.5 操作符数学操作符比较操作符逻辑操作符连接操作符取长度…

Leetcode秋招冲刺--(专题7-9)

专题7&#xff1a;字符串匹配 题目459:重复的子字符串&#xff08;NO&#xff09; 解题思路&#xff1a;这里用到了substr获取子串&#xff0c;然后直接堆成相同大小的主串&#xff0c;然后进行比较。 这题主要没做出的原因是时间复杂度一直优化不下去 myself class Soluti…

定个小目标之刷LeetCode热题(41)

338. 比特位计数 给你一个整数 n &#xff0c;对于 0 < i < n 中的每个 i &#xff0c;计算其二进制表示中 1 的个数 &#xff0c;返回一个长度为 n 1 的数组 ans 作为答案。 今天看一下这道简单题&#xff0c;主要考查位运算&#xff0c;代码如下 class Solution {pu…

Vue3路由切换动画

一、安装依赖 需要安装animate.css pnpm i animate.css二、使用transition添加过渡动画 注意&#xff1a;要想使用动画&#xff0c;需要加:key <router-view v-slot"{ Component }"><Transitionappearenter-active-class"animate__animated animate__f…

moonlight+sunshine+ParsecVDisplay ipad8-windows 局域网串流

1.sunshine PC 安装 2.设置任意账户密码登录 3.setting 里 network启用UPNP IPV4IPV6 save apply 4.ParsecVDisplay虚拟显示器安装 5.ipad appstore download moonlight 6.以ipad 8 为例 2160*1620屏幕分辨率 7.ParsecVDisplay里面 custom设置2160*1620 240hz&#xff0c;…

银河麒麟V10 SP1 审计工具 auditd更新

前言 银河麒麟V10 SP1 审计工具 auditd 引发的内存占用过高&#xff0c; 内存使用率一直在 60% 以上&#xff0c; 内存一直不释放 排查 可以使用ps或者top查看系统进程使用情况 ps -aux|sort -k4nr|head -n 5 发现银河麒麟审计工具 auditd 一直占用内存不释放 解决 办法一…

vivado CLOCK_REGION、CLOCK_ROOT

时钟区域 CLOCK_REGION属性用于将时钟缓冲区分配给 UltraScale设备&#xff0c;同时让Vivado放置程序将时钟缓冲区分配给最佳站点 在该区域内。 重要提示&#xff1a;对于UltraScale设备&#xff0c;不建议将时钟缓冲区固定到特定站点&#xff0c;因为 你可以在时钟上规划一个7…

(头哥)Hive的安装与配置

第1关&#xff1a;Hive的安装与配置 wget -O - https://gitee.com/tianzhen2647/bash/raw/master/Hive%E7%9A%84%E5%AE%89%E8%A3%85%E4%B8%8E%E9%85%8D%E7%BD%AE/h1.sh | bash第2关&#xff1a;Hive Shell入门基础命令 直接修改/opt/hive/bin下的hive文件&#xff0c;把里面的…

掌握Eloquent ORM:Laravel中的对象关系映射艺术

掌握Eloquent ORM&#xff1a;Laravel中的对象关系映射艺术 在现代Web应用开发中&#xff0c;数据库的操作是核心功能之一。Laravel框架提供了一个强大而优雅的ORM&#xff08;对象关系映射&#xff09;工具——Eloquent。Eloquent让数据库操作变得简单直观&#xff0c;同时保…

进程的初步认识

目录 一、硬件方面介绍 1.冯诺依曼体系结构 2.存储分级 二、软件 方面 1.操作系统是一款进行管理的软件&#xff0c;它可以管理硬件也可以管理软件 2.操作系统如何管理&#xff1f; 三、进程 1.概念 总结 四、linux中对进程的管理 1.task_ struct内容分类 2.查看进…

现代信息检索笔记(四)——文档评分、词项权重计算及向量空间模型

目录 对搜索结果进行排序 目标 方案一&#xff1a;jaccard系数 方案二&#xff1a;tf-idf公式 长文本长度 向量空间模型小结 对搜索结果进行排序 排序式检索&#xff0c;如何高速求相关性R 目标 无关的不在上面相关度高的在前面 在链表中不出现的相关性为0&#xff0c…

PageCache页缓存

一.PageCache基本结构 1.PageCache任务 PageCache负责使用系统调用向系统申请页的内存,给CentralCache分配大块儿的内存,以及合并前后页空闲的内存,整体也是一个单例,需要加锁. PageCache桶的下标按照页号进行映射,每个桶里span的页数即为下标大小. 2.基本结构 当每个线程的…