前后端交互中的绝对路径和相对路径

news2025/5/20 13:25:37

前端

 <form action="hello" method="post">

1. 不加斜杠

(相对路径,如 action="hello"

  • 解析规则:基于当前页面的 URL 路径部分 进行拼接。
    假设当前页面 URL 是 http://域名:端口/应用上下文/xxx.html(例如 http://localhost:8080/test/page.html),则:

    • 浏览器会将 hello 拼接到 当前路径的最后一级目录后
    • 若当前路径是 /test/(比如页面是 /test/index.html,其路径部分为 /test/),则 action="hello" 解析为 http://域名:端口/test/hello
    • 若当前路径是 /test/sub/(页面是 /test/sub/page.html),则解析为 http://域名:端口/test/sub/hello
  • 特点继承当前页面的路径前缀(包括应用上下文、子目录等),适用于 同应用内的路径跳转(比如后端接口在应用上下文内,如 /test/hello)。

2. 加斜杠

(根路径,如 action="/hello"

  • 解析规则:从 域名的根路径 开始拼接(忽略当前页面的路径前缀)。
    无论当前页面 URL 是什么(比如 http://localhost:8080/test/page.html 或 http://localhost:8080/other/page.html),action="/hello" 都会解析为 http://域名:端口/hello(直接指向根路径下的 hello,与当前页面的路径无关)。

  • 特点强制从根开始,适用于 跨应用或根路径下的接口(若后端接口确实在根路径,如 /hello,但实际开发中较少见,因为 Web 应用通常有上下文路径)。

 举例对比

(假设应用上下文是 /test,当前页面是 /test/index.html):

  • 不加斜杠action="hello" → 解析为 http://localhost:8080/test/hello(带应用上下文,正确访问应用内的接口)。
  • 加斜杠action="/hello" → 解析为 http://localhost:8080/hello(不带应用上下文,若后端接口不在根路径,会 404 错误)。

总结:

  • 不加斜杠跟着当前页面的路径走(适合应用内的相对路径,自动带上应用上下文)。
  • 加斜杠直接从根开始(适合根路径下的绝对路径,与当前页面路径无关)。

后端 

@WebServlet("/hello")

后端 Servlet 路径

@WebServlet("/hello")

  • 路径含义
    该 Servlet 映射到 应用上下文内的 /hello 路径。假设应用上下文是 /test(如之前配置的 Context path),则:

    • 访问 URL 为 http://域名:端口/应用上下文/hello(例如 http://localhost:8080/test/hello)。
    • 映射规则:Servlet 路径是 相对于应用上下文的根(即 /test 是应用上下文,Servlet 路径 /hello 直接跟在后面,形成 /test/hello)。
  • 为什么必须加斜杠?
    Servlet 规范规定,映射路径 必须以斜杠开头(表示从应用上下文的根开始),否则编译器会报错(如 @WebServlet("hello") 是非法的,无法启动 Tomcat)。这是后端代码的 语法强制要求,和前端路径的解析逻辑不同。

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

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

相关文章

调用百度云API机器翻译

新建Python文件&#xff0c;叫 text_translator.py 输入 import requests import jsonAPI_KEY "glYiYVF2dSc7EQ8n78VDRCpa" # 替换为自己的API Key SECRET_KEY "kUlhze8OQZ7xbVRp" # 替换为自己的Secret Keydef main():# 选择翻译方向while True:di…

uni-app学习笔记六-vue3响应式基础

一.使用ref定义响应式变量 在组合式 API 中&#xff0c;推荐使用 ref() 函数来声明响应式状态&#xff0c;ref() 接收参数&#xff0c;并将其包裹在一个带有 .value 属性的 ref 对象中返回 示例代码&#xff1a; <template> <view>{{ num1 }}</view><vi…

『已解决』Python virtualenv_ error_ unrecognized arguments_--wheel-bundle

📣读完这篇文章里你能收获到 🐍 了解 virtualenv 参数错误的原因及解决方案📦 学习如何正确配置 Python 虚拟环境文章目录 前言一、问题描述1.1 错误现象1.2 影响范围二、问题分析2.1 根本原因三、解决方案3.1 兼容处理3.2 完整解决方案四、总结前言 本文详细介绍了在 D…

【Unity 2023 新版InputSystem系统】新版InputSystem 如何进行人物移动(包括配置、代码详细实现过程)

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、InputSystem配置二、GameInput 游戏输入脚本1.实现思路2.完整代码三、Player 游戏人物移动脚本1.实现思路2.完整代码四、场景脚本设置1.组件设置五、问题解决1.人物一直下落2.人物跳跃时,…

单片机-STM32部分:13-1、编码器

飞书文档https://x509p6c8to.feishu.cn/wiki/BpEywhaX9iqbiLkdqdAcmDnwnab EC旋转编码器 在产品开发过程中&#xff0c;需要位置闭环的的产品&#xff0c;类似电机类产品来说&#xff0c;编码器至关重要&#xff0c;它不仅可以使我们对带年纪进行精确的速度闭环&#xff0c;位…

关于我在使用stream().toList()遇到的问题

关于我在使用stream().toList()遇到的问题 问题描述 在测试以上程序的时候抛出了空指针异常 于是我以为是我数据库中存在null字段&#xff0c;但查看后发现并不存在为null的数据 问题排查 起初我以为问题出现在sort排序方法这&#xff0c;事实也确实是&#xff0c;当我把s…

多卡跑ollama run deepseek-r1

# 设置环境变量并启动模型 export CUDA_VISIBLE_DEVICES0,1,2,3 export OLLAMA_SCHED_SPREAD1 # 启用多卡负载均衡 ollama run deepseek-r1:32b 若 deepseek-r1:32b 的显存需求未超过单卡容量&#xff08;如单卡 24GB&#xff09;&#xff0c;Ollama 不会自动启用多卡 在run…

基于Java在高德地图面查询检索中使用WGS84坐标的一种方法-以某商场的POI数据检索为例

前言 随着移动互联网的飞速发展&#xff0c;基于位置的服务&#xff08;LBS&#xff09;需求日益增长&#xff0c;越来越多的应用需要从地图中检索特定区域内的地理信息&#xff0c;例如商业场所、公共服务设施等。商场作为城市商业活动的重要载体&#xff0c;其周边的地理信息…

本地部署dify+ragflow+deepseek ,结合小模型实现故障预测,并结合本地知识库和大模型给出维修建议

1.准备工作 使用ollama 拉取deepseek-r1:7b 官网下载ollama ollama run deepseek-r1:7b ollama list Ragflow专注于构建基于检索增强生成&#xff08;RAG&#xff09;的工作流&#xff0c;强调模块化和轻量化&#xff0c;适合处理复杂文档格式和需要高精度检索的场景。Dify…

SECERN AI提出3D生成方法SVAD!单张图像合成超逼真3D Avatar!

SECERN AI提出的3D生成方法SVAD通过视频扩散生成合成训练数据&#xff0c;利用身份保留和图像恢复模块对其进行增强&#xff0c;并利用这些经过优化的数据来训练3DGS虚拟形象。SVAD在新的姿态和视角下保持身份一致性和精细细节方面优于现有最先进&#xff08;SOTA&#xff09;的…

【物联网】 ubantu20.04 搭建L2TP服务器

部署篇 序言 为了是两个客户端在同一个网络内&#xff0c;需要找一台服务器&#xff0c;搭建一个L2TP服务器&#xff0c;通过L2TP使两个客户端在同一个网络内,为什么要搭建&#xff0c;主要是解决例如员工出差后&#xff0c;还需要连接公司内网资源的问题&#xff0c;本文主要…

网络安全深度解析:21种常见网站漏洞及防御指南

一、高危漏洞TOP 10 1. SQL注入(SQLi) 原理:通过构造恶意SQL语句突破系统过滤机制 典型场景: - 联合查询注入: union select 1,version(),3--+ - 布尔盲注:and (select substr(user(),1,1)=r) - 时间盲注:;if(now()=sysdate(),sleep(5),0)/ 防御方案: - 严格参数化查…

从零启动 Elasticsearch

elastic 有弹力的 ElaticSearch &#xff08;ES&#xff09;是一个基于 Lucene 的分布式全文检索引擎。可以做到近乎实时地存储、检索数据&#xff0c;并且本身具有良好的扩展性&#xff0c;可以扩展到上百台服务器&#xff0c;处理PB级别&#xff08;1 Petabyte 1024TB&…

Nginx基础知识

Nginx是什么&#xff1f; Nginx 是一款高性能的 Web 服务器、反向代理服务器和负载均衡器&#xff0c;以其高并发处理能力和低内存消耗著称。以下是 Nginx 的基础知识和常见配置示例&#xff1a; 1. 核心概念 • 配置文件位置&#xff1a;通常为 /etc/nginx/nginx.conf 或 /us…

Vue-监听属性

监听属性 简单监听 点击切换名字&#xff0c;来回变更Tom/Jerry&#xff0c;输出 你好&#xff0c;Tom/Jerry 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><title>监听属性</title><!-- …

python fastapi + react, 写一个图片 app

1. 起因&#xff0c; 目的: 上厕所的时候&#xff0c;想用手机查看电脑上的图片&#xff0c;但是又不想点击下载。此app 应运而生。 2. 先看效果 单击图片&#xff0c;能放大图片 3. 过程: 过程很枯燥。有时候&#xff0c; 有一堆新的想法。 但是做起来太麻烦&#xff0c;…

vscode c++编译onnxruntime cuda 出现的问题

问题描述 将onnx的dll文件和lib文件copy到可执行文件所在文件夹下后&#xff0c;现象&#xff1a; 双击可执行文件能正常运行 在vscode中点击cmake插件的运行按钮出现报错为 c [ONNXRuntimeError] : 1 : FAIL : LoadLibrary failed with error 126 “” when trying to load尝试…

中服云生产线自动化智能化调度生产系统:打造智能制造新标杆

前言 在当今制造业竞争日益激烈的背景下&#xff0c;实现生产线的自动化与智能化已成为企业提升竞争力的关键。作为国内技术领先的工业物联网平台、数字孪生、自动控制技术厂商&#xff0c;中服云凭借其深厚的技术积累和创新能力&#xff0c;打造了一套完整的生产线自动化智能…

云鼎入鼎系统:一站式电商管理解决方案

个人名片 &#x1f393;作者简介&#xff1a;java领域优质创作者 &#x1f310;个人主页&#xff1a;码农阿豪 &#x1f4de;工作室&#xff1a;新空间代码工作室&#xff08;提供各种软件服务) &#x1f48c;个人邮箱&#xff1a;[2435024119qq.com] &#x1f4f1;个人微信&a…

Leetcode134加油站

题目链接 134 题意图解&#xff1a; 题目给了n个节点&#xff0c;这些节点呈现环状&#xff0c;每次到一个低点要消耗cost[i]的油量。 从中我们可以得出一个结论&#xff1a;看一个点能不能到下一个点&#xff0c;就要用当前的油量减去消耗的量&#xff0c;那么gas[i] - cost…