前端如何与后端对接口

已于 2023-02-12 23:03:11 修改
阅读量3.7w 收藏 350
点赞数 42
分类专栏： vue实战 文章标签： vue.js javascript java 前端
于 2021-03-12 10:31:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45822171/article/details/114400681
版权

👩 个人主页：不爱吃糖的程序媛
🙋‍♂️ 作者简介：前端领域新星创作者、CSDN内容合伙人，专注于前端各领域技术，成长的路上共同学习共同进步，一起加油呀！
✨系列专栏：前端面试宝典、JavaScript进阶、vue实战
📢 资料领取：前端进阶资料以及文中源码可以在🎈公众号“不爱吃糖的程序媛”领取

导语：前端写好了页面如何与后端对接口，下面是一篇看图步骤说明，更方便大家去理解操作。

调接口的步骤：

1、serve定义请求的url
2、action里面定义方法
3、页面调用action方法
4、接口通了返回数据就绑定数据到页面

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
接口状态码：
在这里插入图片描述
如何找接口：
在这里插入图片描述
在这里插入图片描述

html中使用Ajax与后台接口api交互(以登录功能为例)
禤永豪
03-25 3万+
一、查阅开发文档首先，要做这个功能前，我们必须先查阅后台接口文档，了解使用登录接口时，需要提交哪些参数，并且接口使用返回的数据。 这里我使用了一个返回json格式数据的登录接口为例，讲解怎么使用Ajax与后台接口交互。由上图开发文档里，我们可以清楚的知道，要使用这个登录接口，我们只需要提交账号adminName和密码pwd两个参数。二、编写javascript(Ajax)实现登录 var xmlh
前端调用后端接口时，HTTP协议提供了多种请求方式
weixin_60631847的博客
07-15 622
GET请求用于请求服务器发送资源。POST请求的数据不会附加在URL之后，而是作为请求体（body）发送给服务器。：PUT请求用于向服务器上传资源或更新资源。如果指定的资源不存在，服务器可能会根据请求创建新的资源；它主要用于CORS（跨源资源共享）预检请求，以检查实际请求是否可以被服务器接受。与PUT请求不同，PATCH请求只包含需要修改的资源字段，而不是整个资源。：HEAD请求与GET请求类似，但它只请求资源的响应头，而不请求资源本身的内容。：DELETE请求用于请求服务器删除指定的资源。
前端和后端是如何交互的
张俊辉
11-18 4万+
1、前端请求数据URL由谁来写 在开发中，URL主要是由后台来写好给前端。 若后台在查询数据，需要借助查询条件才能查询到前端需要的数据时，这时后台会要求前端提供相关的查询参数（即URL请求的参数）。 2、接口文档主要由谁来写 接口文档主要由后台设计和修改。 后台直接跟数据打交道，最清楚数据库里有什么数据，能返回什么数据。 前端只是数据的被动接受者，只是接口文档的使用者。
Vue项目前后端接口的联调
VVVZCS的博客
09-10 1万+
我们在之前的项目中，使用的都是本地的JSON数据文件，那么在实际项目开发过程中，肯定是不能用本地的JSON文件的，所以我们需要把JSON文件放在服务器上，我们使用的是Apache2.4本地服务器 1，下载压缩包 http://httpd.apache.org/download.cgi 2，下载完之后，解压到自己定义的目录 D:\DevelopTools\Apache 然后更改...
前后端是怎么对接起来的？（ Vue 与 Spring Boot）
最新发布
snowfoootball的博客
04-17 1765
在早期的 Web 应用开发中，前端页面和后端逻辑常常紧密耦合在一起。例如，一个 Java Web 项目往往采用JSP 页面 + Servlet 或 Spring MVC Controller的模式。用户请求一个页面，服务器会在后端拼接 HTML 并将整页内容返回给浏览器。页面渲染在服务端完成，前端只负责展示结果；前端和后端代码耦合严重，一处改动往往需要同时修改后端 JSP 文件与 Controller 逻辑；开发效率受限，前端无法独立开发或测试功能，后端压力较大；
前后端对接
augenstern416的博客
03-04 1626
前端与后端的对接主要依赖接口，通过 HTTP 请求（如 GET、POST）进行数据交互。清晰的接口文档。统一的请求和返回格式（通常是 JSON）。处理跨域、认证、错误等问题。使用工具进行联调和测试。通过良好的协作和规范，可以确保前后端高效对接。
【前端接口对接：从小白到专家的完整指南】
weixin_37342647的博客
04-16 956
/ 定义请求参数类型// 定义响应数据类型data?: {// 基本信息数据接口// 企业名称// 所在地// 节能管理代码// 统一社会信用代码// 所属行业// 能源管理岗位人员// 联系方式// 统一的响应类型data: T;// 响应处理T== 0) {// 统一处理业务错误// 根据错误码处理特定情况// 未登录，跳转到登录页// 权限不足showToast('权限不足');
❤️ 前端如何与后端对接？当年差点和后端同学打起来了！
超逸の学习技术博客
10-12 3万+
在过去前后端打架的时代，我觉得你写的接口不行，而你又觉得我写的页面太简单了，觉得我技术一般。然后就打起来了…
前端如何调用后端接口
weixin_35749786的博客
02-10 4079
前端可以通过 Ajax，Fetch API，Axios 等方式调用后端接口。 Ajax：使用 XMLHttpRequest 对象或者使用现代浏览器提供的 fetch() API。 Fetch API：是一个很容易使用的 API，可以方便地从后端请求数据。 Axios：是一个基于 Promise 的 HTTP 库，可以轻松发送 HTTP 请求。 例如，使用 Axios 调用后端接口： axios.g...
前端如何调用后端接口进行数据交互（极简）
热门推荐
weixin_43005654的博客
03-18 7万+
axios，前后端数据交互，数据渲染，发请求，axjax
蓝色版微信去水印小程序源码带流量主+前端+后端 +接口
05-08
本文将详细讲解“蓝色版微信去水印小程序源码带流量主+前端+后端 +接口”的相关知识点，包括微信小程序的基本概念、去水印技术、前端开发、后端服务以及流量主接口。 1. 微信小程序： 微信小程序是腾讯公司推出的一...
最新短视频去水印小程序源码修复版-前端后端内置接口+第三方接口
04-08
最新短视频去水印小程序源码，前端+后端，内置接口+第三方接口，修复数据库账号密码错误问题，内置接口支持替换第三方接口，看了一下文件挺全的，可以添加流量主代码，搭建需要准备一台服务器，备案域名，小程序开发...
前端调用后端新增接口报错
Jie1104的博客
10-27 1047
关于@RequestBody注解，主要用来接收前端传递给后端的json字符串中的数据的(请求体中的数据的)，后台使用@RequestBody注解，前端是需要使用的Content-Type类型为application/json传入时才能被后端方法接收到，如果使用Content-Type为其他类型时则接收不到。后台框架，参数使用了@RequestBody注解进行绑定，用了这个注解进行数据绑定，只能接受数据类型为 Content-Type类型为application/json。剩下是我对两种解决方法的了解。
前端vue2与后端接口的简单联调步骤
qq_70786441的博客
05-23 2217
创建俩个包 utlis 和api（不确定谁便起）再在包里创文件夹 request.js impus.js。import create from "../utils/request"把request.js调过来。baseURL:"http://localhost:8083",自己后端的端口号。timeout:5000后端传给前端的时间。在 request.js把axios调过来。安装axios npm i axios。impus.js里写的是接口。在main.js里写。在main.js里写。
《 新手》web前端（axios）后端（java-springboot）对接简解
只会写bug的靓仔的博客
10-01 8285
这篇文章我主要总结了：前端参数请求头意义，后端接受参数的注解，以及跨域的流程，如何处理跨域。**为什么后端处理跨域尽量在业务之前进行？**
前端向后端调用接口的方式
Mark Sheng的博客
06-29 9209
axios（常用） 接口由URL和HTTP方法构成，URL为接口的地址，HTTP方法指的是GET, PUT, DELETE等等传输方式。 GET方式： axios.get().then().catch() 注：get方式传参数可以直接跟在url后面，也可以通过param对象传 POST方式： axios.post().then().catch() 注：post方式传参必须用对象传 ...
掌握Postman：高效前端与后端接口测试
- 前端开发者使用Postman来测试和调试API接口，验证前端应用与后端API的交互。 - 后端开发者可以利用Postman来确保API按照预期工作，并且能够处理各种请求。 - 测试工程师可以用Postman进行接口测试，确保API在...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序媛夏天

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值