前后端开发接口联调对接参数

news2024/11/20 3:37:19

78dbee3d564d5d9caf7289ece77ba049.jpeg

前言

一个完整的互联网系统项目,需要前后端配合,进行上线,针对前端开发者,现在互联网主流的项目都是前后端分离

也就是后端负责提供数据接口,前端负责UI界面数据渲染

凡是在前台数据展示与用户交互的,都是由前端来实现的,而数据来源是由后台服务提供的

在浏览器c端能够发送后端可识别的http参数请求,后台服务接收响应,并能够返回具体的数据给浏览器前端,最终在浏览器端完成数据的展示,渲染

一个完整的前端,不仅仅是完成编写UI界面,还需要对接后端接口,完成数据的逻辑处理的

那前端一般怎么去跟后端去对接,接口字段,参数,对于刚入行的新手前端,是有一些懵逼的,有的时候,就是这样,后端讲到一些东西,比如:什么高并发,什么服务端,客户端,浏览器端

有些专业术语,是需要知道的,不然就很难沟通,协作的,一个前端只写静态页面的,不做数据交互,不是一个合格的前端的,尤其是一些前端机构培训出来的,只教学生写页面,但是数据交互这块却很少提,一旦去工作,发现自己会的那点东西真的是小巫见大巫的,准确得来说,就是干不了活,干到一半,还需要别人提供帮助

客户端

负责获取和消费资源的电脑,比如:浏览器,Exe程序,能够下载获取数据的地方,能够向服务器端发送请求数据

服务端

负责解析处理数据,接收客户端发来的资源请求,并能够进行响应,按照客户端约定的数据格式(xml,JSON)等,把指定的资源(文本,图片,视频)等返回给客户端

无论我们是在网页端还是在App端,都是通过请求,处理,响应的方式从服务器端获取回来的

接口请求方式

客户端向服务端发送请求数据时,一般常见的有两种:get和post

  • get:常用于获取服务器的资源,比如:更具url地止,从服务器获取html文件,css文件,图片文件等

  • post:通常用于向服务器提交资源,也就是网服务器里发送资源,比如:新用户注册,表单提交,需要收集用户输入数据等

URL地止

URL专业点交统一资源定位符,用于标识互联网上每个资源的唯一存放位置,浏览器只有通过URL地止,才能正确定位资源的存放位置,从而成功访问到对应的资源

  • 第一部分:客户端与服务器之间的通信协议(http/https)

  • 第二部分:存在该资源的服务器名称(网站域名:如video.itclan.net)

  • 第三部门: 资源在服务器上具体存放的位置(/后面的内容)

URL编码与解码

URL地止中,只允许出现英文相关的字目,什么中文字符,它是识别不了的,需要将中文字符进行编码,转义

  • encodeURL():将对汉语等特殊字符进行编码

  • encodeURIComponent:用来encodeURL中想要传输的字符串,他会对所有的Url敏感字符进行encode

  • decodeURL():解码函数,对上面两个函数输出的字符进行反向解码

  • decodeURIComponent:同上解码函数

接口

后端同学提到的接口,其实就是URL,对接口,其实也就是需要前后端约定,接口参数,一般后端同学它是知道的,而且也是它定义的,当然前端定义也没有问题

使用Ajax请求数据时,被请求的URL地止,就叫做接口地止,就是给前端提供数据的,简称接口

每个接口都必须要有请求方式,也就是确定是get请求还是post请求

通过get方式请求接口,在网页中通过axiosrequestjQ发起的get请求数据,然后服务器端处理请求,并响应返回约定的数据格式,到网页中,返回给前端利用前端技术进行渲染,解析

通过post方式请求接口

用户在网页中的Ajax发起post数据请求,服务器处理后响应给前端

接口文档

接口说明文档,是前端调接口的依据,一个好的接口文档包含了对接口的url,参数以及输出内容的说明,对照接口文档就能知道接口具体的作用,以及接口如何进行调用

  • 接口名称:用来标识各个接口字段的简单说明,比如:登录,注册,获取列表信息

  • 接口URL:接口的调用地止

  • 接口调用方式:如:get/post

  • 参数格式:接口需要传递的参数,每个参数必须包含的参数名称,参数类型,是否必传,参数说明

  • 响应格式:接口的返回值详细描述,一般包含数据名称,数据类型,说明

  • 返回示例(可选):通过对象的形式,列出服务器返回的数据接口结构

对于初学者,只写静态页,却不写交互,对接口的前端,肯定是不行的,也有的前端,没有对接过后台接口,刚开始都是很懵逼的状态,你会发现后端把接口文档给你

你就不知道怎么办了的,怎么看接口文档的,解决这个问题,就是多做项目,项目做多了的,就知道怎么处理了的,多参与一些大型项目

Vue中实现3D得球自动旋转

2023-09-08

9c8ecdb67859e8152ce81acd4b735910.jpeg

Vue中如何实现城市3D分布图

2023-09-07

b37fa63990724e90c65e21b4ffcc71d8.jpeg

Es6中的拓展运算符参数解构在实际项目当中应用

2023-09-06

6f94c334b3d40b2c7227d9de482a6e3a.jpeg

视频号如何做视频任务进行变现

2023-09-05

f478fe627a56a6194d01214361d8932d.jpeg

视频号如何插入带货商品链接进行变现

2023-09-04

7d32adb7404ce0e364dd7945c8162ec5.jpeg

36岁男子自称被裁,曾是前500强公司市场总监,最后接受做外买

2023-09-03

8226382243532ad10ff34b0713711deb.jpeg

3482b3addcb9d4b18d0f4f67c7b0641b.png

(能绘画,能问答)

c938501b35fbbd7b0511aa4cbfd3fbc2.png

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

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

相关文章

STM32 ~ GPIO不同模式之间的区别与实现原理

GPIO全称General Purpose Input Output ,即通用输入/输出。其实GPIO的本质就是芯片的一个引脚,通常在ARM中所有的I/O都是通用的。不过,由于每个开发板上都会设计不同的外围电路,这就造成了GPIO的功能可能有所不同。大部分GPIO都是…

百度测开初面面试题分享(答案+文档)

1、java常用的异常处理机制 Java常用的异常处理机制有以下几种: 1)try-catch-finally语句:用于捕获和处理异常。将可能抛出异常的代码放在try块中,然后在catch块中处理异常。无论是否发生异常,finally块中的代码都会…

算法总结10 线段树

算法总结10 线段树 线段树2569. 更新数组后处理求和查询 线段树 有一个数组,我们要: 更新数组的值(例如:都加上一个数,把子数组内的元素取反)查询一个子数组的值(例如:求和&#x…

【进阶篇】MySQL数据库中的 锁详解

文章目录 1. 介绍2. MySQL 锁类型3. 锁的粒度4. 锁的使用场景和示例5. 锁的性能优化和注意事项6. MySQL 的锁机制和实现细节1. 锁的存储和管理2. 锁的竞争和调度3. 锁的实现原理 7. 锁的调优和故障处理1. 锁等待和超时:2. 死锁处理和恢复:3. 锁的监控和分…

AtCoder Beginner Contest 313 C 一个序列同时加一个数和减一个数,直到最大和最小之间相差最大为1(结论可记住)

AtCoder Beginner Contest 313 C 做题链接:AtCoder Beginner Contest 313 问题陈述 给你一个整数序列 A(A1​,A2​,…,AN​)。你可以执行以下操作任意次数(可能为零)。 选择带有 1≤i,j≤N的整数 i和 j。将Ai​减少 1,将Aj​增…

珂学送分

从后往前倒着走。 先找出每个点能走到的最远的右端点是什么,记录为r[i],每个点i可能分为的情况有(r[i] - i 1)种,每一种的概率是1 / (r[i] - i 1),(每一种的概率乘以它后面那个格子的期望)之和再加自己的…

Python用若干列的数据多条件筛选、去除Excel数据并批量绘制直方图

本文介绍基于Python,读取Excel数据,以一列数据的值为标准,对这一列数据处于指定范围的所有行,再用其他几列数据数值,加以筛选与剔除;同时,对筛选与剔除前、后的数据分别绘制若干直方图&#xff…

Peppercontent.io:人工智能驱动的内容生成工具

【产品介绍】​ 名称 Peppercontent.io 成立时间​ 成立于2017年 具体描述 Peppertype.ai 是一种基于GPT-3的AI辅助工具,而GPT-3则是一种深度学习自回归语言模型。这一技术潜藏着巨大的潜力,可以立刻为企业和创作者提供创意内容&…

JavaScript的DOM操作(二)

一、元素的特性attribute 1.元素的属性和特性 前面我们已经学习了如何获取节点,以及节点通常所包含的属性,接下来我们来仔细研究元素Element。 我们知道,一个元素除了有开始标签、结束标签、内容之外,还有很多的属性&#xff0…

influxdb2.7基本介绍安装与启动

概念 timestamp: influxdb所有的数据都会有一个列_time来存timestamp。默认是以nanosecond格式存储的。field: field就是mysql中的字段,field key存储在_field字段中,field value就是字段值,存储在_value字段中。field key和field value对组…

【Java 基础篇】Java可变参数:灵活处理不定数量的方法参数

在Java编程中,可变参数是一项强大的功能,它允许你编写更加灵活的方法,接受不定数量的参数。本文将详细解释Java可变参数的用法、语法以及最佳实践。 什么是可变参数? 可变参数是Java 5引入的一项功能,它允许你在方法…

【AIGC】提示词 Prompt 分享

提示词工程是什么? Prompt engineering(提示词工程)是指在使用语言模型进行生成性任务时,设计和调整输入提示(prompts)以改善模型生成结果的过程。它是一种优化技术,旨在引导模型产生更加准确、…

腾讯mini项目-【指标监控服务重构】2023-07-17

今日已办 根据导师的指导意见 修改了otelclient相关配置的代码 认真学习uptrace的文档,会比otel、signoz的好理解: 什么是OpenTelemetry https://uptrace.dev/opentelemetry/architecture.html#opentelemetry-sdk trace部分介绍 https://uptrace.dev/o…

Vue3上 使用腾讯地图 基础展示

一,注册账号 申请key值 第one步 先注册 腾讯位置服务 - 立足生态,连接未来 (qq.com) 第two步 注册key!!!!! 并选择开发参考的开发文档 选择类型 添加成功后会在我的应用里看到你的key值 第三步 (因为我这里是在pc端使用 就直接只用Web端文档了) 二,加载地图 …

【FPGA项目】进阶版沙盘演练——报文收发(报文处理、CDC、CRC)

前言 书接上文【FPGA项目】沙盘演练——基础版报文收发_子墨祭的博客-CSDN博客,前面我们做了基础版的报文收发,相信对逻辑设计有了一定的认知,在此基础上,继续完善一个实际报文收发可能会遇到的一些处理: 报文处理握手…

布隆过滤器 python3 pybloom_live使用例子 存储开销

1. 安装pybloom_live from pybloom_live import BloomFilter# 创建一个Bloom过滤器对象 # 错误率(False Positive Rate)在布隆过滤器中指的是,不存在的元素被错误地认为存在于集合中的概率 bf BloomFilter(capacity10000, error_rate0.001)#…

IntelliJ IDEA使用_常规设置

文章目录 版本说明主题设置取消检查更新依赖自动导入禁止import xxx.*、允许import内部类显示行号、方法分割线、空格代码提示(匹配所有字母)自定义注释颜色添加头部注释自定义字体设置字符编码关联本地GitJDK编译版本Maven配置Tomcat配置代码注释设置头…

iPhone 15秋季发布会召开,媒介盒子多家媒体持续报道

现如今互联网引流成本越来越高不说,难度越来越大,大多数都是投入巨大,收效甚微。因此,用有限的成本带来高回报的效果成为企业共同的追求。 当然,企业想要产品服务引流绝非易事。 为什么你的品牌营销不见效?新产品上市要怎么做宣传?盒子以新发布的苹果15为例分析,给你一些启…

bootstrap按钮

<!--1、可以转换成按钮的元素--> <!--可能使用 <button> 元素来获得在各个浏览器上获得相匹配的绘制效果--> <a class"btn btn-default">按钮a标签</a> <button class"btn btn-default">按钮button标…

scrapy框架学习笔记-1

前言 在现代互联网时代&#xff0c;网页数据获取和处理已经成为了重要的技能之一。无论是为了获取信息、做市场研究&#xff0c;还是进行数据分析&#xff0c;掌握网页爬取和数据处理技术都是非常有用的。本文将介绍从网页加载到数据存储的完整过程&#xff0c;包括网络请求、…