前后端开发接口联调对接参数
前言
一个完整的互联网系统项目,需要前后端配合,进行上线,针对前端开发者,现在互联网主流的项目都是前后端分离
也就是后端负责提供数据接口,前端负责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
方式请求接口,在网页中通过axios
或request
或jQ
发起的get
请求数据,然后服务器端处理请求,并响应返回约定的数据格式,到网页中,返回给前端利用前端技术进行渲染,解析
通过post
方式请求接口
用户在网页中的Ajax
发起post
数据请求,服务器处理后响应给前端
接口文档
接口说明文档,是前端调接口的依据,一个好的接口文档包含了对接口的url,参数以及输出内容的说明,对照接口文档就能知道接口具体的作用,以及接口如何进行调用
接口名称:用来标识各个接口字段的简单说明,比如:登录,注册,获取列表信息
接口
URL
:接口的调用地止接口调用方式:如:
get
/post
参数格式:接口需要传递的参数,每个参数必须包含的参数名称,参数类型,是否必传,参数说明
响应格式:接口的返回值详细描述,一般包含数据名称,数据类型,说明
返回示例(可选):通过对象的形式,列出服务器返回的数据接口结构
对于初学者,只写静态页,却不写交互,对接口的前端,肯定是不行的,也有的前端,没有对接过后台接口,刚开始都是很懵逼的状态,你会发现后端把接口文档给你
你就不知道怎么办了的,怎么看接口文档的,解决这个问题,就是多做项目,项目做多了的,就知道怎么处理了的,多参与一些大型项目
Vue中实现3D得球自动旋转
2023-09-08

Vue中如何实现城市3D分布图
2023-09-07

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

视频号如何做视频任务进行变现
2023-09-05

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

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

(能绘画,能问答)
相关文章:

前后端开发接口联调对接参数
前言 一个完整的互联网系统项目,需要前后端配合,进行上线,针对前端开发者,现在互联网主流的项目都是前后端分离 也就是后端负责提供数据接口,前端负责UI界面数据渲染 凡是在前台数据展示与用户交互的,都是由前端来实现的,而数据来源是由后台服务提供的 在浏览器c端能够发送后端…...

定时任务框架-xxljob
1.定时任务 spring传统的定时任务Scheduled,但是这样存在这一些问题 : 做集群任务的重复执行问题 cron表达式定义在代码之中,修改不方便 定时任务失败了,无法重试也没有统计 如果任务量过大,不能有效的分片执行 …...

idea项目配置三大步
场景: 使用 idea 打开一个新项目的时候,想让项目迅速跑起来, 其实只需要下面简单三步: 1. 首先,配maven 2. 其次,配置 jdk 这里配置 project 就行了,不用管Modules中的配置。 3. 最后&#…...

学会SpringMVC之自定义注解各种场景应用,提高开发效率及代码质量
目录 一、简介 ( 1 ) 是什么 ( 2 ) 分类 ( 3 ) 作用 二、自定义注解 ( 1 ) 如何自定义注解 ( 2 ) 场景演示 场景一(获取类与方法上的注解值) 场景二( 获取类属性上的注解属性值 ) 场景三( 获取参数修…...

步态识别常见模块解读及代码实现:基于OpenGait框架
步态识别常见模块解读及代码实现:基于OpenGait框架 最近在看步态识别相关论文,但是因为记忆力下降的原因,老是忘记一些内容。因此记录下来方便以后查阅,仅供自己学习参考,没有背景知识和论文介绍。 目录 步态识别常见…...
前端八股文之“闭包”
一、定义 一句话概括闭包:能够访问函数内部变量的函数与这个变量的组合构成了闭包结构。如下代码 function fuc1(){let num 999return function fuc2(){console.log(num)}}fuc1()(); 如代码所示,fuc2和父级变量num构成了一个闭包环境。 二、原理 子…...
数据可视化:掌握数据领域的万金油技能
⭐️⭐️⭐️⭐️⭐️欢迎来到我的博客⭐️⭐️⭐️⭐️⭐️ 🐴作者:秋无之地 🐴简介:CSDN爬虫、后端、大数据领域创作者。目前从事python爬虫、后端和大数据等相关工作,主要擅长领域有:爬虫、后端、大数据开发、数据分析等。 🐴欢迎小伙伴们点赞👍🏻、收藏⭐️、…...

Apache Kafka 基于 S3 的数据导出、导入、备份、还原、迁移方案
在系统升级或迁移时,用户常常需要将一个 Kafka 集群中的数据导出(备份),然后在新集群或另一个集群中再将数据导入(还原)。通常,Kafka集群间的数据复制和同步多采用 Kafka MirrorMaker࿰…...

事务管理AOP
事务管理 事务回顾 概念:事务是一组操作的集合,它是一个不可分割的工作单位,这些操作要么同时成功,要么同时失败 操作: 开启事务:一组操作开始前,开启事务-start transaction/be…...

Java从Tif中抽取最大的那张图进行裁剪成x*y份
之前我有一篇帖子《kfb格式文件转jpg格式》讲述到 kfb > tif > jpg,但是针对于超大tif中的大图是无法顺利提取的,就算是能顺利提取,试想一下,2G的tif文件,如果能提取处理最大的那张图,并且在不压缩的…...

人工智能AI界的龙头企业,炸裂的“英伟达”时代能走多远
原创 | 文 BFT机器人 1、AI芯片的竞争格局已趋白热化 尽管各类具有不同功能和定位的AI芯片在一定程度上可实现互补,但同时也在机遇与挑战并存中持续调整定位。在AI训练端,英伟达的GPU凭着高算力的门槛,一直都是训练端的首选。 只有少数芯片能…...

【实战】H5 页面同时适配 PC 移动端 —— 旋转横屏
文章目录 一、场景二、方案三、书单推荐01 《深入实践Kotlin元编程》02 《Spring Boot学习指南》03 《Kotlin编程实战》 一、场景 一个做数据监控的单页面,页面主要内容是一个整体必须是宽屏才能正常展示,这时就不能用传统的适配方案了,需要…...

使用凌鲨进行聚合搜索
作为研发人员,我们经常需要在多个来源之间查找信息,以便进行研发工作。除了常用的搜索引擎如百度和必应之外,我们还需要查阅各种代码文档和依赖包等资源。这些资源通常分散在各个网站和文档库中,需要花费一定的时间和精力才能找到…...
程序设计之——手把手教你如何从Excel文件中读取学生信息
在当今信息化时代,计算机技术已经深入到各个领域,而程序设计则成为推动信息化建设的关键技术之一。在众多领域中,学生信息管理系统无疑是其中一个重要的应用。本文将从学生信息管理系统的开发入手,探讨开如何高效且保证质量的完成…...

Docker容器化技术(从零学会Docker)
文章目录 前言一、初识Docker1.初识Docker-Docker概述2.初识Docker-安装Docker3.初识Docker-Docker架构4.初识Docker-配置镜像加速器 二、Docker命令1.Docker命令-服务相关命令2.Docker命令-镜像相关命令3.Docker命令-容器相关命令 三、Docker容器的数据卷1.Docker容器数据卷-数…...

【新版】系统架构设计师 - 案例分析 - 总览
个人总结,仅供参考,欢迎加好友一起讨论 架构 - 案例分析 - 总览 新旧大纲对应 旧版新版系统规划软件架构设计设计模式系统设计系统建模分布式系统设计嵌入式系统设计系统的可靠性分析与设计系统的安全性和保密性设计系统计划信息系统架构的设计理论和实…...

【Git】02-Git常见应用
文章目录 1. 删除不需要分支2. 修改最新Commit的Message3. 修改之前Commit的Message4. 连续多个Commit整理为一个5. 不连续的Commit整理为一个6. 比较暂存区和HEAD中文件差异7. 比较工作区和暂存区中文件差异8. 将暂存区恢复为HEAD相同9. 工作区文件恢复和暂存区相同10. 取消暂…...

YOLO物体检测-系列教程2:YOLOV2整体解读
🎈🎈🎈YOLO 系列教程 总目录 YOLOV1整体解读 YOLOV2整体解读 YOLOV2提出论文:YOLO9000: Better, Faster, Stronger 1、YOLOV1 优点:快速,简单!问题1:每个Cell只预测一个类别&…...

u盘传输数据的时候拔出会怎么样?小心这些危害
U盘是我们日常生活和工作中常使用的一种便携式存储设备。然而,在使用U盘传输数据时,有时我们会不小心将它拔出,而这个看似微不足道的行为实际上可能会带来严重的后果。本文将向您介绍U盘在传输数据时突然拔出可能导致的各种危害,其…...
【踩坑纪实】URL 特殊字符 400 异常
URL 特殊字符 400 异常 笔者之前在写后端或者前端时,在处理表单时,经常有对特殊字符的检验处理,但自己也不清楚为什么要这么做,浅浅地以为可能是特殊字符不好看或者存取可能会造成异常?不过一直没遇到过问题ÿ…...

XML Group端口详解
在XML数据映射过程中,经常需要对数据进行分组聚合操作。例如,当处理包含多个物料明细的XML文件时,可能需要将相同物料号的明细归为一组,或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码,增加了开…...

CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框,很难让人不联想到SQL注入,但提示都说了不是SQL注入,所以就不往这方面想了 先查看一下网页源码,发现一段JavaScript代码,有一个关键类ctfs…...
DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...
DockerHub与私有镜像仓库在容器化中的应用与管理
哈喽,大家好,我是左手python! Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库,用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...
Admin.Net中的消息通信SignalR解释
定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径, 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解,但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后,通常在该文件中会出现以下配置&…...
在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module
1、为什么要修改 CONNECT 报文? 多租户隔离:自动为接入设备追加租户前缀,后端按 ClientID 拆分队列。零代码鉴权:将入站用户名替换为 OAuth Access-Token,后端 Broker 统一校验。灰度发布:根据 IP/地理位写…...
【JavaSE】绘图与事件入门学习笔记
-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角,以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向,距离坐标原点x个像素;第二个是y坐标,表示当前位置为垂直方向,距离坐标原点y个像素。 坐标体系-像素 …...
代理篇12|深入理解 Vite中的Proxy接口代理配置
在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...
在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案
这个问题我看其他博主也写了,要么要会员、要么写的乱七八糟。这里我整理一下,把问题说清楚并且给出代码,拿去用就行,照着葫芦画瓢。 问题 在继承QWebEngineView后,重写mousePressEvent或event函数无法捕获鼠标按下事…...