发布时间：2022-2-11 分类： 电商动态
如果你想做好互联网产品的设计，你必须对一些基本的技术实现原则有所了解。本文将对Internet产品的前后数据交互进行一个小小的总结。 （技术轻轻喷洒）
HTTP协议
前端和后端之间的交互协议不仅仅是HTTP协议。本文仅以HTTP协议为例。
HTTP协议，即超文本传输协议，是因特网上使用最广泛的网络协议。 HTTP是客户端和服务器请求和响应的标准。
HTTP协议很简单（属于TCP协议族），使得HTTP服务器的程序大小很小，因此通信速度很快。当客户端从服务器请求服务时，它只需要传递请求方法和路径。而且，HTTP允许传输任何类型的数据对象。
HTTP协议只是一个简短的介绍。众所周知，因特网产品的正面和背面之间的数据交互是通过通信协议（不限于HTTP）完成的。
接口
在Internet字段中，单词将出现在不同的场景中。我经常听到工程师说“让背景为我提供一个界面。我直接称这个界面”“在这里你设计一个接口，我将实现它。接口是提供特定功能的标准和抽象。它是预定义的函数，包括接口地址，传入参数以及返回参数和数据。可以简单地理解，当需要访问某些数据时，合格的参数在正常状态下传递，并且接收数据范围中的返回参数。前后交互基本上是通过程序界面实现的。
数据交互的过程可以简单地理解为前台想要获取一些数据，并且传入的参数通过URL接口地址传递给服务器，服务器根据传递的参数知道前台需要获取哪些数据。 in，并转到数据库以获取数据。然后将所需数据返回前台，前台将获取数据以显示相应页面。
JSON
JSON（JavaScript Object Notation）是一种轻量级数据交换格式，它以完全独立于编程语言的文本格式存储和表示数据。干净清晰的层次结构使JSON成为理想的数据交换语言。易于读写，还便于机器解析和生成，有效提高网络传输效率。
前端和后端交互中传递的数据格式采用JSON格式，当然还有XML格式。 JSON数据格式很好理解，例如：
{
“名称 :”浮动年
quo;性别 :” Men”
“爱好与rdquo;的:”听音乐”
}
这是JSON键/值对。
实例解决方案1
这是一个APP页面，前端将它分成三部分分别请求数据，即：
横幅部分
课程类别部分
受欢迎的班级部分
（1）横幅部分
前台需要今天产品的最新图像地址。 URL中的参数主要基于背景。如果后台需要向前端发送时间戳以便能够查询特定的图片信息，那么数据请求中的前端请求参数应该包含时间参数，代码如下：
前台部分：
前端获取的URL
URL:http://www.heiheihei.com/GetPicture.php
需要使用参数URL
传递给后端或者http://www.heiheihei.com/GetPicture.php?time=”2017-11-23 00: 00: 00″
代码解析：
与后台交互的http：协议头需要基于HTTP协议。
www.heiheihei.com域名也称为主机名（heiheihei是我的烂摊子）。
/GetPicture.php路径，它是前景数据的路径。
？time=” 2017-11-23 00: 00: 00″参数，使用此参数到服务器，服务器将在2017年11月23日0:00:00查询代理并返回到前端。
后端部分：
选择“轮播图片””来自图片的时间=“ 2017-11-23 00: 00: 00”
代码解析：
数据库查询语句，转到数据库查找相应的数据表，查询条件是从前端传递的URL参数时间。
（2）课程类别部分
本节包含两部分，图像和标题。在后台数据库表中，内容只需要设计前端的URL，以便前端可以直接访问它：
URL:http://www.heiheihei.com/LessonType.php
（3）热门的好课程部分
此部分还包含图像和标题。前端通知此信息的背景。在后台看到信息后，会转到相应的数据库进行查询。如果数据背景很容易获得，它将直接给前端提供一个URL。否则，前端需要通过URL传递一些参数。例如：
前端获取的URL
URL:http://www.heiheihei.com/goodLesson.php
需要使用参数URL
传递给后端或者http://www.heiheihei.com/goodLesson.php?time=” 2017-17-23 00: 00: 00& clases=””
总结一下：前端请求URL后面的所有参数都是辅助后台数据查询。如果不需要参数，后台将直接提供前端的URL。
实例解决方案2
这是一个代购源码网站登录功能。我们使用ajax加载服务器数据的过程（可以与服务器交换数据并更新一些网页而无需重新加载整个页面），然后体验正面和背面之间的数据交换过程。
我们先给登录和登录密码文本框两个名字，UserName，PassWord。
前端代码（解析）如下：
$就（{
&lsquo的; URL&rsquo的;:’ login.php’，与之前的URL一样，前端将参数传递给位置
&lsquo的;数据&rsquo的;: {“用户名”: $（‘ UserName’）。val（），” PassWord : $（‘密码’）。val（），}，传递给后端的前端数据（用户名和密码）
&lsquo的;成功&rsquo的;:函数（数据）{
当服务器成功返回数据时，前端需要做什么（存储在数据中的数据是服务器返回的数据）
&lsquo的;类型&rsquo的;:’发布’数据传输方法
&lsquo的;的dataType&rsquo的;:’ json’传递的数据类型，JSON
}）;
我们不关心函数（数据）函数中的特定代码，只不过：前端页面显示用户的用户名，登录页面状态，并显示用户相关数据。
后端代码太复杂了，我不会显示它。总后处理是获取前端传递的数据（用户名和密码）以及数据库中的用户信息。如果它们一致，则返回前台。并返回用户的相关数据（昵称，个人信息，购物车信息，喜欢的商品等），这些数据也以JSON的形式返回到前端。如果用户名或密码不一致，则还会向前端返回状态。前端根据获取的状态产生相应的页面效果：登录按钮成为退出，显示用户昵称，显示购物车信息，显示喜好信息，隐藏登录框，以及喜欢，如果用户名和密码不匹配，则显示相应的提示信息。
以上是代购源码网站通过ajax技术完成的前端数据交互过程。
你学会了吗？
作者：转瞬即逝，互联网产品设计师，4年互联网产品经验。
本文最初由@流年发表。未经许可，禁止复制。
