前端相对路径 与后端相对路径的区分

路径分两种:一种是前端路径、一种是后端路径

前端绝对路径: 永远永远相对于服务器的根目录

前端相对路径: 相对于当时的URL

举例:https://www.baidu.com/a/b/c/d.html

从上面的页面中发出一个/a.css请求 绝对路径

a.css文件的前端URL => https://www.baidu.com/a.css

从上面的页面中发出一个./a.css请求最终:相对 

a.css文件的前端URL => https://www.baidu.com/a/b/c/a.css

后端路径:

后端绝对路径: 永远永远以盘符根目录开始寻找

后端的相对路径: 以当前的路径开始寻找

举例:c:/a/b/c/d/e/index.js

从该文件下读取一个文件 文件的路径: /index.html 绝对路径 后端的绝对路径是盘符根目录

最终读取到的是 =>  C:/index.html

从该文件下读取一个文件 文件的路径: ./index.html 相对路径

最终读取到的是 =>  C:/a/b/c/d/e/index.html

 

 

无论是前端还是后端的相对路径 ,只要看到有./或者不写 就是相对路径 

前端的绝对路径相对于服务器的根目录  后端的绝对路径相对于盘符根目录

转载于:https://www.cnblogs.com/zmz-com/p/10256388.html

<think>嗯,用户想知道前端后端对接的最佳实践和常用方式。首先,我需要回顾之前提供的引用内容,看看有没有相关的信息。引用1提到前端接口对接涉及HTTP协议、数据处理、错误处理等,引用2强调了学习前端框架和性能优化,引用3则讨论了PHP和后端处理的重要性,以及前后端分离的最佳实践。 用户的问题比较广泛,所以需要分步骤回答。首先应该解释常用的对接方式,比如RESTful API、GraphQL、WebSocket等,这些都是常见的通信方式。然后,最佳实践可能包括接口规范、数据格式、错误处理、安全措施等方面。 接下来,要考虑用户可能的实际需求。比如,作为前端开发者,他们可能更关心如何发起请求、处理响应、调试接口。同时,团队协作和文档维护也是重要的点,需要提及Swagger或OpenAPI这样的工具。 还要注意引用中的内容,引用3提到区分前后端责任,避免在HTML中混用PHP,所以应该强调前后端分离,使用JSON数据交互,而不是服务端渲染。另外,引用1提到性能优化,可能需要在对接方法中讨论缓存策略和压缩技术。 需要检查是否有遗漏的重要点,比如身份验证(JWT、OAuth)、版本控制、跨域处理(CORS)等。这些都是对接过程中常见的问题,应该包含在最佳实践中。 最后,生成相关问题,引导用户深入思考,比如如何设计API、处理安全性、实时通信等。确保问题覆盖用户可能感兴趣的各个方面,帮助他们进一步学习。</think>### 前端后端对接的常用方式及最佳实践 #### 一、常用对接方式 1. **RESTful API** - 基于HTTP协议,通过标准方法(GET/POST/PUT/DELETE)操作资源,例如: ```javascript // 前端通过fetch调用API示例 fetch('/api/users', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({name: 'John'}) }) ``` - 数据格式通常为JSON,支持跨平台和前后端解耦[^1][^3]。 2. **GraphQL** - 允许前端自定义查询字段,减少冗余数据传输。例如: ```graphql query { user(id: "1") { name email } } ``` - 适用于复杂数据需求的场景[^2]。 3. **WebSocket** - 建立持久化双向通信通道,适用于实时聊天、推送等场景: ```javascript const socket = new WebSocket('ws://api.example.com'); socket.onmessage = (event) => { console.log(event.data); }; ``` #### 二、最佳实践 1. **接口规范定义** - 使用OpenAPI/Swagger编写标准化文档,明确请求参数、响应格式和状态码。例如: ```yaml paths: /users: get: responses: 200: description: 用户列表 schema: type: array items: $ref: '#/definitions/User' ``` 2. **错误处理标准化** - 统一错误码和消息格式,前端需处理HTTP状态码(如401/500)和业务错误码: ```json {"code": 1001, "message": "参数校验失败", "data": null} ``` 3. **安全措施** - 使用HTTPS加密传输 - 通过JWT实现身份验证: ```javascript // 请求头添加Token headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')} ``` 4. **性能优化** - 启用HTTP缓存(Cache-Control头部) - 使用Gzip压缩响应数据 - 批量请求合并(如GraphQL的Batching)[^2] 5. **跨域处理** - 后端配置CORS策略,前端处理预检请求: ```http Access-Control-Allow-Origin: https://yourdomain.com Access-Control-Allow-Methods: GET,POST ``` #### 三、团队协作要点 1. **前后端分离架构** - 前端独立部署静态资源,后端仅提供API[^3] - 使用Mock Server模拟接口进行并行开发 2. **版本控制** - API路径包含版本号:`/api/v1/users` - 通过Accept头部指定版本:`Accept: application/vnd.myapi.v1+json` 3. **自动化测试** - 前端编写接口调用单元测试 - 使用Postman/Newman进行接口自动化测试 $$ \text{响应时间优化公式:} T = T_{\text{网络}} + T_{\text{后端处理}} + T_{\text{前端渲染}} $$
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值